@stackcraftmx/calcita 0.32.2 → 0.51.0

package/dist/ui/navigation/LanguageToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"LanguageToggle.js","sources":["../../../src/ui/navigation/LanguageToggle.jsx"],"sourcesContent":["// El botón de idioma de la barra y de las pantallas de entrada.\n//\n// Los idiomas son los que ofrece la app (ToolkitProvider `languages`; por omisión español e inglés):\n//   - con dos, un botón que cambia al otro (dice su código: «EN»);\n//   - con tres o más, el botón dice el de ahora y abre un menú con cada uno en su propio idioma («Português»), como lo busca\n//     quien lo habla; el elegido con su palomita.\n//\n// Solo avisa el idioma nuevo (onLanguageChange de ToolkitProvider). Lo demás lo hace el proyecto: su i18n, el header\n// Accept-Language de las peticiones y volver a pedir los datos del servidor, que traen textos traducidos. Las traducciones de\n// un idioma que agregue el proyecto van en `texts` de ToolkitProvider: el paquete solo trae español e inglés.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaLanguageToggle con defaultProps y\n// styleOverrides de sus partes: button.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Button from '@mui/material/Button';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\n\nimport {useToolkitSettings} from '@/toolkit/toolkitContext.js';\nimport {DEFAULT_LANGUAGES} from '@/toolkit/toolkitSettings.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\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.CalcitaLanguageToggle)\nconst THEME_NAME = 'CalcitaLanguageToggle';\nconst LanguageButton = piecePart(THEME_NAME, 'Button', Button);\n\n/** Los idiomas que traen los textos del paquete. */\nexport const LANGUAGES = Object.freeze(DEFAULT_LANGUAGES.map((entry) => entry.code));\n\n/**\n * @param {object} [props]\n * @param {boolean} [props.inverted] texto blanco para fondos oscuros\n * @param {(language: string) => void} [props.onChange] además de avisar a ToolkitProvider, cada que se elige un idioma\n * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {language: {switchToNamed, choose}}\n */\nexport default function LanguageToggle(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaLanguageToggle.defaultProps) y encima lo que llega aquí\n    const {inverted = false, onChange, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t, language, changeLanguage} = useToolkitTranslation('common', texts);\n    const {languages = DEFAULT_LANGUAGES} = useToolkitSettings();\n    const [menuAnchor, setMenuAnchor] = useState(null);\n    const current = languages.find((entry) => entry.code === language) ?? languages[0];\n    const buttonSx = {minWidth: 0, fontWeight: 700, letterSpacing: '0.08em', color: inverted ? 'common.white' : 'text.secondary'};\n\n    const choose = (code) => {\n        setMenuAnchor(null);\n        changeLanguage(code);\n        onChange?.(code);\n    };\n\n    // con dos: un botón que cambia al otro\n    if (languages.length <= 2) {\n        const next = languages.find((entry) => entry.code !== current.code) ?? current;\n        // el aviso de siempre para español e inglés; para otro idioma, con su nombre\n        const ariaLabel = t(`language.switchTo.${next.code}`, {defaultValue: t('language.switchToNamed', {name: next.label})});\n        return (\n            <LanguageButton size=\"small\" variant=\"text\" onClick={() => choose(next.code)} lang={next.code} aria-label={ariaLabel} ownSx={buttonSx}>\n                {next.code.toUpperCase()}\n            </LanguageButton>\n        );\n    }\n\n    // con tres o más: el de ahora y un menú con todos\n    return (\n        <>\n            <LanguageButton size=\"small\" variant=\"text\" onClick={(event) => setMenuAnchor(event.currentTarget)} aria-haspopup=\"menu\"\n                    aria-expanded={Boolean(menuAnchor)} aria-label={t('language.choose', {name: current.label})} ownSx={buttonSx}>\n                {current.code.toUpperCase()}\n            </LanguageButton>\n            <Menu anchorEl={menuAnchor} open={Boolean(menuAnchor)} onClose={() => setMenuAnchor(null)}>\n                {languages.map((entry) => (\n                    <MenuItem key={entry.code} lang={entry.code} selected={entry.code === current.code} onClick={() => choose(entry.code)}>\n                        {entry.label}\n                    </MenuItem>\n                ))}\n            </Menu>\n        </>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AA2BA,MAAM,aAAa;AACnB,MAAM,iBAAiB,UAAU,YAAY,UAAU,MAAM;AAGtD,MAAM,YAAY,OAAO,OAAO,kBAAkB,IAAI,CAAC,UAAU,MAAM,IAAI,CAAC;AAQnF,SAAwB,eAAe,OAAO;AAE1C,QAAM,EAAC,WAAW,OAAO,UAAU,OAAO,GAAG,iBAAgB,cAAc,OAAO,UAAU;AAC5F,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,GAAG,UAAU,mBAAkB,sBAAsB,UAAU,KAAK;AAC3E,QAAM,EAAC,YAAY,kBAAA,IAAqB,mBAAA;AACxC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,IAAI;AACjD,QAAM,UAAU,UAAU,KAAK,CAAC,UAAU,MAAM,SAAS,QAAQ,KAAK,UAAU,CAAC;AACjF,QAAM,WAAW,EAAC,UAAU,GAAG,YAAY,KAAK,eAAe,UAAU,OAAO,WAAW,iBAAiB,iBAAA;AAE5G,QAAM,SAAS,CAAC,SAAS;AACrB,kBAAc,IAAI;AAClB,mBAAe,IAAI;AACnB,eAAW,IAAI;AAAA,EACnB;AAGA,MAAI,UAAU,UAAU,GAAG;AACvB,UAAM,OAAO,UAAU,KAAK,CAAC,UAAU,MAAM,SAAS,QAAQ,IAAI,KAAK;AAEvE,UAAM,YAAY,EAAE,qBAAqB,KAAK,IAAI,IAAI,EAAC,cAAc,EAAE,0BAA0B,EAAC,MAAM,KAAK,MAAA,CAAM,GAAE;AACrH,WACI,oBAAC,kBAAe,MAAK,SAAQ,SAAQ,QAAO,SAAS,MAAM,OAAO,KAAK,IAAI,GAAG,MAAM,KAAK,MAAM,cAAY,WAAW,OAAO,UACxH,UAAA,KAAK,KAAK,YAAA,EAAY,CAC3B;AAAA,EAER;AAGA,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAe,MAAK;AAAA,QAAQ,SAAQ;AAAA,QAAO,SAAS,CAAC,UAAU,cAAc,MAAM,aAAa;AAAA,QAAG,iBAAc;AAAA,QAC1G,iBAAe,QAAQ,UAAU;AAAA,QAAG,cAAY,EAAE,mBAAmB,EAAC,MAAM,QAAQ,OAAM;AAAA,QAAG,OAAO;AAAA,QACvG,UAAA,QAAQ,KAAK,YAAA;AAAA,MAAY;AAAA,IAAA;AAAA,wBAE7B,MAAA,EAAK,UAAU,YAAY,MAAM,QAAQ,UAAU,GAAG,SAAS,MAAM,cAAc,IAAI,GACnF,oBAAU,IAAI,CAAC,UACZ,oBAAC,UAAA,EAA0B,MAAM,MAAM,MAAM,UAAU,MAAM,SAAS,QAAQ,MAAM,SAAS,MAAM,OAAO,MAAM,IAAI,GAC/G,UAAA,MAAM,SADI,MAAM,IAErB,CACH,EAAA,CACL;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"LanguageToggle.js","sources":["../../../src/ui/navigation/LanguageToggle.jsx"],"sourcesContent":["// El botón de idioma de la barra y de las pantallas de entrada.\n//\n// Los idiomas son los que ofrece la app (ToolkitProvider `languages`; por omisión español e inglés):\n//   - con dos, un botón que cambia al otro (dice su código: «EN»);\n//   - con tres o más, el botón dice el de ahora y abre un menú con cada uno en su propio idioma («Português»), como lo busca\n//     quien lo habla; el elegido con su palomita.\n//\n// Solo avisa el idioma nuevo (onLanguageChange de ToolkitProvider). Lo demás lo hace el proyecto: su i18n, el header\n// Accept-Language de las peticiones y volver a pedir los datos del servidor, que traen textos traducidos. Las traducciones de\n// un idioma que agregue el proyecto van en `texts` de ToolkitProvider: el paquete solo trae español e inglés.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaLanguageToggle con defaultProps y\n// styleOverrides de sus partes: button.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Button from '@mui/material/Button';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\n\nimport {useToolkitSettings} from '@/toolkit/toolkitContext.js';\nimport {DEFAULT_LANGUAGES} from '@/toolkit/toolkitSettings.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {piecePart, usePieceProps, withPieceSlots} 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.CalcitaLanguageToggle)\nconst THEME_NAME = 'CalcitaLanguageToggle';\nconst LanguageButton = piecePart(THEME_NAME, 'Button', Button);\n\n/** Los idiomas que traen los textos del paquete. */\nexport const LANGUAGES = Object.freeze(DEFAULT_LANGUAGES.map((entry) => entry.code));\n\n/**\n * @param {object} [props]\n * @param {boolean} [props.inverted] texto blanco para fondos oscuros\n * @param {(language: string) => void} [props.onChange] además de avisar a ToolkitProvider, cada que se elige un idioma\n * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {language: {switchToNamed, choose}}\n */\nfunction LanguageToggleContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaLanguageToggle.defaultProps) y encima lo que llega aquí\n    const {inverted = false, onChange, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t, language, changeLanguage} = useToolkitTranslation('common', texts);\n    const {languages = DEFAULT_LANGUAGES} = useToolkitSettings();\n    const [menuAnchor, setMenuAnchor] = useState(null);\n    const current = languages.find((entry) => entry.code === language) ?? languages[0];\n    const buttonSx = {minWidth: 0, fontWeight: 700, letterSpacing: '0.08em', color: inverted ? 'common.white' : 'text.secondary'};\n\n    const choose = (code) => {\n        setMenuAnchor(null);\n        changeLanguage(code);\n        onChange?.(code);\n    };\n\n    // con dos: un botón que cambia al otro\n    if (languages.length <= 2) {\n        const next = languages.find((entry) => entry.code !== current.code) ?? current;\n        // el aviso de siempre para español e inglés; para otro idioma, con su nombre\n        const ariaLabel = t(`language.switchTo.${next.code}`, {defaultValue: t('language.switchToNamed', {name: next.label})});\n        return (\n            <LanguageButton size=\"small\" variant=\"text\" onClick={() => choose(next.code)} lang={next.code} aria-label={ariaLabel} ownSx={buttonSx}>\n                {next.code.toUpperCase()}\n            </LanguageButton>\n        );\n    }\n\n    // con tres o más: el de ahora y un menú con todos\n    return (\n        <>\n            <LanguageButton size=\"small\" variant=\"text\" onClick={(event) => setMenuAnchor(event.currentTarget)} aria-haspopup=\"menu\"\n                    aria-expanded={Boolean(menuAnchor)} aria-label={t('language.choose', {name: current.label})} ownSx={buttonSx}>\n                {current.code.toUpperCase()}\n            </LanguageButton>\n            <Menu anchorEl={menuAnchor} open={Boolean(menuAnchor)} onClose={() => setMenuAnchor(null)}>\n                {languages.map((entry) => (\n                    <MenuItem key={entry.code} lang={entry.code} selected={entry.code === current.code} onClick={() => choose(entry.code)}>\n                        {entry.label}\n                    </MenuItem>\n                ))}\n            </Menu>\n        </>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst LanguageToggle = withPieceSlots(LanguageToggleContent, THEME_NAME);\nexport default LanguageToggle;\n"],"names":[],"mappings":";;;;;;;;;;;AA2BA,MAAM,aAAa;AACnB,MAAM,iBAAiB,UAAU,YAAY,UAAU,MAAM;AAGtD,MAAM,YAAY,OAAO,OAAO,kBAAkB,IAAI,CAAC,UAAU,MAAM,IAAI,CAAC;AAQnF,SAAS,sBAAsB,OAAO;AAElC,QAAM,EAAC,WAAW,OAAO,UAAU,OAAO,GAAG,iBAAgB,cAAc,OAAO,UAAU;AAC5F,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,GAAG,UAAU,mBAAkB,sBAAsB,UAAU,KAAK;AAC3E,QAAM,EAAC,YAAY,kBAAA,IAAqB,mBAAA;AACxC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,IAAI;AACjD,QAAM,UAAU,UAAU,KAAK,CAAC,UAAU,MAAM,SAAS,QAAQ,KAAK,UAAU,CAAC;AACjF,QAAM,WAAW,EAAC,UAAU,GAAG,YAAY,KAAK,eAAe,UAAU,OAAO,WAAW,iBAAiB,iBAAA;AAE5G,QAAM,SAAS,CAAC,SAAS;AACrB,kBAAc,IAAI;AAClB,mBAAe,IAAI;AACnB,eAAW,IAAI;AAAA,EACnB;AAGA,MAAI,UAAU,UAAU,GAAG;AACvB,UAAM,OAAO,UAAU,KAAK,CAAC,UAAU,MAAM,SAAS,QAAQ,IAAI,KAAK;AAEvE,UAAM,YAAY,EAAE,qBAAqB,KAAK,IAAI,IAAI,EAAC,cAAc,EAAE,0BAA0B,EAAC,MAAM,KAAK,MAAA,CAAM,GAAE;AACrH,WACI,oBAAC,kBAAe,MAAK,SAAQ,SAAQ,QAAO,SAAS,MAAM,OAAO,KAAK,IAAI,GAAG,MAAM,KAAK,MAAM,cAAY,WAAW,OAAO,UACxH,UAAA,KAAK,KAAK,YAAA,EAAY,CAC3B;AAAA,EAER;AAGA,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAe,MAAK;AAAA,QAAQ,SAAQ;AAAA,QAAO,SAAS,CAAC,UAAU,cAAc,MAAM,aAAa;AAAA,QAAG,iBAAc;AAAA,QAC1G,iBAAe,QAAQ,UAAU;AAAA,QAAG,cAAY,EAAE,mBAAmB,EAAC,MAAM,QAAQ,OAAM;AAAA,QAAG,OAAO;AAAA,QACvG,UAAA,QAAQ,KAAK,YAAA;AAAA,MAAY;AAAA,IAAA;AAAA,wBAE7B,MAAA,EAAK,UAAU,YAAY,MAAM,QAAQ,UAAU,GAAG,SAAS,MAAM,cAAc,IAAI,GACnF,oBAAU,IAAI,CAAC,UACZ,oBAAC,UAAA,EAA0B,MAAM,MAAM,MAAM,UAAU,MAAM,SAAS,QAAQ,MAAM,SAAS,MAAM,OAAO,MAAM,IAAI,GAC/G,UAAA,MAAM,SADI,MAAM,IAErB,CACH,EAAA,CACL;AAAA,EAAA,GACJ;AAER;AAGA,MAAM,iBAAiB,eAAe,uBAAuB,UAAU;"}

package/dist/ui/navigation/PageBreadcrumbs.js

@@ -8,13 +8,13 @@ import Typography from "@mui/material/Typography";
 import { textSizeOf } from "../../theme/appleTracking.js";
 import ScrollableRow from "../layout/ScrollableRow.js";
 import NavigateNextIcon from "@mui/icons-material/NavigateNext";
-import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../../theme/themePieces.js";
 import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaPageBreadcrumbs";
 const BreadcrumbsRoot = piecePart(THEME_NAME, "Root", Breadcrumbs);
 const BreadcrumbsLink = piecePart(THEME_NAME, "Link", Link);
 const BreadcrumbsCurrent = piecePart(THEME_NAME, "Current", Typography);
-function PageBreadcrumbs(props) {
+function PageBreadcrumbsContent(props) {
   const { items, texts, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("layout", texts);
@@ -53,6 +53,7 @@ function PageBreadcrumbs(props) {
     }
   ) });
 }
+const PageBreadcrumbs = withPieceSlots(PageBreadcrumbsContent, THEME_NAME);
 export {
   PageBreadcrumbs as default
 };

package/dist/ui/navigation/PageBreadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageBreadcrumbs.js","sources":["../../../src/ui/navigation/PageBreadcrumbs.jsx"],"sourcesContent":["// Las migas de una pantalla (Inicio › Catálogos › Productos): cada una lleva a su pantalla menos la última, que es donde\n// ya está la persona. En el teléfono no se parten en dos renglones: se deslizan de lado en la misma tira que los filtros\n// rápidos (ScrollableRow: sin barra de desplazamiento, la orilla donde hay más se desvanece y se arrastra con el mouse).\n// Antes deslizaba la lista de MUI y salía la barra gris del navegador debajo de las migas.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaPageBreadcrumbs con defaultProps y\n// styleOverrides de sus partes: root, link, current.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport Breadcrumbs from '@mui/material/Breadcrumbs';\nimport Link from '@mui/material/Link';\nimport Typography from '@mui/material/Typography';\nimport {textSizeOf} from '@/theme/appleTracking.js';\nimport ScrollableRow from '@/ui/layout/ScrollableRow.jsx';\nimport NavigateNextIcon from '@mui/icons-material/NavigateNext';\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.CalcitaPageBreadcrumbs)\nconst THEME_NAME = 'CalcitaPageBreadcrumbs';\nconst BreadcrumbsRoot = piecePart(THEME_NAME, 'Root', Breadcrumbs);\nconst BreadcrumbsLink = piecePart(THEME_NAME, 'Link', Link);\nconst BreadcrumbsCurrent = piecePart(THEME_NAME, 'Current', Typography);\n\n/**\n * @param {object} props\n * @param {Array<{label: string, to?: string}>} props.items textos ya traducidos\n * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete\n */\nexport default function PageBreadcrumbs(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaPageBreadcrumbs.defaultProps) y encima lo que llega aquí\n    const {items, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('layout', texts);\n    const {Link: RouterLink} = useToolkitNavigation();\n    if (items.length === 0) {\n        return null;\n    }\n    return (\n        <ScrollableRow py={0}>\n            <BreadcrumbsRoot aria-label={t('breadcrumbs')} separator={<NavigateNextIcon fontSize=\"small\" />}\n                         ownSx={{...textSizeOf(13), color: 'text.secondary', flex: '0 0 auto', '& .MuiBreadcrumbs-ol': {flexWrap: 'nowrap'},\n                              '& .MuiBreadcrumbs-li': {flex: '0 0 auto'}}}>\n                {items.map((item, index) => {\n                    const isLast = index === items.length - 1;\n                    if (!isLast && item.to) {\n                        return (\n                            <BreadcrumbsLink key={`${item.to}-${index}`} component={RouterLink} to={item.to} underline=\"hover\" color=\"inherit\" ownSx={{fontSize: 'inherit'}}>\n                                {item.label}\n                            </BreadcrumbsLink>\n                        );\n                    }\n                    return (\n                        <BreadcrumbsCurrent key={`${item.label}-${index}`} component=\"span\" aria-current={isLast ? 'page' : undefined}\n                                    ownSx={{fontSize: 'inherit', fontWeight: isLast ? 500 : 400, color: isLast ? 'text.primary' : 'text.secondary'}}>\n                            {item.label}\n                        </BreadcrumbsCurrent>\n                    );\n                })}\n            </BreadcrumbsRoot>\n        </ScrollableRow>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAqBA,MAAM,aAAa;AACnB,MAAM,kBAAkB,UAAU,YAAY,QAAQ,WAAW;AACjE,MAAM,kBAAkB,UAAU,YAAY,QAAQ,IAAI;AAC1D,MAAM,qBAAqB,UAAU,YAAY,WAAW,UAAU;AAOtE,SAAwB,gBAAgB,OAAO;AAE3C,QAAM,EAAC,OAAO,OAAO,GAAG,iBAAgB,cAAc,OAAO,UAAU;AACvE,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,EAAC,MAAM,WAAA,IAAc,qBAAA;AAC3B,MAAI,MAAM,WAAW,GAAG;AACpB,WAAO;AAAA,EACX;AACA,SACI,oBAAC,eAAA,EAAc,IAAI,GACf,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAAgB,cAAY,EAAE,aAAa;AAAA,MAAG,WAAW,oBAAC,kBAAA,EAAiB,UAAS,QAAA,CAAQ;AAAA,MAChF,OAAO;AAAA,QAAC,GAAG,WAAW,EAAE;AAAA,QAAG,OAAO;AAAA,QAAkB,MAAM;AAAA,QAAY,wBAAwB,EAAC,UAAU,SAAA;AAAA,QACpG,wBAAwB,EAAC,MAAM,WAAA;AAAA,MAAU;AAAA,MACtD,UAAA,MAAM,IAAI,CAAC,MAAM,UAAU;AACxB,cAAM,SAAS,UAAU,MAAM,SAAS;AACxC,YAAI,CAAC,UAAU,KAAK,IAAI;AACpB,iBACI,oBAAC,mBAA4C,WAAW,YAAY,IAAI,KAAK,IAAI,WAAU,SAAQ,OAAM,WAAU,OAAO,EAAC,UAAU,UAAA,GAChI,UAAA,KAAK,MAAA,GADY,GAAG,KAAK,EAAE,IAAI,KAAK,EAEzC;AAAA,QAER;AACA,eACI;AAAA,UAAC;AAAA,UAAA;AAAA,YAAkD,WAAU;AAAA,YAAO,gBAAc,SAAS,SAAS;AAAA,YACxF,OAAO,EAAC,UAAU,WAAW,YAAY,SAAS,MAAM,KAAK,OAAO,SAAS,iBAAiB,iBAAA;AAAA,YACrG,UAAA,KAAK;AAAA,UAAA;AAAA,UAFe,GAAG,KAAK,KAAK,IAAI,KAAK;AAAA,QAAA;AAAA,MAKvD,CAAC;AAAA,IAAA;AAAA,EAAA,GAET;AAER;"}
+{"version":3,"file":"PageBreadcrumbs.js","sources":["../../../src/ui/navigation/PageBreadcrumbs.jsx"],"sourcesContent":["// Las migas de una pantalla (Inicio › Catálogos › Productos): cada una lleva a su pantalla menos la última, que es donde\n// ya está la persona. En el teléfono no se parten en dos renglones: se deslizan de lado en la misma tira que los filtros\n// rápidos (ScrollableRow: sin barra de desplazamiento, la orilla donde hay más se desvanece y se arrastra con el mouse).\n// Antes deslizaba la lista de MUI y salía la barra gris del navegador debajo de las migas.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaPageBreadcrumbs con defaultProps y\n// styleOverrides de sus partes: root, link, current.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport Breadcrumbs from '@mui/material/Breadcrumbs';\nimport Link from '@mui/material/Link';\nimport Typography from '@mui/material/Typography';\nimport {textSizeOf} from '@/theme/appleTracking.js';\nimport ScrollableRow from '@/ui/layout/ScrollableRow.jsx';\nimport NavigateNextIcon from '@mui/icons-material/NavigateNext';\nimport {piecePart, usePieceProps, withPieceSlots} 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.CalcitaPageBreadcrumbs)\nconst THEME_NAME = 'CalcitaPageBreadcrumbs';\nconst BreadcrumbsRoot = piecePart(THEME_NAME, 'Root', Breadcrumbs);\nconst BreadcrumbsLink = piecePart(THEME_NAME, 'Link', Link);\nconst BreadcrumbsCurrent = piecePart(THEME_NAME, 'Current', Typography);\n\n/**\n * @param {object} props\n * @param {Array<{label: string, to?: string}>} props.items textos ya traducidos\n * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete\n */\nfunction PageBreadcrumbsContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaPageBreadcrumbs.defaultProps) y encima lo que llega aquí\n    const {items, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('layout', texts);\n    const {Link: RouterLink} = useToolkitNavigation();\n    if (items.length === 0) {\n        return null;\n    }\n    return (\n        <ScrollableRow py={0}>\n            <BreadcrumbsRoot aria-label={t('breadcrumbs')} separator={<NavigateNextIcon fontSize=\"small\" />}\n                         ownSx={{...textSizeOf(13), color: 'text.secondary', flex: '0 0 auto', '& .MuiBreadcrumbs-ol': {flexWrap: 'nowrap'},\n                              '& .MuiBreadcrumbs-li': {flex: '0 0 auto'}}}>\n                {items.map((item, index) => {\n                    const isLast = index === items.length - 1;\n                    if (!isLast && item.to) {\n                        return (\n                            <BreadcrumbsLink key={`${item.to}-${index}`} component={RouterLink} to={item.to} underline=\"hover\" color=\"inherit\" ownSx={{fontSize: 'inherit'}}>\n                                {item.label}\n                            </BreadcrumbsLink>\n                        );\n                    }\n                    return (\n                        <BreadcrumbsCurrent key={`${item.label}-${index}`} component=\"span\" aria-current={isLast ? 'page' : undefined}\n                                    ownSx={{fontSize: 'inherit', fontWeight: isLast ? 500 : 400, color: isLast ? 'text.primary' : 'text.secondary'}}>\n                            {item.label}\n                        </BreadcrumbsCurrent>\n                    );\n                })}\n            </BreadcrumbsRoot>\n        </ScrollableRow>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst PageBreadcrumbs = withPieceSlots(PageBreadcrumbsContent, THEME_NAME);\nexport default PageBreadcrumbs;\n"],"names":[],"mappings":";;;;;;;;;;;;AAqBA,MAAM,aAAa;AACnB,MAAM,kBAAkB,UAAU,YAAY,QAAQ,WAAW;AACjE,MAAM,kBAAkB,UAAU,YAAY,QAAQ,IAAI;AAC1D,MAAM,qBAAqB,UAAU,YAAY,WAAW,UAAU;AAOtE,SAAS,uBAAuB,OAAO;AAEnC,QAAM,EAAC,OAAO,OAAO,GAAG,iBAAgB,cAAc,OAAO,UAAU;AACvE,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,EAAC,MAAM,WAAA,IAAc,qBAAA;AAC3B,MAAI,MAAM,WAAW,GAAG;AACpB,WAAO;AAAA,EACX;AACA,SACI,oBAAC,eAAA,EAAc,IAAI,GACf,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAAgB,cAAY,EAAE,aAAa;AAAA,MAAG,WAAW,oBAAC,kBAAA,EAAiB,UAAS,QAAA,CAAQ;AAAA,MAChF,OAAO;AAAA,QAAC,GAAG,WAAW,EAAE;AAAA,QAAG,OAAO;AAAA,QAAkB,MAAM;AAAA,QAAY,wBAAwB,EAAC,UAAU,SAAA;AAAA,QACpG,wBAAwB,EAAC,MAAM,WAAA;AAAA,MAAU;AAAA,MACtD,UAAA,MAAM,IAAI,CAAC,MAAM,UAAU;AACxB,cAAM,SAAS,UAAU,MAAM,SAAS;AACxC,YAAI,CAAC,UAAU,KAAK,IAAI;AACpB,iBACI,oBAAC,mBAA4C,WAAW,YAAY,IAAI,KAAK,IAAI,WAAU,SAAQ,OAAM,WAAU,OAAO,EAAC,UAAU,UAAA,GAChI,UAAA,KAAK,MAAA,GADY,GAAG,KAAK,EAAE,IAAI,KAAK,EAEzC;AAAA,QAER;AACA,eACI;AAAA,UAAC;AAAA,UAAA;AAAA,YAAkD,WAAU;AAAA,YAAO,gBAAc,SAAS,SAAS;AAAA,YACxF,OAAO,EAAC,UAAU,WAAW,YAAY,SAAS,MAAM,KAAK,OAAO,SAAS,iBAAiB,iBAAA;AAAA,YACrG,UAAA,KAAK;AAAA,UAAA;AAAA,UAFe,GAAG,KAAK,KAAK,IAAI,KAAK;AAAA,QAAA;AAAA,MAKvD,CAAC;AAAA,IAAA;AAAA,EAAA,GAET;AAER;AAGA,MAAM,kBAAkB,eAAe,wBAAwB,UAAU;"}

package/dist/ui/navigation/RouteTabs.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Chip from "@mui/material/Chip";
+import Stack from "@mui/material/Stack";
+import Tab from "@mui/material/Tab";
+import Tabs from "@mui/material/Tabs";
+import { useAccessChecker } from "../../access/useCan.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../../theme/themePieces.js";
+import { useToolkitNavigation } from "../../toolkit/toolkitContext.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
+import { queryTabOf, activeRouteTabOf, searchWithTab } from "./routeTabMatching.js";
+const ROUTE_TABS_MODE = Object.freeze({ path: "path", query: "query" });
+const DEFAULT_PARAM_NAME = "tab";
+const THEME_NAME = "CalcitaRouteTabs";
+const RouteTabsRoot = piecePart(THEME_NAME, "Root", Tabs);
+const RouteTab = piecePart(THEME_NAME, "Tab", Tab);
+const RouteTabBadge = piecePart(THEME_NAME, "Badge", Chip);
+const visibleTabsOf = (tabs, canAccess) => tabs.filter((tab) => !tab.hidden && canAccess(tab.access));
+function useActiveRouteTab(tabs, { mode = ROUTE_TABS_MODE.path, paramName = DEFAULT_PARAM_NAME } = {}) {
+  const { useLocation } = useToolkitNavigation();
+  const location = useLocation();
+  const visibleTabs = visibleTabsOf(tabs, useAccessChecker());
+  return mode === ROUTE_TABS_MODE.query ? queryTabOf(visibleTabs, location.search, paramName) : activeRouteTabOf(visibleTabs, location.pathname);
+}
+function RouteTabsContent(props) {
+  const { tabs, ariaLabel, mode = ROUTE_TABS_MODE.path, paramName = DEFAULT_PARAM_NAME, replace, onChange, sx, ...unknownProps } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
+  const { useLocation, Link } = useToolkitNavigation();
+  const location = useLocation();
+  const visibleTabs = visibleTabsOf(tabs, useAccessChecker());
+  const isQuery = mode === ROUTE_TABS_MODE.query;
+  const replacesHistory = replace ?? isQuery;
+  const activeKey = isQuery ? queryTabOf(visibleTabs, location.search, paramName) : activeRouteTabOf(visibleTabs, location.pathname);
+  return (
+    // value false: ninguna pestaña coincide (MUI avisa en la consola si el valor no es de ninguna)
+    /* @__PURE__ */ jsx(
+      RouteTabsRoot,
+      {
+        value: activeKey ?? false,
+        variant: "scrollable",
+        allowScrollButtonsMobile: true,
+        "aria-label": ariaLabel,
+        ownSx: { minWidth: 0 },
+        sx,
+        children: visibleTabs.map((tab) => {
+          const key = isQuery ? tab.value : tab.to;
+          const href = isQuery ? `${location.pathname}${searchWithTab(location.search, paramName, tab.value)}` : tab.to;
+          const label = tab.badge === void 0 || tab.badge === null ? tab.label : /* @__PURE__ */ jsxs(Stack, { component: "span", direction: "row", sx: { alignItems: "center", gap: 0.75 }, children: [
+            /* @__PURE__ */ jsx("span", { children: tab.label }),
+            /* @__PURE__ */ jsx(RouteTabBadge, { size: "small", label: tab.badge, ownSx: { height: 20, fontSize: 12, fontWeight: 600 } })
+          ] });
+          return /* @__PURE__ */ jsx(
+            RouteTab,
+            {
+              value: key,
+              label,
+              icon: tab.icon,
+              iconPosition: "start",
+              disabled: tab.disabled,
+              component: Link,
+              to: href,
+              replace: replacesHistory,
+              onClick: () => onChange?.(tab),
+              ownSx: { minHeight: 48 }
+            },
+            key
+          );
+        })
+      }
+    )
+  );
+}
+const RouteTabs = withPieceSlots(RouteTabsContent, THEME_NAME);
+export {
+  ROUTE_TABS_MODE,
+  RouteTabs as default,
+  useActiveRouteTab
+};
+//# sourceMappingURL=RouteTabs.js.map

package/dist/ui/navigation/RouteTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RouteTabs.js","sources":["../../../src/ui/navigation/RouteTabs.jsx"],"sourcesContent":["// Pestañas por ruta: cada pestaña es una dirección, así se puede compartir la liga a una pestaña y abrirla en otra pestaña\n// del navegador. Dos modos (mode):\n//   path    cada pestaña es una página de las rutas del proyecto (to); la activa sale de la dirección. Son lugares: cada una\n//           deja su paso en el historial y «atrás» regresa a la anterior\n//   query   pestañas dentro de una misma pantalla, guardadas en la consulta (?tab=pagos); useActiveRouteTab dice cuál pintar.\n//           Son la misma ficha vista por otro lado: por omisión REEMPLAZAN la entrada del historial, así «atrás» (y el\n//           BackButton) sacan de la ficha en vez de pasear por sus pestañas (trampa pagada: con ocho pestañas, «Volver a la\n//           lista» daba un paso por cada pestaña abierta). `replace` lo cambia en cualquiera de los dos modos\n//\n// Cada pestaña puede traer su ícono, un conteo (badge), su permiso (access, con la regla de ToolkitProvider: la que no se\n// puede ver no sale) o estar apagada. Usa la navegación que conectó el proyecto (react-router, Next o la del navegador).\n// En el teléfono se deslizan de lado.\n//\n//   <RouteTabs ariaLabel=\"Secciones del cliente\" tabs={[\n//       {to: `/customers/${id}`, label: 'Resumen', exact: true},\n//       {to: `/customers/${id}/payments`, label: 'Pagos', badge: 3},\n//       {to: `/customers/${id}/files`, label: 'Documentos', access: {ability: 'files.view'}},\n//   ]} />\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaRouteTabs con defaultProps y\n// styleOverrides de sus partes: root, tab, badge.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Chip from '@mui/material/Chip';\nimport Stack from '@mui/material/Stack';\nimport Tab from '@mui/material/Tab';\nimport Tabs from '@mui/material/Tabs';\n\nimport {useAccessChecker} from '@/access/useCan.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport {activeRouteTabOf, queryTabOf, searchWithTab} from '@/ui/navigation/routeTabMatching.js';\n\n/** Dónde vive la pestaña: en la ruta o en la consulta. */\nexport const ROUTE_TABS_MODE = Object.freeze({path: 'path', query: 'query'});\nconst DEFAULT_PARAM_NAME = 'tab';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaRouteTabs)\nconst THEME_NAME = 'CalcitaRouteTabs';\nconst RouteTabsRoot = piecePart(THEME_NAME, 'Root', Tabs);\nconst RouteTab = piecePart(THEME_NAME, 'Tab', Tab);\nconst RouteTabBadge = piecePart(THEME_NAME, 'Badge', Chip);\n\n/**\n * Las pestañas que esta sesión puede ver.\n *\n * @param {object[]} tabs\n * @param {(access: object|undefined) => boolean} canAccess\n * @returns {object[]}\n */\nconst visibleTabsOf = (tabs, canAccess) => tabs.filter((tab) => !tab.hidden && canAccess(tab.access));\n\n/**\n * La pestaña activa, para que la pantalla pinte lo suyo (sobre todo con mode query: la pantalla es una sola).\n *\n * @param {object[]} tabs las mismas de RouteTabs\n * @param {{mode?: string, paramName?: string}} [options]\n * @returns {string|null} el `to` (por ruta) o el `value` (por consulta) de la activa\n */\nexport function useActiveRouteTab(tabs, {mode = ROUTE_TABS_MODE.path, paramName = DEFAULT_PARAM_NAME} = {}) {\n    const {useLocation} = useToolkitNavigation();\n    const location = useLocation();\n    const visibleTabs = visibleTabsOf(tabs, useAccessChecker());\n    return mode === ROUTE_TABS_MODE.query\n        ? queryTabOf(visibleTabs, location.search, paramName)\n        : activeRouteTabOf(visibleTabs, location.pathname);\n}\n\n/**\n * @param {object} props\n * @param {Array<{to?: string, value?: string, label: import('react').ReactNode, icon?: import('react').ReactElement, badge?: import('react').ReactNode, access?: object, exact?: boolean, disabled?: boolean, hidden?: boolean}>} props.tabs\n *     to (por ruta) o value (por consulta); label ya traducido; badge: un conteo o un texto corto junto a la etiqueta\n * @param {string} props.ariaLabel ya traducido: de qué son estas pestañas (para el lector de pantalla)\n * @param {'path'|'query'} [props.mode] ROUTE_TABS_MODE\n * @param {string} [props.paramName] con mode query: el nombre en la consulta (por omisión 'tab')\n * @param {boolean} [props.replace] si cambiar de pestaña reemplaza la entrada del historial en lugar de agregar una. Por\n *     omisión sí con mode query (vistas de la misma ficha) y no con mode path (páginas distintas)\n * @param {(tab: object) => void} [props.onChange] avisa la pestaña que se eligió (la navegación ya la hace la liga)\n * @param {object} [props.sx]\n */\nfunction RouteTabsContent(props) {\n    const {tabs, ariaLabel, mode = ROUTE_TABS_MODE.path, paramName = DEFAULT_PARAM_NAME, replace, onChange, sx, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {useLocation, Link} = useToolkitNavigation();\n    const location = useLocation();\n    const visibleTabs = visibleTabsOf(tabs, useAccessChecker());\n    const isQuery = mode === ROUTE_TABS_MODE.query;\n    const replacesHistory = replace ?? isQuery;\n    const activeKey = isQuery ? queryTabOf(visibleTabs, location.search, paramName) : activeRouteTabOf(visibleTabs, location.pathname);\n\n    return (\n        // value false: ninguna pestaña coincide (MUI avisa en la consola si el valor no es de ninguna)\n        <RouteTabsRoot value={activeKey ?? false} variant=\"scrollable\" allowScrollButtonsMobile aria-label={ariaLabel}\n                       ownSx={{minWidth: 0}} sx={sx}>\n            {visibleTabs.map((tab) => {\n                const key = isQuery ? tab.value : tab.to;\n                const href = isQuery ? `${location.pathname}${searchWithTab(location.search, paramName, tab.value)}` : tab.to;\n                const label = tab.badge === undefined || tab.badge === null ? tab.label : (\n                    <Stack component=\"span\" direction=\"row\" sx={{alignItems: 'center', gap: 0.75}}>\n                        <span>{tab.label}</span>\n                        <RouteTabBadge size=\"small\" label={tab.badge} ownSx={{height: 20, fontSize: 12, fontWeight: 600}} />\n                    </Stack>\n                );\n                return (\n                    <RouteTab key={key} value={key} label={label} icon={tab.icon} iconPosition=\"start\" disabled={tab.disabled}\n                              component={Link} to={href} replace={replacesHistory} onClick={() => onChange?.(tab)} ownSx={{minHeight: 48}} />\n                );\n            })}\n        </RouteTabsRoot>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst RouteTabs = withPieceSlots(RouteTabsContent, THEME_NAME);\nexport default RouteTabs;\n"],"names":[],"mappings":";;;;;;;;;;;AAmCO,MAAM,kBAAkB,OAAO,OAAO,EAAC,MAAM,QAAQ,OAAO,SAAQ;AAC3E,MAAM,qBAAqB;AAG3B,MAAM,aAAa;AACnB,MAAM,gBAAgB,UAAU,YAAY,QAAQ,IAAI;AACxD,MAAM,WAAW,UAAU,YAAY,OAAO,GAAG;AACjD,MAAM,gBAAgB,UAAU,YAAY,SAAS,IAAI;AASzD,MAAM,gBAAgB,CAAC,MAAM,cAAc,KAAK,OAAO,CAAC,QAAQ,CAAC,IAAI,UAAU,UAAU,IAAI,MAAM,CAAC;AAS7F,SAAS,kBAAkB,MAAM,EAAC,OAAO,gBAAgB,MAAM,YAAY,mBAAA,IAAsB,IAAI;AACxG,QAAM,EAAC,YAAA,IAAe,qBAAA;AACtB,QAAM,WAAW,YAAA;AACjB,QAAM,cAAc,cAAc,MAAM,iBAAA,CAAkB;AAC1D,SAAO,SAAS,gBAAgB,QAC1B,WAAW,aAAa,SAAS,QAAQ,SAAS,IAClD,iBAAiB,aAAa,SAAS,QAAQ;AACzD;AAcA,SAAS,iBAAiB,OAAO;AAC7B,QAAM,EAAC,MAAM,WAAW,OAAO,gBAAgB,MAAM,YAAY,oBAAoB,SAAS,UAAU,IAAI,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AAC9J,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,aAAa,KAAA,IAAQ,qBAAA;AAC5B,QAAM,WAAW,YAAA;AACjB,QAAM,cAAc,cAAc,MAAM,iBAAA,CAAkB;AAC1D,QAAM,UAAU,SAAS,gBAAgB;AACzC,QAAM,kBAAkB,WAAW;AACnC,QAAM,YAAY,UAAU,WAAW,aAAa,SAAS,QAAQ,SAAS,IAAI,iBAAiB,aAAa,SAAS,QAAQ;AAEjI;AAAA;AAAA,IAEI;AAAA,MAAC;AAAA,MAAA;AAAA,QAAc,OAAO,aAAa;AAAA,QAAO,SAAQ;AAAA,QAAa,0BAAwB;AAAA,QAAC,cAAY;AAAA,QACrF,OAAO,EAAC,UAAU,EAAA;AAAA,QAAI;AAAA,QAChC,UAAA,YAAY,IAAI,CAAC,QAAQ;AACtB,gBAAM,MAAM,UAAU,IAAI,QAAQ,IAAI;AACtC,gBAAM,OAAO,UAAU,GAAG,SAAS,QAAQ,GAAG,cAAc,SAAS,QAAQ,WAAW,IAAI,KAAK,CAAC,KAAK,IAAI;AAC3G,gBAAM,QAAQ,IAAI,UAAU,UAAa,IAAI,UAAU,OAAO,IAAI,QAC9D,qBAAC,SAAM,WAAU,QAAO,WAAU,OAAM,IAAI,EAAC,YAAY,UAAU,KAAK,KAAA,GACpE,UAAA;AAAA,YAAA,oBAAC,QAAA,EAAM,cAAI,MAAA,CAAM;AAAA,YACjB,oBAAC,eAAA,EAAc,MAAK,SAAQ,OAAO,IAAI,OAAO,OAAO,EAAC,QAAQ,IAAI,UAAU,IAAI,YAAY,MAAG,CAAG;AAAA,UAAA,GACtG;AAEJ,iBACI;AAAA,YAAC;AAAA,YAAA;AAAA,cAAmB,OAAO;AAAA,cAAK;AAAA,cAAc,MAAM,IAAI;AAAA,cAAM,cAAa;AAAA,cAAQ,UAAU,IAAI;AAAA,cACvF,WAAW;AAAA,cAAM,IAAI;AAAA,cAAM,SAAS;AAAA,cAAiB,SAAS,MAAM,WAAW,GAAG;AAAA,cAAG,OAAO,EAAC,WAAW,GAAA;AAAA,YAAE;AAAA,YADrG;AAAA,UAAA;AAAA,QAGvB,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA;AAGb;AAGA,MAAM,YAAY,eAAe,kBAAkB,UAAU;"}

package/dist/ui/navigation/routeTabMatching.js

@@ -0,0 +1,23 @@
+function activeRouteTabOf(tabs, pathname) {
+  const path = pathname.replace(/\/+$/, "") || "/";
+  const matching = tabs.filter(({ to, exact }) => {
+    const tabPath = to.replace(/\/+$/, "") || "/";
+    return path === tabPath || !exact && path.startsWith(`${tabPath === "/" ? "" : tabPath}/`);
+  });
+  return matching.sort((first, second) => second.to.length - first.to.length)[0]?.to ?? null;
+}
+function queryTabOf(tabs, search, paramName) {
+  const wanted = new URLSearchParams(search).get(paramName);
+  return tabs.find((tab) => tab.value === wanted)?.value ?? tabs[0]?.value ?? null;
+}
+function searchWithTab(search, paramName, value) {
+  const params = new URLSearchParams(search);
+  params.set(paramName, value);
+  return `?${params.toString()}`;
+}
+export {
+  activeRouteTabOf,
+  queryTabOf,
+  searchWithTab
+};
+//# sourceMappingURL=routeTabMatching.js.map

package/dist/ui/navigation/routeTabMatching.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"routeTabMatching.js","sources":["../../../src/ui/navigation/routeTabMatching.js"],"sourcesContent":["// Qué pestaña va activa según la dirección, para las pestañas por ruta (RouteTabs):\n//   por ruta     cada pestaña es una página: gana la que coincide con la ruta, o la más larga de la que es parte\n//                ('/clientes/123/pagos/abril' activa '/clientes/123/pagos'); exact solo con la ruta idéntica\n//   por consulta pestañas dentro de una misma pantalla, en ?tab=pagos: se puede compartir la liga a la pestaña\n//\n// Puro (sin React): se prueba con node (routeTabMatching.test.js).\n//\n// Genérico del paquete: function (regla de la casa).\n\n/**\n * @param {Array<{to: string, exact?: boolean}>} tabs\n * @param {string} pathname\n * @returns {string|null} el `to` de la pestaña activa\n */\nexport function activeRouteTabOf(tabs, pathname) {\n    const path = pathname.replace(/\\/+$/, '') || '/';\n    const matching = tabs.filter(({to, exact}) => {\n        const tabPath = to.replace(/\\/+$/, '') || '/';\n        return path === tabPath || (!exact && path.startsWith(`${tabPath === '/' ? '' : tabPath}/`));\n    });\n    // la más específica: la de la ruta más larga\n    return matching.sort((first, second) => second.to.length - first.to.length)[0]?.to ?? null;\n}\n\n/**\n * @param {Array<{value: string}>} tabs\n * @param {string} search la consulta de la dirección ('?tab=pagos&page=2')\n * @param {string} paramName 'tab'\n * @returns {string|null} la pestaña de la consulta si existe; si no, la primera\n */\nexport function queryTabOf(tabs, search, paramName) {\n    const wanted = new URLSearchParams(search).get(paramName);\n    return tabs.find((tab) => tab.value === wanted)?.value ?? tabs[0]?.value ?? null;\n}\n\n/**\n * La consulta con otra pestaña, sin perder lo demás que traía (?page=2 se queda).\n *\n * @param {string} search\n * @param {string} paramName\n * @param {string} value\n * @returns {string} '?tab=pagos&page=2'\n */\nexport function searchWithTab(search, paramName, value) {\n    const params = new URLSearchParams(search);\n    params.set(paramName, value);\n    return `?${params.toString()}`;\n}\n"],"names":[],"mappings":"AAcO,SAAS,iBAAiB,MAAM,UAAU;AAC7C,QAAM,OAAO,SAAS,QAAQ,QAAQ,EAAE,KAAK;AAC7C,QAAM,WAAW,KAAK,OAAO,CAAC,EAAC,IAAI,MAAK,MAAM;AAC1C,UAAM,UAAU,GAAG,QAAQ,QAAQ,EAAE,KAAK;AAC1C,WAAO,SAAS,WAAY,CAAC,SAAS,KAAK,WAAW,GAAG,YAAY,MAAM,KAAK,OAAO,GAAG;AAAA,EAC9F,CAAC;AAED,SAAO,SAAS,KAAK,CAAC,OAAO,WAAW,OAAO,GAAG,SAAS,MAAM,GAAG,MAAM,EAAE,CAAC,GAAG,MAAM;AAC1F;AAQO,SAAS,WAAW,MAAM,QAAQ,WAAW;AAChD,QAAM,SAAS,IAAI,gBAAgB,MAAM,EAAE,IAAI,SAAS;AACxD,SAAO,KAAK,KAAK,CAAC,QAAQ,IAAI,UAAU,MAAM,GAAG,SAAS,KAAK,CAAC,GAAG,SAAS;AAChF;AAUO,SAAS,cAAc,QAAQ,WAAW,OAAO;AACpD,QAAM,SAAS,IAAI,gBAAgB,MAAM;AACzC,SAAO,IAAI,WAAW,KAAK;AAC3B,SAAO,IAAI,OAAO,SAAQ,CAAE;AAChC;"}

package/dist/ui/timeline/GroupedTimeline.js

@@ -19,7 +19,7 @@ import { useTheme } from "@mui/material/styles";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { paletteOf } from "../../theme/components/paletteOf.js";
 import { TIMELINE_EMPHASIS, timelineDotOf } from "./timelineDot.js";
-import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../../theme/themePieces.js";
 import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaGroupedTimeline";
 const TimelineGroup = piecePart(THEME_NAME, "Group", Box);
@@ -35,7 +35,7 @@ const TimelineEntryTitle = piecePart(THEME_NAME, "EntryTitle", Typography);
 const HIGHLIGHT_TINT_PERCENT = 8;
 const LEFT_ALIGNED_TIMELINE = { m: 0, px: 0, py: 0.5, [`& .${timelineItemClasses.root}::before`]: { flex: 0, p: 0 } };
 const ALTERNATE_TIMELINE = { m: 0, px: 0, py: 0.5 };
-function GroupedTimeline(props) {
+function GroupedTimelineContent(props) {
   const { groups, onGroupToggle, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const theme = useTheme();
@@ -115,6 +115,7 @@ function GroupedTimeline(props) {
     );
   }) });
 }
+const GroupedTimeline = withPieceSlots(GroupedTimelineContent, THEME_NAME);
 export {
   GroupedTimeline as default
 };

package/dist/ui/timeline/GroupedTimeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupedTimeline.js","sources":["../../../src/ui/timeline/GroupedTimeline.jsx"],"sourcesContent":["// Línea de tiempo por grupos (Timeline de @mui/lab al estilo del ejemplo «Customization» de MUI): cada grupo con su\n// título y una insignia opcional, y cada evento con su ícono dentro del punto, su título, su hora y un detalle libre.\n//\n// Uso típico: el historial de un registro agrupado por etapa o por intento (detalle de un pedido: un grupo por intento de entrega,\n// el vigente resaltado). El énfasis de cada grupo (TIMELINE_EMPHASIS) decide cómo se pintan sus puntos (timelineDot.js).\n//\n// En pantalla ancha los eventos alternan de lado y la hora va del otro lado del punto; en celular todo va de un lado, con\n// la hora abajo del título, para que quepa.\n//\n// Un grupo plegable (isCollapsible) enseña solo su título y su resumen hasta que se abre: sirve para que lo viejo no\n// obligue a bajar (los intentos anteriores van plegados).\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaGroupedTimeline con defaultProps y\n// styleOverrides de sus partes: group, groupHeader, groupButton, groupTitle, expandIcon, timeline, opposite, connector,\n// content, entryTitle.\n//\n// Genérico del paquete: function (regla de la casa). No sabe de negocio: títulos, horas y detalles llegan ya traducidos y\n// formateados, y el ícono y el tono de cada evento los decide quien la usa (con sus diccionarios).\nimport {useState} from 'react';\nimport Timeline from '@mui/lab/Timeline';\nimport TimelineConnector from '@mui/lab/TimelineConnector';\nimport TimelineContent from '@mui/lab/TimelineContent';\nimport TimelineDot from '@mui/lab/TimelineDot';\nimport TimelineItem, {timelineItemClasses} from '@mui/lab/TimelineItem';\nimport TimelineOppositeContent from '@mui/lab/TimelineOppositeContent';\nimport TimelineSeparator from '@mui/lab/TimelineSeparator';\nimport Box from '@mui/material/Box';\nimport ButtonBase from '@mui/material/ButtonBase';\nimport Chip from '@mui/material/Chip';\nimport Collapse from '@mui/material/Collapse';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\nimport {useTheme} from '@mui/material/styles';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\n\nimport {paletteOf} from '@/theme/components/paletteOf.js';\nimport {TIMELINE_EMPHASIS, timelineDotOf} from '@/ui/timeline/timelineDot.js';\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.CalcitaGroupedTimeline)\nconst THEME_NAME = 'CalcitaGroupedTimeline';\nconst TimelineGroup = piecePart(THEME_NAME, 'Group', Box);\nconst TimelineGroupHeader = piecePart(THEME_NAME, 'GroupHeader', Stack);\nconst TimelineGroupButton = piecePart(THEME_NAME, 'GroupButton', ButtonBase);\nconst TimelineGroupTitle = piecePart(THEME_NAME, 'GroupTitle', Typography);\nconst TimelineExpandIcon = piecePart(THEME_NAME, 'ExpandIcon', ExpandMoreIcon);\nconst TimelineTimeline = piecePart(THEME_NAME, 'Timeline', Timeline);\nconst TimelineOpposite = piecePart(THEME_NAME, 'Opposite', TimelineOppositeContent);\nconst TimelineConnectorPart = piecePart(THEME_NAME, 'Connector', TimelineConnector);\nconst TimelineContentPart = piecePart(THEME_NAME, 'Content', TimelineContent);\nconst TimelineEntryTitle = piecePart(THEME_NAME, 'EntryTitle', Typography);\n\n// el fondo del grupo resaltado: cuánto del color principal (por ciento)\nconst HIGHLIGHT_TINT_PERCENT = 8;\n// en celular la línea va pegada a la izquierda: sin la columna de enfrente que @mui/lab reserva por omisión\nconst LEFT_ALIGNED_TIMELINE = {m: 0, px: 0, py: 0.5, [`& .${timelineItemClasses.root}::before`]: {flex: 0, p: 0}};\nconst ALTERNATE_TIMELINE = {m: 0, px: 0, py: 0.5};\n\n/**\n * @param {object} props\n * @param {Object[]} props.groups\n * @param {string} props.groups[].key\n * @param {string} [props.groups[].title] texto ya traducido; sin título el grupo no pinta encabezado\n * @param {string} [props.groups[].badge] insignia junto al título (p. ej. «Intento actual»)\n * @param {string} [props.groups[].summary] lo que se lee junto al título del grupo plegado (p. ej. «6 eventos»)\n * @param {boolean} [props.groups[].isCollapsible] el título se vuelve un botón que abre y cierra el grupo (necesita\n *     title)\n * @param {boolean} [props.groups[].defaultExpanded] si un grupo plegable arranca abierto (por omisión, sí)\n * @param {'highlighted'|'normal'|'muted'} [props.groups[].emphasis]\n * @param {Object[]} props.groups[].items\n * @param {string} props.groups[].items[].key\n * @param {import('react').ElementType} [props.groups[].items[].icon] ícono dentro del punto\n * @param {string} [props.groups[].items[].tone] success, warning, error, info, primary o grey\n * @param {import('react').ReactNode} props.groups[].items[].title\n * @param {string} [props.groups[].items[].timestamp] fecha y hora ya formateadas\n * @param {import('react').ReactNode} [props.groups[].items[].details] lo que va abajo del título (chip de resultado, una liga...)\n * @param {(groupKey: string, isExpanded: boolean) => void} [props.onGroupToggle] la persona abrió o plegó un grupo (por ejemplo,\n *     para pedir sus eventos hasta que se abre)\n */\nexport default function GroupedTimeline(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaGroupedTimeline.defaultProps) y encima lo que llega aquí\n    const {groups, onGroupToggle, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const theme = useTheme();\n    const isWide = useMediaQuery(theme.breakpoints.up('md'));\n    // llaves de los grupos plegables que el usuario tiene abiertos; arrancan como dice defaultExpanded\n    const [expandedKeys, setExpandedKeys] = useState(() => new Set(\n        groups.filter((timelineGroup) => timelineGroup.defaultExpanded !== false).map((timelineGroup) => timelineGroup.key),\n    ));\n    const toggleGroup = (groupKey) => {\n        const isOpening = !expandedKeys.has(groupKey);\n        const nextKeys = new Set(expandedKeys);\n        if (isOpening) {\n            nextKeys.add(groupKey);\n        } else {\n            nextKeys.delete(groupKey);\n        }\n        setExpandedKeys(nextKeys);\n        onGroupToggle?.(groupKey, isOpening);\n    };\n\n    return (\n        <Stack spacing={1.5}>\n            {groups.map((timelineGroup) => {\n                const emphasis = timelineGroup.emphasis ?? TIMELINE_EMPHASIS.normal;\n                const isHighlighted = emphasis === TIMELINE_EMPHASIS.highlighted;\n                const isMuted = emphasis === TIMELINE_EMPHASIS.muted;\n                const isCollapsible = Boolean(timelineGroup.isCollapsible && timelineGroup.title);\n                const isExpanded = !isCollapsible || expandedKeys.has(timelineGroup.key);\n\n                return (\n                    // el borde transparente en los demás grupos mantiene todo alineado con el grupo resaltado\n                    <TimelineGroup key={timelineGroup.key} ownSx={{\n                        border: 1, borderRadius: 1.5, px: 1.5, pt: 1.25, pb: isExpanded ? 0 : 1.25,\n                        borderColor: isHighlighted ? 'primary.main' : 'transparent',\n                        // un tinte del color principal: primary.lighter no existe en el tema de MUI y el grupo se quedaba sin fondo\n                        bgcolor: (theme) => (isHighlighted ? `color-mix(in srgb, ${paletteOf(theme).primary.main} ${HIGHLIGHT_TINT_PERCENT}%, transparent)` : 'transparent'),\n                    }}>\n                        {timelineGroup.title && (\n                            <TimelineGroupHeader direction=\"row\" spacing={1} ownSx={{alignItems: 'center', justifyContent: isWide ? 'center' : 'flex-start'}}>\n                                <TimelineGroupButton disabled={!isCollapsible} onClick={() => toggleGroup(timelineGroup.key)}\n                                            aria-expanded={isCollapsible ? isExpanded : undefined}\n                                            ownSx={{gap: 1, px: 1, py: 0.25, borderRadius: 1, '&.Mui-disabled': {pointerEvents: 'none'}}}>\n                                    <TimelineGroupTitle variant=\"h6\" component=\"h3\" ownSx={{fontWeight: 700, color: isMuted ? 'text.secondary' : 'text.primary'}}>\n                                        {timelineGroup.title}\n                                    </TimelineGroupTitle>\n                                    {/* plegado, el grupo dice cuántos eventos trae: se sabe qué hay sin abrirlo */}\n                                    {isCollapsible && timelineGroup.summary && (\n                                        <Typography variant=\"body2\" color=\"text.secondary\" component=\"span\">{timelineGroup.summary}</Typography>\n                                    )}\n                                    {isCollapsible && (\n                                        <TimelineExpandIcon fontSize=\"small\" ownSx={{\n                                            color: 'text.secondary', transition: theme.transitions.create('transform'),\n                                            transform: isExpanded ? 'rotate(180deg)' : 'none',\n                                        }} />\n                                    )}\n                                </TimelineGroupButton>\n                                {timelineGroup.badge && <Chip size=\"small\" color=\"primary\" label={timelineGroup.badge} />}\n                            </TimelineGroupHeader>\n                        )}\n                        <Collapse in={isExpanded} unmountOnExit>\n                            <TimelineTimeline position={isWide ? 'alternate' : 'right'} ownSx={isWide ? ALTERNATE_TIMELINE : LEFT_ALIGNED_TIMELINE}>\n                                {timelineGroup.items.map((timelineEntry, entryPosition) => {\n                                    const EntryIcon = timelineEntry.icon;\n                                    const isFirstEntry = entryPosition === 0;\n                                    const isLastEntry = entryPosition === timelineGroup.items.length - 1;\n\n                                    return (\n                                        <TimelineItem key={timelineEntry.key}>\n                                            {isWide && (\n                                                <TimelineOpposite variant=\"body2\" color=\"text.secondary\" ownSx={{m: 'auto 0'}}>\n                                                    {timelineEntry.timestamp}\n                                                </TimelineOpposite>\n                                            )}\n                                            <TimelineSeparator>\n                                                <TimelineConnectorPart ownSx={{visibility: isFirstEntry ? 'hidden' : 'visible'}} />\n                                                <TimelineDot {...timelineDotOf({emphasis, tone: timelineEntry.tone})}>\n                                                    {EntryIcon && <EntryIcon fontSize=\"small\" />}\n                                                </TimelineDot>\n                                                <TimelineConnectorPart ownSx={{visibility: isLastEntry ? 'hidden' : 'visible'}} />\n                                            </TimelineSeparator>\n                                            <TimelineContentPart ownSx={{py: 1.5, px: 2, minWidth: 0}}>\n                                                <TimelineEntryTitle variant=\"body2\" component=\"p\" ownSx={{fontWeight: 600, color: isMuted ? 'text.secondary' : 'text.primary'}}>\n                                                    {timelineEntry.title}\n                                                </TimelineEntryTitle>\n                                                {!isWide && timelineEntry.timestamp && (\n                                                    <Typography variant=\"caption\" color=\"text.secondary\" component=\"p\">{timelineEntry.timestamp}</Typography>\n                                                )}\n                                                {timelineEntry.details}\n                                            </TimelineContentPart>\n                                        </TimelineItem>\n                                    );\n                                })}\n                            </TimelineTimeline>\n                        </Collapse>\n                    </TimelineGroup>\n                );\n            })}\n        </Stack>\n    );\n}\n"],"names":["theme"],"mappings":"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"}
+{"version":3,"file":"GroupedTimeline.js","sources":["../../../src/ui/timeline/GroupedTimeline.jsx"],"sourcesContent":["// Línea de tiempo por grupos (Timeline de @mui/lab al estilo del ejemplo «Customization» de MUI): cada grupo con su\n// título y una insignia opcional, y cada evento con su ícono dentro del punto, su título, su hora y un detalle libre.\n//\n// Uso típico: el historial de un registro agrupado por etapa o por intento (detalle de un pedido: un grupo por intento de entrega,\n// el vigente resaltado). El énfasis de cada grupo (TIMELINE_EMPHASIS) decide cómo se pintan sus puntos (timelineDot.js).\n//\n// En pantalla ancha los eventos alternan de lado y la hora va del otro lado del punto; en celular todo va de un lado, con\n// la hora abajo del título, para que quepa.\n//\n// Un grupo plegable (isCollapsible) enseña solo su título y su resumen hasta que se abre: sirve para que lo viejo no\n// obligue a bajar (los intentos anteriores van plegados).\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaGroupedTimeline con defaultProps y\n// styleOverrides de sus partes: group, groupHeader, groupButton, groupTitle, expandIcon, timeline, opposite, connector,\n// content, entryTitle.\n//\n// Genérico del paquete: function (regla de la casa). No sabe de negocio: títulos, horas y detalles llegan ya traducidos y\n// formateados, y el ícono y el tono de cada evento los decide quien la usa (con sus diccionarios).\nimport {useState} from 'react';\nimport Timeline from '@mui/lab/Timeline';\nimport TimelineConnector from '@mui/lab/TimelineConnector';\nimport TimelineContent from '@mui/lab/TimelineContent';\nimport TimelineDot from '@mui/lab/TimelineDot';\nimport TimelineItem, {timelineItemClasses} from '@mui/lab/TimelineItem';\nimport TimelineOppositeContent from '@mui/lab/TimelineOppositeContent';\nimport TimelineSeparator from '@mui/lab/TimelineSeparator';\nimport Box from '@mui/material/Box';\nimport ButtonBase from '@mui/material/ButtonBase';\nimport Chip from '@mui/material/Chip';\nimport Collapse from '@mui/material/Collapse';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\nimport {useTheme} from '@mui/material/styles';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\n\nimport {paletteOf} from '@/theme/components/paletteOf.js';\nimport {TIMELINE_EMPHASIS, timelineDotOf} from '@/ui/timeline/timelineDot.js';\nimport {piecePart, usePieceProps, withPieceSlots} 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.CalcitaGroupedTimeline)\nconst THEME_NAME = 'CalcitaGroupedTimeline';\nconst TimelineGroup = piecePart(THEME_NAME, 'Group', Box);\nconst TimelineGroupHeader = piecePart(THEME_NAME, 'GroupHeader', Stack);\nconst TimelineGroupButton = piecePart(THEME_NAME, 'GroupButton', ButtonBase);\nconst TimelineGroupTitle = piecePart(THEME_NAME, 'GroupTitle', Typography);\nconst TimelineExpandIcon = piecePart(THEME_NAME, 'ExpandIcon', ExpandMoreIcon);\nconst TimelineTimeline = piecePart(THEME_NAME, 'Timeline', Timeline);\nconst TimelineOpposite = piecePart(THEME_NAME, 'Opposite', TimelineOppositeContent);\nconst TimelineConnectorPart = piecePart(THEME_NAME, 'Connector', TimelineConnector);\nconst TimelineContentPart = piecePart(THEME_NAME, 'Content', TimelineContent);\nconst TimelineEntryTitle = piecePart(THEME_NAME, 'EntryTitle', Typography);\n\n// el fondo del grupo resaltado: cuánto del color principal (por ciento)\nconst HIGHLIGHT_TINT_PERCENT = 8;\n// en celular la línea va pegada a la izquierda: sin la columna de enfrente que @mui/lab reserva por omisión\nconst LEFT_ALIGNED_TIMELINE = {m: 0, px: 0, py: 0.5, [`& .${timelineItemClasses.root}::before`]: {flex: 0, p: 0}};\nconst ALTERNATE_TIMELINE = {m: 0, px: 0, py: 0.5};\n\n/**\n * @param {object} props\n * @param {Object[]} props.groups\n * @param {string} props.groups[].key\n * @param {string} [props.groups[].title] texto ya traducido; sin título el grupo no pinta encabezado\n * @param {string} [props.groups[].badge] insignia junto al título (p. ej. «Intento actual»)\n * @param {string} [props.groups[].summary] lo que se lee junto al título del grupo plegado (p. ej. «6 eventos»)\n * @param {boolean} [props.groups[].isCollapsible] el título se vuelve un botón que abre y cierra el grupo (necesita\n *     title)\n * @param {boolean} [props.groups[].defaultExpanded] si un grupo plegable arranca abierto (por omisión, sí)\n * @param {'highlighted'|'normal'|'muted'} [props.groups[].emphasis]\n * @param {Object[]} props.groups[].items\n * @param {string} props.groups[].items[].key\n * @param {import('react').ElementType} [props.groups[].items[].icon] ícono dentro del punto\n * @param {string} [props.groups[].items[].tone] success, warning, error, info, primary o grey\n * @param {import('react').ReactNode} props.groups[].items[].title\n * @param {string} [props.groups[].items[].timestamp] fecha y hora ya formateadas\n * @param {import('react').ReactNode} [props.groups[].items[].details] lo que va abajo del título (chip de resultado, una liga...)\n * @param {(groupKey: string, isExpanded: boolean) => void} [props.onGroupToggle] la persona abrió o plegó un grupo (por ejemplo,\n *     para pedir sus eventos hasta que se abre)\n */\nfunction GroupedTimelineContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaGroupedTimeline.defaultProps) y encima lo que llega aquí\n    const {groups, onGroupToggle, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const theme = useTheme();\n    const isWide = useMediaQuery(theme.breakpoints.up('md'));\n    // llaves de los grupos plegables que el usuario tiene abiertos; arrancan como dice defaultExpanded\n    const [expandedKeys, setExpandedKeys] = useState(() => new Set(\n        groups.filter((timelineGroup) => timelineGroup.defaultExpanded !== false).map((timelineGroup) => timelineGroup.key),\n    ));\n    const toggleGroup = (groupKey) => {\n        const isOpening = !expandedKeys.has(groupKey);\n        const nextKeys = new Set(expandedKeys);\n        if (isOpening) {\n            nextKeys.add(groupKey);\n        } else {\n            nextKeys.delete(groupKey);\n        }\n        setExpandedKeys(nextKeys);\n        onGroupToggle?.(groupKey, isOpening);\n    };\n\n    return (\n        <Stack spacing={1.5}>\n            {groups.map((timelineGroup) => {\n                const emphasis = timelineGroup.emphasis ?? TIMELINE_EMPHASIS.normal;\n                const isHighlighted = emphasis === TIMELINE_EMPHASIS.highlighted;\n                const isMuted = emphasis === TIMELINE_EMPHASIS.muted;\n                const isCollapsible = Boolean(timelineGroup.isCollapsible && timelineGroup.title);\n                const isExpanded = !isCollapsible || expandedKeys.has(timelineGroup.key);\n\n                return (\n                    // el borde transparente en los demás grupos mantiene todo alineado con el grupo resaltado\n                    <TimelineGroup key={timelineGroup.key} ownSx={{\n                        border: 1, borderRadius: 1.5, px: 1.5, pt: 1.25, pb: isExpanded ? 0 : 1.25,\n                        borderColor: isHighlighted ? 'primary.main' : 'transparent',\n                        // un tinte del color principal: primary.lighter no existe en el tema de MUI y el grupo se quedaba sin fondo\n                        bgcolor: (theme) => (isHighlighted ? `color-mix(in srgb, ${paletteOf(theme).primary.main} ${HIGHLIGHT_TINT_PERCENT}%, transparent)` : 'transparent'),\n                    }}>\n                        {timelineGroup.title && (\n                            <TimelineGroupHeader direction=\"row\" spacing={1} ownSx={{alignItems: 'center', justifyContent: isWide ? 'center' : 'flex-start'}}>\n                                <TimelineGroupButton disabled={!isCollapsible} onClick={() => toggleGroup(timelineGroup.key)}\n                                            aria-expanded={isCollapsible ? isExpanded : undefined}\n                                            ownSx={{gap: 1, px: 1, py: 0.25, borderRadius: 1, '&.Mui-disabled': {pointerEvents: 'none'}}}>\n                                    <TimelineGroupTitle variant=\"h6\" component=\"h3\" ownSx={{fontWeight: 700, color: isMuted ? 'text.secondary' : 'text.primary'}}>\n                                        {timelineGroup.title}\n                                    </TimelineGroupTitle>\n                                    {/* plegado, el grupo dice cuántos eventos trae: se sabe qué hay sin abrirlo */}\n                                    {isCollapsible && timelineGroup.summary && (\n                                        <Typography variant=\"body2\" color=\"text.secondary\" component=\"span\">{timelineGroup.summary}</Typography>\n                                    )}\n                                    {isCollapsible && (\n                                        <TimelineExpandIcon fontSize=\"small\" ownSx={{\n                                            color: 'text.secondary', transition: theme.transitions.create('transform'),\n                                            transform: isExpanded ? 'rotate(180deg)' : 'none',\n                                        }} />\n                                    )}\n                                </TimelineGroupButton>\n                                {timelineGroup.badge && <Chip size=\"small\" color=\"primary\" label={timelineGroup.badge} />}\n                            </TimelineGroupHeader>\n                        )}\n                        <Collapse in={isExpanded} unmountOnExit>\n                            <TimelineTimeline position={isWide ? 'alternate' : 'right'} ownSx={isWide ? ALTERNATE_TIMELINE : LEFT_ALIGNED_TIMELINE}>\n                                {timelineGroup.items.map((timelineEntry, entryPosition) => {\n                                    const EntryIcon = timelineEntry.icon;\n                                    const isFirstEntry = entryPosition === 0;\n                                    const isLastEntry = entryPosition === timelineGroup.items.length - 1;\n\n                                    return (\n                                        <TimelineItem key={timelineEntry.key}>\n                                            {isWide && (\n                                                <TimelineOpposite variant=\"body2\" color=\"text.secondary\" ownSx={{m: 'auto 0'}}>\n                                                    {timelineEntry.timestamp}\n                                                </TimelineOpposite>\n                                            )}\n                                            <TimelineSeparator>\n                                                <TimelineConnectorPart ownSx={{visibility: isFirstEntry ? 'hidden' : 'visible'}} />\n                                                <TimelineDot {...timelineDotOf({emphasis, tone: timelineEntry.tone})}>\n                                                    {EntryIcon && <EntryIcon fontSize=\"small\" />}\n                                                </TimelineDot>\n                                                <TimelineConnectorPart ownSx={{visibility: isLastEntry ? 'hidden' : 'visible'}} />\n                                            </TimelineSeparator>\n                                            <TimelineContentPart ownSx={{py: 1.5, px: 2, minWidth: 0}}>\n                                                <TimelineEntryTitle variant=\"body2\" component=\"p\" ownSx={{fontWeight: 600, color: isMuted ? 'text.secondary' : 'text.primary'}}>\n                                                    {timelineEntry.title}\n                                                </TimelineEntryTitle>\n                                                {!isWide && timelineEntry.timestamp && (\n                                                    <Typography variant=\"caption\" color=\"text.secondary\" component=\"p\">{timelineEntry.timestamp}</Typography>\n                                                )}\n                                                {timelineEntry.details}\n                                            </TimelineContentPart>\n                                        </TimelineItem>\n                                    );\n                                })}\n                            </TimelineTimeline>\n                        </Collapse>\n                    </TimelineGroup>\n                );\n            })}\n        </Stack>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst GroupedTimeline = withPieceSlots(GroupedTimelineContent, THEME_NAME);\nexport default GroupedTimeline;\n"],"names":["theme"],"mappings":"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"}

package/dist/upload/AttachmentsInput.js

@@ -0,0 +1,130 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId, useImperativeHandle } from "react";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Chip from "@mui/material/Chip";
+import FormHelperText from "@mui/material/FormHelperText";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import AttachFileRoundedIcon from "@mui/icons-material/AttachFileRounded";
+import { useValidationText } from "../forms/useValidationText.js";
+import FieldFrame from "../inputs/FieldFrame.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
+import { useFormatters } from "../toolkit/useFormatters.js";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import { warnUnknownProps } from "../toolkit/unknownProps.js";
+import FileChip from "./FileChip.js";
+import TemplateDownloadButton from "./TemplateDownloadButton.js";
+import { useFilePicker } from "./useFilePicker.js";
+const THEME_NAME = "CalcitaAttachmentsInput";
+const AttachmentsRoot = piecePart(THEME_NAME, "Root", Box);
+const AttachmentsActions = piecePart(THEME_NAME, "Actions", Stack);
+const AttachmentsButton = piecePart(THEME_NAME, "Button", Button);
+const AttachmentsList = piecePart(THEME_NAME, "List", Stack);
+const AttachmentsChip = piecePart(THEME_NAME, "FileChip", Chip);
+const AttachmentsLimits = piecePart(THEME_NAME, "Limits", Typography);
+function AttachmentsInputContent(props) {
+  const {
+    name,
+    label,
+    value = [],
+    onChange,
+    onBlur,
+    onRemove,
+    accept,
+    maxSize,
+    maxFiles,
+    maxTotalSize,
+    error,
+    helperText,
+    buttonLabel,
+    showButton = true,
+    pickerRef,
+    disabled = false,
+    busy = false,
+    onReject,
+    template,
+    actions,
+    sx,
+    messages,
+    texts,
+    ...unknownProps
+  } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
+  const { t } = useToolkitTranslation("common", texts);
+  const validationTextOf = useValidationText({ name, label, messages });
+  const { formatFileSize } = useFormatters();
+  const generatedId = useId();
+  const buttonId = `${name ?? "attachments"}-${generatedId}`;
+  const errorText = validationTextOf(error);
+  const isLocked = disabled || busy;
+  const change = (files) => {
+    onChange(files);
+    onBlur?.();
+  };
+  const picker = useFilePicker({
+    accept,
+    maxSize,
+    multiple: true,
+    maxFiles,
+    maxTotalSize,
+    keptFiles: value,
+    disabled: isLocked,
+    onAccept: change,
+    onReject,
+    texts
+  });
+  useImperativeHandle(pickerRef, () => ({ open: picker.open }), [picker.open]);
+  const remove = (file) => {
+    onRemove?.(file);
+    change(value.filter((item) => item !== file));
+  };
+  const totalBytes = value.reduce((sum, file) => sum + (file.size ?? 0), 0);
+  const limitsText = maxFiles || picker.maxTotalBytes ? t(picker.maxTotalBytes ? "upload.summaryOf" : "upload.summary", {
+    count: value.length,
+    total: formatFileSize(totalBytes),
+    max: picker.maxTotalBytes ? formatFileSize(picker.maxTotalBytes) : void 0
+  }) : null;
+  const bottomText = errorText ?? helperText;
+  const content = /* @__PURE__ */ jsxs(
+    AttachmentsRoot,
+    {
+      "aria-busy": busy,
+      ...picker.dropHandlers,
+      ownSx: {
+        borderRadius: 1,
+        outline: picker.isDragging ? 2 : 0,
+        outlineStyle: "dashed",
+        outlineColor: "primary.main",
+        bgcolor: picker.isDragging ? "action.hover" : "transparent"
+      },
+      sx,
+      children: [
+        /* @__PURE__ */ jsx("input", { ...picker.inputProps, name, "aria-hidden": "true", tabIndex: -1 }),
+        (showButton || template || actions) && /* @__PURE__ */ jsxs(AttachmentsActions, { direction: "row", ownSx: { alignItems: "center", flexWrap: "wrap", gap: 1 }, children: [
+          showButton && /* @__PURE__ */ jsx(AttachmentsButton, { id: buttonId, size: "small", startIcon: /* @__PURE__ */ jsx(AttachFileRoundedIcon, {}), onClick: picker.open, disabled: isLocked, children: buttonLabel ?? t("upload.attach") }),
+          template && /* @__PURE__ */ jsx(TemplateDownloadButton, { size: "small", texts, ...template }),
+          actions
+        ] }),
+        value.length > 0 && /* @__PURE__ */ jsx(AttachmentsList, { direction: "row", role: "list", ownSx: { flexWrap: "wrap", gap: 1, mt: showButton ? 1 : 0 }, children: value.map((file) => /* @__PURE__ */ jsx(Box, { role: "listitem", sx: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx(
+          FileChip,
+          {
+            file,
+            ChipComponent: AttachmentsChip,
+            removeLabel: t("upload.remove", { name: file.name }),
+            onRemove: isLocked ? void 0 : () => remove(file)
+          }
+        ) }, file.id ?? file.name)) }),
+        limitsText && /* @__PURE__ */ jsx(AttachmentsLimits, { variant: "caption", color: "text.secondary", ownSx: { display: "block", mt: 0.5 }, children: limitsText }),
+        bottomText && /* @__PURE__ */ jsx(FormHelperText, { error: Boolean(errorText), children: bottomText })
+      ]
+    }
+  );
+  return label ? /* @__PURE__ */ jsx(FieldFrame, { inputId: buttonId, label, children: content }) : content;
+}
+const AttachmentsInput = withPieceSlots(AttachmentsInputContent, THEME_NAME);
+export {
+  AttachmentsInput as default
+};
+//# sourceMappingURL=AttachmentsInput.js.map

package/dist/upload/AttachmentsInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentsInput.js","sources":["../../src/upload/AttachmentsInput.jsx"],"sourcesContent":["// Varios archivos como en un correo: el botón «Adjuntar» con su clip y cada archivo en un chip con su × (Excel en verde,\n// PDF en rojo…). También se pueden soltar encima. Volver a elegir un archivo con el mismo nombre lo reemplaza (se corrigió en\n// disco) y no cuenta doble.\n//\n// Solo ELIGE (controlado: value / onChange recibe la lista completa), con las reglas de los demás cargadores (accept,\n// maxSize por archivo, maxFiles y maxTotalSize; useFilePicker). La lista puede mezclar archivos nuevos (File) con los que ya\n// están guardados ({id?, name, size?}): al editar un registro, los de antes se ven igual y también se quitan.\n//\n// Huecos: showButton={false} + pickerRef para abrir la ventana desde un botón suyo (el clip de la barra de un correo);\n// template («Descargar la plantilla»); actions (botones suyos junto a «Adjuntar»); onRemove (avisar al API que se quitó uno\n// que ya estaba guardado); label, buttonLabel y texts. Con formik: FormAttachmentsField; con react-hook-form, el del mismo\n// nombre.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaAttachmentsInput con defaultProps y\n// styleOverrides de sus partes: root, actions, button, list, fileChip, limits.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId, useImperativeHandle} from 'react';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Chip from '@mui/material/Chip';\nimport FormHelperText from '@mui/material/FormHelperText';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport AttachFileRoundedIcon from '@mui/icons-material/AttachFileRounded';\n\nimport {useValidationText} from '@/forms/useValidationText.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport FileChip from '@/upload/FileChip.jsx';\nimport TemplateDownloadButton from '@/upload/TemplateDownloadButton.jsx';\nimport {useFilePicker} from '@/upload/useFilePicker.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaAttachmentsInput)\nconst THEME_NAME = 'CalcitaAttachmentsInput';\nconst AttachmentsRoot = piecePart(THEME_NAME, 'Root', Box);\nconst AttachmentsActions = piecePart(THEME_NAME, 'Actions', Stack);\nconst AttachmentsButton = piecePart(THEME_NAME, 'Button', Button);\nconst AttachmentsList = piecePart(THEME_NAME, 'List', Stack);\nconst AttachmentsChip = piecePart(THEME_NAME, 'FileChip', Chip);\nconst AttachmentsLimits = piecePart(THEME_NAME, 'Limits', Typography);\n\n/**\n * La lista conserva el tipo que usa la pantalla para lo ya guardado (T): onChange regresa esos mismos y los File nuevos.\n *\n * @template {File|{id?: string, name: string, size?: number}} T\n * @param {object} props\n * @param {string} [props.name]\n * @param {import('react').ReactNode} [props.label] ya traducida; sin ella, va sin etiqueta (dentro de un correo, por ejemplo)\n * @param {T[]} [props.value] los nuevos y los que ya están guardados\n * @param {(files: Array<T|File>) => void} props.onChange la lista completa\n * @param {() => void} [props.onBlur] se llama al agregar o quitar (para que el formulario lo marque como tocado)\n * @param {(file: T) => void} [props.onRemove] al quitar uno (antes de onChange)\n * @param {string|string[]} [props.accept] 'excel' | ['pdf', 'image'] | '.xlsx,.xls' | 'image/*'\n * @param {number|string} [props.maxSize] el peso máximo de cada archivo: bytes o '10 MB'\n * @param {number} [props.maxFiles] cuántos como máximo\n * @param {number|string} [props.maxTotalSize] cuánto pueden pesar todos juntos\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText] ya traducida\n * @param {string} [props.buttonLabel] ya traducido; por omisión «Adjuntar»\n * @param {boolean} [props.showButton] false esconde «Adjuntar» (la ventana se abre con pickerRef desde un botón suyo)\n * @param {import('react').Ref<{open: () => void}>} [props.pickerRef] recibe {open} para abrir la ventana de archivos\n * @param {boolean} [props.disabled]\n * @param {boolean} [props.busy] candado mientras se sube: no se puede agregar ni quitar\n * @param {(file: File, reason: string) => void} [props.onReject] reason es uno de FILE_REJECTION; sin él, un aviso\n * @param {Parameters<typeof import('@/upload/TemplateDownloadButton.jsx').default>[0]} [props.template] «Descargar la\n *     plantilla» junto a «Adjuntar»\n * @param {import('react').ReactNode} [props.actions] botones suyos junto a «Adjuntar»\n * @param {object} [props.sx]\n * @param {Record<string, string|object>} [props.messages] el texto del error de este campo, por regla de validación\n *     ({required: 'Escriba el RFC', matches: 'El RFC lleva 12 o 13 caracteres'}): gana al de Calcita y al de los textos\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n * @param {Record<string, import('react').ElementType>} [props.slots] otro componente en lugar de una parte (root, actions, list…)\n * @param {Record<string, object>} [props.slotProps] props de más para una parte\n */\nfunction AttachmentsInputContent(props) {\n    const {\n        name, label, value = [], onChange, onBlur, onRemove, accept, maxSize, maxFiles, maxTotalSize, error, helperText, buttonLabel,\n        showButton = true, pickerRef, disabled = false, busy = false, onReject, template, actions, sx, messages, texts,\n        ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    // el texto del error: el de la pantalla (messages), el del proyecto para este campo o el de Calcita\n    const validationTextOf = useValidationText({name, label, messages});\n    const {formatFileSize} = useFormatters();\n    const generatedId = useId();\n    const buttonId = `${name ?? 'attachments'}-${generatedId}`;\n    const errorText = validationTextOf(error);\n    const isLocked = disabled || busy;\n    const change = (files) => {\n        onChange(files);\n        onBlur?.();\n    };\n    const picker = useFilePicker({\n        accept, maxSize, multiple: true, maxFiles, maxTotalSize, keptFiles: value, disabled: isLocked, onAccept: change, onReject, texts,\n    });\n    useImperativeHandle(pickerRef, () => ({open: picker.open}), [picker.open]);\n\n    const remove = (file) => {\n        onRemove?.(file);\n        change(value.filter((item) => item !== file));\n    };\n    const totalBytes = value.reduce((sum, file) => sum + (file.size ?? 0), 0);\n    // cuántos y cuánto pesan, solo si hay algún tope que cuidar\n    const limitsText = maxFiles || picker.maxTotalBytes\n        ? t(picker.maxTotalBytes ? 'upload.summaryOf' : 'upload.summary', {\n            count: value.length, total: formatFileSize(totalBytes), max: picker.maxTotalBytes ? formatFileSize(picker.maxTotalBytes) : undefined,\n        })\n        : null;\n    const bottomText = errorText ?? helperText;\n\n    const content = (\n        <AttachmentsRoot aria-busy={busy} {...picker.dropHandlers}\n                         ownSx={{\n                             borderRadius: 1, outline: picker.isDragging ? 2 : 0, outlineStyle: 'dashed', outlineColor: 'primary.main',\n                             bgcolor: picker.isDragging ? 'action.hover' : 'transparent',\n                         }}\n                         sx={sx}>\n            <input {...picker.inputProps} name={name} aria-hidden=\"true\" tabIndex={-1} />\n            {(showButton || template || actions) && (\n                <AttachmentsActions direction=\"row\" ownSx={{alignItems: 'center', flexWrap: 'wrap', gap: 1}}>\n                    {showButton && (\n                        <AttachmentsButton id={buttonId} size=\"small\" startIcon={<AttachFileRoundedIcon />} onClick={picker.open} disabled={isLocked}>\n                            {buttonLabel ?? t('upload.attach')}\n                        </AttachmentsButton>\n                    )}\n                    {template && <TemplateDownloadButton size=\"small\" texts={texts} {...template} />}\n                    {actions}\n                </AttachmentsActions>\n            )}\n            {value.length > 0 && (\n                <AttachmentsList direction=\"row\" role=\"list\" ownSx={{flexWrap: 'wrap', gap: 1, mt: showButton ? 1 : 0}}>\n                    {value.map((file) => (\n                        <Box key={file.id ?? file.name} role=\"listitem\" sx={{maxWidth: '100%'}}>\n                            <FileChip file={file} ChipComponent={AttachmentsChip} removeLabel={t('upload.remove', {name: file.name})}\n                                      onRemove={isLocked ? undefined : () => remove(file)} />\n                        </Box>\n                    ))}\n                </AttachmentsList>\n            )}\n            {limitsText && (\n                <AttachmentsLimits variant=\"caption\" color=\"text.secondary\" ownSx={{display: 'block', mt: 0.5}}>{limitsText}</AttachmentsLimits>\n            )}\n            {bottomText && <FormHelperText error={Boolean(errorText)}>{bottomText}</FormHelperText>}\n        </AttachmentsRoot>\n    );\n\n    return label ? <FieldFrame inputId={buttonId} label={label}>{content}</FieldFrame> : content;\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\n// OJO: con su tipo propio, el genérico (T: el tipo de cada archivo) que la envoltura borraría; slots y slotProps van en su\n// documentación\n/** @type {typeof AttachmentsInputContent} */\nconst AttachmentsInput = withPieceSlots(AttachmentsInputContent, THEME_NAME);\nexport default AttachmentsInput;\n"],"names":[],"mappings":"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"}

package/dist/upload/FileChip.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import Chip from "@mui/material/Chip";
+import CancelIcon from "@mui/icons-material/Cancel";
+import { sxListOf } from "../theme/themePieces.js";
+import { useFormatters } from "../toolkit/useFormatters.js";
+import { fileAppearanceOf } from "./fileAppearance.js";
+function FileChip({ file, onRemove, removeLabel, ChipComponent = Chip, ownSx }) {
+  const { formatFileSize } = useFormatters();
+  const { Icon, color } = fileAppearanceOf(file.name);
+  const label = typeof file.size === "number" ? `${file.name} · ${formatFileSize(file.size)}` : file.name;
+  const chipSx = [{ maxWidth: "100%", height: "auto", py: 0.5, "& .MuiChip-label": { whiteSpace: "normal", overflowWrap: "anywhere" } }, ...sxListOf(ownSx)];
+  return /* @__PURE__ */ jsx(
+    ChipComponent,
+    {
+      icon: /* @__PURE__ */ jsx(Icon, { fontSize: "small", color }),
+      label,
+      variant: "outlined",
+      onDelete: onRemove,
+      deleteIcon: /* @__PURE__ */ jsx(CancelIcon, { "aria-label": removeLabel }),
+      ...ChipComponent === Chip ? { sx: chipSx } : { ownSx: chipSx }
+    }
+  );
+}
+export {
+  FileChip as default
+};
+//# sourceMappingURL=FileChip.js.map

package/dist/upload/FileChip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileChip.js","sources":["../../src/upload/FileChip.jsx"],"sourcesContent":["// Un archivo elegido como chip: su ícono según el tipo, su nombre y su peso, y la × para quitarlo. Lo comparten los\n// cargadores del paquete; cada uno le pasa su parte del tema (ChipComponent) para que el proyecto la cambie desde ahí.\n//\n// Sirve igual para un archivo nuevo (File) y para uno que ya está guardado en el servidor ({name, size?}): sin peso, solo\n// se ve el nombre. Un nombre largo se parte en renglones en lugar de cortarse: es lo que la persona revisa antes de subir.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Chip from '@mui/material/Chip';\nimport CancelIcon from '@mui/icons-material/Cancel';\n\nimport {sxListOf} from '@/theme/themePieces.js';\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {fileAppearanceOf} from '@/upload/fileAppearance.js';\n\n/**\n * @param {object} props\n * @param {{name: string, size?: number}} props.file\n * @param {(() => void)|undefined} [props.onRemove] sin él no hay × (con el candado puesto, por ejemplo)\n * @param {string} props.removeLabel ya traducido: «Quitar contrato.pdf»\n * @param {import('react').ElementType} [props.ChipComponent] la parte del tema del cargador (por omisión, el Chip de MUI)\n * @param {object} [props.ownSx] el estilo de la casa, debajo del tema del proyecto\n */\nexport default function FileChip({file, onRemove, removeLabel, ChipComponent = Chip, ownSx}) {\n    const {formatFileSize} = useFormatters();\n    const {Icon, color} = fileAppearanceOf(file.name);\n    const label = typeof file.size === 'number' ? `${file.name} · ${formatFileSize(file.size)}` : file.name;\n    // en lista: lo del cargador va DESPUÉS y se combina regla por regla (dentro del mismo objeto reemplazaría la llave entera)\n    const chipSx = [{maxWidth: '100%', height: 'auto', py: 0.5, '& .MuiChip-label': {whiteSpace: 'normal', overflowWrap: 'anywhere'}}, ...sxListOf(ownSx)];\n\n    return (\n        <ChipComponent\n            icon={<Icon fontSize=\"small\" color={color} />}\n            label={label}\n            variant=\"outlined\"\n            onDelete={onRemove}\n            deleteIcon={<CancelIcon aria-label={removeLabel} />}\n            {...(ChipComponent === Chip ? {sx: chipSx} : {ownSx: chipSx})}\n        />\n    );\n}\n"],"names":[],"mappings":";;;;;;;AAsBA,SAAwB,SAAS,EAAC,MAAM,UAAU,aAAa,gBAAgB,MAAM,SAAQ;AACzF,QAAM,EAAC,eAAA,IAAkB,cAAA;AACzB,QAAM,EAAC,MAAM,MAAA,IAAS,iBAAiB,KAAK,IAAI;AAChD,QAAM,QAAQ,OAAO,KAAK,SAAS,WAAW,GAAG,KAAK,IAAI,MAAM,eAAe,KAAK,IAAI,CAAC,KAAK,KAAK;AAEnG,QAAM,SAAS,CAAC,EAAC,UAAU,QAAQ,QAAQ,QAAQ,IAAI,KAAK,oBAAoB,EAAC,YAAY,UAAU,cAAc,WAAA,EAAU,GAAI,GAAG,SAAS,KAAK,CAAC;AAErJ,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAM,oBAAC,MAAA,EAAK,UAAS,SAAQ,OAAc;AAAA,MAC3C;AAAA,MACA,SAAQ;AAAA,MACR,UAAU;AAAA,MACV,YAAY,oBAAC,YAAA,EAAW,cAAY,YAAA,CAAa;AAAA,MAChD,GAAI,kBAAkB,OAAO,EAAC,IAAI,OAAA,IAAU,EAAC,OAAO,OAAA;AAAA,IAAM;AAAA,EAAA;AAGvE;"}