@stackcraftmx/calcita 0.32.2 → 0.47.0

package/dist/ui/help/useHelpCarousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHelpCarousel.js","sources":["../../../src/ui/help/useHelpCarousel.js"],"sourcesContent":["// Cuándo sale la ayuda en carrusel (HelpCarouselDialog): sola la primera vez que se entra, y otra vez cuando cambia\n// (versión nueva), hasta que la persona la termina o marca «No volver a mostrar». Se recuerda en este navegador; si el\n// proyecto ya sabe en su servidor que la persona la vio (como el «primeras instrucciones» de un usuario), lo pasa en seen\n// y manda.\n//\n//   const help = useHelpCarousel({helpKey: 'tasks', version: '2'});\n//   <HelpButton onClick={help.openHelp} />\n//   <HelpCarouselDialog open={help.open} onClose={help.closeHelp} steps={…} />\n//\n// Hook genérico: function (regla de la casa).\nimport {useState} from 'react';\n\nimport {acceptedVersionOf, rememberAcceptedVersion} from '@/legal/consentStorage.js';\n\nconst STORAGE_PREFIX = 'calcita:help:';\n\n/**\n * @param {object} options\n * @param {string} options.helpKey de qué pantalla es la ayuda ('tasks'): una llave por ayuda\n * @param {string} [options.version] súbala cuando la ayuda cambie y deba volver a salir\n * @param {boolean} [options.autoOpen] que salga sola la primera vez (por omisión sí)\n * @param {boolean} [options.seen] lo que sabe el servidor del proyecto: true = ya la vio (no sale sola)\n * @returns {{open: boolean, openHelp: () => void, closeHelp: (reason?: string, details?: {dontShowAgain: boolean}) => void, wasSeen: boolean}}\n */\nexport function useHelpCarousel({helpKey, version = '1', autoOpen = true, seen = false}) {\n    const storageKey = `${STORAGE_PREFIX}${helpKey}`;\n    const wasSeen = seen || acceptedVersionOf(storageKey) === version;\n    const [open, setOpen] = useState(() => autoOpen && !wasSeen);\n\n    return {\n        open,\n        wasSeen,\n        openHelp: () => setOpen(true),\n        // terminarla la recuerda; cerrarla antes, solo con «No volver a mostrar»\n        closeHelp: (reason, {dontShowAgain = false} = {}) => {\n            setOpen(false);\n            if (reason === 'finished' || dontShowAgain) {\n                rememberAcceptedVersion(storageKey, version);\n            }\n        },\n    };\n}\n"],"names":[],"mappings":";;;AAcA,MAAM,iBAAiB;AAUhB,SAAS,gBAAgB,EAAC,SAAS,UAAU,KAAK,WAAW,MAAM,OAAO,MAAK,GAAG;AACrF,QAAM,aAAa,GAAG,cAAc,GAAG,OAAO;AAC9C,QAAM,UAAU,QAAQ,kBAAkB,UAAU,MAAM;AAC1D,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,MAAM,YAAY,CAAC,OAAO;AAE3D,SAAO;AAAA,IACH;AAAA,IACA;AAAA,IACA,UAAU,MAAM,QAAQ,IAAI;AAAA;AAAA,IAE5B,WAAW,CAAC,QAAQ,EAAC,gBAAgB,MAAK,IAAI,CAAA,MAAO;AACjD,cAAQ,KAAK;AACb,UAAI,WAAW,cAAc,eAAe;AACxC,gCAAwB,YAAY,OAAO;AAAA,MAC/C;AAAA,IACJ;AAAA,EACR;AACA;"}

package/dist/ui/labels/IconBadge.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import Tooltip from "@mui/material/Tooltip";
+import { styled, useThemeProps } from "@mui/material/styles";
+import { lookup, labelOf } from "../../dictionaries/dictionaries.js";
+import { paletteOf } from "../../theme/components/paletteOf.js";
+import { accentTextStylesOf } from "../../theme/glassSurface.js";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
+const ICON_BADGE_VARIANT = Object.freeze({ outlined: "outlined", soft: "soft", plain: "plain" });
+const PALETTE_TONES = ["primary", "secondary", "success", "warning", "error", "info"];
+const SOFT_FILL_PERCENT = 10;
+const SIZES = Object.freeze({
+  small: { fontSize: 12, iconSize: 16, paddingBlock: 2, paddingInline: 8, gap: 4 },
+  medium: { fontSize: 14, iconSize: 20, paddingBlock: 5, paddingInline: 10, gap: 6 }
+});
+const THEME_NAME = "CalcitaIconBadge";
+const ICON_BADGE_CLASSES = Object.freeze({ root: `${THEME_NAME}-root`, icon: `${THEME_NAME}-icon`, label: `${THEME_NAME}-label` });
+const IconBadgeRoot = styled("span", { name: THEME_NAME, slot: "Root" })(({ theme, ownerState }) => {
+  const palette = paletteOf(theme);
+  const tone = PALETTE_TONES.includes(ownerState.tone) ? palette[ownerState.tone] : null;
+  const size = SIZES[ownerState.size] ?? SIZES.small;
+  const isBoxed = ownerState.variant !== ICON_BADGE_VARIANT.plain;
+  const textColors = tone ? { ...accentTextStylesOf(theme, ownerState.tone), borderColor: "currentColor" } : { color: palette.text.secondary, borderColor: palette.divider };
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: size.gap,
+    maxWidth: "100%",
+    verticalAlign: "middle",
+    fontSize: size.fontSize,
+    fontWeight: 600,
+    lineHeight: 1.4,
+    whiteSpace: "nowrap",
+    ...textColors,
+    ...isBoxed && {
+      paddingBlock: size.paddingBlock,
+      paddingInline: size.paddingInline,
+      borderRadius: theme.shape.borderRadius,
+      backgroundColor: `color-mix(in srgb, ${tone?.main ?? palette.text.secondary} ${SOFT_FILL_PERCENT}%, transparent)`,
+      borderWidth: ownerState.variant === ICON_BADGE_VARIANT.outlined ? 1.5 : 0,
+      borderStyle: "solid"
+    }
+  };
+});
+const IconBadgeIcon = styled("span", { name: THEME_NAME, slot: "Icon" })(({ ownerState }) => {
+  const size = SIZES[ownerState.size] ?? SIZES.small;
+  return { display: "inline-flex", flexShrink: 0, "& svg": { fontSize: size.iconSize } };
+});
+const IconBadgeLabel = styled("span", { name: THEME_NAME, slot: "Label" })({ minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" });
+function IconBadge(props) {
+  const {
+    dictionary,
+    value,
+    icon,
+    label,
+    tone = "primary",
+    variant = ICON_BADGE_VARIANT.outlined,
+    size = "small",
+    tooltip,
+    sx,
+    ...unknownProps
+  } = useThemeProps({ props, name: THEME_NAME });
+  warnUnknownProps(THEME_NAME, unknownProps);
+  const { t } = useToolkitTranslation("dictionaries");
+  const entry = dictionary ? lookup(dictionary, value) : null;
+  const Icon = entry?.icon ?? icon;
+  const text = entry ? labelOf(entry, t) : label;
+  const explanation = tooltip ?? (entry ? t(entry.tooltipKey, { defaultValue: "" }) : null);
+  const ownerState = { tone: entry?.color ?? tone, variant, size };
+  const badge = /* @__PURE__ */ jsxs(IconBadgeRoot, { ownerState, className: ICON_BADGE_CLASSES.root, sx, children: [
+    Icon && /* @__PURE__ */ jsx(IconBadgeIcon, { ownerState, className: ICON_BADGE_CLASSES.icon, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, {}) }),
+    /* @__PURE__ */ jsx(IconBadgeLabel, { ownerState, className: ICON_BADGE_CLASSES.label, children: text })
+  ] });
+  return explanation ? /* @__PURE__ */ jsx(Tooltip, { title: explanation, children: badge }) : badge;
+}
+export {
+  ICON_BADGE_CLASSES,
+  ICON_BADGE_VARIANT,
+  IconBadge as default
+};
+//# sourceMappingURL=IconBadge.js.map

package/dist/ui/labels/IconBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconBadge.js","sources":["../../../src/ui/labels/IconBadge.jsx"],"sourcesContent":["// La insignia: un ícono y un texto corto con el color de lo que significan («Envío asegurado», «Pago con tarjeta», «Requiere\n// factura»). Para destacar una característica de un registro en su encabezado o en su tarjeta; no es un botón.\n//\n// Tres estilos (variant):\n//   outlined   borde de su color y fondo tenue (por omisión): resalta en una tarjeta\n//   soft       solo el fondo tenue, sin borde: varias juntas sin ruido\n//   plain      sin caja, el ícono y el texto de su color: dentro de un renglón de texto\n// El texto va en su color oscurecido en claro y aclarado en oscuro, lo justo para leerse (accentTextStylesOf, la regla del\n// tema; con el tono «dark» de la paleta, el azul sin caja daba 4.28 : 1 sobre una tarjeta, medido).\n//\n// Desde un diccionario (la regla de la casa: etiqueta, tooltip, color e ícono salen de ahí): dictionary + value; la entrada\n// trae su ícono con dictionaryEntryOf(…, {icon}). O suelta: icon, label y tone.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaIconBadge con defaultProps y\n// styleOverrides de sus partes: root, icon, label.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Tooltip from '@mui/material/Tooltip';\nimport {styled, useThemeProps} from '@mui/material/styles';\n\nimport {labelOf, lookup} from '@/dictionaries/dictionaries.js';\nimport {paletteOf} from '@/theme/components/paletteOf.js';\nimport {accentTextStylesOf} from '@/theme/glassSurface.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n/** Los estilos de la insignia. */\nexport const ICON_BADGE_VARIANT = Object.freeze({outlined: 'outlined', soft: 'soft', plain: 'plain'});\n\n// los colores de la paleta que se pueden usar; otro (o «default») se pinta neutro, en gris\nconst PALETTE_TONES = ['primary', 'secondary', 'success', 'warning', 'error', 'info'];\n// cuánto del color lleva el fondo tenue\nconst SOFT_FILL_PERCENT = 10;\nconst SIZES = Object.freeze({\n    small: {fontSize: 12, iconSize: 16, paddingBlock: 2, paddingInline: 8, gap: 4},\n    medium: {fontSize: 14, iconSize: 20, paddingBlock: 5, paddingInline: 10, gap: 6},\n});\n\n// el nombre de la pieza en el tema (theme.components.CalcitaIconBadge) y sus clases fijas, para el CSS de un proyecto o una\n// prueba (como las de MUI: el nombre que pone styled no sale en la versión construida)\nconst THEME_NAME = 'CalcitaIconBadge';\nexport const ICON_BADGE_CLASSES = Object.freeze({root: `${THEME_NAME}-root`, icon: `${THEME_NAME}-icon`, label: `${THEME_NAME}-label`});\n\nconst IconBadgeRoot = styled('span', {name: THEME_NAME, slot: 'Root'})(({theme, ownerState}) => {\n    const palette = paletteOf(theme);\n    const tone = PALETTE_TONES.includes(ownerState.tone) ? palette[ownerState.tone] : null;\n    const size = SIZES[ownerState.size] ?? SIZES.small;\n    const isBoxed = ownerState.variant !== ICON_BADGE_VARIANT.plain;\n    // el texto y el borde: su color oscurecido en claro y aclarado en oscuro (borderColor: currentColor toma el mismo)\n    const textColors = tone\n        ? {...accentTextStylesOf(theme, ownerState.tone), borderColor: 'currentColor'}\n        : {color: palette.text.secondary, borderColor: palette.divider};\n    return {\n        display: 'inline-flex', alignItems: 'center', gap: size.gap, maxWidth: '100%', verticalAlign: 'middle',\n        fontSize: size.fontSize, fontWeight: 600, lineHeight: 1.4, whiteSpace: 'nowrap',\n        ...textColors,\n        ...(isBoxed && {\n            paddingBlock: size.paddingBlock, paddingInline: size.paddingInline, borderRadius: theme.shape.borderRadius,\n            backgroundColor: `color-mix(in srgb, ${tone?.main ?? palette.text.secondary} ${SOFT_FILL_PERCENT}%, transparent)`,\n            borderWidth: ownerState.variant === ICON_BADGE_VARIANT.outlined ? 1.5 : 0, borderStyle: 'solid',\n        }),\n    };\n});\nconst IconBadgeIcon = styled('span', {name: THEME_NAME, slot: 'Icon'})(({ownerState}) => {\n    const size = SIZES[ownerState.size] ?? SIZES.small;\n    return {display: 'inline-flex', flexShrink: 0, '& svg': {fontSize: size.iconSize}};\n});\n// el texto en su propio span: un nodo de texto suelto dentro de un flex se corta sin «…»\nconst IconBadgeLabel = styled('span', {name: THEME_NAME, slot: 'Label'})({minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis'});\n\n/**\n * @param {object} props\n * @param {Record<string, object>} [props.dictionary] de donde sale la etiqueta, el tooltip, el color y el ícono\n * @param {string|null} [props.value] con dictionary: el código del API\n * @param {import('react').ElementType} [props.icon] suelta: el ícono (un componente, p. ej. VerifiedUserOutlinedIcon)\n * @param {import('react').ReactNode} [props.label] suelta: el texto, ya traducido\n * @param {'primary'|'secondary'|'success'|'warning'|'error'|'info'|'default'} [props.tone] suelta: el color\n * @param {'outlined'|'soft'|'plain'} [props.variant] ICON_BADGE_VARIANT\n * @param {'small'|'medium'} [props.size]\n * @param {import('react').ReactNode} [props.tooltip] lo que explica al pasar el cursor (con dictionary, el del diccionario)\n * @param {object} [props.sx]\n */\nexport default function IconBadge(props) {\n    const {\n        dictionary, value, icon, label, tone = 'primary', variant = ICON_BADGE_VARIANT.outlined, size = 'small', tooltip, sx,\n        ...unknownProps\n    } = useThemeProps({props, name: THEME_NAME});\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('dictionaries');\n    const entry = dictionary ? lookup(dictionary, value) : null;\n    const Icon = entry?.icon ?? icon;\n    const text = entry ? labelOf(entry, t) : label;\n    const explanation = tooltip ?? (entry ? t(entry.tooltipKey, {defaultValue: ''}) : null);\n    const ownerState = {tone: entry?.color ?? tone, variant, size};\n\n    const badge = (\n        <IconBadgeRoot ownerState={ownerState} className={ICON_BADGE_CLASSES.root} sx={sx}>\n            {Icon && <IconBadgeIcon ownerState={ownerState} className={ICON_BADGE_CLASSES.icon} aria-hidden=\"true\"><Icon /></IconBadgeIcon>}\n            <IconBadgeLabel ownerState={ownerState} className={ICON_BADGE_CLASSES.label}>{text}</IconBadgeLabel>\n        </IconBadgeRoot>\n    );\n    // sin explicación no se envuelve (un Tooltip vacío igual agrega listeners)\n    return explanation ? <Tooltip title={explanation}>{badge}</Tooltip> : badge;\n}\n"],"names":[],"mappings":"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"}

package/dist/ui/navigation/RouteTabs.js

@@ -0,0 +1,75 @@
+"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, 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 RouteTabs(props) {
+  const { tabs, ariaLabel, mode = ROUTE_TABS_MODE.path, paramName = DEFAULT_PARAM_NAME, 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 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,
+              onClick: () => onChange?.(tab),
+              ownSx: { minHeight: 48 }
+            },
+            key
+          );
+        })
+      }
+    )
+  );
+}
+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, regresar con «atrás» y\n// abrirla en otra pestaña 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\n//   query   pestañas dentro de una misma pantalla, guardadas en la consulta (?tab=pagos); useActiveRouteTab dice cuál pintar\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} 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 {(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 */\nexport default function RouteTabs(props) {\n    const {tabs, ariaLabel, mode = ROUTE_TABS_MODE.path, paramName = DEFAULT_PARAM_NAME, 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 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}}>\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} onClick={() => onChange?.(tab)} ownSx={{minHeight: 48}} />\n                );\n            })}\n        </RouteTabsRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AA+BO,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;AAYA,SAAwB,UAAU,OAAO;AACrC,QAAM,EAAC,MAAM,WAAW,OAAO,gBAAgB,MAAM,YAAY,oBAAoB,UAAU,IAAI,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AACrJ,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,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,GAAG,GAAG,GAAA;AAAA,QAClC,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,MAAM,WAAW,GAAG;AAAA,cAAG,OAAO,EAAC,WAAW,GAAA;AAAA,YAAE;AAAA,YAD3E;AAAA,UAAA;AAAA,QAGvB,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA;AAGb;"}

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/upload/AttachmentsInput.js

@@ -0,0 +1,127 @@
+"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 { translateValidationMessage } from "../forms/validationMessages.js";
+import FieldFrame from "../inputs/FieldFrame.js";
+import { piecePart, 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 AttachmentsInput(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,
+    texts,
+    ...unknownProps
+  } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
+  const { t } = useToolkitTranslation("common", texts);
+  const { formatFileSize } = useFormatters();
+  const generatedId = useId();
+  const buttonId = `${name ?? "attachments"}-${generatedId}`;
+  const errorText = translateValidationMessage(t, 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;
+}
+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 {translateValidationMessage} from '@/forms/validationMessages.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\nimport {piecePart, usePieceProps} 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 {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function AttachmentsInput(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, texts,\n        ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const {formatFileSize} = useFormatters();\n    const generatedId = useId();\n    const buttonId = `${name ?? 'attachments'}-${generatedId}`;\n    const errorText = translateValidationMessage(t, 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', ...sx,\n                         }}>\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"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAqCA,MAAM,aAAa;AACnB,MAAM,kBAAkB,UAAU,YAAY,QAAQ,GAAG;AACzD,MAAM,qBAAqB,UAAU,YAAY,WAAW,KAAK;AACjE,MAAM,oBAAoB,UAAU,YAAY,UAAU,MAAM;AAChE,MAAM,kBAAkB,UAAU,YAAY,QAAQ,KAAK;AAC3D,MAAM,kBAAkB,UAAU,YAAY,YAAY,IAAI;AAC9D,MAAM,oBAAoB,UAAU,YAAY,UAAU,UAAU;AA+BpE,SAAwB,iBAAiB,OAAO;AAC5C,QAAM;AAAA,IACF;AAAA,IAAM;AAAA,IAAO,QAAQ,CAAA;AAAA,IAAI;AAAA,IAAU;AAAA,IAAQ;AAAA,IAAU;AAAA,IAAQ;AAAA,IAAS;AAAA,IAAU;AAAA,IAAc;AAAA,IAAO;AAAA,IAAY;AAAA,IACjH,aAAa;AAAA,IAAM;AAAA,IAAW,WAAW;AAAA,IAAO,OAAO;AAAA,IAAO;AAAA,IAAU;AAAA,IAAU;AAAA,IAAS;AAAA,IAAI;AAAA,IAC/F,GAAG;AAAA,EAAA,IACH,cAAc,OAAO,UAAU;AACnC,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,EAAC,eAAA,IAAkB,cAAA;AACzB,QAAM,cAAc,MAAA;AACpB,QAAM,WAAW,GAAG,QAAQ,aAAa,IAAI,WAAW;AACxD,QAAM,YAAY,2BAA2B,GAAG,KAAK;AACrD,QAAM,WAAW,YAAY;AAC7B,QAAM,SAAS,CAAC,UAAU;AACtB,aAAS,KAAK;AACd,aAAA;AAAA,EACJ;AACA,QAAM,SAAS,cAAc;AAAA,IACzB;AAAA,IAAQ;AAAA,IAAS,UAAU;AAAA,IAAM;AAAA,IAAU;AAAA,IAAc,WAAW;AAAA,IAAO,UAAU;AAAA,IAAU,UAAU;AAAA,IAAQ;AAAA,IAAU;AAAA,EAAA,CAC9H;AACD,sBAAoB,WAAW,OAAO,EAAC,MAAM,OAAO,SAAQ,CAAC,OAAO,IAAI,CAAC;AAEzE,QAAM,SAAS,CAAC,SAAS;AACrB,eAAW,IAAI;AACf,WAAO,MAAM,OAAO,CAAC,SAAS,SAAS,IAAI,CAAC;AAAA,EAChD;AACA,QAAM,aAAa,MAAM,OAAO,CAAC,KAAK,SAAS,OAAO,KAAK,QAAQ,IAAI,CAAC;AAExE,QAAM,aAAa,YAAY,OAAO,gBAChC,EAAE,OAAO,gBAAgB,qBAAqB,kBAAkB;AAAA,IAC9D,OAAO,MAAM;AAAA,IAAQ,OAAO,eAAe,UAAU;AAAA,IAAG,KAAK,OAAO,gBAAgB,eAAe,OAAO,aAAa,IAAI;AAAA,EAAA,CAC9H,IACC;AACN,QAAM,aAAa,aAAa;AAEhC,QAAM,UACF;AAAA,IAAC;AAAA,IAAA;AAAA,MAAgB,aAAW;AAAA,MAAO,GAAG,OAAO;AAAA,MAC5B,OAAO;AAAA,QACH,cAAc;AAAA,QAAG,SAAS,OAAO,aAAa,IAAI;AAAA,QAAG,cAAc;AAAA,QAAU,cAAc;AAAA,QAC3F,SAAS,OAAO,aAAa,iBAAiB;AAAA,QAAe,GAAG;AAAA,MAAA;AAAA,MAEjF,UAAA;AAAA,QAAA,oBAAC,SAAA,EAAO,GAAG,OAAO,YAAY,MAAY,eAAY,QAAO,UAAU,IAAI;AAAA,SACzE,cAAc,YAAY,YACxB,qBAAC,sBAAmB,WAAU,OAAM,OAAO,EAAC,YAAY,UAAU,UAAU,QAAQ,KAAK,KACpF,UAAA;AAAA,UAAA,kCACI,mBAAA,EAAkB,IAAI,UAAU,MAAK,SAAQ,WAAW,oBAAC,uBAAA,EAAsB,GAAI,SAAS,OAAO,MAAM,UAAU,UAC/G,UAAA,eAAe,EAAE,eAAe,GACrC;AAAA,UAEH,YAAY,oBAAC,wBAAA,EAAuB,MAAK,SAAQ,OAAe,GAAG,UAAU;AAAA,UAC7E;AAAA,QAAA,GACL;AAAA,QAEH,MAAM,SAAS,KACZ,oBAAC,mBAAgB,WAAU,OAAM,MAAK,QAAO,OAAO,EAAC,UAAU,QAAQ,KAAK,GAAG,IAAI,aAAa,IAAI,EAAA,GAC/F,UAAA,MAAM,IAAI,CAAC,SACR,oBAAC,KAAA,EAA+B,MAAK,YAAW,IAAI,EAAC,UAAU,UAC3D,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAAS;AAAA,YAAY,eAAe;AAAA,YAAiB,aAAa,EAAE,iBAAiB,EAAC,MAAM,KAAK,MAAK;AAAA,YAC7F,UAAU,WAAW,SAAY,MAAM,OAAO,IAAI;AAAA,UAAA;AAAA,QAAA,KAFtD,KAAK,MAAM,KAAK,IAG1B,CACH,EAAA,CACL;AAAA,QAEH,cACG,oBAAC,mBAAA,EAAkB,SAAQ,WAAU,OAAM,kBAAiB,OAAO,EAAC,SAAS,SAAS,IAAI,IAAA,GAAO,UAAA,YAAW;AAAA,QAE/G,cAAc,oBAAC,gBAAA,EAAe,OAAO,QAAQ,SAAS,GAAI,UAAA,WAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI9E,SAAO,QAAQ,oBAAC,YAAA,EAAW,SAAS,UAAU,OAAe,mBAAQ,IAAgB;AACzF;"}

package/dist/upload/FileChip.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import Chip from "@mui/material/Chip";
+import CancelIcon from "@mui/icons-material/Cancel";
+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" }, ...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 {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    const chipSx = {maxWidth: '100%', height: 'auto', py: 0.5, '& .MuiChip-label': {whiteSpace: 'normal', overflowWrap: 'anywhere'}, ...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":";;;;;;AAqBA,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;AACnG,QAAM,SAAS,EAAC,UAAU,QAAQ,QAAQ,QAAQ,IAAI,KAAK,oBAAoB,EAAC,YAAY,UAAU,cAAc,WAAA,GAAa,GAAG,MAAA;AAEpI,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;"}

package/dist/upload/FileDropzone.js

@@ -1,25 +1,19 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useState } from "react";
-import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Chip from "@mui/material/Chip";
 import Paper from "@mui/material/Paper";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
-import CancelIcon from "@mui/icons-material/Cancel";
-import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined";
-import ImageOutlinedIcon from "@mui/icons-material/ImageOutlined";
-import InsertDriveFileOutlinedIcon from "@mui/icons-material/InsertDriveFileOutlined";
-import PictureAsPdfOutlinedIcon from "@mui/icons-material/PictureAsPdfOutlined";
-import TableViewOutlinedIcon from "@mui/icons-material/TableViewOutlined";
 import ModalWaiting from "../feedback/ModalWaiting.js";
-import { toastError } from "../feedback/toast.js";
-import { useFormatters } from "../toolkit/useFormatters.js";
-import { resolveAccept, parseFileSize, matchesAccept, FILE_REJECTION } from "./fileRules.js";
 import { piecePart, 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 = "CalcitaFileDropzone";
 const DropzoneRoot = piecePart(THEME_NAME, "Root", Paper);
 const DropzoneFileArea = piecePart(THEME_NAME, "FileArea", Box);
@@ -28,13 +22,6 @@ const DropzoneHint = piecePart(THEME_NAME, "Hint", Typography);
 const DropzoneActions = piecePart(THEME_NAME, "Actions", Stack);
 const DropzoneLimits = piecePart(THEME_NAME, "Limits", Typography);
 const DropzoneExtra = piecePart(THEME_NAME, "Extra", Box);
-const FILE_APPEARANCES = [
-  { pattern: /\.(xlsx?|csv)$/, Icon: TableViewOutlinedIcon, color: "success" },
-  { pattern: /\.pdf$/, Icon: PictureAsPdfOutlinedIcon, color: "error" },
-  { pattern: /\.(png|jpe?g|gif|webp|svg|avif)$/, Icon: ImageOutlinedIcon, color: "info" },
-  { pattern: /\.(docx?|txt|md)$/, Icon: DescriptionOutlinedIcon, color: "primary" }
-];
-const DEFAULT_FILE_APPEARANCE = { Icon: InsertDriveFileOutlinedIcon, color: "action" };
 function FileDropzone(props) {
   const {
     value = null,
@@ -47,6 +34,7 @@ function FileDropzone(props) {
     busy = false,
     busyModal = false,
     onReject,
+    template,
     actions,
     children,
     sx,
@@ -56,96 +44,43 @@ function FileDropzone(props) {
   warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("common", texts);
   const { formatFileSize } = useFormatters();
-  const inputRef = useRef(null);
-  const [isDragging, setIsDragging] = useState(false);
   const isLocked = disabled || busy;
-  const resolvedAccept = resolveAccept(accept);
-  const maxBytes = parseFileSize(maxSize);
   const hintText = hint ?? t("upload.hint");
-  const reject = (file, reason) => {
-    if (onReject) {
-      onReject(file, reason);
-      return;
-    }
-    const message = reason === FILE_REJECTION.size ? t("upload.tooLarge", { name: file.name, max: formatFileSize(maxBytes) }) : t("upload.invalidType", { name: file.name, accept: resolvedAccept });
-    toastError(message);
-  };
-  const pick = (file) => {
-    if (!file || isLocked) {
-      return;
-    }
-    if (!matchesAccept(file, resolvedAccept)) {
-      reject(file, FILE_REJECTION.type);
-      return;
-    }
-    if (maxBytes && file.size > maxBytes) {
-      reject(file, FILE_REJECTION.size);
-      return;
-    }
-    onChange(file);
-  };
-  const openPicker = () => {
-    if (inputRef.current) {
-      inputRef.current.value = "";
-    }
-    inputRef.current?.click();
-  };
-  const appearance = value ? FILE_APPEARANCES.find(({ pattern }) => pattern.test(value.name.toLowerCase())) ?? DEFAULT_FILE_APPEARANCE : null;
+  const picker = useFilePicker({ accept, maxSize, disabled: isLocked, onAccept: onChange, onReject, texts });
   return /* @__PURE__ */ jsxs(
     DropzoneRoot,
     {
       variant: "outlined",
       "aria-busy": busy,
-      onDragOver: (event) => {
-        event.preventDefault();
-        setIsDragging(!isLocked);
-      },
-      onDragLeave: () => setIsDragging(false),
-      onDrop: (event) => {
-        event.preventDefault();
-        setIsDragging(false);
-        pick(event.dataTransfer.files?.[0]);
-      },
+      ...picker.dropHandlers,
       ownSx: {
         p: { xs: 3, sm: 5 },
         textAlign: "center",
         borderStyle: "dashed",
         borderWidth: 2,
-        borderColor: isDragging ? "primary.main" : "divider",
-        bgcolor: isDragging ? "action.hover" : "background.paper",
+        borderColor: picker.isDragging ? "primary.main" : "divider",
+        bgcolor: picker.isDragging ? "action.hover" : "background.paper",
         transition: "border-color .15s ease, background-color .15s ease",
         opacity: disabled ? 0.6 : 1,
         ...sx
       },
       children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref: inputRef,
-            type: "file",
-            accept: resolvedAccept,
-            hidden: true,
-            disabled: isLocked,
-            "aria-label": hintText,
-            onChange: (event) => pick(event.target.files?.[0])
-          }
-        ),
+        /* @__PURE__ */ jsx("input", { ...picker.inputProps, "aria-label": hintText }),
         value ? /* @__PURE__ */ jsx(DropzoneFileArea, { ownSx: { mb: 2 }, children: /* @__PURE__ */ jsx(
-          DropzoneFileChip,
+          FileChip,
           {
-            icon: /* @__PURE__ */ jsx(appearance.Icon, { fontSize: "small", color: appearance.color }),
-            label: `${value.name} · ${formatFileSize(value.size)}`,
-            variant: "outlined",
-            onDelete: isLocked ? void 0 : () => onChange(null),
-            deleteIcon: /* @__PURE__ */ jsx(CancelIcon, { "aria-label": t("upload.remove", { name: value.name }) }),
-            ownSx: { maxWidth: "100%", height: "auto", py: 0.5, "& .MuiChip-label": { whiteSpace: "normal", overflowWrap: "anywhere" } }
+            file: value,
+            ChipComponent: DropzoneFileChip,
+            removeLabel: t("upload.remove", { name: value.name }),
+            onRemove: isLocked ? void 0 : () => onChange(null)
           }
         ) }) : /* @__PURE__ */ jsx(DropzoneHint, { variant: "body1", ownSx: { mb: 2, overflowWrap: "anywhere" }, children: hintText }),
         /* @__PURE__ */ jsxs(DropzoneActions, { direction: { xs: "column", sm: "row" }, spacing: 2, ownSx: { justifyContent: "center", alignItems: { xs: "stretch", sm: "center" } }, children: [
-          /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: openPicker, disabled: isLocked, children: buttonLabel ?? t("upload.choose") }),
+          /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: picker.open, disabled: isLocked, children: buttonLabel ?? t("upload.choose") }),
+          template && /* @__PURE__ */ jsx(TemplateDownloadButton, { texts, ...template }),
           actions
         ] }),
-        maxBytes && /* @__PURE__ */ jsx(DropzoneLimits, { variant: "caption", color: "text.secondary", ownSx: { display: "block", mt: 1.5 }, children: t("upload.maxSizeHint", { max: formatFileSize(maxBytes) }) }),
+        picker.maxBytes && /* @__PURE__ */ jsx(DropzoneLimits, { variant: "caption", color: "text.secondary", ownSx: { display: "block", mt: 1.5 }, children: t("upload.maxSizeHint", { max: formatFileSize(picker.maxBytes) }) }),
         children && /* @__PURE__ */ jsx(DropzoneExtra, { ownSx: { mt: 3, textAlign: "left" }, children }),
         busyModal && /* @__PURE__ */ jsx(ModalWaiting, { open: busy, title: busyModal.title, text: busyModal.text })
       ]