@stackcraftmx/calcita 0.30.1 → 0.32.0

package/dist/ui/layout/PageHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeading.js","sources":["../../../src/ui/layout/PageHeading.jsx"],"sourcesContent":["// El encabezado de una pantalla al estilo de las plantillas de MUI (y del PageContainer de walk-ot): las migas arriba, el\n// título a la izquierda con los botones a la derecha, y una descripción corta abajo.\n//\n// Las migas salen SOLAS del menú de AppLayout (Inicio › Sección › Pantalla): la página no las escribe. Una pantalla que\n// no está en el menú (un detalle) pasa las suyas con `breadcrumbs`; breadcrumbs={false} las quita.\n// El título sube a la barra de AppLayout cuando sale de la vista al deslizar, y también es el título de la pestaña.\n// Con la barra en cápsulas, sus `actions` van a la barra en su propia cápsula (BarActions), como las barras de\n// herramientas de macOS; en el teléfono, y con la franja, se quedan aquí (con la franja, para no mover pantallas que ya\n// existen: quien las quiera en la franja usa BarActions).\n//\n// Cuál usar: PageHeading en las pantallas de trabajo (listas, formularios, tableros); PageHeader (centrado) en una\n// portada; DetailHeader en el detalle de un registro (título con sus insignias de estatus).\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaPageHeading con defaultProps y\n// styleOverrides de sus partes: root, breadcrumbs, titleRow, title, actions, description.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useRef} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport Box from '@mui/material/Box';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport {useAppMenu} from '@/appShell/appMenuContext.js';\nimport BarActions from '@/appShell/BarActions.jsx';\nimport {useBarActionsSlot} from '@/appShell/barActionsSlot.js';\nimport {menuItemLabelOf} from '@/appShell/menuItemText.js';\nimport {useRegisterPageTitle} from '@/appShell/pageTitle.jsx';\nimport {menuBreadcrumbsOf} from '@/navigation/appMenu.js';\nimport PageBreadcrumbs from '@/ui/navigation/PageBreadcrumbs.jsx';\nimport DocumentTitle from '@/ui/navigation/DocumentTitle.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaPageHeading)\nconst THEME_NAME = 'CalcitaPageHeading';\nconst HeadingRoot = piecePart(THEME_NAME, 'Root', Box);\nconst HeadingBreadcrumbs = piecePart(THEME_NAME, 'Breadcrumbs', Box);\nconst HeadingTitleRow = piecePart(THEME_NAME, 'TitleRow', Stack);\nconst HeadingTitle = piecePart(THEME_NAME, 'Title', Typography);\nconst HeadingActions = piecePart(THEME_NAME, 'Actions', Box);\nconst HeadingDescription = piecePart(THEME_NAME, 'Description', Typography);\n\n// con una sola miga (estar en el inicio) no se pintan: no dicen nada\nconst MIN_BREADCRUMBS = 2;\n\n/**\n * @param {object} props\n * @param {string} props.title texto ya traducido\n * @param {import('react').ReactNode} [props.description]\n * @param {Array<{label: string, to?: string}>|false} [props.breadcrumbs] por omisión, las del menú\n * @param {import('react').ReactNode} [props.actions] botones a la derecha (en el teléfono, abajo y a lo ancho)\n * @param {string} [props.documentTitle] título de la pestaña si difiere del visible\n * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete\n */\nexport default function PageHeading(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaPageHeading.defaultProps) y encima lo que llega aquí\n    const {title, description, breadcrumbs, actions, documentTitle, texts} = usePieceProps(props, THEME_NAME);\n    const {t} = useToolkitTranslation('layout', texts);\n    const {useLocation} = useToolkitNavigation();\n    const {pathname} = useLocation();\n    const {menuItems} = useAppMenu();\n    const titleRef = useRef(null);\n    useRegisterPageTitle(title, titleRef);\n    const {usesCapsules} = useBarActionsSlot();\n    // sin cápsulas: a la derecha del título y, en el teléfono, abajo y a lo ancho\n    const inlineActionsSx = {display: 'flex', gap: 1, flexWrap: 'wrap', flex: {xs: '1 1 auto', sm: '0 0 auto'}, '& > .MuiButton-root': {width: {xs: '100%', sm: 'auto'}}};\n    // con cápsulas suben a la barra (escritorio) o flotan arriba (teléfono). Si no hay dónde (la barra fundida al menú), la\n    // cápsula de solo íconos se queda a la derecha del título, en el mismo renglón; el título se parte si no cabe\n    const isActionsCapsule = Boolean(actions) && usesCapsules;\n\n    const crumbs = breadcrumbs === false\n        ? []\n        : breadcrumbs ?? menuBreadcrumbsOf(menuItems, pathname).map((menuItem) => ({label: menuItemLabelOf(menuItem, t), to: menuItem.to}));\n\n    return (\n        <HeadingRoot component=\"header\" ownSx={{mb: 3}}>\n            <DocumentTitle title={documentTitle ?? title} />\n            {crumbs.length >= MIN_BREADCRUMBS && <HeadingBreadcrumbs ownSx={{mb: 1}}><PageBreadcrumbs items={crumbs} /></HeadingBreadcrumbs>}\n            <HeadingTitleRow direction={isActionsCapsule ? 'row' : {xs: 'column', sm: 'row'}} spacing={{xs: 1.5, sm: 2}}\n                   ownSx={{alignItems: isActionsCapsule ? 'flex-start' : {xs: 'stretch', sm: 'flex-start'}, justifyContent: 'space-between'}}>\n                <HeadingTitle ref={titleRef} variant=\"h4\" component=\"h1\" ownSx={{minWidth: 0}}>{title}</HeadingTitle>\n                {isActionsCapsule && <BarActions label={title} inlineSx={{flexShrink: 0}}>{actions}</BarActions>}\n                {actions && !usesCapsules && <HeadingActions ownSx={inlineActionsSx}>{actions}</HeadingActions>}\n            </HeadingTitleRow>\n            {description && (\n                <HeadingDescription variant=\"body1\" color=\"text.secondary\" component=\"div\" ownSx={{mt: 0.75, maxWidth: 760}}>{description}</HeadingDescription>\n            )}\n        </HeadingRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAmCA,MAAM,aAAa;AACnB,MAAM,cAAc,UAAU,YAAY,QAAQ,GAAG;AACrD,MAAM,qBAAqB,UAAU,YAAY,eAAe,GAAG;AACnE,MAAM,kBAAkB,UAAU,YAAY,YAAY,KAAK;AAC/D,MAAM,eAAe,UAAU,YAAY,SAAS,UAAU;AAC9D,MAAM,iBAAiB,UAAU,YAAY,WAAW,GAAG;AAC3D,MAAM,qBAAqB,UAAU,YAAY,eAAe,UAAU;AAG1E,MAAM,kBAAkB;AAWxB,SAAwB,YAAY,OAAO;AAEvC,QAAM,EAAC,OAAO,aAAa,aAAa,SAAS,eAAe,UAAS,cAAc,OAAO,UAAU;AACxG,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,EAAC,YAAA,IAAe,qBAAA;AACtB,QAAM,EAAC,SAAA,IAAY,YAAA;AACnB,QAAM,EAAC,UAAA,IAAa,WAAA;AACpB,QAAM,WAAW,OAAO,IAAI;AAC5B,uBAAqB,OAAO,QAAQ;AACpC,QAAM,EAAC,aAAA,IAAgB,kBAAA;AAEvB,QAAM,kBAAkB,EAAC,SAAS,QAAQ,KAAK,GAAG,UAAU,QAAQ,MAAM,EAAC,IAAI,YAAY,IAAI,WAAA,GAAa,uBAAuB,EAAC,OAAO,EAAC,IAAI,QAAQ,IAAI,OAAA,IAAO;AAGnK,QAAM,mBAAmB,QAAQ,OAAO,KAAK;AAE7C,QAAM,SAAS,gBAAgB,QACzB,CAAA,IACA,eAAe,kBAAkB,WAAW,QAAQ,EAAE,IAAI,CAAC,cAAc,EAAC,OAAO,gBAAgB,UAAU,CAAC,GAAG,IAAI,SAAS,GAAA,EAAI;AAEtI,SACI,qBAAC,eAAY,WAAU,UAAS,OAAO,EAAC,IAAI,KACxC,UAAA;AAAA,IAAA,oBAAC,eAAA,EAAc,OAAO,iBAAiB,MAAA,CAAO;AAAA,IAC7C,OAAO,UAAU,mBAAmB,oBAAC,sBAAmB,OAAO,EAAC,IAAI,EAAA,GAAI,UAAA,oBAAC,iBAAA,EAAgB,OAAO,QAAQ,GAAE;AAAA,IAC3G;AAAA,MAAC;AAAA,MAAA;AAAA,QAAgB,WAAW,mBAAmB,QAAQ,EAAC,IAAI,UAAU,IAAI,MAAA;AAAA,QAAQ,SAAS,EAAC,IAAI,KAAK,IAAI,EAAA;AAAA,QAClG,OAAO,EAAC,YAAY,mBAAmB,eAAe,EAAC,IAAI,WAAW,IAAI,gBAAe,gBAAgB,gBAAA;AAAA,QAC5G,UAAA;AAAA,UAAA,oBAAC,cAAA,EAAa,KAAK,UAAU,SAAQ,MAAK,WAAU,MAAK,OAAO,EAAC,UAAU,EAAA,GAAK,UAAA,OAAM;AAAA,UACrF,oBAAoB,oBAAC,YAAA,EAAW,OAAO,OAAO,UAAU,EAAC,YAAY,EAAA,GAAK,UAAA,QAAA,CAAQ;AAAA,UAClF,WAAW,CAAC,oCAAiB,gBAAA,EAAe,OAAO,iBAAkB,UAAA,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEjF,eACG,oBAAC,oBAAA,EAAmB,SAAQ,SAAQ,OAAM,kBAAiB,WAAU,OAAM,OAAO,EAAC,IAAI,MAAM,UAAU,IAAA,GAAO,UAAA,YAAA,CAAY;AAAA,EAAA,GAElI;AAER;"}
+{"version":3,"file":"PageHeading.js","sources":["../../../src/ui/layout/PageHeading.jsx"],"sourcesContent":["// El encabezado de una pantalla al estilo de las plantillas de MUI (y del PageContainer de walk-ot): las migas arriba, el\n// título a la izquierda con los botones a la derecha, y una descripción corta abajo.\n//\n// Las migas salen SOLAS del menú de AppLayout (Inicio › Sección › Pantalla): la página no las escribe. Una pantalla que\n// no está en el menú (un detalle) pasa las suyas con `breadcrumbs`; breadcrumbs={false} las quita.\n// El título sube a la barra de AppLayout cuando sale de la vista al deslizar, y también es el título de la pestaña.\n// Con la barra en cápsulas, sus `actions` van a la barra en su propia cápsula (BarActions), como las barras de\n// herramientas de macOS; en el teléfono, y con la franja, se quedan aquí (con la franja, para no mover pantallas que ya\n// existen: quien las quiera en la franja usa BarActions).\n//\n// Cuál usar: PageHeading en las pantallas de trabajo (listas, formularios, tableros); PageHeader (centrado) en una\n// portada; DetailHeader en el detalle de un registro (título con sus insignias de estatus).\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaPageHeading con defaultProps y\n// styleOverrides de sus partes: root, breadcrumbs, titleRow, title, actions, description.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useRef} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport Box from '@mui/material/Box';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport {useAppMenu} from '@/appShell/appMenuContext.js';\nimport BarActions from '@/appShell/BarActions.jsx';\nimport {useBarActionsSlot} from '@/appShell/barActionsSlot.js';\nimport {menuItemLabelOf} from '@/appShell/menuItemText.js';\nimport {useRegisterPageTitle} from '@/appShell/pageTitle.jsx';\nimport {menuBreadcrumbsOf} from '@/navigation/appMenu.js';\nimport PageBreadcrumbs from '@/ui/navigation/PageBreadcrumbs.jsx';\nimport DocumentTitle from '@/ui/navigation/DocumentTitle.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaPageHeading)\nconst THEME_NAME = 'CalcitaPageHeading';\nconst HeadingRoot = piecePart(THEME_NAME, 'Root', Box);\nconst HeadingBreadcrumbs = piecePart(THEME_NAME, 'Breadcrumbs', Box);\nconst HeadingTitleRow = piecePart(THEME_NAME, 'TitleRow', Stack);\nconst HeadingTitle = piecePart(THEME_NAME, 'Title', Typography);\nconst HeadingActions = piecePart(THEME_NAME, 'Actions', Box);\nconst HeadingDescription = piecePart(THEME_NAME, 'Description', Typography);\n\n// con una sola miga (estar en el inicio) no se pintan: no dicen nada\nconst MIN_BREADCRUMBS = 2;\n\n/**\n * @param {object} props\n * @param {string} props.title texto ya traducido\n * @param {import('react').ReactNode} [props.description]\n * @param {Array<{label: string, to?: string}>|false} [props.breadcrumbs] por omisión, las del menú\n * @param {import('react').ReactNode} [props.actions] botones a la derecha (en el teléfono, abajo y a lo ancho)\n * @param {string} [props.documentTitle] título de la pestaña si difiere del visible\n * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete\n */\nexport default function PageHeading(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaPageHeading.defaultProps) y encima lo que llega aquí\n    const {title, description, breadcrumbs, actions, documentTitle, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('layout', texts);\n    const {useLocation} = useToolkitNavigation();\n    const {pathname} = useLocation();\n    const {menuItems} = useAppMenu();\n    const titleRef = useRef(null);\n    useRegisterPageTitle(title, titleRef);\n    const {usesCapsules} = useBarActionsSlot();\n    // sin cápsulas: a la derecha del título y, en el teléfono, abajo y a lo ancho\n    const inlineActionsSx = {display: 'flex', gap: 1, flexWrap: 'wrap', flex: {xs: '1 1 auto', sm: '0 0 auto'}, '& > .MuiButton-root': {width: {xs: '100%', sm: 'auto'}}};\n    // con cápsulas suben a la barra (escritorio) o flotan arriba (teléfono). Si no hay dónde (la barra fundida al menú), la\n    // cápsula de solo íconos se queda a la derecha del título, en el mismo renglón; el título se parte si no cabe\n    const isActionsCapsule = Boolean(actions) && usesCapsules;\n\n    const crumbs = breadcrumbs === false\n        ? []\n        : breadcrumbs ?? menuBreadcrumbsOf(menuItems, pathname).map((menuItem) => ({label: menuItemLabelOf(menuItem, t), to: menuItem.to}));\n\n    return (\n        <HeadingRoot component=\"header\" ownSx={{mb: 3}}>\n            <DocumentTitle title={documentTitle ?? title} />\n            {crumbs.length >= MIN_BREADCRUMBS && <HeadingBreadcrumbs ownSx={{mb: 1}}><PageBreadcrumbs items={crumbs} /></HeadingBreadcrumbs>}\n            <HeadingTitleRow direction={isActionsCapsule ? 'row' : {xs: 'column', sm: 'row'}} spacing={{xs: 1.5, sm: 2}}\n                   ownSx={{alignItems: isActionsCapsule ? 'flex-start' : {xs: 'stretch', sm: 'flex-start'}, justifyContent: 'space-between'}}>\n                <HeadingTitle ref={titleRef} variant=\"h4\" component=\"h1\" ownSx={{minWidth: 0}}>{title}</HeadingTitle>\n                {isActionsCapsule && <BarActions label={title} inlineSx={{flexShrink: 0}}>{actions}</BarActions>}\n                {actions && !usesCapsules && <HeadingActions ownSx={inlineActionsSx}>{actions}</HeadingActions>}\n            </HeadingTitleRow>\n            {description && (\n                <HeadingDescription variant=\"body1\" color=\"text.secondary\" component=\"div\" ownSx={{mt: 0.75, maxWidth: 760}}>{description}</HeadingDescription>\n            )}\n        </HeadingRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAoCA,MAAM,aAAa;AACnB,MAAM,cAAc,UAAU,YAAY,QAAQ,GAAG;AACrD,MAAM,qBAAqB,UAAU,YAAY,eAAe,GAAG;AACnE,MAAM,kBAAkB,UAAU,YAAY,YAAY,KAAK;AAC/D,MAAM,eAAe,UAAU,YAAY,SAAS,UAAU;AAC9D,MAAM,iBAAiB,UAAU,YAAY,WAAW,GAAG;AAC3D,MAAM,qBAAqB,UAAU,YAAY,eAAe,UAAU;AAG1E,MAAM,kBAAkB;AAWxB,SAAwB,YAAY,OAAO;AAEvC,QAAM,EAAC,OAAO,aAAa,aAAa,SAAS,eAAe,OAAO,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AACzH,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,EAAC,YAAA,IAAe,qBAAA;AACtB,QAAM,EAAC,SAAA,IAAY,YAAA;AACnB,QAAM,EAAC,UAAA,IAAa,WAAA;AACpB,QAAM,WAAW,OAAO,IAAI;AAC5B,uBAAqB,OAAO,QAAQ;AACpC,QAAM,EAAC,aAAA,IAAgB,kBAAA;AAEvB,QAAM,kBAAkB,EAAC,SAAS,QAAQ,KAAK,GAAG,UAAU,QAAQ,MAAM,EAAC,IAAI,YAAY,IAAI,WAAA,GAAa,uBAAuB,EAAC,OAAO,EAAC,IAAI,QAAQ,IAAI,OAAA,IAAO;AAGnK,QAAM,mBAAmB,QAAQ,OAAO,KAAK;AAE7C,QAAM,SAAS,gBAAgB,QACzB,CAAA,IACA,eAAe,kBAAkB,WAAW,QAAQ,EAAE,IAAI,CAAC,cAAc,EAAC,OAAO,gBAAgB,UAAU,CAAC,GAAG,IAAI,SAAS,GAAA,EAAI;AAEtI,SACI,qBAAC,eAAY,WAAU,UAAS,OAAO,EAAC,IAAI,KACxC,UAAA;AAAA,IAAA,oBAAC,eAAA,EAAc,OAAO,iBAAiB,MAAA,CAAO;AAAA,IAC7C,OAAO,UAAU,mBAAmB,oBAAC,sBAAmB,OAAO,EAAC,IAAI,EAAA,GAAI,UAAA,oBAAC,iBAAA,EAAgB,OAAO,QAAQ,GAAE;AAAA,IAC3G;AAAA,MAAC;AAAA,MAAA;AAAA,QAAgB,WAAW,mBAAmB,QAAQ,EAAC,IAAI,UAAU,IAAI,MAAA;AAAA,QAAQ,SAAS,EAAC,IAAI,KAAK,IAAI,EAAA;AAAA,QAClG,OAAO,EAAC,YAAY,mBAAmB,eAAe,EAAC,IAAI,WAAW,IAAI,gBAAe,gBAAgB,gBAAA;AAAA,QAC5G,UAAA;AAAA,UAAA,oBAAC,cAAA,EAAa,KAAK,UAAU,SAAQ,MAAK,WAAU,MAAK,OAAO,EAAC,UAAU,EAAA,GAAK,UAAA,OAAM;AAAA,UACrF,oBAAoB,oBAAC,YAAA,EAAW,OAAO,OAAO,UAAU,EAAC,YAAY,EAAA,GAAK,UAAA,QAAA,CAAQ;AAAA,UAClF,WAAW,CAAC,oCAAiB,gBAAA,EAAe,OAAO,iBAAkB,UAAA,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEjF,eACG,oBAAC,oBAAA,EAAmB,SAAQ,SAAQ,OAAM,kBAAiB,WAAU,OAAM,OAAO,EAAC,IAAI,MAAM,UAAU,IAAA,GAAO,UAAA,YAAA,CAAY;AAAA,EAAA,GAElI;AAER;"}

package/dist/ui/layout/ProfileHeader.js

@@ -12,6 +12,7 @@ import { useRegisterPageTitle } from "../../appShell/pageTitle.js";
 import { paletteOf } from "../../theme/components/paletteOf.js";
 import DocumentTitle from "../navigation/DocumentTitle.js";
 import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaProfileHeader";
 const ProfileRoot = piecePart(THEME_NAME, "Root", Paper);
 const ProfileCover = piecePart(THEME_NAME, "Cover", Box);
@@ -33,7 +34,8 @@ const coverOf = (theme) => {
   };
 };
 function ProfileHeader(props) {
-  const { name, email, subtitle, avatarUrl, chips = [], actions } = usePieceProps(props, THEME_NAME);
+  const { name, email, subtitle, avatarUrl, chips = [], actions, ...unknownProps } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
   const titleRef = useRef(null);
   useRegisterPageTitle(name, titleRef);
   return /* @__PURE__ */ jsxs(ProfileRoot, { variant: "outlined", ownSx: { overflow: "hidden", mb: 3 }, children: [

package/dist/ui/layout/ProfileHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileHeader.js","sources":["../../../src/ui/layout/ProfileHeader.jsx"],"sourcesContent":["// El encabezado de una persona («Mi perfil», el detalle de un usuario): una franja de color arriba, el avatar grande\n// (su foto o sus iniciales) montado sobre la franja, el nombre, el correo, sus perfiles como etiquetas y, a la derecha,\n// las acciones (editar, desactivar…). Como el de las plantillas de tablero de MUI.\n//\n// En el teléfono las acciones bajan debajo del nombre. El nombre es el título de la página (h1) y sube a la barra al\n// deslizar, como el de PageHeading.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaProfileHeader con defaultProps y\n// styleOverrides de sus partes: root, cover, body, avatar, text, name, chips, actions.\n//\n// Genérico del paquete: function (regla de la casa). No sabe de negocio: todo llega ya traducido.\nimport {useRef} from 'react';\nimport Avatar from '@mui/material/Avatar';\nimport Box from '@mui/material/Box';\nimport Chip from '@mui/material/Chip';\nimport Paper from '@mui/material/Paper';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport {initialsOf} from '@/appShell/menuItemText.js';\nimport {useRegisterPageTitle} from '@/appShell/pageTitle.jsx';\nimport {paletteOf} from '@/theme/components/paletteOf.js';\nimport DocumentTitle from '@/ui/navigation/DocumentTitle.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaProfileHeader)\nconst THEME_NAME = 'CalcitaProfileHeader';\nconst ProfileRoot = piecePart(THEME_NAME, 'Root', Paper);\nconst ProfileCover = piecePart(THEME_NAME, 'Cover', Box);\nconst ProfileBody = piecePart(THEME_NAME, 'Body', Stack);\nconst ProfileAvatar = piecePart(THEME_NAME, 'Avatar', Avatar);\nconst ProfileText = piecePart(THEME_NAME, 'Text', Box);\nconst ProfileName = piecePart(THEME_NAME, 'Name', Typography);\nconst ProfileChips = piecePart(THEME_NAME, 'Chips', Stack);\nconst ProfileActions = piecePart(THEME_NAME, 'Actions', Stack);\n\n// la franja de arriba y el avatar que se monta en ella (la mitad del avatar sobre la franja)\nconst COVER_HEIGHT_PIXELS = 112;\nconst AVATAR_SIZE_PIXELS = 96;\nconst AVATAR_BORDER_PIXELS = 4;\n\n/**\n * La franja de color: el principal del tema, más oscuro hacia la derecha, con un brillo suave.\n *\n * @param {object} theme\n * @returns {object}\n */\nconst coverOf = (theme) => {\n    const palette = paletteOf(theme);\n    return {\n        height: COVER_HEIGHT_PIXELS,\n        backgroundColor: palette.primary.main,\n        backgroundImage: `radial-gradient(80% 140% at 85% 0%, color-mix(in srgb, ${palette.primary.light} 70%, transparent), transparent 60%), `\n            + `linear-gradient(120deg, ${palette.primary.main}, ${palette.primary.dark})`,\n    };\n};\n\n/**\n * @param {object} props\n * @param {string} props.name el nombre de la persona\n * @param {string} [props.email]\n * @param {string} [props.subtitle] el renglón de abajo (puesto · sucursal)\n * @param {string} [props.avatarUrl] su foto; sin ella, sus iniciales\n * @param {string[]} [props.chips] sus perfiles o etiquetas, ya traducidos\n * @param {import('react').ReactNode} [props.actions] los botones de la derecha\n */\nexport default function ProfileHeader(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaProfileHeader.defaultProps) y encima lo que llega aquí\n    const {name, email, subtitle, avatarUrl, chips = [], actions} = usePieceProps(props, THEME_NAME);\n    const titleRef = useRef(null);\n    useRegisterPageTitle(name, titleRef);\n\n    return (\n        <ProfileRoot variant=\"outlined\" ownSx={{overflow: 'hidden', mb: 3}}>\n            <DocumentTitle title={name} />\n            <ProfileCover ownSx={coverOf} />\n            <ProfileBody direction={{xs: 'column', sm: 'row'}} spacing={2} ownSx={{px: {xs: 2, md: 3}, pb: 2.5, alignItems: {sm: 'flex-end'}}}>\n                <ProfileAvatar src={avatarUrl} alt={name}\n                        ownSx={{\n                            width: AVATAR_SIZE_PIXELS, height: AVATAR_SIZE_PIXELS, mt: `-${AVATAR_SIZE_PIXELS / 2}px`, fontSize: '2rem', fontWeight: 600,\n                            border: `${AVATAR_BORDER_PIXELS}px solid`, borderColor: 'background.paper', bgcolor: 'secondary.main', color: 'secondary.contrastText',\n                        }}>\n                    {initialsOf(name)}\n                </ProfileAvatar>\n                <ProfileText ownSx={{flexGrow: 1, minWidth: 0}}>\n                    <ProfileName ref={titleRef} variant=\"h5\" component=\"h1\" ownSx={{fontWeight: 600}}>{name}</ProfileName>\n                    {email && <Typography variant=\"body2\" color=\"text.secondary\">{email}</Typography>}\n                    {subtitle && <Typography variant=\"body2\" color=\"text.secondary\">{subtitle}</Typography>}\n                    {chips.length > 0 && (\n                        <ProfileChips direction=\"row\" spacing={1} useFlexGap ownSx={{flexWrap: 'wrap', mt: 1}}>\n                            {chips.map((chip) => <Chip key={chip} label={chip} size=\"small\" color=\"primary\" variant=\"outlined\" />)}\n                        </ProfileChips>\n                    )}\n                </ProfileText>\n                {actions && <ProfileActions direction=\"row\" spacing={1} useFlexGap ownSx={{flexWrap: 'wrap', flexShrink: 0}}>{actions}</ProfileActions>}\n            </ProfileBody>\n        </ProfileRoot>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ProfileHeader.js","sources":["../../../src/ui/layout/ProfileHeader.jsx"],"sourcesContent":["// El encabezado de una persona («Mi perfil», el detalle de un usuario): una franja de color arriba, el avatar grande\n// (su foto o sus iniciales) montado sobre la franja, el nombre, el correo, sus perfiles como etiquetas y, a la derecha,\n// las acciones (editar, desactivar…). Como el de las plantillas de tablero de MUI.\n//\n// En el teléfono las acciones bajan debajo del nombre. El nombre es el título de la página (h1) y sube a la barra al\n// deslizar, como el de PageHeading.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaProfileHeader con defaultProps y\n// styleOverrides de sus partes: root, cover, body, avatar, text, name, chips, actions.\n//\n// Genérico del paquete: function (regla de la casa). No sabe de negocio: todo llega ya traducido.\nimport {useRef} from 'react';\nimport Avatar from '@mui/material/Avatar';\nimport Box from '@mui/material/Box';\nimport Chip from '@mui/material/Chip';\nimport Paper from '@mui/material/Paper';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport {initialsOf} from '@/appShell/menuItemText.js';\nimport {useRegisterPageTitle} from '@/appShell/pageTitle.jsx';\nimport {paletteOf} from '@/theme/components/paletteOf.js';\nimport DocumentTitle from '@/ui/navigation/DocumentTitle.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaProfileHeader)\nconst THEME_NAME = 'CalcitaProfileHeader';\nconst ProfileRoot = piecePart(THEME_NAME, 'Root', Paper);\nconst ProfileCover = piecePart(THEME_NAME, 'Cover', Box);\nconst ProfileBody = piecePart(THEME_NAME, 'Body', Stack);\nconst ProfileAvatar = piecePart(THEME_NAME, 'Avatar', Avatar);\nconst ProfileText = piecePart(THEME_NAME, 'Text', Box);\nconst ProfileName = piecePart(THEME_NAME, 'Name', Typography);\nconst ProfileChips = piecePart(THEME_NAME, 'Chips', Stack);\nconst ProfileActions = piecePart(THEME_NAME, 'Actions', Stack);\n\n// la franja de arriba y el avatar que se monta en ella (la mitad del avatar sobre la franja)\nconst COVER_HEIGHT_PIXELS = 112;\nconst AVATAR_SIZE_PIXELS = 96;\nconst AVATAR_BORDER_PIXELS = 4;\n\n/**\n * La franja de color: el principal del tema, más oscuro hacia la derecha, con un brillo suave.\n *\n * @param {object} theme\n * @returns {object}\n */\nconst coverOf = (theme) => {\n    const palette = paletteOf(theme);\n    return {\n        height: COVER_HEIGHT_PIXELS,\n        backgroundColor: palette.primary.main,\n        backgroundImage: `radial-gradient(80% 140% at 85% 0%, color-mix(in srgb, ${palette.primary.light} 70%, transparent), transparent 60%), `\n            + `linear-gradient(120deg, ${palette.primary.main}, ${palette.primary.dark})`,\n    };\n};\n\n/**\n * @param {object} props\n * @param {string} props.name el nombre de la persona\n * @param {string} [props.email]\n * @param {string} [props.subtitle] el renglón de abajo (puesto · sucursal)\n * @param {string} [props.avatarUrl] su foto; sin ella, sus iniciales\n * @param {string[]} [props.chips] sus perfiles o etiquetas, ya traducidos\n * @param {import('react').ReactNode} [props.actions] los botones de la derecha\n */\nexport default function ProfileHeader(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaProfileHeader.defaultProps) y encima lo que llega aquí\n    const {name, email, subtitle, avatarUrl, chips = [], actions, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const titleRef = useRef(null);\n    useRegisterPageTitle(name, titleRef);\n\n    return (\n        <ProfileRoot variant=\"outlined\" ownSx={{overflow: 'hidden', mb: 3}}>\n            <DocumentTitle title={name} />\n            <ProfileCover ownSx={coverOf} />\n            <ProfileBody direction={{xs: 'column', sm: 'row'}} spacing={2} ownSx={{px: {xs: 2, md: 3}, pb: 2.5, alignItems: {sm: 'flex-end'}}}>\n                <ProfileAvatar src={avatarUrl} alt={name}\n                        ownSx={{\n                            width: AVATAR_SIZE_PIXELS, height: AVATAR_SIZE_PIXELS, mt: `-${AVATAR_SIZE_PIXELS / 2}px`, fontSize: '2rem', fontWeight: 600,\n                            border: `${AVATAR_BORDER_PIXELS}px solid`, borderColor: 'background.paper', bgcolor: 'secondary.main', color: 'secondary.contrastText',\n                        }}>\n                    {initialsOf(name)}\n                </ProfileAvatar>\n                <ProfileText ownSx={{flexGrow: 1, minWidth: 0}}>\n                    <ProfileName ref={titleRef} variant=\"h5\" component=\"h1\" ownSx={{fontWeight: 600}}>{name}</ProfileName>\n                    {email && <Typography variant=\"body2\" color=\"text.secondary\">{email}</Typography>}\n                    {subtitle && <Typography variant=\"body2\" color=\"text.secondary\">{subtitle}</Typography>}\n                    {chips.length > 0 && (\n                        <ProfileChips direction=\"row\" spacing={1} useFlexGap ownSx={{flexWrap: 'wrap', mt: 1}}>\n                            {chips.map((chip) => <Chip key={chip} label={chip} size=\"small\" color=\"primary\" variant=\"outlined\" />)}\n                        </ProfileChips>\n                    )}\n                </ProfileText>\n                {actions && <ProfileActions direction=\"row\" spacing={1} useFlexGap ownSx={{flexWrap: 'wrap', flexShrink: 0}}>{actions}</ProfileActions>}\n            </ProfileBody>\n        </ProfileRoot>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/ui/layout/SectionCard.js

@@ -4,12 +4,14 @@ import Box from "@mui/material/Box";
 import Paper from "@mui/material/Paper";
 import Typography from "@mui/material/Typography";
 import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaSectionCard";
 const SectionRoot = piecePart(THEME_NAME, "Root", Paper);
 const SectionHeader = piecePart(THEME_NAME, "Header", Box);
 const SectionTitle = piecePart(THEME_NAME, "Title", Typography);
 function SectionCard(props) {
-  const { title, action, children } = usePieceProps(props, THEME_NAME);
+  const { title, action, children, ...unknownProps } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
   return /* @__PURE__ */ jsxs(SectionRoot, { component: "section", variant: "outlined", ownSx: { p: { xs: 2, md: 2.5 }, minWidth: 0 }, children: [
     /* @__PURE__ */ jsxs(SectionHeader, { ownSx: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1, mb: 1.5 }, children: [
       /* @__PURE__ */ jsx(SectionTitle, { variant: "overline", color: "text.secondary", component: "h2", ownSx: { lineHeight: 1.6 }, children: title }),

package/dist/ui/layout/SectionCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionCard.js","sources":["../../../src/ui/layout/SectionCard.jsx"],"sourcesContent":["// Tarjeta de una sección de una página de detalle: título en versalitas, una acción opcional a la derecha y el contenido.\n//\n// Por qué una tarjeta por sección y no una sola hoja larga con divisiones: en pantalla ancha las secciones se acomodan en\n// columnas (lo principal a la izquierda, los datos de apoyo a la derecha) y cada una se encuentra por su título.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaSectionCard con defaultProps y\n// styleOverrides de sus partes: root, header, title.\n//\n// Genérico del paquete: function (regla de la casa). No sabe de negocio: el título y el contenido llegan ya traducidos.\nimport Box from '@mui/material/Box';\nimport Paper from '@mui/material/Paper';\nimport Typography from '@mui/material/Typography';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaSectionCard)\nconst THEME_NAME = 'CalcitaSectionCard';\nconst SectionRoot = piecePart(THEME_NAME, 'Root', Paper);\nconst SectionHeader = piecePart(THEME_NAME, 'Header', Box);\nconst SectionTitle = piecePart(THEME_NAME, 'Title', Typography);\n\n/**\n * @param {object} props\n * @param {string} props.title texto ya traducido\n * @param {import('react').ReactNode} [props.action] botón o liga a la derecha del título\n * @param {import('react').ReactNode} props.children\n */\nexport default function SectionCard(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaSectionCard.defaultProps) y encima lo que llega aquí\n    const {title, action, children} = usePieceProps(props, THEME_NAME);\n    return (\n        <SectionRoot component=\"section\" variant=\"outlined\" ownSx={{p: {xs: 2, md: 2.5}, minWidth: 0}}>\n            <SectionHeader ownSx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1, mb: 1.5}}>\n                <SectionTitle variant=\"overline\" color=\"text.secondary\" component=\"h2\" ownSx={{lineHeight: 1.6}}>{title}</SectionTitle>\n                {action}\n            </SectionHeader>\n            {children}\n        </SectionRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;AAeA,MAAM,aAAa;AACnB,MAAM,cAAc,UAAU,YAAY,QAAQ,KAAK;AACvD,MAAM,gBAAgB,UAAU,YAAY,UAAU,GAAG;AACzD,MAAM,eAAe,UAAU,YAAY,SAAS,UAAU;AAQ9D,SAAwB,YAAY,OAAO;AAEvC,QAAM,EAAC,OAAO,QAAQ,aAAY,cAAc,OAAO,UAAU;AACjE,8BACK,aAAA,EAAY,WAAU,WAAU,SAAQ,YAAW,OAAO,EAAC,GAAG,EAAC,IAAI,GAAG,IAAI,OAAM,UAAU,KACvF,UAAA;AAAA,IAAA,qBAAC,eAAA,EAAc,OAAO,EAAC,SAAS,QAAQ,YAAY,UAAU,gBAAgB,iBAAiB,KAAK,GAAG,IAAI,OACvG,UAAA;AAAA,MAAA,oBAAC,cAAA,EAAa,SAAQ,YAAW,OAAM,kBAAiB,WAAU,MAAK,OAAO,EAAC,YAAY,IAAA,GAAO,UAAA,OAAM;AAAA,MACvG;AAAA,IAAA,GACL;AAAA,IACC;AAAA,EAAA,GACL;AAER;"}
+{"version":3,"file":"SectionCard.js","sources":["../../../src/ui/layout/SectionCard.jsx"],"sourcesContent":["// Tarjeta de una sección de una página de detalle: título en versalitas, una acción opcional a la derecha y el contenido.\n//\n// Por qué una tarjeta por sección y no una sola hoja larga con divisiones: en pantalla ancha las secciones se acomodan en\n// columnas (lo principal a la izquierda, los datos de apoyo a la derecha) y cada una se encuentra por su título.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaSectionCard con defaultProps y\n// styleOverrides de sus partes: root, header, title.\n//\n// Genérico del paquete: function (regla de la casa). No sabe de negocio: el título y el contenido llegan ya traducidos.\nimport Box from '@mui/material/Box';\nimport Paper from '@mui/material/Paper';\nimport Typography from '@mui/material/Typography';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaSectionCard)\nconst THEME_NAME = 'CalcitaSectionCard';\nconst SectionRoot = piecePart(THEME_NAME, 'Root', Paper);\nconst SectionHeader = piecePart(THEME_NAME, 'Header', Box);\nconst SectionTitle = piecePart(THEME_NAME, 'Title', Typography);\n\n/**\n * @param {object} props\n * @param {string} props.title texto ya traducido\n * @param {import('react').ReactNode} [props.action] botón o liga a la derecha del título\n * @param {import('react').ReactNode} props.children\n */\nexport default function SectionCard(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaSectionCard.defaultProps) y encima lo que llega aquí\n    const {title, action, children, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    return (\n        <SectionRoot component=\"section\" variant=\"outlined\" ownSx={{p: {xs: 2, md: 2.5}, minWidth: 0}}>\n            <SectionHeader ownSx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1, mb: 1.5}}>\n                <SectionTitle variant=\"overline\" color=\"text.secondary\" component=\"h2\" ownSx={{lineHeight: 1.6}}>{title}</SectionTitle>\n                {action}\n            </SectionHeader>\n            {children}\n        </SectionRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;;AAgBA,MAAM,aAAa;AACnB,MAAM,cAAc,UAAU,YAAY,QAAQ,KAAK;AACvD,MAAM,gBAAgB,UAAU,YAAY,UAAU,GAAG;AACzD,MAAM,eAAe,UAAU,YAAY,SAAS,UAAU;AAQ9D,SAAwB,YAAY,OAAO;AAEvC,QAAM,EAAC,OAAO,QAAQ,UAAU,GAAG,iBAAgB,cAAc,OAAO,UAAU;AAClF,mBAAiB,YAAY,YAAY;AACzC,8BACK,aAAA,EAAY,WAAU,WAAU,SAAQ,YAAW,OAAO,EAAC,GAAG,EAAC,IAAI,GAAG,IAAI,OAAM,UAAU,KACvF,UAAA;AAAA,IAAA,qBAAC,eAAA,EAAc,OAAO,EAAC,SAAS,QAAQ,YAAY,UAAU,gBAAgB,iBAAiB,KAAK,GAAG,IAAI,OACvG,UAAA;AAAA,MAAA,oBAAC,cAAA,EAAa,SAAQ,YAAW,OAAM,kBAAiB,WAAU,MAAK,OAAO,EAAC,YAAY,IAAA,GAAO,UAAA,OAAM;AAAA,MACvG;AAAA,IAAA,GACL;AAAA,IACC;AAAA,EAAA,GACL;AAER;"}

package/dist/ui/metrics/BarList.js

@@ -14,6 +14,7 @@ import TableToggle, { CHART_VIEW } from "./TableToggle.js";
 import { BAR_MIN_POINT_SIZE, barLabelValueOf } from "./barListLabels.js";
 import { useChartColors } from "./chartParts.js";
 import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaBarList";
 const BarListRow = piecePart(THEME_NAME, "Row", TableRow);
 const BarListChart = piecePart(THEME_NAME, "Chart", Box);
@@ -25,7 +26,8 @@ function ValueLabel({ x, y, width, height, value, colors, formatNumber }) {
   ] });
 }
 function BarList(props) {
-  const { items, onSelect, emptyLabel, tone = "primary", texts, defaultView = CHART_VIEW.chart, onViewChange } = usePieceProps(props, THEME_NAME);
+  const { items, onSelect, emptyLabel, tone = "primary", texts, defaultView = CHART_VIEW.chart, onViewChange, ...unknownProps } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
   const [asTable, setAsTable] = useState(defaultView === CHART_VIEW.table);
   const toggleView = () => {
     setAsTable(!asTable);

package/dist/ui/metrics/BarList.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarList.js","sources":["../../../src/ui/metrics/BarList.jsx"],"sourcesContent":["// Barras horizontales de UNA serie con su nombre a la izquierda y su valor en la punta (ventas por producto,\n// cuentas por organización), dibujadas con Recharts.\n//\n// Horizontales porque los nombres son largos (\"Empresa / Área de ventas\"): se leen completos sin rotarlos. Una serie → un\n// color (el del tono, vía currentColor: los atributos SVG no leen var(...) pero sí currentColor); el valor va en tinta,\n// nunca del color de la barra; y cada barra puede llevar a la pantalla que la explica.\n//\n// OJO: el número y el detalle de la punta salen del renglón de la barra (barListLabels.js), nunca de items[index]: Recharts\n// descarta las barras de ancho 0 y renumera las etiquetas, y el detalle se corría al renglón de arriba.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaBarList con defaultProps y\n// styleOverrides de sus partes: row, chart.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Box from '@mui/material/Box';\nimport Table from '@mui/material/Table';\nimport TableBody from '@mui/material/TableBody';\nimport TableCell from '@mui/material/TableCell';\nimport TableRow from '@mui/material/TableRow';\nimport Typography from '@mui/material/Typography';\nimport {Bar, BarChart, LabelList, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';\n\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport ChartTooltip from '@/ui/metrics/ChartTooltip.jsx';\nimport TableToggle, {CHART_VIEW} from '@/ui/metrics/TableToggle.jsx';\nimport {BAR_MIN_POINT_SIZE, barLabelValueOf} from '@/ui/metrics/barListLabels.js';\nimport {useChartColors} from '@/ui/metrics/chartParts.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaBarList)\nconst THEME_NAME = 'CalcitaBarList';\nconst BarListRow = piecePart(THEME_NAME, 'Row', TableRow);\nconst BarListChart = piecePart(THEME_NAME, 'Chart', Box);\n\nconst ROW_HEIGHT_PIXELS = 36;\n\n/**\n * El valor en la punta: el número fuerte y el detalle (\"de 8\") tenue; value es {value, detail} de barLabelValueOf. colors y\n * formatNumber: los de useChartColors y useFormatters (los da BarList: este pedazo lo pinta recharts por su cuenta).\n */\nfunction ValueLabel({x, y, width, height, value, colors, formatNumber}) {\n    return (\n        <text x={x + width + 8} y={y + height / 2} dominantBaseline=\"central\" fontSize={13}>\n            <tspan fill={colors.text} fontWeight={600}>{formatNumber(value.value)}</tspan>\n            {value.detail && <tspan fill={colors.muted} fontSize={12}>{` ${value.detail}`}</tspan>}\n        </text>\n    );\n}\n\n/**\n * @param {object} props\n * @param {Array<{key: string, label: string, value: number, detail?: string, tooltip?: string}>} props.items\n * @param {(item: any) => void} [props.onSelect] recibe el renglón de items que se picó\n * @param {string} props.emptyLabel ya traducido\n * @param {'primary'|'success'|'warning'|'error'|'info'} [props.tone]\n * @param {'chart'|'table'} [props.defaultView] cómo se ve al abrir (CHART_VIEW); por omisión dibujada\n * @param {(view: 'chart'|'table') => void} [props.onViewChange] la persona cambió a la tabla o a la gráfica\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function BarList(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaBarList.defaultProps) y encima lo que llega aquí\n    const {items, onSelect, emptyLabel, tone = 'primary', texts, defaultView = CHART_VIEW.chart, onViewChange} = usePieceProps(props, THEME_NAME);\n    const [asTable, setAsTable] = useState(defaultView === CHART_VIEW.table);\n    const toggleView = () => {\n        setAsTable(!asTable);\n        onViewChange?.(asTable ? CHART_VIEW.chart : CHART_VIEW.table);\n    };\n    const colors = useChartColors();\n    const {formatNumber} = useFormatters();\n\n    // guard clause: sin datos se dice, no se pinta un eje vacío\n    if (!items.length) {\n        return <Typography variant=\"body2\" color=\"text.secondary\">{emptyLabel}</Typography>;\n    }\n\n    // lo más largo de la etiqueta decide el ancho del eje: sin esto el nombre se corta o sobra medio contenedor\n    // OJO: String(... ?? '') porque un renglón sin nombre (catálogo dado de baja) tumbaba toda la gráfica\n    // OJO: 220 px de tope. Con 160 se cortaban etiquetas largas («Cuenta pendiente de activar») sin puntos suspensivos\n    // ni forma de leerlas; el tooltip de la barra sigue mostrando el texto completo\n    const labelWidth = Math.min(220, 16 + Math.max(...items.map((item) => String(item.label ?? '').length)) * 7);\n    const longestValue = Math.max(...items.map((item) => `${formatNumber(item.value)} ${item.detail ?? ''}`.length));\n\n    return (\n        <Box>\n            <TableToggle asTable={asTable} onToggle={toggleView} texts={texts} />\n            {asTable ? (\n                <Table size=\"small\">\n                    <TableBody>\n                        {items.map((item) => (\n                            <BarListRow key={item.key} hover={Boolean(onSelect)} onClick={onSelect ? () => onSelect(item) : undefined}\n                                      ownSx={{cursor: onSelect ? 'pointer' : 'default'}}>\n                                <TableCell>{item.label}</TableCell>\n                                <TableCell align=\"right\">{formatNumber(item.value)} {item.detail}</TableCell>\n                            </BarListRow>\n                        ))}\n                    </TableBody>\n                </Table>\n            ) : (\n                <BarListChart ownSx={{height: items.length * ROW_HEIGHT_PIXELS, color: `${tone}.main`}}>\n                    <ResponsiveContainer width=\"100%\" height=\"100%\">\n                        <BarChart data={items} layout=\"vertical\" margin={{top: 0, bottom: 0, left: 0, right: 16 + longestValue * 7}}>\n                            {/* OJO: con todo en 0 el dominio [0, 0] manda el 0 a la MITAD del eje (escala degenerada de d3) y la\n                                barra de 1 px con su «0 de 2» saldría a medio renglón; el tope mínimo de 1 lo deja en el origen */}\n                            <XAxis type=\"number\" hide domain={[0, (dataMax) => Math.max(dataMax, 1)]} />\n                            <YAxis type=\"category\" dataKey=\"label\" width={labelWidth} tickLine={false} axisLine={false}\n                                   tick={{fill: colors.text, fontSize: 13}} />\n                            <Tooltip cursor={{fill: colors.hover}}\n                                     content={<ChartTooltip render={(item) => item.tooltip ?? `${item.label}: ${formatNumber(item.value)}`} />} />\n                            <Bar dataKey=\"value\" fill=\"currentColor\" maxBarSize={16} radius={[0, 4, 4, 0]} isAnimationActive={false}\n                                 minPointSize={BAR_MIN_POINT_SIZE} cursor={onSelect ? 'pointer' : 'default'}\n                                 onClick={onSelect ? (entry) => onSelect(entry.payload) : undefined}>\n                                {/* OJO: SIN dataKey; con dataKey LabelList ignora valueAccessor y regresa el índice corrido */}\n                                <LabelList valueAccessor={barLabelValueOf} content={(labelProps) => <ValueLabel {...labelProps} colors={colors} formatNumber={formatNumber} />} />\n                            </Bar>\n                        </BarChart>\n                    </ResponsiveContainer>\n                </BarListChart>\n            )}\n        </Box>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"BarList.js","sources":["../../../src/ui/metrics/BarList.jsx"],"sourcesContent":["// Barras horizontales de UNA serie con su nombre a la izquierda y su valor en la punta (ventas por producto,\n// cuentas por organización), dibujadas con Recharts.\n//\n// Horizontales porque los nombres son largos (\"Empresa / Área de ventas\"): se leen completos sin rotarlos. Una serie → un\n// color (el del tono, vía currentColor: los atributos SVG no leen var(...) pero sí currentColor); el valor va en tinta,\n// nunca del color de la barra; y cada barra puede llevar a la pantalla que la explica.\n//\n// OJO: el número y el detalle de la punta salen del renglón de la barra (barListLabels.js), nunca de items[index]: Recharts\n// descarta las barras de ancho 0 y renumera las etiquetas, y el detalle se corría al renglón de arriba.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaBarList con defaultProps y\n// styleOverrides de sus partes: row, chart.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Box from '@mui/material/Box';\nimport Table from '@mui/material/Table';\nimport TableBody from '@mui/material/TableBody';\nimport TableCell from '@mui/material/TableCell';\nimport TableRow from '@mui/material/TableRow';\nimport Typography from '@mui/material/Typography';\nimport {Bar, BarChart, LabelList, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';\n\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport ChartTooltip from '@/ui/metrics/ChartTooltip.jsx';\nimport TableToggle, {CHART_VIEW} from '@/ui/metrics/TableToggle.jsx';\nimport {BAR_MIN_POINT_SIZE, barLabelValueOf} from '@/ui/metrics/barListLabels.js';\nimport {useChartColors} from '@/ui/metrics/chartParts.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaBarList)\nconst THEME_NAME = 'CalcitaBarList';\nconst BarListRow = piecePart(THEME_NAME, 'Row', TableRow);\nconst BarListChart = piecePart(THEME_NAME, 'Chart', Box);\n\nconst ROW_HEIGHT_PIXELS = 36;\n\n/**\n * El valor en la punta: el número fuerte y el detalle (\"de 8\") tenue; value es {value, detail} de barLabelValueOf. colors y\n * formatNumber: los de useChartColors y useFormatters (los da BarList: este pedazo lo pinta recharts por su cuenta).\n */\nfunction ValueLabel({x, y, width, height, value, colors, formatNumber}) {\n    return (\n        <text x={x + width + 8} y={y + height / 2} dominantBaseline=\"central\" fontSize={13}>\n            <tspan fill={colors.text} fontWeight={600}>{formatNumber(value.value)}</tspan>\n            {value.detail && <tspan fill={colors.muted} fontSize={12}>{` ${value.detail}`}</tspan>}\n        </text>\n    );\n}\n\n/**\n * @param {object} props\n * @param {Array<{key: string, label: string, value: number, detail?: string, tooltip?: string}>} props.items\n * @param {(item: any) => void} [props.onSelect] recibe el renglón de items que se picó\n * @param {string} props.emptyLabel ya traducido\n * @param {'primary'|'success'|'warning'|'error'|'info'} [props.tone]\n * @param {'chart'|'table'} [props.defaultView] cómo se ve al abrir (CHART_VIEW); por omisión dibujada\n * @param {(view: 'chart'|'table') => void} [props.onViewChange] la persona cambió a la tabla o a la gráfica\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function BarList(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaBarList.defaultProps) y encima lo que llega aquí\n    const {items, onSelect, emptyLabel, tone = 'primary', texts, defaultView = CHART_VIEW.chart, onViewChange, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const [asTable, setAsTable] = useState(defaultView === CHART_VIEW.table);\n    const toggleView = () => {\n        setAsTable(!asTable);\n        onViewChange?.(asTable ? CHART_VIEW.chart : CHART_VIEW.table);\n    };\n    const colors = useChartColors();\n    const {formatNumber} = useFormatters();\n\n    // guard clause: sin datos se dice, no se pinta un eje vacío\n    if (!items.length) {\n        return <Typography variant=\"body2\" color=\"text.secondary\">{emptyLabel}</Typography>;\n    }\n\n    // lo más largo de la etiqueta decide el ancho del eje: sin esto el nombre se corta o sobra medio contenedor\n    // OJO: String(... ?? '') porque un renglón sin nombre (catálogo dado de baja) tumbaba toda la gráfica\n    // OJO: 220 px de tope. Con 160 se cortaban etiquetas largas («Cuenta pendiente de activar») sin puntos suspensivos\n    // ni forma de leerlas; el tooltip de la barra sigue mostrando el texto completo\n    const labelWidth = Math.min(220, 16 + Math.max(...items.map((item) => String(item.label ?? '').length)) * 7);\n    const longestValue = Math.max(...items.map((item) => `${formatNumber(item.value)} ${item.detail ?? ''}`.length));\n\n    return (\n        <Box>\n            <TableToggle asTable={asTable} onToggle={toggleView} texts={texts} />\n            {asTable ? (\n                <Table size=\"small\">\n                    <TableBody>\n                        {items.map((item) => (\n                            <BarListRow key={item.key} hover={Boolean(onSelect)} onClick={onSelect ? () => onSelect(item) : undefined}\n                                      ownSx={{cursor: onSelect ? 'pointer' : 'default'}}>\n                                <TableCell>{item.label}</TableCell>\n                                <TableCell align=\"right\">{formatNumber(item.value)} {item.detail}</TableCell>\n                            </BarListRow>\n                        ))}\n                    </TableBody>\n                </Table>\n            ) : (\n                <BarListChart ownSx={{height: items.length * ROW_HEIGHT_PIXELS, color: `${tone}.main`}}>\n                    <ResponsiveContainer width=\"100%\" height=\"100%\">\n                        <BarChart data={items} layout=\"vertical\" margin={{top: 0, bottom: 0, left: 0, right: 16 + longestValue * 7}}>\n                            {/* OJO: con todo en 0 el dominio [0, 0] manda el 0 a la MITAD del eje (escala degenerada de d3) y la\n                                barra de 1 px con su «0 de 2» saldría a medio renglón; el tope mínimo de 1 lo deja en el origen */}\n                            <XAxis type=\"number\" hide domain={[0, (dataMax) => Math.max(dataMax, 1)]} />\n                            <YAxis type=\"category\" dataKey=\"label\" width={labelWidth} tickLine={false} axisLine={false}\n                                   tick={{fill: colors.text, fontSize: 13}} />\n                            <Tooltip cursor={{fill: colors.hover}}\n                                     content={<ChartTooltip render={(item) => item.tooltip ?? `${item.label}: ${formatNumber(item.value)}`} />} />\n                            <Bar dataKey=\"value\" fill=\"currentColor\" maxBarSize={16} radius={[0, 4, 4, 0]} isAnimationActive={false}\n                                 minPointSize={BAR_MIN_POINT_SIZE} cursor={onSelect ? 'pointer' : 'default'}\n                                 onClick={onSelect ? (entry) => onSelect(entry.payload) : undefined}>\n                                {/* OJO: SIN dataKey; con dataKey LabelList ignora valueAccessor y regresa el índice corrido */}\n                                <LabelList valueAccessor={barLabelValueOf} content={(labelProps) => <ValueLabel {...labelProps} colors={colors} formatNumber={formatNumber} />} />\n                            </Bar>\n                        </BarChart>\n                    </ResponsiveContainer>\n                </BarListChart>\n            )}\n        </Box>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/ui/metrics/CalendarHeatmap.js

@@ -11,10 +11,12 @@ import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
+import { useToolkitSettings } from "../../toolkit/toolkitContext.js";
 import { useFormatters } from "../../toolkit/useFormatters.js";
-import { calendarWeeksOf, levelOf, HEATMAP_LEVELS } from "./heatmapScale.js";
+import { calendarWeeksOf, calendarRangeOf, todayInZone, levelOf, HEATMAP_LEVELS } from "./heatmapScale.js";
 import TableToggle, { CHART_VIEW } from "./TableToggle.js";
 import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaCalendarHeatmap";
 const HeatmapHeader = piecePart(THEME_NAME, "Header", Stack);
 const HeatmapToggle = piecePart(THEME_NAME, "Toggle", Box);
@@ -36,6 +38,7 @@ const CELL_PIXELS = { xs: 12, md: 16 };
 const GAP_PIXELS = 3;
 const LABELED_WEEKDAYS = /* @__PURE__ */ new Set([1, 3, 5]);
 const LEVEL_TONE_PERCENT = { 1: 30, 2: 55, 3: 78, 4: 100 };
+const NO_DAYS = Object.freeze([]);
 function levelFill(theme, tone, level) {
   const { palette } = theme.vars ?? theme;
   if (level === 0) {
@@ -44,7 +47,8 @@ function levelFill(theme, tone, level) {
   return `color-mix(in srgb, ${palette[tone].main} ${LEVEL_TONE_PERCENT[level]}%, transparent)`;
 }
 function CalendarHeatmap(props) {
-  const { startsOn, endsOn, days, ariaLabel, valueLabel, describeValue, summary, emptyLabel, tone = "primary", texts, defaultView = CHART_VIEW.chart, onViewChange } = usePieceProps(props, THEME_NAME);
+  const { startsOn, endsOn, days = NO_DAYS, ariaLabel, valueLabel, describeValue, summary, emptyLabel, tone = "primary", texts, defaultView = CHART_VIEW.chart, onViewChange, ...unknownProps } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("common", texts);
   const { formatDate, formatMonthShortName, formatNumber, formatWeekdayShortName } = useFormatters();
   const [asTable, setAsTable] = useState(defaultView === CHART_VIEW.table);
@@ -52,7 +56,12 @@ function CalendarHeatmap(props) {
     setAsTable(!asTable);
     onViewChange?.(asTable ? CHART_VIEW.chart : CHART_VIEW.table);
   };
-  const { weeks, monthMarks, thresholds } = useMemo(() => calendarWeeksOf({ startsOn, endsOn, days }), [startsOn, endsOn, days]);
+  const { timeZone } = useToolkitSettings();
+  const { weeks, monthMarks, thresholds } = useMemo(
+    () => calendarWeeksOf({ ...calendarRangeOf({ startsOn, endsOn, today: todayInZone(timeZone) }), days }),
+    [startsOn, endsOn, days, timeZone]
+  );
+  const describe = describeValue ?? formatNumber;
   const activeDays = days.filter((day) => day.value > 0);
   return /* @__PURE__ */ jsxs(Box, { children: [
     /* @__PURE__ */ jsxs(HeatmapHeader, { direction: "row", spacing: 2, ownSx: { justifyContent: "space-between", alignItems: "center", mb: 1 }, children: [
@@ -129,7 +138,7 @@ function CalendarHeatmap(props) {
                       {
                         arrow: true,
                         disableInteractive: true,
-                        title: `${formatDate(day.date)}: ${describeValue(day.value)}${day.detail ? ` · ${day.detail}` : ""}`,
+                        title: `${formatDate(day.date)}: ${describe(day.value)}${day.detail ? ` · ${day.detail}` : ""}`,
                         children: /* @__PURE__ */ jsx(HeatmapCell, { ownSx: (theme) => ({ width: CELL_PIXELS, height: CELL_PIXELS, borderRadius: "3px", bgcolor: levelFill(theme, tone, level) }) })
                       },
                       day.date

package/dist/ui/metrics/CalendarHeatmap.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeatmap.js","sources":["../../../src/ui/metrics/CalendarHeatmap.jsx"],"sourcesContent":["// Calendario de actividad: un cuadro por día, semanas en columnas (el de GitHub).\n//\n// Sirve para ver RITMO de un vistazo: qué días llegan cargas, si hubo semanas muertas, si la actividad crece. Las\n// reglas de visualización:\n//   - es MAGNITUD, así que va un solo tono de claro a oscuro (el del tono que se pida), en cuatro niveles más \"sin\n//     actividad\". Nunca un arcoíris. Se arma con color-mix sobre el color del tema (su variable CSS si el tema las usa),\n//     sin hexadecimales: en modo oscuro los mismos niveles se ven sobre su propia superficie;\n//   - los niveles se cortan por CUARTILES de los días con actividad (heatmapScale.js), no por valores fijos;\n//   - leyenda \"Menos → Más\", tooltip por día con el número exacto (el color solo nunca dice cuánto) y VISTA DE TABLA\n//     (para lector de pantalla, para quien no distingue el tono y para copiar los números).\n//\n// Sin librería a propósito: el Heatmap de MUI X Charts es de la edición Pro, que pide licencia.\n//\n// Textos por props y del paquete, y fechas con los formatos del paquete.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaCalendarHeatmap con defaultProps y\n// styleOverrides de sus partes: header, toggle, tableArea, dateCell, valueCell, descriptionCell, gridArea, grid,\n// monthLabel, week, dayLabel, cell, legend, legendLess, legendCell, legendMore.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useMemo, useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Stack from '@mui/material/Stack';\nimport Table from '@mui/material/Table';\nimport TableBody from '@mui/material/TableBody';\nimport TableCell from '@mui/material/TableCell';\nimport TableHead from '@mui/material/TableHead';\nimport TableRow from '@mui/material/TableRow';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\n\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {HEATMAP_LEVELS, calendarWeeksOf, levelOf} from '@/ui/metrics/heatmapScale.js';\nimport TableToggle, {CHART_VIEW} from '@/ui/metrics/TableToggle.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaCalendarHeatmap)\nconst THEME_NAME = 'CalcitaCalendarHeatmap';\nconst HeatmapHeader = piecePart(THEME_NAME, 'Header', Stack);\nconst HeatmapToggle = piecePart(THEME_NAME, 'Toggle', Box);\nconst HeatmapTableArea = piecePart(THEME_NAME, 'TableArea', Box);\nconst HeatmapDateCell = piecePart(THEME_NAME, 'DateCell', TableCell);\nconst HeatmapValueCell = piecePart(THEME_NAME, 'ValueCell', TableCell);\nconst HeatmapDescriptionCell = piecePart(THEME_NAME, 'DescriptionCell', TableCell);\nconst HeatmapGridArea = piecePart(THEME_NAME, 'GridArea', Box);\nconst HeatmapGrid = piecePart(THEME_NAME, 'Grid', Box);\nconst HeatmapMonthLabel = piecePart(THEME_NAME, 'MonthLabel', Typography);\nconst HeatmapWeek = piecePart(THEME_NAME, 'Week', Box);\nconst HeatmapDayLabel = piecePart(THEME_NAME, 'DayLabel', Typography);\nconst HeatmapCell = piecePart(THEME_NAME, 'Cell', Box);\nconst HeatmapLegend = piecePart(THEME_NAME, 'Legend', Stack);\nconst HeatmapLegendLess = piecePart(THEME_NAME, 'LegendLess', Typography);\nconst HeatmapLegendCell = piecePart(THEME_NAME, 'LegendCell', Box);\nconst HeatmapLegendMore = piecePart(THEME_NAME, 'LegendMore', Typography);\n\n// cuadros de 12 px en teléfono (el calendario se desliza) y de 16 px desde md, donde el panel ocupa todo el ancho\nconst CELL_PIXELS = {xs: 12, md: 16};\nconst GAP_PIXELS = 3;\n// solo lunes, miércoles y viernes llevan rótulo: los siete encimados no se leen a 12 px\nconst LABELED_WEEKDAYS = new Set([1, 3, 5]);\n// porcentaje del tono en cada nivel; el nivel 0 es el gris de \"hover\" del tema\nconst LEVEL_TONE_PERCENT = {1: 30, 2: 55, 3: 78, 4: 100};\n\n/**\n * Relleno de un nivel con los colores del tema.\n *\n * @param {object} theme tema de MUI (con o sin variables CSS)\n * @param {string} tone primary, info, success...\n * @param {number} level 0 a 4\n * @returns {string} color CSS\n */\nfunction levelFill(theme, tone, level) {\n    // un tema con variables CSS las trae en theme.vars; el tema por omisión de MUI, solo en theme.palette\n    const {palette} = theme.vars ?? theme;\n    if (level === 0) {\n        return palette.action.hover;\n    }\n    return `color-mix(in srgb, ${palette[tone].main} ${LEVEL_TONE_PERCENT[level]}%, transparent)`;\n}\n\n/**\n * @param {object} props\n * @param {string} props.startsOn primer día del rango (\"2025-09-16\"), fecha de calendario\n * @param {string} props.endsOn último día del rango (\"2026-09-15\")\n * @param {Array<{date: string, value: number, detail?: string}>} props.days solo los días con actividad; el resto vale\n *     0\n * @param {string} props.ariaLabel qué muestra el calendario, ya traducido\n * @param {string} props.valueLabel encabezado de la columna de valor en la tabla (\"Registros leídos\")\n * @param {(value: number) => string} props.describeValue el valor en palabras para el tooltip (\"120 registros leídos\")\n * @param {import('react').ReactNode} [props.summary] renglón de resumen arriba del calendario\n * @param {string} [props.emptyLabel] qué decir si ningún día tiene actividad\n * @param {'primary'|'info'|'success'|'warning'|'error'} [props.tone]\n * @param {'chart'|'table'} [props.defaultView] cómo se ve al abrir (CHART_VIEW); por omisión dibujada\n * @param {(view: 'chart'|'table') => void} [props.onViewChange] la persona cambió a la tabla o a la gráfica\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function CalendarHeatmap(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaCalendarHeatmap.defaultProps) y encima lo que llega aquí\n    const {startsOn, endsOn, days, ariaLabel, valueLabel, describeValue, summary, emptyLabel, tone = 'primary', texts, defaultView = CHART_VIEW.chart, onViewChange} = usePieceProps(props, THEME_NAME);\n    const {t} = useToolkitTranslation('common', texts);\n    const {formatDate, formatMonthShortName, formatNumber, formatWeekdayShortName} = useFormatters();\n    const [asTable, setAsTable] = useState(defaultView === CHART_VIEW.table);\n    const toggleView = () => {\n        setAsTable(!asTable);\n        onViewChange?.(asTable ? CHART_VIEW.chart : CHART_VIEW.table);\n    };\n\n    const {weeks, monthMarks, thresholds} = useMemo(() => calendarWeeksOf({startsOn, endsOn, days}), [startsOn, endsOn, days]);\n    const activeDays = days.filter((day) => day.value > 0);\n\n    return (\n        <Box>\n            <HeatmapHeader direction=\"row\" spacing={2} ownSx={{justifyContent: 'space-between', alignItems: 'center', mb: 1}}>\n                <Typography variant=\"body2\" color=\"text.secondary\">\n                    {activeDays.length ? summary : emptyLabel}\n                </Typography>\n                <HeatmapToggle ownSx={{flexShrink: 0}}>\n                    <TableToggle asTable={asTable} onToggle={toggleView} texts={texts} />\n                </HeatmapToggle>\n            </HeatmapHeader>\n\n            {asTable ? (\n                <HeatmapTableArea ownSx={{maxHeight: 260, overflowY: 'auto'}}>\n                    <Table size=\"small\" aria-label={ariaLabel}>\n                        <TableHead>\n                            <TableRow>\n                                <TableCell>{t('charts.day')}</TableCell>\n                                <TableCell align=\"right\">{valueLabel}</TableCell>\n                                <TableCell />\n                            </TableRow>\n                        </TableHead>\n                        <TableBody>\n                            {[...activeDays].reverse().map((day) => (\n                                <TableRow key={day.date}>\n                                    <HeatmapDateCell ownSx={{whiteSpace: 'nowrap'}}>{formatDate(day.date)}</HeatmapDateCell>\n                                    <HeatmapValueCell align=\"right\" ownSx={{fontVariantNumeric: 'tabular-nums'}}>{formatNumber(day.value)}</HeatmapValueCell>\n                                    <HeatmapDescriptionCell ownSx={{color: 'text.secondary'}}>{day.detail}</HeatmapDescriptionCell>\n                                </TableRow>\n                            ))}\n                        </TableBody>\n                    </Table>\n                </HeatmapTableArea>\n            ) : (\n                // el calendario no se encoge: en pantallas angostas se desliza y arranca mostrando lo más reciente\n                <HeatmapGridArea ownSx={{overflowX: 'auto', pb: 0.5}}\n                     ref={(node) => {\n                         if (node) {\n                             node.scrollLeft = node.scrollWidth;\n                         }\n                     }}>\n                    <HeatmapGrid role=\"img\" aria-label={ariaLabel}\n                         ownSx={{\n                             display: 'inline-grid',\n                             gridTemplateColumns: {\n                                 xs: `auto repeat(${weeks.length}, ${CELL_PIXELS.xs}px)`,\n                                 md: `auto repeat(${weeks.length}, ${CELL_PIXELS.md}px)`,\n                             },\n                             columnGap: `${GAP_PIXELS}px`,\n                             rowGap: `${GAP_PIXELS}px`,\n                             alignItems: 'center',\n                         }}>\n                        <Box />\n                        {monthMarks.map((month, column) => (\n                            <HeatmapMonthLabel key={`month-${column}`} variant=\"caption\" color=\"text.secondary\"\n                                        ownSx={{fontSize: 10, lineHeight: 1, whiteSpace: 'nowrap', overflow: 'visible', width: CELL_PIXELS}}>\n                                {month ? formatMonthShortName(month) : ''}\n                            </HeatmapMonthLabel>\n                        ))}\n                        {[1, 2, 3, 4, 5, 6, 7].map((isoWeekday) => (\n                            <HeatmapWeek key={`weekday-${isoWeekday}`} ownSx={{display: 'contents'}}>\n                                <HeatmapDayLabel variant=\"caption\" color=\"text.secondary\"\n                                            ownSx={{fontSize: 10, lineHeight: {xs: `${CELL_PIXELS.xs}px`, md: `${CELL_PIXELS.md}px`}, pr: 0.75}}>\n                                    {LABELED_WEEKDAYS.has(isoWeekday) ? formatWeekdayShortName(isoWeekday) : ''}\n                                </HeatmapDayLabel>\n                                {weeks.map((week, column) => {\n                                    const day = week[isoWeekday - 1];\n                                    if (!day) {\n                                        return <Box key={`outside-${column}-${isoWeekday}`} />;\n                                    }\n                                    const level = levelOf(day.value, thresholds);\n                                    return (\n                                        <Tooltip key={day.date} arrow disableInteractive\n                                                 title={`${formatDate(day.date)}: ${describeValue(day.value)}${day.detail ? ` · ${day.detail}` : ''}`}>\n                                            <HeatmapCell ownSx={(theme) => ({width: CELL_PIXELS, height: CELL_PIXELS, borderRadius: '3px', bgcolor: levelFill(theme, tone, level)})} />\n                                        </Tooltip>\n                                    );\n                                })}\n                            </HeatmapWeek>\n                        ))}\n                    </HeatmapGrid>\n                </HeatmapGridArea>\n            )}\n\n            {!asTable && (\n                <HeatmapLegend direction=\"row\" spacing={0.5} ownSx={{alignItems: 'center', justifyContent: 'flex-end', mt: 1}} aria-hidden=\"true\">\n                    <HeatmapLegendLess variant=\"caption\" color=\"text.secondary\" ownSx={{mr: 0.5}}>{t('charts.less')}</HeatmapLegendLess>\n                    {HEATMAP_LEVELS.map((level) => (\n                        <HeatmapLegendCell key={level} ownSx={(theme) => ({width: CELL_PIXELS, height: CELL_PIXELS, borderRadius: '3px', bgcolor: levelFill(theme, tone, level)})} />\n                    ))}\n                    <HeatmapLegendMore variant=\"caption\" color=\"text.secondary\" ownSx={{ml: 0.5}}>{t('charts.more')}</HeatmapLegendMore>\n                </HeatmapLegend>\n            )}\n        </Box>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CalendarHeatmap.js","sources":["../../../src/ui/metrics/CalendarHeatmap.jsx"],"sourcesContent":["// Calendario de actividad: un cuadro por día, semanas en columnas (el de GitHub).\n//\n// Sirve para ver RITMO de un vistazo: qué días llegan cargas, si hubo semanas muertas, si la actividad crece. Las\n// reglas de visualización:\n//   - es MAGNITUD, así que va un solo tono de claro a oscuro (el del tono que se pida), en cuatro niveles más \"sin\n//     actividad\". Nunca un arcoíris. Se arma con color-mix sobre el color del tema (su variable CSS si el tema las usa),\n//     sin hexadecimales: en modo oscuro los mismos niveles se ven sobre su propia superficie;\n//   - los niveles se cortan por CUARTILES de los días con actividad (heatmapScale.js), no por valores fijos;\n//   - leyenda \"Menos → Más\", tooltip por día con el número exacto (el color solo nunca dice cuánto) y VISTA DE TABLA\n//     (para lector de pantalla, para quien no distingue el tono y para copiar los números).\n//\n// Sin librería a propósito: el Heatmap de MUI X Charts es de la edición Pro, que pide licencia.\n//\n// Textos por props y del paquete, y fechas con los formatos del paquete.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaCalendarHeatmap con defaultProps y\n// styleOverrides de sus partes: header, toggle, tableArea, dateCell, valueCell, descriptionCell, gridArea, grid,\n// monthLabel, week, dayLabel, cell, legend, legendLess, legendCell, legendMore.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useMemo, useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Stack from '@mui/material/Stack';\nimport Table from '@mui/material/Table';\nimport TableBody from '@mui/material/TableBody';\nimport TableCell from '@mui/material/TableCell';\nimport TableHead from '@mui/material/TableHead';\nimport TableRow from '@mui/material/TableRow';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\n\nimport {useToolkitSettings} from '@/toolkit/toolkitContext.js';\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {HEATMAP_LEVELS, calendarRangeOf, calendarWeeksOf, levelOf, todayInZone} from '@/ui/metrics/heatmapScale.js';\nimport TableToggle, {CHART_VIEW} from '@/ui/metrics/TableToggle.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaCalendarHeatmap)\nconst THEME_NAME = 'CalcitaCalendarHeatmap';\nconst HeatmapHeader = piecePart(THEME_NAME, 'Header', Stack);\nconst HeatmapToggle = piecePart(THEME_NAME, 'Toggle', Box);\nconst HeatmapTableArea = piecePart(THEME_NAME, 'TableArea', Box);\nconst HeatmapDateCell = piecePart(THEME_NAME, 'DateCell', TableCell);\nconst HeatmapValueCell = piecePart(THEME_NAME, 'ValueCell', TableCell);\nconst HeatmapDescriptionCell = piecePart(THEME_NAME, 'DescriptionCell', TableCell);\nconst HeatmapGridArea = piecePart(THEME_NAME, 'GridArea', Box);\nconst HeatmapGrid = piecePart(THEME_NAME, 'Grid', Box);\nconst HeatmapMonthLabel = piecePart(THEME_NAME, 'MonthLabel', Typography);\nconst HeatmapWeek = piecePart(THEME_NAME, 'Week', Box);\nconst HeatmapDayLabel = piecePart(THEME_NAME, 'DayLabel', Typography);\nconst HeatmapCell = piecePart(THEME_NAME, 'Cell', Box);\nconst HeatmapLegend = piecePart(THEME_NAME, 'Legend', Stack);\nconst HeatmapLegendLess = piecePart(THEME_NAME, 'LegendLess', Typography);\nconst HeatmapLegendCell = piecePart(THEME_NAME, 'LegendCell', Box);\nconst HeatmapLegendMore = piecePart(THEME_NAME, 'LegendMore', Typography);\n\n// cuadros de 12 px en teléfono (el calendario se desliza) y de 16 px desde md, donde el panel ocupa todo el ancho\nconst CELL_PIXELS = {xs: 12, md: 16};\nconst GAP_PIXELS = 3;\n// solo lunes, miércoles y viernes llevan rótulo: los siete encimados no se leen a 12 px\nconst LABELED_WEEKDAYS = new Set([1, 3, 5]);\n// porcentaje del tono en cada nivel; el nivel 0 es el gris de \"hover\" del tema\nconst LEVEL_TONE_PERCENT = {1: 30, 2: 55, 3: 78, 4: 100};\n// sin días: el calendario vacío (una lista fija para que no se vuelvan a contar las semanas en cada render)\nconst NO_DAYS = Object.freeze([]);\n\n/**\n * Relleno de un nivel con los colores del tema.\n *\n * @param {object} theme tema de MUI (con o sin variables CSS)\n * @param {string} tone primary, info, success...\n * @param {number} level 0 a 4\n * @returns {string} color CSS\n */\nfunction levelFill(theme, tone, level) {\n    // un tema con variables CSS las trae en theme.vars; el tema por omisión de MUI, solo en theme.palette\n    const {palette} = theme.vars ?? theme;\n    if (level === 0) {\n        return palette.action.hover;\n    }\n    return `color-mix(in srgb, ${palette[tone].main} ${LEVEL_TONE_PERCENT[level]}%, transparent)`;\n}\n\n/**\n * @param {object} props\n * @param {string} [props.startsOn] primer día del rango (\"2025-09-16\"), fecha de calendario; sin él, un año antes de endsOn\n * @param {string} [props.endsOn] último día del rango (\"2026-09-15\"); sin él, hoy en la zona del proveedor\n * @param {Array<{date: string, value: number, detail?: string}>} [props.days] solo los días con actividad; el resto vale\n *     0\n * @param {string} props.ariaLabel qué muestra el calendario, ya traducido\n * @param {string} props.valueLabel encabezado de la columna de valor en la tabla (\"Registros leídos\")\n * @param {(value: number) => string} [props.describeValue] el valor en palabras para el tooltip (\"120 registros leídos\");\n *     sin ella, solo el número\n * @param {import('react').ReactNode} [props.summary] renglón de resumen arriba del calendario\n * @param {string} [props.emptyLabel] qué decir si ningún día tiene actividad\n * @param {'primary'|'info'|'success'|'warning'|'error'} [props.tone]\n * @param {'chart'|'table'} [props.defaultView] cómo se ve al abrir (CHART_VIEW); por omisión dibujada\n * @param {(view: 'chart'|'table') => void} [props.onViewChange] la persona cambió a la tabla o a la gráfica\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function CalendarHeatmap(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaCalendarHeatmap.defaultProps) y encima lo que llega aquí\n    const {startsOn, endsOn, days = NO_DAYS, ariaLabel, valueLabel, describeValue, summary, emptyLabel, tone = 'primary', texts, defaultView = CHART_VIEW.chart, onViewChange, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const {formatDate, formatMonthShortName, formatNumber, formatWeekdayShortName} = useFormatters();\n    const [asTable, setAsTable] = useState(defaultView === CHART_VIEW.table);\n    const toggleView = () => {\n        setAsTable(!asTable);\n        onViewChange?.(asTable ? CHART_VIEW.chart : CHART_VIEW.table);\n    };\n\n    const {timeZone} = useToolkitSettings();\n    const {weeks, monthMarks, thresholds} = useMemo(\n        () => calendarWeeksOf({...calendarRangeOf({startsOn, endsOn, today: todayInZone(timeZone)}), days}),\n        [startsOn, endsOn, days, timeZone]);\n    // el valor en palabras del globo de cada día; sin la del proyecto, el número solo\n    const describe = describeValue ?? formatNumber;\n    const activeDays = days.filter((day) => day.value > 0);\n\n    return (\n        <Box>\n            <HeatmapHeader direction=\"row\" spacing={2} ownSx={{justifyContent: 'space-between', alignItems: 'center', mb: 1}}>\n                <Typography variant=\"body2\" color=\"text.secondary\">\n                    {activeDays.length ? summary : emptyLabel}\n                </Typography>\n                <HeatmapToggle ownSx={{flexShrink: 0}}>\n                    <TableToggle asTable={asTable} onToggle={toggleView} texts={texts} />\n                </HeatmapToggle>\n            </HeatmapHeader>\n\n            {asTable ? (\n                <HeatmapTableArea ownSx={{maxHeight: 260, overflowY: 'auto'}}>\n                    <Table size=\"small\" aria-label={ariaLabel}>\n                        <TableHead>\n                            <TableRow>\n                                <TableCell>{t('charts.day')}</TableCell>\n                                <TableCell align=\"right\">{valueLabel}</TableCell>\n                                <TableCell />\n                            </TableRow>\n                        </TableHead>\n                        <TableBody>\n                            {[...activeDays].reverse().map((day) => (\n                                <TableRow key={day.date}>\n                                    <HeatmapDateCell ownSx={{whiteSpace: 'nowrap'}}>{formatDate(day.date)}</HeatmapDateCell>\n                                    <HeatmapValueCell align=\"right\" ownSx={{fontVariantNumeric: 'tabular-nums'}}>{formatNumber(day.value)}</HeatmapValueCell>\n                                    <HeatmapDescriptionCell ownSx={{color: 'text.secondary'}}>{day.detail}</HeatmapDescriptionCell>\n                                </TableRow>\n                            ))}\n                        </TableBody>\n                    </Table>\n                </HeatmapTableArea>\n            ) : (\n                // el calendario no se encoge: en pantallas angostas se desliza y arranca mostrando lo más reciente\n                <HeatmapGridArea ownSx={{overflowX: 'auto', pb: 0.5}}\n                     ref={(node) => {\n                         if (node) {\n                             node.scrollLeft = node.scrollWidth;\n                         }\n                     }}>\n                    <HeatmapGrid role=\"img\" aria-label={ariaLabel}\n                         ownSx={{\n                             display: 'inline-grid',\n                             gridTemplateColumns: {\n                                 xs: `auto repeat(${weeks.length}, ${CELL_PIXELS.xs}px)`,\n                                 md: `auto repeat(${weeks.length}, ${CELL_PIXELS.md}px)`,\n                             },\n                             columnGap: `${GAP_PIXELS}px`,\n                             rowGap: `${GAP_PIXELS}px`,\n                             alignItems: 'center',\n                         }}>\n                        <Box />\n                        {monthMarks.map((month, column) => (\n                            <HeatmapMonthLabel key={`month-${column}`} variant=\"caption\" color=\"text.secondary\"\n                                        ownSx={{fontSize: 10, lineHeight: 1, whiteSpace: 'nowrap', overflow: 'visible', width: CELL_PIXELS}}>\n                                {month ? formatMonthShortName(month) : ''}\n                            </HeatmapMonthLabel>\n                        ))}\n                        {[1, 2, 3, 4, 5, 6, 7].map((isoWeekday) => (\n                            <HeatmapWeek key={`weekday-${isoWeekday}`} ownSx={{display: 'contents'}}>\n                                <HeatmapDayLabel variant=\"caption\" color=\"text.secondary\"\n                                            ownSx={{fontSize: 10, lineHeight: {xs: `${CELL_PIXELS.xs}px`, md: `${CELL_PIXELS.md}px`}, pr: 0.75}}>\n                                    {LABELED_WEEKDAYS.has(isoWeekday) ? formatWeekdayShortName(isoWeekday) : ''}\n                                </HeatmapDayLabel>\n                                {weeks.map((week, column) => {\n                                    const day = week[isoWeekday - 1];\n                                    if (!day) {\n                                        return <Box key={`outside-${column}-${isoWeekday}`} />;\n                                    }\n                                    const level = levelOf(day.value, thresholds);\n                                    return (\n                                        <Tooltip key={day.date} arrow disableInteractive\n                                                 title={`${formatDate(day.date)}: ${describe(day.value)}${day.detail ? ` · ${day.detail}` : ''}`}>\n                                            <HeatmapCell ownSx={(theme) => ({width: CELL_PIXELS, height: CELL_PIXELS, borderRadius: '3px', bgcolor: levelFill(theme, tone, level)})} />\n                                        </Tooltip>\n                                    );\n                                })}\n                            </HeatmapWeek>\n                        ))}\n                    </HeatmapGrid>\n                </HeatmapGridArea>\n            )}\n\n            {!asTable && (\n                <HeatmapLegend direction=\"row\" spacing={0.5} ownSx={{alignItems: 'center', justifyContent: 'flex-end', mt: 1}} aria-hidden=\"true\">\n                    <HeatmapLegendLess variant=\"caption\" color=\"text.secondary\" ownSx={{mr: 0.5}}>{t('charts.less')}</HeatmapLegendLess>\n                    {HEATMAP_LEVELS.map((level) => (\n                        <HeatmapLegendCell key={level} ownSx={(theme) => ({width: CELL_PIXELS, height: CELL_PIXELS, borderRadius: '3px', bgcolor: levelFill(theme, tone, level)})} />\n                    ))}\n                    <HeatmapLegendMore variant=\"caption\" color=\"text.secondary\" ownSx={{ml: 0.5}}>{t('charts.more')}</HeatmapLegendMore>\n                </HeatmapLegend>\n            )}\n        </Box>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/ui/metrics/ChartTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartTooltip.js","sources":["../../../src/ui/metrics/ChartTooltip.jsx"],"sourcesContent":["// El tooltip de las gráficas de Recharts con el look de la app. Se exporta para las gráficas propias del proyecto con\n// recharts (una de pastel, una de área): <Tooltip content={<ChartTooltip render={(row) => …} />} />.\n//\n// El de Recharts trae su propio estilo (fondo blanco, borde gris); este usa el Paper del tema y habla igual que los\n// tooltips del resto de la app (y se voltea solo cuando llegue el modo oscuro). Con el vidrio del tema\n// (createToolkitTheme({glass: true})) es de vidrio: flota sobre la gráfica.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaChartTooltip con defaultProps y\n// styleOverrides de sus partes: root.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Paper from '@mui/material/Paper';\nimport Typography from '@mui/material/Typography';\n\nimport {glassStylesOf, isGlassTheme} from '@/theme/glassSurface.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaChartTooltip)\nconst THEME_NAME = 'CalcitaChartTooltip';\nconst TooltipRoot = piecePart(THEME_NAME, 'Root', Paper);\n\n// el vidrio del cuadrito, casi opaco (el material «grueso»): es para leer una cifra encima de la gráfica; con el vidrio de\n// los controles (60 %) se veía la barra de atrás a través del texto (lo reportaron)\nconst CHART_TOOLTIP_OPACITY = 0.92;\n\n/**\n * @param {{active?: boolean, payload?: Array<{payload: any}>, render: (item: any) => import('react').ReactNode}} props\n *     active y payload los pone recharts; render recibe el renglón de data del punto o la columna\n */\nexport default function ChartTooltip(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaChartTooltip.defaultProps) y encima lo que llega aquí\n    const {active, payload, render} = usePieceProps(props, THEME_NAME);\n    // guard clause: Recharts lo monta siempre; solo se pinta sobre una barra\n    if (!active || !payload?.length) {\n        return null;\n    }\n    return (\n        <TooltipRoot elevation={3} ownSx={[{px: 1.5, py: 1, pointerEvents: 'none'}, (theme) => (isGlassTheme(theme) ? glassStylesOf(theme, {opacity: CHART_TOOLTIP_OPACITY}) : {})]}>\n            {/* div: el globo puede llevar varios renglones (una serie por renglón) */}\n            <Typography variant=\"body2\" component=\"div\">{render(payload[0].payload)}</Typography>\n        </TooltipRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;AAkBA,MAAM,aAAa;AACnB,MAAM,cAAc,UAAU,YAAY,QAAQ,KAAK;AAIvD,MAAM,wBAAwB;AAM9B,SAAwB,aAAa,OAAO;AAExC,QAAM,EAAC,QAAQ,SAAS,WAAU,cAAc,OAAO,UAAU;AAEjE,MAAI,CAAC,UAAU,CAAC,SAAS,QAAQ;AAC7B,WAAO;AAAA,EACX;AACA,6BACK,aAAA,EAAY,WAAW,GAAG,OAAO,CAAC,EAAC,IAAI,KAAK,IAAI,GAAG,eAAe,UAAS,CAAC,UAAW,aAAa,KAAK,IAAI,cAAc,OAAO,EAAC,SAAS,sBAAA,CAAsB,IAAI,EAAG,GAEtK,UAAA,oBAAC,YAAA,EAAW,SAAQ,SAAQ,WAAU,OAAO,UAAA,OAAO,QAAQ,CAAC,EAAE,OAAO,GAAE,GAC5E;AAER;"}
+{"version":3,"file":"ChartTooltip.js","sources":["../../../src/ui/metrics/ChartTooltip.jsx"],"sourcesContent":["// El tooltip de las gráficas de Recharts con el look de la app. Se exporta para las gráficas propias del proyecto con\n// recharts (una de pastel, una de área): <Tooltip content={<ChartTooltip render={(row) => …} />} />.\n//\n// El de Recharts trae su propio estilo (fondo blanco, borde gris); este usa el Paper del tema y habla igual que los\n// tooltips del resto de la app (y se voltea solo cuando llegue el modo oscuro). Con el vidrio del tema\n// (createToolkitTheme({glass: true})) es de vidrio: flota sobre la gráfica.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaChartTooltip con defaultProps y\n// styleOverrides de sus partes: root.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Paper from '@mui/material/Paper';\nimport Typography from '@mui/material/Typography';\n\nimport {glassStylesOf, isGlassTheme} from '@/theme/glassSurface.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaChartTooltip)\nconst THEME_NAME = 'CalcitaChartTooltip';\nconst TooltipRoot = piecePart(THEME_NAME, 'Root', Paper);\n\n// el vidrio del cuadrito, casi opaco (el material «grueso»): es para leer una cifra encima de la gráfica; con el vidrio de\n// los controles (60 %) se veía la barra de atrás a través del texto (lo reportaron)\nconst CHART_TOOLTIP_OPACITY = 0.92;\n\n/**\n * @param {{active?: boolean, payload?: Array<{payload: any}>, render: (item: any) => import('react').ReactNode}} props\n *     active y payload los pone recharts; render recibe el renglón de data del punto o la columna\n */\nexport default function ChartTooltip(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaChartTooltip.defaultProps) y encima lo que llega aquí\n    // OJO: sin aviso de opciones desconocidas (warnUnknownProps) a propósito: recharts le pasa al globo todas las suyas\n    // (offset, wrapperStyle, coordinate…) y el aviso salía con unas veinte opciones que el globo no necesita\n    const {active, payload, render} = usePieceProps(props, THEME_NAME);\n    // guard clause: Recharts lo monta siempre; solo se pinta sobre una barra\n    if (!active || !payload?.length) {\n        return null;\n    }\n    return (\n        <TooltipRoot elevation={3} ownSx={[{px: 1.5, py: 1, pointerEvents: 'none'}, (theme) => (isGlassTheme(theme) ? glassStylesOf(theme, {opacity: CHART_TOOLTIP_OPACITY}) : {})]}>\n            {/* div: el globo puede llevar varios renglones (una serie por renglón) */}\n            <Typography variant=\"body2\" component=\"div\">{render(payload[0].payload)}</Typography>\n        </TooltipRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;AAkBA,MAAM,aAAa;AACnB,MAAM,cAAc,UAAU,YAAY,QAAQ,KAAK;AAIvD,MAAM,wBAAwB;AAM9B,SAAwB,aAAa,OAAO;AAIxC,QAAM,EAAC,QAAQ,SAAS,WAAU,cAAc,OAAO,UAAU;AAEjE,MAAI,CAAC,UAAU,CAAC,SAAS,QAAQ;AAC7B,WAAO;AAAA,EACX;AACA,6BACK,aAAA,EAAY,WAAW,GAAG,OAAO,CAAC,EAAC,IAAI,KAAK,IAAI,GAAG,eAAe,UAAS,CAAC,UAAW,aAAa,KAAK,IAAI,cAAc,OAAO,EAAC,SAAS,sBAAA,CAAsB,IAAI,EAAG,GAEtK,UAAA,oBAAC,YAAA,EAAW,SAAQ,SAAQ,WAAU,OAAO,UAAA,OAAO,QAAQ,CAAC,EAAE,OAAO,GAAE,GAC5E;AAER;"}

package/dist/ui/metrics/ColumnChart.js

@@ -10,6 +10,7 @@ import ChartTooltip from "./ChartTooltip.js";
 import TableToggle, { CHART_VIEW } from "./TableToggle.js";
 import { useChartColors, resolvedSeriesOf, highestValueOf, ChartTable, valueAxisWidthOf, ChartLegend, ReferenceCaption } from "./chartParts.js";
 import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaColumnChart";
 const ColumnChartPart = piecePart(THEME_NAME, "Chart", Box);
 const SINGLE_SERIES_KEY = "value";
@@ -29,8 +30,10 @@ function ColumnChart(props) {
     renderTooltip,
     texts,
     defaultView = CHART_VIEW.chart,
-    onViewChange
+    onViewChange,
+    ...unknownProps
   } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("common", texts);
   const { formatNumber } = useFormatters();
   const formatValue = formatValueProp ?? formatNumber;

package/dist/ui/metrics/ColumnChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnChart.js","sources":["../../../src/ui/metrics/ColumnChart.jsx"],"sourcesContent":["// Columnas a lo largo del tiempo (p. ej. registros leídos por mes), dibujadas con Recharts: una serie (data con `value`) o\n// varias agrupadas por periodo (`series`, cada una con su llave en data: ventas y devoluciones por mes).\n//\n// Recharts y no SVG a mano: ejes, escalas, rótulos que no se encimen y el tooltip ya los resolvió la librería. Lo que se\n// decide aquí son las reglas de visualización:\n//   - una serie → un color (el del tono vía currentColor) y SIN leyenda: el título ya dice qué es; varias → cada una su color\n//     y leyenda abajo (chartParts.jsx, lo que comparte con LineChart);\n//   - columnas de 28 px como máximo, punta redondeada, base cuadrada;\n//   - rejilla horizontal de 1 px, sólida y recesiva; el texto de los ejes en tinta secundaria;\n//   - tooltip por columna y VISTA DE TABLA;\n//   - una línea de referencia opcional (p. ej. la meta), punteada y en tinta secundaria: se lee sin competir con las\n//     columnas, y el eje crece lo necesario para que siempre se vea. Su rótulo va debajo de la gráfica y no sobre la\n//     línea, donde se encimaba con la columna del último mes; así también lo lee quien ve la tabla.\n//\n// El valor se escribe con formatValue (por omisión, número con separador de miles): con él una serie puede ir en\n// porcentaje. El eje mide lo que mide su número más largo, para que «2,500,000» no salga cortado.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaColumnChart con defaultProps y\n// styleOverrides de sus partes: chart.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport {Bar, BarChart, CartesianGrid, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';\n\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport ChartTooltip from '@/ui/metrics/ChartTooltip.jsx';\nimport TableToggle, {CHART_VIEW} from '@/ui/metrics/TableToggle.jsx';\nimport {\n    ChartLegend, ChartTable, ReferenceCaption, highestValueOf, resolvedSeriesOf, useChartColors, valueAxisWidthOf,\n} from '@/ui/metrics/chartParts.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaColumnChart)\nconst THEME_NAME = 'CalcitaColumnChart';\nconst ColumnChartPart = piecePart(THEME_NAME, 'Chart', Box);\n\n// la llave del valor cuando la gráfica es de una sola serie\nconst SINGLE_SERIES_KEY = 'value';\n\n/**\n * @param {object} props\n * @param {Array<Record<string, any>>} props.data un renglón por periodo: {key, label, value, tooltip?} con una serie, o\n *     {key, label, [llave de cada serie]: número} con varias\n * @param {string} props.periodLabel encabezado de la primera columna de la tabla («Mes»), ya traducido\n * @param {string} [props.valueLabel] cómo se llama lo que se cuenta, ya traducido (una serie)\n * @param {Array<{key: string, label: string, tone?: 'primary'|'secondary'|'success'|'warning'|'error'|'info'}>} [props.series]\n *     varias series agrupadas: la llave de cada una en data, su nombre ya traducido y su color (por omisión, en orden)\n * @param {string} props.ariaLabel\n * @param {string} props.emptyLabel\n * @param {number} [props.height]\n * @param {'primary'|'success'|'warning'|'error'|'info'} [props.tone] el color de una sola serie\n * @param {(item: any, seriesKey: string) => void} [props.onSelect] recibe el renglón de data que se picó y la serie\n * @param {(value: number) => string} [props.formatValue] cómo se escribe un valor (en el eje, en la tabla y en el\n *     tooltip)\n * @param {{value: number, label: string}} [props.referenceLine] línea de referencia con su rótulo ya traducido («Meta:\n *     10 %»)\n * @param {(row: any) => import('react').ReactNode} [props.renderTooltip] lo que dice el globo de un periodo; por omisión su\n *     nombre y el valor de cada serie\n * @param {'chart'|'table'} [props.defaultView] cómo se ve al abrir (CHART_VIEW); por omisión dibujada\n * @param {(view: 'chart'|'table') => void} [props.onViewChange] la persona cambió a la tabla o a la gráfica\n * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {charts: {viewAsTable, viewAsChart, legend}}\n */\nexport default function ColumnChart(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaColumnChart.defaultProps) y encima lo que llega aquí\n    const {\n    data, periodLabel, valueLabel, series, ariaLabel, emptyLabel, height = 220, tone = 'primary', onSelect, formatValue: formatValueProp,\n    referenceLine, renderTooltip, texts, defaultView = CHART_VIEW.chart, onViewChange,\n} = usePieceProps(props, THEME_NAME);\n    const {t} = useToolkitTranslation('common', texts);\n    const {formatNumber} = useFormatters();\n    const formatValue = formatValueProp ?? formatNumber;\n    const [asTable, setAsTable] = useState(defaultView === CHART_VIEW.table);\n    const toggleView = () => {\n        setAsTable(!asTable);\n        onViewChange?.(asTable ? CHART_VIEW.chart : CHART_VIEW.table);\n    };\n    const isSingleSeries = !series?.length;\n    const colors = useChartColors();\n    const drawnSeries = resolvedSeriesOf(isSingleSeries ? [{key: SINGLE_SERIES_KEY, label: valueLabel, tone}] : series, colors.palette);\n\n    // guard clause: sin datos se dice, no se pinta un eje vacío\n    if (!data.length) {\n        return <Typography variant=\"body2\" color=\"text.secondary\">{emptyLabel}</Typography>;\n    }\n\n    // el valor más alto que se dibuja (el de las columnas o el de la línea de referencia) decide el ancho del eje\n    const highestValue = highestValueOf(data, drawnSeries, referenceLine);\n    const tooltipOf = renderTooltip ?? ((row) => (isSingleSeries\n        ? row.tooltip ?? `${row.label}: ${formatValue(row.value)}`\n        : (\n            <>\n                <strong>{row.label}</strong>\n                {drawnSeries.map((item) => <Box key={item.key}>{item.label}: {formatValue(row[item.key])}</Box>)}\n            </>\n        )));\n\n    return (\n        <Box>\n            <TableToggle asTable={asTable} onToggle={toggleView} texts={texts} />\n            {asTable ? (\n                <ChartTable data={data} series={drawnSeries} periodLabel={periodLabel} formatValue={formatValue} height={height} />\n            ) : (\n                <ColumnChartPart role=\"img\" aria-label={ariaLabel} ownSx={{height, color: `${tone}.main`}}>\n                    <ResponsiveContainer width=\"100%\" height=\"100%\">\n                        <BarChart data={data} margin={{top: 8, right: 8, bottom: 0, left: -8}} barCategoryGap={4}>\n                            <CartesianGrid vertical={false} stroke={colors.grid} />\n                            <XAxis dataKey=\"label\" tick={colors.axisText} tickLine={false} axisLine={{stroke: colors.grid}}\n                                   interval=\"preserveStartEnd\" minTickGap={12} />\n                            <YAxis allowDecimals={false} tick={colors.axisText} tickLine={false} axisLine={false}\n                                   width={valueAxisWidthOf(highestValue, formatValue)} tickFormatter={(value) => formatValue(value)} />\n                            <Tooltip cursor={{fill: colors.hover}} content={<ChartTooltip render={tooltipOf} />} />\n                            {referenceLine && (\n                                // extendDomain: si la referencia queda arriba de todas las columnas, el eje crece hasta ella\n                                <ReferenceLine y={referenceLine.value} ifOverflow=\"extendDomain\" stroke={colors.axis} strokeDasharray=\"4 4\" />\n                            )}\n                            {drawnSeries.map((item) => (\n                                // una serie: currentColor (el tono de la caja); varias: el color de cada una\n                                <Bar key={item.key} dataKey={item.key} fill={isSingleSeries ? 'currentColor' : item.color} maxBarSize={28}\n                                     radius={[4, 4, 0, 0]} isAnimationActive={false} cursor={onSelect ? 'pointer' : 'default'}\n                                     onClick={onSelect ? (entry) => onSelect(entry.payload, item.key) : undefined} />\n                            ))}\n                        </BarChart>\n                    </ResponsiveContainer>\n                </ColumnChartPart>\n            )}\n            <ChartLegend series={drawnSeries} ariaLabel={t('charts.legend')} />\n            <ReferenceCaption referenceLine={referenceLine} />\n        </Box>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ColumnChart.js","sources":["../../../src/ui/metrics/ColumnChart.jsx"],"sourcesContent":["// Columnas a lo largo del tiempo (p. ej. registros leídos por mes), dibujadas con Recharts: una serie (data con `value`) o\n// varias agrupadas por periodo (`series`, cada una con su llave en data: ventas y devoluciones por mes).\n//\n// Recharts y no SVG a mano: ejes, escalas, rótulos que no se encimen y el tooltip ya los resolvió la librería. Lo que se\n// decide aquí son las reglas de visualización:\n//   - una serie → un color (el del tono vía currentColor) y SIN leyenda: el título ya dice qué es; varias → cada una su color\n//     y leyenda abajo (chartParts.jsx, lo que comparte con LineChart);\n//   - columnas de 28 px como máximo, punta redondeada, base cuadrada;\n//   - rejilla horizontal de 1 px, sólida y recesiva; el texto de los ejes en tinta secundaria;\n//   - tooltip por columna y VISTA DE TABLA;\n//   - una línea de referencia opcional (p. ej. la meta), punteada y en tinta secundaria: se lee sin competir con las\n//     columnas, y el eje crece lo necesario para que siempre se vea. Su rótulo va debajo de la gráfica y no sobre la\n//     línea, donde se encimaba con la columna del último mes; así también lo lee quien ve la tabla.\n//\n// El valor se escribe con formatValue (por omisión, número con separador de miles): con él una serie puede ir en\n// porcentaje. El eje mide lo que mide su número más largo, para que «2,500,000» no salga cortado.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaColumnChart con defaultProps y\n// styleOverrides de sus partes: chart.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport {Bar, BarChart, CartesianGrid, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';\n\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport ChartTooltip from '@/ui/metrics/ChartTooltip.jsx';\nimport TableToggle, {CHART_VIEW} from '@/ui/metrics/TableToggle.jsx';\nimport {\n    ChartLegend, ChartTable, ReferenceCaption, highestValueOf, resolvedSeriesOf, useChartColors, valueAxisWidthOf,\n} from '@/ui/metrics/chartParts.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaColumnChart)\nconst THEME_NAME = 'CalcitaColumnChart';\nconst ColumnChartPart = piecePart(THEME_NAME, 'Chart', Box);\n\n// la llave del valor cuando la gráfica es de una sola serie\nconst SINGLE_SERIES_KEY = 'value';\n\n/**\n * @param {object} props\n * @param {Array<Record<string, any>>} props.data un renglón por periodo: {key, label, value, tooltip?} con una serie, o\n *     {key, label, [llave de cada serie]: número} con varias\n * @param {string} props.periodLabel encabezado de la primera columna de la tabla («Mes»), ya traducido\n * @param {string} [props.valueLabel] cómo se llama lo que se cuenta, ya traducido (una serie)\n * @param {Array<{key: string, label: string, tone?: 'primary'|'secondary'|'success'|'warning'|'error'|'info'}>} [props.series]\n *     varias series agrupadas: la llave de cada una en data, su nombre ya traducido y su color (por omisión, en orden)\n * @param {string} props.ariaLabel\n * @param {string} props.emptyLabel\n * @param {number} [props.height]\n * @param {'primary'|'success'|'warning'|'error'|'info'} [props.tone] el color de una sola serie\n * @param {(item: any, seriesKey: string) => void} [props.onSelect] recibe el renglón de data que se picó y la serie\n * @param {(value: number) => string} [props.formatValue] cómo se escribe un valor (en el eje, en la tabla y en el\n *     tooltip)\n * @param {{value: number, label: string}} [props.referenceLine] línea de referencia con su rótulo ya traducido («Meta:\n *     10 %»)\n * @param {(row: any) => import('react').ReactNode} [props.renderTooltip] lo que dice el globo de un periodo; por omisión su\n *     nombre y el valor de cada serie\n * @param {'chart'|'table'} [props.defaultView] cómo se ve al abrir (CHART_VIEW); por omisión dibujada\n * @param {(view: 'chart'|'table') => void} [props.onViewChange] la persona cambió a la tabla o a la gráfica\n * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {charts: {viewAsTable, viewAsChart, legend}}\n */\nexport default function ColumnChart(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaColumnChart.defaultProps) y encima lo que llega aquí\n    const {\n    data, periodLabel, valueLabel, series, ariaLabel, emptyLabel, height = 220, tone = 'primary', onSelect, formatValue: formatValueProp,\n    referenceLine, renderTooltip, texts, defaultView = CHART_VIEW.chart, onViewChange,\n    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const {formatNumber} = useFormatters();\n    const formatValue = formatValueProp ?? formatNumber;\n    const [asTable, setAsTable] = useState(defaultView === CHART_VIEW.table);\n    const toggleView = () => {\n        setAsTable(!asTable);\n        onViewChange?.(asTable ? CHART_VIEW.chart : CHART_VIEW.table);\n    };\n    const isSingleSeries = !series?.length;\n    const colors = useChartColors();\n    const drawnSeries = resolvedSeriesOf(isSingleSeries ? [{key: SINGLE_SERIES_KEY, label: valueLabel, tone}] : series, colors.palette);\n\n    // guard clause: sin datos se dice, no se pinta un eje vacío\n    if (!data.length) {\n        return <Typography variant=\"body2\" color=\"text.secondary\">{emptyLabel}</Typography>;\n    }\n\n    // el valor más alto que se dibuja (el de las columnas o el de la línea de referencia) decide el ancho del eje\n    const highestValue = highestValueOf(data, drawnSeries, referenceLine);\n    const tooltipOf = renderTooltip ?? ((row) => (isSingleSeries\n        ? row.tooltip ?? `${row.label}: ${formatValue(row.value)}`\n        : (\n            <>\n                <strong>{row.label}</strong>\n                {drawnSeries.map((item) => <Box key={item.key}>{item.label}: {formatValue(row[item.key])}</Box>)}\n            </>\n        )));\n\n    return (\n        <Box>\n            <TableToggle asTable={asTable} onToggle={toggleView} texts={texts} />\n            {asTable ? (\n                <ChartTable data={data} series={drawnSeries} periodLabel={periodLabel} formatValue={formatValue} height={height} />\n            ) : (\n                <ColumnChartPart role=\"img\" aria-label={ariaLabel} ownSx={{height, color: `${tone}.main`}}>\n                    <ResponsiveContainer width=\"100%\" height=\"100%\">\n                        <BarChart data={data} margin={{top: 8, right: 8, bottom: 0, left: -8}} barCategoryGap={4}>\n                            <CartesianGrid vertical={false} stroke={colors.grid} />\n                            <XAxis dataKey=\"label\" tick={colors.axisText} tickLine={false} axisLine={{stroke: colors.grid}}\n                                   interval=\"preserveStartEnd\" minTickGap={12} />\n                            <YAxis allowDecimals={false} tick={colors.axisText} tickLine={false} axisLine={false}\n                                   width={valueAxisWidthOf(highestValue, formatValue)} tickFormatter={(value) => formatValue(value)} />\n                            <Tooltip cursor={{fill: colors.hover}} content={<ChartTooltip render={tooltipOf} />} />\n                            {referenceLine && (\n                                // extendDomain: si la referencia queda arriba de todas las columnas, el eje crece hasta ella\n                                <ReferenceLine y={referenceLine.value} ifOverflow=\"extendDomain\" stroke={colors.axis} strokeDasharray=\"4 4\" />\n                            )}\n                            {drawnSeries.map((item) => (\n                                // una serie: currentColor (el tono de la caja); varias: el color de cada una\n                                <Bar key={item.key} dataKey={item.key} fill={isSingleSeries ? 'currentColor' : item.color} maxBarSize={28}\n                                     radius={[4, 4, 0, 0]} isAnimationActive={false} cursor={onSelect ? 'pointer' : 'default'}\n                                     onClick={onSelect ? (entry) => onSelect(entry.payload, item.key) : undefined} />\n                            ))}\n                        </BarChart>\n                    </ResponsiveContainer>\n                </ColumnChartPart>\n            )}\n            <ChartLegend series={drawnSeries} ariaLabel={t('charts.legend')} />\n            <ReferenceCaption referenceLine={referenceLine} />\n        </Box>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/ui/metrics/LineChart.js

@@ -10,6 +10,7 @@ import ChartTooltip from "./ChartTooltip.js";
 import TableToggle, { CHART_VIEW } from "./TableToggle.js";
 import { useChartColors, resolvedSeriesOf, highestValueOf, ChartTable, valueAxisWidthOf, ChartLegend, ReferenceCaption } from "./chartParts.js";
 import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaLineChart";
 const LineChartPart = piecePart(THEME_NAME, "Chart", Box);
 const LINE_WIDTH_PIXELS = 2;
@@ -29,8 +30,10 @@ function LineChart(props) {
     renderTooltip,
     texts,
     defaultView = CHART_VIEW.chart,
-    onViewChange
+    onViewChange,
+    ...unknownProps
   } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("common", texts);
   const { formatNumber } = useFormatters();
   const formatValue = formatValueProp ?? formatNumber;

package/dist/ui/metrics/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.js","sources":["../../../src/ui/metrics/LineChart.jsx"],"sourcesContent":["// Líneas a lo largo del tiempo, de una serie o de varias que se comparan (ventas contra devoluciones, este año contra el\n// pasado), dibujadas con Recharts. Lo que comparte con ColumnChart (ejes, tabla, leyenda, línea de referencia) vive en\n// chartParts.jsx.\n//\n// Las reglas de la guía de Apple (HIG «Charts» y «Charting data»):\n//   - líneas para ver la tendencia; columnas (ColumnChart) para comparar periodos sueltos;\n//   - cada serie con su color Y su trazo (continuo, rayado, punteado), con su punto en cada periodo: el color no va solo;\n//   - una serie sin leyenda (el título ya dice qué es); varias, con leyenda abajo; toda gráfica con su vista de tabla;\n//   - el globo de un periodo dice el valor de cada serie.\n//\n//   <LineChart data={[{key: '2026-4', label: 'abr', sales: 120, returns: 8}, …]} periodLabel=\"Mes\"\n//              series={[{key: 'sales', label: 'Ventas'}, {key: 'returns', label: 'Devoluciones', tone: 'error'}]}\n//              ariaLabel=\"Ventas y devoluciones por mes\" emptyLabel=\"Sin datos\" />\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaLineChart con defaultProps y\n// styleOverrides de sus partes: chart.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport {CartesianGrid, Line, LineChart as RechartsLineChart, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';\n\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport ChartTooltip from '@/ui/metrics/ChartTooltip.jsx';\nimport TableToggle, {CHART_VIEW} from '@/ui/metrics/TableToggle.jsx';\nimport {\n    ChartLegend, ChartTable, ReferenceCaption, highestValueOf, resolvedSeriesOf, useChartColors, valueAxisWidthOf,\n} from '@/ui/metrics/chartParts.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaLineChart)\nconst THEME_NAME = 'CalcitaLineChart';\nconst LineChartPart = piecePart(THEME_NAME, 'Chart', Box);\n\n// el grueso de la línea y el tamaño de su punto (px): se ven en el teléfono sin tapar a la vecina\nconst LINE_WIDTH_PIXELS = 2;\nconst DOT_RADIUS_PIXELS = 3;\nconst ACTIVE_DOT_RADIUS_PIXELS = 5;\n\n/**\n * @param {object} props\n * @param {Array<Record<string, any>>} props.data un renglón por periodo: {key, label, [llave de cada serie]: número}\n * @param {Array<{key: string, label: string, tone?: 'primary'|'secondary'|'success'|'warning'|'error'|'info', dash?: string}>} props.series\n *     la llave de cada serie en data, su nombre ya traducido, su color y su trazo (por omisión, en orden)\n * @param {string} props.periodLabel encabezado de la primera columna de la tabla («Mes»), ya traducido\n * @param {string} props.ariaLabel\n * @param {string} props.emptyLabel\n * @param {number} [props.height]\n * @param {(value: number) => string} [props.formatValue] cómo se escribe un valor (en el eje, en la tabla y en el globo)\n * @param {{value: number, label: string}} [props.referenceLine] línea de referencia (la meta) con su rótulo ya traducido\n * @param {(row: any) => void} [props.onSelect] recibe el renglón de data del periodo que se picó\n * @param {(row: any) => import('react').ReactNode} [props.renderTooltip] lo que dice el globo de un periodo; por omisión su\n *     nombre y el valor de cada serie\n * @param {'chart'|'table'} [props.defaultView] cómo se ve al abrir (CHART_VIEW); por omisión dibujada\n * @param {(view: 'chart'|'table') => void} [props.onViewChange] la persona cambió a la tabla o a la gráfica\n * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {charts: {viewAsTable, viewAsChart, legend}}\n */\nexport default function LineChart(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaLineChart.defaultProps) y encima lo que llega aquí\n    const {\n    data, series, periodLabel, ariaLabel, emptyLabel, height = 220, formatValue: formatValueProp, referenceLine, onSelect, renderTooltip, texts, defaultView = CHART_VIEW.chart, onViewChange,\n} = usePieceProps(props, THEME_NAME);\n    const {t} = useToolkitTranslation('common', texts);\n    const {formatNumber} = useFormatters();\n    const formatValue = formatValueProp ?? formatNumber;\n    const [asTable, setAsTable] = useState(defaultView === CHART_VIEW.table);\n    const toggleView = () => {\n        setAsTable(!asTable);\n        onViewChange?.(asTable ? CHART_VIEW.chart : CHART_VIEW.table);\n    };\n    const colors = useChartColors();\n    const drawnSeries = resolvedSeriesOf(series, colors.palette);\n\n    // guard clause: sin datos se dice, no se pinta un eje vacío\n    if (!data.length) {\n        return <Typography variant=\"body2\" color=\"text.secondary\">{emptyLabel}</Typography>;\n    }\n\n    const highestValue = highestValueOf(data, drawnSeries, referenceLine);\n    // el periodo que se picó: recharts da su posición en data (a veces como texto)\n    const selectPeriodAt = (activeIndex) => {\n        const row = data[Number(activeIndex)];\n        if (row) {\n            onSelect(row);\n        }\n    };\n    const tooltipOf = renderTooltip ?? ((row) => (\n        <>\n            <strong>{row.label}</strong>\n            {drawnSeries.map((item) => <Box key={item.key}>{item.label}: {formatValue(row[item.key])}</Box>)}\n        </>\n    ));\n\n    return (\n        <Box>\n            <TableToggle asTable={asTable} onToggle={toggleView} texts={texts} />\n            {asTable ? (\n                <ChartTable data={data} series={drawnSeries} periodLabel={periodLabel} formatValue={formatValue} height={height} />\n            ) : (\n                <LineChartPart role=\"img\" aria-label={ariaLabel} ownSx={{height}}>\n                    <ResponsiveContainer width=\"100%\" height=\"100%\">\n                        {/* OJO: recharts 3 avisa el clic con el índice del periodo (activeIndex), ya no con activePayload (el de\n                            la versión 2) */}\n                        <RechartsLineChart data={data} margin={{top: 8, right: 12, bottom: 0, left: -8}}\n                                           onClick={onSelect ? (state) => selectPeriodAt(state?.activeIndex) : undefined}>\n                            <CartesianGrid vertical={false} stroke={colors.grid} />\n                            <XAxis dataKey=\"label\" tick={colors.axisText} tickLine={false} axisLine={{stroke: colors.grid}}\n                                   interval=\"preserveStartEnd\" minTickGap={12} />\n                            <YAxis allowDecimals={false} tick={colors.axisText} tickLine={false} axisLine={false}\n                                   width={valueAxisWidthOf(highestValue, formatValue)} tickFormatter={(value) => formatValue(value)} />\n                            <Tooltip cursor={{stroke: colors.grid}} content={<ChartTooltip render={tooltipOf} />} />\n                            {referenceLine && (\n                                <ReferenceLine y={referenceLine.value} ifOverflow=\"extendDomain\" stroke={colors.axis} strokeDasharray=\"4 4\" />\n                            )}\n                            {drawnSeries.map((item) => (\n                                <Line key={item.key} type=\"monotone\" dataKey={item.key} name={item.label} stroke={item.color}\n                                      strokeWidth={LINE_WIDTH_PIXELS} strokeDasharray={item.dash} isAnimationActive={false}\n                                      dot={{r: DOT_RADIUS_PIXELS, fill: item.color, strokeWidth: 0}}\n                                      activeDot={{r: ACTIVE_DOT_RADIUS_PIXELS, cursor: onSelect ? 'pointer' : 'default'}} />\n                            ))}\n                        </RechartsLineChart>\n                    </ResponsiveContainer>\n                </LineChartPart>\n            )}\n            <ChartLegend series={drawnSeries} showsDash ariaLabel={t('charts.legend')} />\n            <ReferenceCaption referenceLine={referenceLine} />\n        </Box>\n    );\n}\n"],"names":["RechartsLineChart"],"mappings":";;;;;;;;;;;;AAiCA,MAAM,aAAa;AACnB,MAAM,gBAAgB,UAAU,YAAY,SAAS,GAAG;AAGxD,MAAM,oBAAoB;AAC1B,MAAM,oBAAoB;AAC1B,MAAM,2BAA2B;AAoBjC,SAAwB,UAAU,OAAO;AAErC,QAAM;AAAA,IACN;AAAA,IAAM;AAAA,IAAQ;AAAA,IAAa;AAAA,IAAW;AAAA,IAAY,SAAS;AAAA,IAAK,aAAa;AAAA,IAAiB;AAAA,IAAe;AAAA,IAAU;AAAA,IAAe;AAAA,IAAO,cAAc,WAAW;AAAA,IAAO;AAAA,EAAA,IAC7K,cAAc,OAAO,UAAU;AAC/B,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,EAAC,aAAA,IAAgB,cAAA;AACvB,QAAM,cAAc,mBAAmB;AACvC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,gBAAgB,WAAW,KAAK;AACvE,QAAM,aAAa,MAAM;AACrB,eAAW,CAAC,OAAO;AACnB,mBAAe,UAAU,WAAW,QAAQ,WAAW,KAAK;AAAA,EAChE;AACA,QAAM,SAAS,eAAA;AACf,QAAM,cAAc,iBAAiB,QAAQ,OAAO,OAAO;AAG3D,MAAI,CAAC,KAAK,QAAQ;AACd,+BAAQ,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAAkB,UAAA,YAAW;AAAA,EAC1E;AAEA,QAAM,eAAe,eAAe,MAAM,aAAa,aAAa;AAEpE,QAAM,iBAAiB,CAAC,gBAAgB;AACpC,UAAM,MAAM,KAAK,OAAO,WAAW,CAAC;AACpC,QAAI,KAAK;AACL,eAAS,GAAG;AAAA,IAChB;AAAA,EACJ;AACA,QAAM,YAAY,kBAAkB,CAAC,QACjC,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA,oBAAC,UAAA,EAAQ,cAAI,MAAA,CAAM;AAAA,IAClB,YAAY,IAAI,CAAC,8BAAU,KAAA,EAAoB,UAAA;AAAA,MAAA,KAAK;AAAA,MAAM;AAAA,MAAG,YAAY,IAAI,KAAK,GAAG,CAAC;AAAA,IAAA,EAAA,GAAlD,KAAK,GAA+C,CAAM;AAAA,EAAA,EAAA,CACnG;AAGJ,8BACK,KAAA,EACG,UAAA;AAAA,IAAA,oBAAC,aAAA,EAAY,SAAkB,UAAU,YAAY,OAAc;AAAA,IAClE,UACG,oBAAC,YAAA,EAAW,MAAY,QAAQ,aAAa,aAA0B,aAA0B,OAAA,CAAgB,IAEjH,oBAAC,eAAA,EAAc,MAAK,OAAM,cAAY,WAAW,OAAO,EAAC,OAAA,GACrD,UAAA,oBAAC,qBAAA,EAAoB,OAAM,QAAO,QAAO,QAGrC,UAAA;AAAA,MAACA;AAAAA,MAAA;AAAA,QAAkB;AAAA,QAAY,QAAQ,EAAC,KAAK,GAAG,OAAO,IAAI,QAAQ,GAAG,MAAM,GAAA;AAAA,QACzD,SAAS,WAAW,CAAC,UAAU,eAAe,OAAO,WAAW,IAAI;AAAA,QACnF,UAAA;AAAA,UAAA,oBAAC,eAAA,EAAc,UAAU,OAAO,QAAQ,OAAO,MAAM;AAAA,UACrD;AAAA,YAAC;AAAA,YAAA;AAAA,cAAM,SAAQ;AAAA,cAAQ,MAAM,OAAO;AAAA,cAAU,UAAU;AAAA,cAAO,UAAU,EAAC,QAAQ,OAAO,KAAA;AAAA,cAClF,UAAS;AAAA,cAAmB,YAAY;AAAA,YAAA;AAAA,UAAA;AAAA,UAC/C;AAAA,YAAC;AAAA,YAAA;AAAA,cAAM,eAAe;AAAA,cAAO,MAAM,OAAO;AAAA,cAAU,UAAU;AAAA,cAAO,UAAU;AAAA,cACxE,OAAO,iBAAiB,cAAc,WAAW;AAAA,cAAG,eAAe,CAAC,UAAU,YAAY,KAAK;AAAA,YAAA;AAAA,UAAA;AAAA,UACtG,oBAAC,SAAA,EAAQ,QAAQ,EAAC,QAAQ,OAAO,KAAA,GAAO,SAAS,oBAAC,cAAA,EAAa,QAAQ,WAAW,EAAA,CAAI;AAAA,UACrF,iBACG,oBAAC,eAAA,EAAc,GAAG,cAAc,OAAO,YAAW,gBAAe,QAAQ,OAAO,MAAM,iBAAgB,MAAA,CAAM;AAAA,UAE/G,YAAY,IAAI,CAAC,SACd;AAAA,YAAC;AAAA,YAAA;AAAA,cAAoB,MAAK;AAAA,cAAW,SAAS,KAAK;AAAA,cAAK,MAAM,KAAK;AAAA,cAAO,QAAQ,KAAK;AAAA,cACjF,aAAa;AAAA,cAAmB,iBAAiB,KAAK;AAAA,cAAM,mBAAmB;AAAA,cAC/E,KAAK,EAAC,GAAG,mBAAmB,MAAM,KAAK,OAAO,aAAa,EAAA;AAAA,cAC3D,WAAW,EAAC,GAAG,0BAA0B,QAAQ,WAAW,YAAY,UAAA;AAAA,YAAS;AAAA,YAH5E,KAAK;AAAA,UAAA,CAInB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAET,EAAA,CACJ;AAAA,IAEJ,oBAAC,eAAY,QAAQ,aAAa,WAAS,MAAC,WAAW,EAAE,eAAe,GAAG;AAAA,IAC3E,oBAAC,oBAAiB,cAAA,CAA8B;AAAA,EAAA,GACpD;AAER;"}
+{"version":3,"file":"LineChart.js","sources":["../../../src/ui/metrics/LineChart.jsx"],"sourcesContent":["// Líneas a lo largo del tiempo, de una serie o de varias que se comparan (ventas contra devoluciones, este año contra el\n// pasado), dibujadas con Recharts. Lo que comparte con ColumnChart (ejes, tabla, leyenda, línea de referencia) vive en\n// chartParts.jsx.\n//\n// Las reglas de la guía de Apple (HIG «Charts» y «Charting data»):\n//   - líneas para ver la tendencia; columnas (ColumnChart) para comparar periodos sueltos;\n//   - cada serie con su color Y su trazo (continuo, rayado, punteado), con su punto en cada periodo: el color no va solo;\n//   - una serie sin leyenda (el título ya dice qué es); varias, con leyenda abajo; toda gráfica con su vista de tabla;\n//   - el globo de un periodo dice el valor de cada serie.\n//\n//   <LineChart data={[{key: '2026-4', label: 'abr', sales: 120, returns: 8}, …]} periodLabel=\"Mes\"\n//              series={[{key: 'sales', label: 'Ventas'}, {key: 'returns', label: 'Devoluciones', tone: 'error'}]}\n//              ariaLabel=\"Ventas y devoluciones por mes\" emptyLabel=\"Sin datos\" />\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaLineChart con defaultProps y\n// styleOverrides de sus partes: chart.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport {CartesianGrid, Line, LineChart as RechartsLineChart, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';\n\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport ChartTooltip from '@/ui/metrics/ChartTooltip.jsx';\nimport TableToggle, {CHART_VIEW} from '@/ui/metrics/TableToggle.jsx';\nimport {\n    ChartLegend, ChartTable, ReferenceCaption, highestValueOf, resolvedSeriesOf, useChartColors, valueAxisWidthOf,\n} from '@/ui/metrics/chartParts.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaLineChart)\nconst THEME_NAME = 'CalcitaLineChart';\nconst LineChartPart = piecePart(THEME_NAME, 'Chart', Box);\n\n// el grueso de la línea y el tamaño de su punto (px): se ven en el teléfono sin tapar a la vecina\nconst LINE_WIDTH_PIXELS = 2;\nconst DOT_RADIUS_PIXELS = 3;\nconst ACTIVE_DOT_RADIUS_PIXELS = 5;\n\n/**\n * @param {object} props\n * @param {Array<Record<string, any>>} props.data un renglón por periodo: {key, label, [llave de cada serie]: número}\n * @param {Array<{key: string, label: string, tone?: 'primary'|'secondary'|'success'|'warning'|'error'|'info', dash?: string}>} props.series\n *     la llave de cada serie en data, su nombre ya traducido, su color y su trazo (por omisión, en orden)\n * @param {string} props.periodLabel encabezado de la primera columna de la tabla («Mes»), ya traducido\n * @param {string} props.ariaLabel\n * @param {string} props.emptyLabel\n * @param {number} [props.height]\n * @param {(value: number) => string} [props.formatValue] cómo se escribe un valor (en el eje, en la tabla y en el globo)\n * @param {{value: number, label: string}} [props.referenceLine] línea de referencia (la meta) con su rótulo ya traducido\n * @param {(row: any) => void} [props.onSelect] recibe el renglón de data del periodo que se picó\n * @param {(row: any) => import('react').ReactNode} [props.renderTooltip] lo que dice el globo de un periodo; por omisión su\n *     nombre y el valor de cada serie\n * @param {'chart'|'table'} [props.defaultView] cómo se ve al abrir (CHART_VIEW); por omisión dibujada\n * @param {(view: 'chart'|'table') => void} [props.onViewChange] la persona cambió a la tabla o a la gráfica\n * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {charts: {viewAsTable, viewAsChart, legend}}\n */\nexport default function LineChart(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaLineChart.defaultProps) y encima lo que llega aquí\n    const {\n    data, series, periodLabel, ariaLabel, emptyLabel, height = 220, formatValue: formatValueProp, referenceLine, onSelect, renderTooltip, texts, defaultView = CHART_VIEW.chart, onViewChange,\n    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const {formatNumber} = useFormatters();\n    const formatValue = formatValueProp ?? formatNumber;\n    const [asTable, setAsTable] = useState(defaultView === CHART_VIEW.table);\n    const toggleView = () => {\n        setAsTable(!asTable);\n        onViewChange?.(asTable ? CHART_VIEW.chart : CHART_VIEW.table);\n    };\n    const colors = useChartColors();\n    const drawnSeries = resolvedSeriesOf(series, colors.palette);\n\n    // guard clause: sin datos se dice, no se pinta un eje vacío\n    if (!data.length) {\n        return <Typography variant=\"body2\" color=\"text.secondary\">{emptyLabel}</Typography>;\n    }\n\n    const highestValue = highestValueOf(data, drawnSeries, referenceLine);\n    // el periodo que se picó: recharts da su posición en data (a veces como texto)\n    const selectPeriodAt = (activeIndex) => {\n        const row = data[Number(activeIndex)];\n        if (row) {\n            onSelect(row);\n        }\n    };\n    const tooltipOf = renderTooltip ?? ((row) => (\n        <>\n            <strong>{row.label}</strong>\n            {drawnSeries.map((item) => <Box key={item.key}>{item.label}: {formatValue(row[item.key])}</Box>)}\n        </>\n    ));\n\n    return (\n        <Box>\n            <TableToggle asTable={asTable} onToggle={toggleView} texts={texts} />\n            {asTable ? (\n                <ChartTable data={data} series={drawnSeries} periodLabel={periodLabel} formatValue={formatValue} height={height} />\n            ) : (\n                <LineChartPart role=\"img\" aria-label={ariaLabel} ownSx={{height}}>\n                    <ResponsiveContainer width=\"100%\" height=\"100%\">\n                        {/* OJO: recharts 3 avisa el clic con el índice del periodo (activeIndex), ya no con activePayload (el de\n                            la versión 2) */}\n                        <RechartsLineChart data={data} margin={{top: 8, right: 12, bottom: 0, left: -8}}\n                                           onClick={onSelect ? (state) => selectPeriodAt(state?.activeIndex) : undefined}>\n                            <CartesianGrid vertical={false} stroke={colors.grid} />\n                            <XAxis dataKey=\"label\" tick={colors.axisText} tickLine={false} axisLine={{stroke: colors.grid}}\n                                   interval=\"preserveStartEnd\" minTickGap={12} />\n                            <YAxis allowDecimals={false} tick={colors.axisText} tickLine={false} axisLine={false}\n                                   width={valueAxisWidthOf(highestValue, formatValue)} tickFormatter={(value) => formatValue(value)} />\n                            <Tooltip cursor={{stroke: colors.grid}} content={<ChartTooltip render={tooltipOf} />} />\n                            {referenceLine && (\n                                <ReferenceLine y={referenceLine.value} ifOverflow=\"extendDomain\" stroke={colors.axis} strokeDasharray=\"4 4\" />\n                            )}\n                            {drawnSeries.map((item) => (\n                                <Line key={item.key} type=\"monotone\" dataKey={item.key} name={item.label} stroke={item.color}\n                                      strokeWidth={LINE_WIDTH_PIXELS} strokeDasharray={item.dash} isAnimationActive={false}\n                                      dot={{r: DOT_RADIUS_PIXELS, fill: item.color, strokeWidth: 0}}\n                                      activeDot={{r: ACTIVE_DOT_RADIUS_PIXELS, cursor: onSelect ? 'pointer' : 'default'}} />\n                            ))}\n                        </RechartsLineChart>\n                    </ResponsiveContainer>\n                </LineChartPart>\n            )}\n            <ChartLegend series={drawnSeries} showsDash ariaLabel={t('charts.legend')} />\n            <ReferenceCaption referenceLine={referenceLine} />\n        </Box>\n    );\n}\n"],"names":["RechartsLineChart"],"mappings":"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"}

package/dist/ui/metrics/MetricCard.js

@@ -15,6 +15,7 @@ import { piecePart, usePieceProps } from "../../theme/themePieces.js";
 import { lightDarkStylesOf } from "../../theme/lightDarkStyles.js";
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 import RemoveIcon from "@mui/icons-material/Remove";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const TONES = ["info", "success", "warning", "error"];
 const TREND_DIRECTION = Object.freeze({ up: "up", down: "down", flat: "flat" });
 const TREND_ICONS = Object.freeze({
@@ -67,8 +68,10 @@ function MetricCard(props) {
     icon,
     children,
     onClick,
-    texts
+    texts,
+    ...unknownProps
   } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
   const { Link } = useToolkitNavigation();
   const paletteTone = TONES.includes(tone) ? tone : "info";
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [