@stackcraftmx/calcita 0.27.0 → 0.30.0

package/dist/types/theme/createToolkitTheme.d.ts

@@ -32,11 +32,21 @@ export declare const TOP_BAR: Readonly<{
  *     teléfono y lo que flota). Lo que no se pase se queda con los grises de Apple (MINIMAL_TONES). OJO: con el minimalista
  *     el fondo de la página sale de aquí y no de la paleta (sin minimalTones, los grises de Apple aunque la paleta traiga
  *     su background)
+ * @param {{radius?: number, light?: {fill?: string, hoverFill?: string, border?: string, hoverBorder?: string}, dark?: {fill?: string, hoverFill?: string, border?: string, hoverBorder?: string}}} [options.fields]
+ *     cómo se ven los campos de captura (con vidrio, con el minimalista y dentro de FormSection), por modo: fill (el
+ *     relleno), hoverFill (con el cursor encima), border y hoverBorder (la orilla); y radius (las esquinas, en px). Lo que no
+ *     se pase se queda como el estilo lo trae (FIELD_TONES: el gris de Apple; con el minimalista, su relleno). Van en la
+ *     paleta de cada modo (palette.field), así que también se pueden escribir en colorSchemes y cambian solos con el modo.
+ *     Ejemplo, campos blancos con borde en claro: {light: {fill: '#FFFFFF', hoverFill: '#FFFFFF', border: '#C4CDD5'}}
+ * @param {{panelRadius?: number|string, menuRadius?: number|string, fieldRadius?: number|string, glassBlur?: number|string, glassSaturate?: number|string}} [options.cssTokens]
+ *     los valores globales de Calcita como variables CSS (--calcita-panel-radius…, ver cssTokens.js): las esquinas de los
+ *     paneles, los menús y los campos, y el desenfoque del vidrio. Se declaran en :root con el CssBaseline; un número va en
+ *     px (glassSaturate en %). Sin la opción, cada estilo usa los suyos. También se pueden poner en CSS suelto
  * @param {object} [options.components] ajustes propios de componentes (se suman; en el mismo estilo ganan los del proyecto)
  * @param {object} [options.overrides] cualquier otra cosa de createTheme (breakpoints, spacing…)
  * @returns {object} el tema de MUI
  */
-export declare function createToolkitTheme({ colorSchemes, colorSchemeSelector, fontFamily, glass, look, bar, minimalTones, components, overrides, }?: {
+export declare function createToolkitTheme({ colorSchemes, colorSchemeSelector, fontFamily, glass, look, bar, minimalTones, fields, cssTokens, components, overrides, }?: {
     colorSchemes?: {
         light?: object | boolean;
         dark?: object | boolean;
@@ -63,6 +73,28 @@ export declare function createToolkitTheme({ colorSchemes, colorSchemeSelector,
             floating?: string;
         };
     };
+    fields?: {
+        radius?: number;
+        light?: {
+            fill?: string;
+            hoverFill?: string;
+            border?: string;
+            hoverBorder?: string;
+        };
+        dark?: {
+            fill?: string;
+            hoverFill?: string;
+            border?: string;
+            hoverBorder?: string;
+        };
+    };
+    cssTokens?: {
+        panelRadius?: number | string;
+        menuRadius?: number | string;
+        fieldRadius?: number | string;
+        glassBlur?: number | string;
+        glassSaturate?: number | string;
+    };
     components?: object;
     overrides?: object;
 }): object;

package/dist/types/theme/cssTokens.d.ts

@@ -0,0 +1,46 @@
+/** Cada valor: su variable, el de siempre (respaldo) y la unidad para cuando el proyecto lo da en número. */
+export declare const CSS_TOKENS: Readonly<{
+    panelRadius: Readonly<{
+        variable: "--calcita-panel-radius";
+        fallback: "20px";
+        unit: "px";
+    }>;
+    menuRadius: Readonly<{
+        variable: "--calcita-menu-radius";
+        fallback: "12px";
+        unit: "px";
+    }>;
+    fieldRadius: Readonly<{
+        variable: "--calcita-field-radius";
+        fallback: "12px";
+        unit: "px";
+    }>;
+    glassBlur: Readonly<{
+        variable: "--calcita-glass-blur";
+        fallback: "20px";
+        unit: "px";
+    }>;
+    glassSaturate: Readonly<{
+        variable: "--calcita-glass-saturate";
+        fallback: "180%";
+        unit: "%";
+    }>;
+}>;
+/**
+ * El valor para un estilo: la variable con su respaldo. Un estilo con su propio valor de siempre lo pasa (el minimalista
+ * tiene las tarjetas de 16 px).
+ *
+ * @param {keyof typeof CSS_TOKENS} key
+ * @param {string} [fallback] por omisión el de CSS_TOKENS
+ * @returns {string} p. ej. 'var(--calcita-panel-radius, 20px)'
+ */
+export declare function cssTokenOf(key: keyof typeof CSS_TOKENS, fallback?: string): string;
+/**
+ * Las declaraciones para :root (o para un contenedor) con los valores del proyecto: {panelRadius: 6} →
+ * {'--calcita-panel-radius': '6px'}. Un número lleva la unidad del valor (px o %); un texto va tal cual ('0.5rem').
+ * Lo que no es un valor conocido se ignora.
+ *
+ * @param {Partial<Record<keyof typeof CSS_TOKENS, number|string>>} [values]
+ * @returns {Record<string, string>}
+ */
+export declare function cssTokenDeclarationsOf(values?: Partial<Record<keyof typeof CSS_TOKENS, number | string>>): Record<string, string>;

package/dist/types/theme/glassSurface.d.ts

@@ -4,12 +4,15 @@ export declare const GLASS_OPACITY = 0.6;
 export declare const GLASS_PANEL_RADIUS_PIXELS = 20;
 /** Las esquinas de los menús y ventanitas: renglones de 8 px a 4 px del borde. */
 export declare const GLASS_MENU_RADIUS_PIXELS = 12;
+export declare const PANEL_RADIUS: string;
+export declare const MENU_RADIUS: string;
 /**
  * Lo que se separa de la orilla de la ventana lo que flota (la barra, el menú lateral, los cajones y la hoja de abajo):
  * Apple lo pide para que el contenido se asome por detrás («half sheets are inset from the edge of the display to allow
  * content to peek through from beneath them», Adopting Liquid Glass).
  */
 export declare const GLASS_INSET_PIXELS = 8;
+export declare const GLASS_BLUR: string;
 /**
  * El lente de cada tamaño (ver lensRulesOf), medido en capturas de Chrome: el control chico (botón, chip) más claro y con
  * la orilla más marcada; el panel (barra, menú, diálogo) más grueso, porque lleva texto («Liquid Glass appears more opaque
@@ -179,16 +182,69 @@ export declare function glassDropOf(theme: object): object;
  * @returns {string|null} el relleno en #RRGGBB; null si el color no viene en hexadecimal
  */
 export declare function whiteLabelFillOf(rawColor: string): string | null;
+/**
+ * Los tonos de los campos por omisión, por modo: fill (el relleno), hoverFill (con el cursor encima), border y hoverBorder
+ * (la orilla; transparente: el pozo de Apple no lleva). createToolkitTheme los pone en la paleta de cada modo
+ * (palette.field) y el proyecto los cambia con `fields` o con su paleta: blancos con borde, del tono de su marca…
+ */
+export declare const FIELD_TONES: Readonly<{
+    light: Readonly<{
+        fill: string;
+        hoverFill: string;
+        border: "transparent";
+        hoverBorder: "transparent";
+    }>;
+    dark: Readonly<{
+        fill: string;
+        hoverFill: string;
+        border: "transparent";
+        hoverBorder: "transparent";
+    }>;
+}>;
+/**
+ * Los tonos de los campos del tema (palette.field, que llena createToolkitTheme; con sus variables CSS cambian solos con el
+ * modo, sin reglas de oscuro), o null si el tema no los trae (un createTheme de MUI sin Calcita).
+ *
+ * @param {object} theme
+ * @returns {{fill: string, hoverFill: string, border: string, hoverBorder: string}|null}
+ */
+export declare function fieldPaletteOf(theme: object): {
+    fill: string;
+    hoverFill: string;
+    border: string;
+    hoverBorder: string;
+} | null;
 /**
  * El «pozo» de un campo de texto dentro del contenido (una tarjeta, un formulario agrupado), como los de Apple: un relleno
  * parejo con esquinas de 12 px, del gris de relleno de Apple («tertiary fill»): tenue en claro y más claro que la tarjeta en
  * oscuro (con negro, en oscuro se perdía). Sin vidrio adentro de la tarjeta: ahí no tiene nada que dejar
  * ver. Con el cursor encima se marca apenas; antes el relleno salía solo con el cursor y en cuadro («hovers espantosos»).
+ * Los tonos y las esquinas los puede cambiar el proyecto (createToolkitTheme fields).
+ *
+ * @param {object} theme
+ * @param {{radius?: number}} [options] las esquinas del estilo que lo pide (el minimalista las tiene más chicas)
+ * @returns {object}
+ */
+export declare function fieldWellStylesOf(theme: object, { radius }?: {
+    radius?: number;
+}): object;
+/**
+ * Los tonos de los campos como variables (--calcita-field-*) para un contenedor: el renglón de FormSection las pone en sí
+ * mismo y sus campos las leen (fieldWellFromVariablesOf). OJO, trampa pagada: el renglón le gana al tema con selectores
+ * largos («html body &&& .MuiOutlinedInput-root») y una regla de oscuro anidada ahí abajo nunca aplicaba (en oscuro el
+ * campo salía con el gris de claro). En el contenedor la regla de oscuro sí aplica, y los campos heredan la variable.
+ *
+ * @param {object} theme
+ * @returns {object}
+ */
+export declare function fieldVariablesOf(theme: object): object;
+/**
+ * El pozo de un campo leyendo las variables de su contenedor (fieldVariablesOf).
  *
  * @param {object} theme
  * @returns {object}
  */
-export declare function fieldWellStylesOf(theme: object): object;
+export declare function fieldWellFromVariablesOf(theme: object): object;
 /**
  * Un campo de texto suelto sobre el lienzo (fuera de una tarjeta): una lámina de vidrio clara en claro y el gris de relleno
  * de Apple en oscuro, más claro que el fondo casi negro. Con «Reducir transparencia» se pinta sólido.

package/dist/types/theme/themePieces.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Un componente con su lugar en el tema: theme.components[name].styleOverrides[parte con minúscula] se aplica después
+ * del estilo de Calcita (ownSx) y gana.
+ *
+ * @template {import('react').ElementType} C
+ * @param {string} name el nombre de la pieza en el tema (CalcitaMetricCard)
+ * @param {string} slot la parte, con mayúscula: Root, Title, Card…
+ * @param {C} [component] lo que se pinta (por omisión un div)
+ * @returns {import('react').ComponentType<any>}
+ */
+export declare function piecePart<C extends import('react').ElementType>(name: string, slot: string, component?: C): import('react').ComponentType<any>;
+/**
+ * Los props de la pieza con los defaultProps del tema del proyecto debajo: lo que llega en la pantalla gana.
+ *
+ * @template {object} P
+ * @param {P} props
+ * @param {string} name el nombre de la pieza en el tema
+ * @returns {P}
+ */
+export declare function usePieceProps<P extends object>(props: P, name: string): P;

package/dist/types/ui/actions/ActionsMenu.d.ts

@@ -5,7 +5,7 @@
  * @param {import('react').ReactNode} [props.icon] otro ícono para el botón (por omisión «⋯»)
  * @param {'small'|'medium'} [props.size]
  */
-export default function ActionsMenu({ label, actions, icon, size }: {
+export default function ActionsMenu(props: {
     label: string;
     actions?: Array<{
         key: string;

package/dist/types/ui/actions/DownloadMenu.d.ts

@@ -25,7 +25,7 @@
  * virtualiza y vuelve a pintar sus celdas; el diálogo se perdía al elegir el formato). Ahí el menú solo avisa qué formato
  * se eligió y la pantalla abre SU confirmación (useConfirmAction) fuera de la tabla.
  */
-export default function DownloadMenu({ formats, download, label, downloadLabel, disabled, confirmation, onDownloaded, onFailed, onCanceled, variant, ariaLabel, onChooseFormat, icon: ButtonIcon, }: {
+export default function DownloadMenu(props: {
     formats: string[];
     download: (format: string, transferOptions: {
         signal: AbortSignal;

package/dist/types/ui/actions/SelectionActions.d.ts

@@ -22,7 +22,7 @@ export declare function selectionFloatsOnPhone(theme: object): boolean;
  * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {selection: {clear, actionsLabel, summaryLabel}}
  * @param {object} [props.sx] estilos del renglón
  */
-export default function SelectionActions({ countText, actions, onClear, phoneLayout, texts, sx }: {
+export default function SelectionActions(props: {
     countText: string;
     actions?: Array<{
         key: string;

package/dist/types/ui/filters/DateRangeFilter.d.ts

@@ -6,7 +6,7 @@
  * @param {string} [props.label] ya traducido; por defecto "Personalizado"
  * @param {object} [props.texts] los textos que cambian, con la forma de `table` en los textos del paquete
  */
-export default function DateRangeFilter({ from, to, onChange, label, texts }: {
+export default function DateRangeFilter(props: {
     from?: string;
     to?: string;
     onChange: (range: {

package/dist/types/ui/filters/PeriodRangeSelector.d.ts

@@ -9,7 +9,7 @@
  * @param {string} props.toLabel ya traducido
  * @param {(range: {from: string, to: string}) => void} props.onChange
  */
-export default function PeriodRangeSelector({ id, options, from, to, fromLabel, toLabel, onChange }: {
+export default function PeriodRangeSelector(props: {
     id: string;
     options: Array<{
         value: string;

package/dist/types/ui/filters/QuickFilters.d.ts

@@ -8,7 +8,7 @@
  * @param {import('react').ReactNode} [props.extra] al final de la tira (p. ej. un rango de fechas)
  * @param {object} [props.texts] los textos que cambian, con la forma de `table` en los textos del paquete
  */
-export default function QuickFilters({ value, onChange, options, caption, ariaLabel, extra, texts }: {
+export default function QuickFilters(props: {
     value: string;
     onChange: (value: string) => void;
     options?: Array<{

package/dist/types/ui/filters/SegmentedControl.d.ts

@@ -11,14 +11,19 @@ export declare const SEGMENTED_CONTROL_SX: {
         letterSpacing: string;
         border: number;
         borderRadius: string;
+        m: number;
         px: number;
         py: number;
-        m: string;
         fontWeight: number;
         textTransform: string;
         color: string;
         whiteSpace: string;
     };
+    '& .MuiToggleButton-root.MuiToggleButtonGroup-grouped': {
+        border: number;
+        borderRadius: string;
+        m: number;
+    };
     '& .MuiToggleButton-root.Mui-selected, & .MuiToggleButton-root.Mui-selected:hover': {
         bgcolor: string;
         color: string;
@@ -32,7 +37,7 @@ export declare const SEGMENTED_CONTROL_SX: {
  * @param {(value: string) => void} props.onChange
  * @param {string} props.ariaLabel ya traducido
  */
-export default function SegmentedControl({ options, value, onChange, ariaLabel }: {
+export default function SegmentedControl(props: {
     options: Array<{
         value: string;
         label: string;

package/dist/types/ui/labels/StatusChip.d.ts

@@ -10,7 +10,7 @@
  *     que decir. OJO: no envuelvas este componente en otro Tooltip, porque el suyo sigue ahí y se ven los dos encimados
  * @param {object} [props.sx] ajustes de estilo del Chip (solo variant="chip")
  */
-export default function StatusChip({ dictionary, value, variant, short, suffix, tooltip: customTooltip, sx }: {
+export default function StatusChip(props: {
     dictionary: Record<string, object>;
     value: string | null | undefined;
     variant?: 'dot' | 'chip';

package/dist/types/ui/labels/Tag.d.ts

@@ -8,7 +8,7 @@
  * @param {() => void} [props.onDelete]
  * @param {object} [props.sx]
  */
-export default function Tag({ label, tooltip, color, variant, size, onDelete, sx, ...chipProps }: {
+export default function Tag(props: {
     label: import('react').ReactNode;
     tooltip?: string;
     color?: string;

package/dist/types/ui/layout/CollapsibleSection.d.ts

@@ -8,7 +8,7 @@
  *     adentro hasta que se abre)
  * @param {import('react').ReactNode} props.children
  */
-export default function CollapsibleSection({ collapsedTitle, expandedTitle, hint, defaultExpanded, onExpandedChange, children }: {
+export default function CollapsibleSection(props: {
     collapsedTitle: string;
     expandedTitle: string;
     hint?: string;

package/dist/types/ui/layout/ContentDialog.d.ts

@@ -6,7 +6,7 @@
  * @param {import('react').ReactNode} props.children
  * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete
  */
-export default function ContentDialog({ open, onClose, title, children, texts }: {
+export default function ContentDialog(props: {
     open: boolean;
     onClose: () => void;
     title: string;

package/dist/types/ui/layout/DefinitionList.d.ts

@@ -5,7 +5,7 @@
  * @param {'columns'|'stacked'} [props.layout]
  * @param {number} [props.labelWidth] ancho en px de la columna del dato (solo columns)
  */
-export default function DefinitionList({ entries, layout, labelWidth }: {
+export default function DefinitionList(props: {
     entries: Array<{
         label: string;
         value: import('react').ReactNode;

package/dist/types/ui/layout/DetailHeader.d.ts

@@ -6,7 +6,7 @@
  * @param {import('react').ReactNode} [props.actions] botones a la derecha
  * @param {string} [props.documentTitle] título de la pestaña si difiere del visible
  */
-export default function DetailHeader({ title, eyebrow, badges, actions, documentTitle }: {
+export default function DetailHeader(props: {
     title: string;
     eyebrow?: string;
     badges?: import('react').ReactNode;

package/dist/types/ui/layout/ErrorPage.d.ts

@@ -20,7 +20,7 @@ export declare const ERROR_PAGE_KIND: Readonly<{
  * @param {object} [props.texts] los textos que cambian, con la forma de `errorPage` en los textos del paquete:
  *     {goHome: 'Volver al tablero', notFound: {title: '…'}}
  */
-export default function ErrorPage({ kind, title, text, homePath, onRetry, onGoHome, extraActions, actions, icon, children, texts, }: {
+export default function ErrorPage(props: {
     kind: string;
     title?: string;
     text?: import('react').ReactNode;

package/dist/types/ui/layout/GlassPanel.d.ts

@@ -4,7 +4,7 @@
  * @param {object|Function|Array} [props.sx] estilos propios: se suman y ganan
  * @param {import('react').ElementType} [props.component] por omisión 'div'
  */
-export default function GlassPanel({ children, sx, ...paperProps }: {
+export default function GlassPanel(props: {
     children: import('react').ReactNode;
     sx?: object | Function | any[];
     component?: import('react').ElementType;

package/dist/types/ui/layout/PageHeader.d.ts

@@ -6,7 +6,7 @@
  * @param {import('react').ReactNode} [props.action] normalmente un <Button variant="contained" shape="pill">
  * @param {string} [props.documentTitle] título de la pestaña si difiere del visible
  */
-export default function PageHeader({ title, eyebrow, subtitle, action, documentTitle }: {
+export default function PageHeader(props: {
     title: string;
     eyebrow?: string;
     subtitle?: import('react').ReactNode;

package/dist/types/ui/layout/PageHeading.d.ts

@@ -7,7 +7,7 @@
  * @param {string} [props.documentTitle] título de la pestaña si difiere del visible
  * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete
  */
-export default function PageHeading({ title, description, breadcrumbs, actions, documentTitle, texts }: {
+export default function PageHeading(props: {
     title: string;
     description?: import('react').ReactNode;
     breadcrumbs?: Array<{

package/dist/types/ui/layout/ProfileHeader.d.ts

@@ -7,7 +7,7 @@
  * @param {string[]} [props.chips] sus perfiles o etiquetas, ya traducidos
  * @param {import('react').ReactNode} [props.actions] los botones de la derecha
  */
-export default function ProfileHeader({ name, email, subtitle, avatarUrl, chips, actions }: {
+export default function ProfileHeader(props: {
     name: string;
     email?: string;
     subtitle?: string;

package/dist/types/ui/layout/ScrollableRow.d.ts

@@ -21,7 +21,7 @@ export declare const scrollableRow: {
  * @param {boolean} [props.fadeEdges]
  * @param {import('react').Ref<HTMLElement>} [props.ref]
  */
-export default function ScrollableRow({ children, gap, py, sx, enableDragScroll, enableWheelToX, fadeEdges, ref, ...boxProps }: {
+export default function ScrollableRow(props: {
     children: import('react').ReactNode;
     gap?: number;
     py?: number;

package/dist/types/ui/layout/SectionCard.d.ts

@@ -4,7 +4,7 @@
  * @param {import('react').ReactNode} [props.action] botón o liga a la derecha del título
  * @param {import('react').ReactNode} props.children
  */
-export default function SectionCard({ title, action, children }: {
+export default function SectionCard(props: {
     title: string;
     action?: import('react').ReactNode;
     children: import('react').ReactNode;

package/dist/types/ui/metrics/BarList.d.ts

@@ -8,7 +8,7 @@
  * @param {(view: 'chart'|'table') => void} [props.onViewChange] la persona cambió a la tabla o a la gráfica
  * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete
  */
-export default function BarList({ items, onSelect, emptyLabel, tone, texts, defaultView, onViewChange }: {
+export default function BarList(props: {
     items: Array<{
         key: string;
         label: string;

package/dist/types/ui/metrics/CalendarHeatmap.d.ts

@@ -14,7 +14,7 @@
  * @param {(view: 'chart'|'table') => void} [props.onViewChange] la persona cambió a la tabla o a la gráfica
  * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete
  */
-export default function CalendarHeatmap({ startsOn, endsOn, days, ariaLabel, valueLabel, describeValue, summary, emptyLabel, tone, texts, defaultView, onViewChange }: {
+export default function CalendarHeatmap(props: {
     startsOn: string;
     endsOn: string;
     days: Array<{

package/dist/types/ui/metrics/ChartTooltip.d.ts

@@ -2,7 +2,7 @@
  * @param {{active?: boolean, payload?: Array<{payload: any}>, render: (item: any) => import('react').ReactNode}} props
  *     active y payload los pone recharts; render recibe el renglón de data del punto o la columna
  */
-export default function ChartTooltip({ active, payload, render }: {
+export default function ChartTooltip(props: {
     active?: boolean;
     payload?: Array<{
         payload: any;

package/dist/types/ui/metrics/ColumnChart.d.ts

@@ -21,7 +21,7 @@
  * @param {(view: 'chart'|'table') => void} [props.onViewChange] la persona cambió a la tabla o a la gráfica
  * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {charts: {viewAsTable, viewAsChart, legend}}
  */
-export default function ColumnChart({ data, periodLabel, valueLabel, series, ariaLabel, emptyLabel, height, tone, onSelect, formatValue: formatValueProp, referenceLine, renderTooltip, texts, defaultView, onViewChange, }: {
+export default function ColumnChart(props: {
     data: Array<Record<string, any>>;
     periodLabel: string;
     valueLabel?: string;

package/dist/types/ui/metrics/LineChart.d.ts

@@ -16,7 +16,7 @@
  * @param {(view: 'chart'|'table') => void} [props.onViewChange] la persona cambió a la tabla o a la gráfica
  * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {charts: {viewAsTable, viewAsChart, legend}}
  */
-export default function LineChart({ data, series, periodLabel, ariaLabel, emptyLabel, height, formatValue: formatValueProp, referenceLine, onSelect, renderTooltip, texts, defaultView, onViewChange, }: {
+export default function LineChart(props: {
     data: Array<Record<string, any>>;
     series: Array<{
         key: string;

package/dist/types/ui/metrics/MetricCard.d.ts

@@ -19,7 +19,7 @@ export declare const TREND_DIRECTION: Readonly<{
  * @param {() => void} [props.onClick] la tarjeta entera como botón, cuando no lleva a otra pantalla (to)
  * @param {object} [props.texts] los textos que cambian, con la forma de `metricCard`: {trend: {up: 'subió'}}
  */
-export default function MetricCard({ label, value, caption, tone, valueColor, isLoading, to, trend, icon, children, onClick, texts, }: {
+export default function MetricCard(props: {
     label: string;
     value: import('react').ReactNode;
     caption?: import('react').ReactNode;

package/dist/types/ui/metrics/TableToggle.d.ts

@@ -7,7 +7,7 @@ export declare const CHART_VIEW: Readonly<{
  * @param {{asTable: boolean, onToggle: () => void, texts?: object}} props texts: los textos que cambian, con la forma de
  *     `common` ({charts: {viewAsTable, viewAsChart}})
  */
-export default function TableToggle({ asTable, onToggle, texts }: {
+export default function TableToggle(props: {
     asTable: boolean;
     onToggle: () => void;
     texts?: object;

package/dist/types/ui/navigation/ColorSchemeToggle.d.ts

@@ -5,7 +5,7 @@
  * @param {(mode: 'light'|'dark'|'system') => void} [props.onChange] la persona cambió el modo (para guardarlo en su servidor)
  * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete
  */
-export default function ColorSchemeToggle({ size, inverted, onChange, texts }?: {
+export default function ColorSchemeToggle(props?: {
     size?: 'small' | 'medium';
     inverted?: boolean;
     onChange?: (mode: 'light' | 'dark' | 'system') => void;

package/dist/types/ui/navigation/FontSizeToggle.d.ts

@@ -4,7 +4,7 @@
  * @param {(level: string) => void} [props.onChange] la persona eligió otro tamaño (FONT_SIZE_LEVELS; para guardarlo en su servidor)
  * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete
  */
-export default function FontSizeToggle({ size, onChange, texts }?: {
+export default function FontSizeToggle(props?: {
     size?: 'small' | 'medium';
     onChange?: (level: string) => void;
     texts?: object;

package/dist/types/ui/navigation/LanguageToggle.d.ts

@@ -6,7 +6,7 @@ export declare const LANGUAGES: readonly ("en" | "es")[];
  * @param {(language: string) => void} [props.onChange] además de avisar a ToolkitProvider, cada que se elige un idioma
  * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {language: {switchToNamed, choose}}
  */
-export default function LanguageToggle({ inverted, onChange, texts }?: {
+export default function LanguageToggle(props?: {
     inverted?: boolean;
     onChange?: (language: string) => void;
     texts?: object;

package/dist/types/ui/navigation/PageBreadcrumbs.d.ts

@@ -3,7 +3,7 @@
  * @param {Array<{label: string, to?: string}>} props.items textos ya traducidos
  * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete
  */
-export default function PageBreadcrumbs({ items, texts }: {
+export default function PageBreadcrumbs(props: {
     items: Array<{
         label: string;
         to?: string;

package/dist/types/ui/timeline/GroupedTimeline.d.ts

@@ -19,7 +19,7 @@
  * @param {(groupKey: string, isExpanded: boolean) => void} [props.onGroupToggle] la persona abrió o plegó un grupo (por ejemplo,
  *     para pedir sus eventos hasta que se abre)
  */
-export default function GroupedTimeline({ groups, onGroupToggle }: {
+export default function GroupedTimeline(props: {
     groups: {
         key: string;
         title?: string;

package/dist/types/upload/FileDropzone.d.ts

@@ -15,7 +15,7 @@
  * @param {object} [props.sx] ajustes del recuadro
  * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete
  */
-export default function FileDropzone({ value, onChange, accept, maxSize, hint, buttonLabel, disabled, busy, busyModal, onReject, actions, children, sx, texts, }: {
+export default function FileDropzone(props: {
     value?: File | null;
     onChange: (file: File | null) => void;
     accept?: string | string[];

package/dist/ui/actions/ActionsMenu.js

@@ -8,7 +8,12 @@ import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import Tooltip from "@mui/material/Tooltip";
 import MoreHorizRoundedIcon from "@mui/icons-material/MoreHorizRounded";
-function ActionsMenu({ label, actions, icon, size = "small" }) {
+import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+const THEME_NAME = "CalcitaActionsMenu";
+const ActionsItem = piecePart(THEME_NAME, "Item", MenuItem);
+const ActionsItemIcon = piecePart(THEME_NAME, "ItemIcon", ListItemIcon);
+function ActionsMenu(props) {
+  const { label, actions, icon, size = "small" } = usePieceProps(props, THEME_NAME);
   const [anchor, setAnchor] = useState(null);
   if (!actions?.length) {
     return null;
@@ -28,16 +33,16 @@ function ActionsMenu({ label, actions, icon, size = "small" }) {
       }
     ) }),
     /* @__PURE__ */ jsx(Menu, { anchorEl: anchor, open: Boolean(anchor), onClose: () => setAnchor(null), onClick: (event) => event.stopPropagation(), children: actions.map((action) => /* @__PURE__ */ jsxs(
-      MenuItem,
+      ActionsItem,
       {
         disabled: action.disabled,
         onClick: () => {
           setAnchor(null);
           action.onClick();
         },
-        sx: action.color ? { color: `${action.color}.main` } : void 0,
+        ownSx: action.color ? { color: `${action.color}.main` } : void 0,
         children: [
-          action.icon && /* @__PURE__ */ jsx(ListItemIcon, { sx: action.color ? { color: "inherit" } : void 0, children: action.icon }),
+          action.icon && /* @__PURE__ */ jsx(ActionsItemIcon, { ownSx: action.color ? { color: "inherit" } : void 0, children: action.icon }),
           /* @__PURE__ */ jsx(ListItemText, { children: action.label })
         ]
       },

package/dist/ui/actions/ActionsMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionsMenu.js","sources":["../../../src/ui/actions/ActionsMenu.jsx"],"sourcesContent":["// Un botón «⋯» con un menú de acciones: el de cada tarjeta del tablero, el de cada columna, el de cada mensaje de la bandeja.\n// Las acciones las da la pantalla (label ya traducido, ícono, color, apagada); sin acciones no se pinta nada.\n//\n//   <ActionsMenu label=\"Acciones de «Junta de cierre»\"\n//                actions={[{key: 'delete', label: 'Borrar', icon: <DeleteOutlineIcon fontSize=\"small\" />, color: 'error', onClick: remove}]} />\n//\n// El clic no llega a lo de abajo: no levanta una tarjeta que se arrastra ni abre el renglón donde vive.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport IconButton from '@mui/material/IconButton';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\nimport Tooltip from '@mui/material/Tooltip';\nimport MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded';\n\n/**\n * @param {object} props\n * @param {string} props.label el nombre del botón (lector de pantalla y su tooltip), ya traducido\n * @param {Array<{key: string, label: string, icon?: import('react').ReactNode, color?: string, disabled?: boolean, onClick: () => void}>} [props.actions]\n * @param {import('react').ReactNode} [props.icon] otro ícono para el botón (por omisión «⋯»)\n * @param {'small'|'medium'} [props.size]\n */\nexport default function ActionsMenu({label, actions, icon, size = 'small'}) {\n    const [anchor, setAnchor] = useState(null);\n    if (!actions?.length) {\n        return null;\n    }\n    return (\n        <>\n            <Tooltip title={label}>\n                <IconButton size={size} aria-label={label} aria-haspopup=\"menu\"\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                setAnchor(event.currentTarget);\n                            }}>\n                    {icon ?? <MoreHorizRoundedIcon fontSize=\"small\" />}\n                </IconButton>\n            </Tooltip>\n            <Menu anchorEl={anchor} open={Boolean(anchor)} onClose={() => setAnchor(null)} onClick={(event) => event.stopPropagation()}>\n                {actions.map((action) => (\n                    <MenuItem key={action.key} disabled={action.disabled}\n                              onClick={() => {\n                                  setAnchor(null);\n                                  action.onClick();\n                              }}\n                              sx={action.color ? {color: `${action.color}.main`} : undefined}>\n                        {action.icon && <ListItemIcon sx={action.color ? {color: 'inherit'} : undefined}>{action.icon}</ListItemIcon>}\n                        <ListItemText>{action.label}</ListItemText>\n                    </MenuItem>\n                ))}\n            </Menu>\n        </>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAyBA,SAAwB,YAAY,EAAC,OAAO,SAAS,MAAM,OAAO,WAAU;AACxE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,IAAI;AACzC,MAAI,CAAC,SAAS,QAAQ;AAClB,WAAO;AAAA,EACX;AACA,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA,oBAAC,SAAA,EAAQ,OAAO,OACZ,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAW;AAAA,QAAY,cAAY;AAAA,QAAO,iBAAc;AAAA,QAC7C,SAAS,CAAC,UAAU;AAChB,gBAAM,gBAAA;AACN,oBAAU,MAAM,aAAa;AAAA,QACjC;AAAA,QACP,UAAA,QAAQ,oBAAC,sBAAA,EAAqB,UAAS,QAAA,CAAQ;AAAA,MAAA;AAAA,IAAA,GAExD;AAAA,IACA,oBAAC,QAAK,UAAU,QAAQ,MAAM,QAAQ,MAAM,GAAG,SAAS,MAAM,UAAU,IAAI,GAAG,SAAS,CAAC,UAAU,MAAM,mBACpG,UAAA,QAAQ,IAAI,CAAC,WACV;AAAA,MAAC;AAAA,MAAA;AAAA,QAA0B,UAAU,OAAO;AAAA,QAClC,SAAS,MAAM;AACX,oBAAU,IAAI;AACd,iBAAO,QAAA;AAAA,QACX;AAAA,QACA,IAAI,OAAO,QAAQ,EAAC,OAAO,GAAG,OAAO,KAAK,QAAA,IAAW;AAAA,QAC1D,UAAA;AAAA,UAAA,OAAO,QAAQ,oBAAC,cAAA,EAAa,IAAI,OAAO,QAAQ,EAAC,OAAO,UAAA,IAAa,QAAY,UAAA,OAAO,MAAK;AAAA,UAC9F,oBAAC,cAAA,EAAc,UAAA,OAAO,MAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAPjB,OAAO;AAAA,IAAA,CASzB,EAAA,CACL;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"ActionsMenu.js","sources":["../../../src/ui/actions/ActionsMenu.jsx"],"sourcesContent":["// Un botón «⋯» con un menú de acciones: el de cada tarjeta del tablero, el de cada columna, el de cada mensaje de la bandeja.\n// Las acciones las da la pantalla (label ya traducido, ícono, color, apagada); sin acciones no se pinta nada.\n//\n//   <ActionsMenu label=\"Acciones de «Junta de cierre»\"\n//                actions={[{key: 'delete', label: 'Borrar', icon: <DeleteOutlineIcon fontSize=\"small\" />, color: 'error', onClick: remove}]} />\n//\n// El clic no llega a lo de abajo: no levanta una tarjeta que se arrastra ni abre el renglón donde vive.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaActionsMenu con defaultProps y\n// styleOverrides de sus partes: item, itemIcon.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport IconButton from '@mui/material/IconButton';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\nimport Tooltip from '@mui/material/Tooltip';\nimport MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaActionsMenu)\nconst THEME_NAME = 'CalcitaActionsMenu';\nconst ActionsItem = piecePart(THEME_NAME, 'Item', MenuItem);\nconst ActionsItemIcon = piecePart(THEME_NAME, 'ItemIcon', ListItemIcon);\n\n/**\n * @param {object} props\n * @param {string} props.label el nombre del botón (lector de pantalla y su tooltip), ya traducido\n * @param {Array<{key: string, label: string, icon?: import('react').ReactNode, color?: string, disabled?: boolean, onClick: () => void}>} [props.actions]\n * @param {import('react').ReactNode} [props.icon] otro ícono para el botón (por omisión «⋯»)\n * @param {'small'|'medium'} [props.size]\n */\nexport default function ActionsMenu(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaActionsMenu.defaultProps) y encima lo que llega aquí\n    const {label, actions, icon, size = 'small'} = usePieceProps(props, THEME_NAME);\n    const [anchor, setAnchor] = useState(null);\n    if (!actions?.length) {\n        return null;\n    }\n    return (\n        <>\n            <Tooltip title={label}>\n                <IconButton size={size} aria-label={label} aria-haspopup=\"menu\"\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                setAnchor(event.currentTarget);\n                            }}>\n                    {icon ?? <MoreHorizRoundedIcon fontSize=\"small\" />}\n                </IconButton>\n            </Tooltip>\n            <Menu anchorEl={anchor} open={Boolean(anchor)} onClose={() => setAnchor(null)} onClick={(event) => event.stopPropagation()}>\n                {actions.map((action) => (\n                    <ActionsItem key={action.key} disabled={action.disabled}\n                              onClick={() => {\n                                  setAnchor(null);\n                                  action.onClick();\n                              }}\n                              ownSx={action.color ? {color: `${action.color}.main`} : undefined}>\n                        {action.icon && <ActionsItemIcon ownSx={action.color ? {color: 'inherit'} : undefined}>{action.icon}</ActionsItemIcon>}\n                        <ListItemText>{action.label}</ListItemText>\n                    </ActionsItem>\n                ))}\n            </Menu>\n        </>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAuBA,MAAM,aAAa;AACnB,MAAM,cAAc,UAAU,YAAY,QAAQ,QAAQ;AAC1D,MAAM,kBAAkB,UAAU,YAAY,YAAY,YAAY;AAStE,SAAwB,YAAY,OAAO;AAEvC,QAAM,EAAC,OAAO,SAAS,MAAM,OAAO,YAAW,cAAc,OAAO,UAAU;AAC9E,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,IAAI;AACzC,MAAI,CAAC,SAAS,QAAQ;AAClB,WAAO;AAAA,EACX;AACA,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA,oBAAC,SAAA,EAAQ,OAAO,OACZ,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAW;AAAA,QAAY,cAAY;AAAA,QAAO,iBAAc;AAAA,QAC7C,SAAS,CAAC,UAAU;AAChB,gBAAM,gBAAA;AACN,oBAAU,MAAM,aAAa;AAAA,QACjC;AAAA,QACP,UAAA,QAAQ,oBAAC,sBAAA,EAAqB,UAAS,QAAA,CAAQ;AAAA,MAAA;AAAA,IAAA,GAExD;AAAA,IACA,oBAAC,QAAK,UAAU,QAAQ,MAAM,QAAQ,MAAM,GAAG,SAAS,MAAM,UAAU,IAAI,GAAG,SAAS,CAAC,UAAU,MAAM,mBACpG,UAAA,QAAQ,IAAI,CAAC,WACV;AAAA,MAAC;AAAA,MAAA;AAAA,QAA6B,UAAU,OAAO;AAAA,QACrC,SAAS,MAAM;AACX,oBAAU,IAAI;AACd,iBAAO,QAAA;AAAA,QACX;AAAA,QACA,OAAO,OAAO,QAAQ,EAAC,OAAO,GAAG,OAAO,KAAK,QAAA,IAAW;AAAA,QAC7D,UAAA;AAAA,UAAA,OAAO,QAAQ,oBAAC,iBAAA,EAAgB,OAAO,OAAO,QAAQ,EAAC,OAAO,UAAA,IAAa,QAAY,UAAA,OAAO,MAAK;AAAA,UACpG,oBAAC,cAAA,EAAc,UAAA,OAAO,MAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAPd,OAAO;AAAA,IAAA,CAS5B,EAAA,CACL;AAAA,EAAA,GACJ;AAER;"}