@stackcraftmx/calcita 0.47.0 → 0.51.0

package/dist/types/DataTable/ServerTableFilterDrawer.d.ts

@@ -1,15 +1,4 @@
-/**
- * @param {object} props
- * @param {object[]} props.fields los campos del cajón (filterDrawerFields.js)
- * @param {'left'|'right'} [props.anchor] de qué lado sale; por omisión la derecha
- * @param {number} [props.width] su ancho en escritorio
- * @param {string} [props.title] ya traducido; por omisión «Filtros»
- * @param {string} [props.buttonLabel] ya traducido; por omisión «Filtros» (con los puestos, «Filtros (3)»)
- * @param {(values: Record<string, unknown>) => void} [props.onApply] aviso de lo que se buscó (la tabla ya se filtró)
- * @param {import('react').ReactNode} [props.children] algo más abajo de los campos del cajón
- * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete
- */
-export default function ServerTableFilterDrawer({ fields, anchor, width, title, buttonLabel, onApply, children, texts, ...unknownProps }: {
+declare const ServerTableFilterDrawer: (props: {
     fields: object[];
     anchor?: 'left' | 'right';
     width?: number;
@@ -18,4 +7,8 @@ export default function ServerTableFilterDrawer({ fields, anchor, width, title,
     onApply?: (values: Record<string, unknown>) => void;
     children?: import('react').ReactNode;
     texts?: object;
-}): import("react").JSX.Element;
+} & {
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object | ((partProps: object) => object)>;
+}) => import("react").JSX.Element;
+export default ServerTableFilterDrawer;

package/dist/types/DataTable/StackedCell.d.ts

@@ -0,0 +1,12 @@
+export type StackedEntry = import('react').ReactNode | {
+    label?: import('react').ReactNode;
+    value: import('react').ReactNode;
+    note?: import('react').ReactNode;
+};
+declare const StackedCell: (props: {
+    entries: StackedEntry[];
+} & {
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object | ((partProps: object) => object)>;
+}) => import("react").JSX.Element;
+export default StackedCell;

package/dist/types/DataTable/TableCardsView.d.ts

@@ -0,0 +1,27 @@
+declare const TableCardsView: (props: {
+    rows: any[];
+    renderCard: (row: any, helpers: {
+        index: number;
+    }) => import('react').ReactNode;
+    rowIdOf: (row: any) => string | number;
+    isLoading: boolean;
+    page: number;
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    hasActiveFilters: boolean;
+    emptyLabel?: string;
+    onClearFilters: () => void;
+    skeleton?: import('react').ReactNode;
+    ariaLabel?: string;
+} & {
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object | ((partProps: object) => object)>;
+}) => import("react").JSX.Element;
+export declare const TableViewToggle: (props: {
+    view: 'table' | 'cards';
+    onChange: (view: 'table' | 'cards') => void;
+} & {
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object | ((partProps: object) => object)>;
+}) => import("react").JSX.Element;
+export default TableCardsView;

package/dist/types/DataTable/columnWidths.d.ts

@@ -0,0 +1,21 @@
+/**
+ * El ancho de un texto en px con la letra de la página; sin navegador, por número de letras.
+ *
+ * @param {string} text
+ * @param {{fontSize?: number, fontWeight?: number}} [options]
+ * @returns {number}
+ */
+export declare function textWidthOf(text: string, { fontSize, fontWeight }?: {
+    fontSize?: number;
+    fontWeight?: number;
+}): number;
+/**
+ * El ancho de una columna de estatus: el de su etiqueta más larga (o el del encabezado, con sus íconos) más lo de alrededor.
+ *
+ * @param {string[]} labels el encabezado primero y luego las etiquetas, ya traducidos
+ * @param {{variant?: 'dot'|'chip'}} [options]
+ * @returns {number} px, redondeado hacia arriba
+ */
+export declare function statusColumnWidthOf([header, ...labels]: string[], { variant }?: {
+    variant?: 'dot' | 'chip';
+}): number;

package/dist/types/DataTable/columns.d.ts

@@ -1,3 +1,7 @@
+/** El campo de las columnas de la casa que no son datos: para nombrarlas en fixedColumn ({fixedColumn: [ACTIONS_COLUMN_FIELD, …]}). */
+export declare const DETAIL_COLUMN_FIELD = "__detail";
+export declare const ACTIONS_COLUMN_FIELD = "__actions";
+export declare const COLUMN_STACKED_KEY = "calcitaStacked";
 export type GridColumnProps = {
     width?: number;
     minWidth?: number;
@@ -93,3 +97,110 @@ export declare function detailColumn({ onOpen, ariaLabelOf, ...unknownOptions }:
         row: any;
     }) => import("react").JSX.Element;
 };
+/**
+ * Columna de datos apilados: los que se leen de corrido en un solo lugar, uno debajo del otro, los que hagan falta (la
+ * empresa, su RFC y su régimen; el contacto, su correo y su teléfono). El primero es el principal (en negritas) y los demás
+ * van en gris. Cada dato va solo, si el encabezado ya dice qué son, o con su etiqueta arriba ({label, value}) si el
+ * encabezado nombra al grupo. Con orden y filtro en el servidor como textColumn, por el campo de la columna. La tabla pone
+ * los renglones a su alto sola.
+ *
+ *   stackedColumn({field: 'business_name', label: 'Empresa', entries: (row) => [row.business_name, row.rfc, row.regime]})
+ *   stackedColumn({field: 'created_at', label: 'Fechas', entries: (row) => [
+ *       {label: 'Alta', value: formatDate(row.created_at)},
+ *       {label: 'Último cambio', value: formatDate(row.updated_at)},
+ *   ]})
+ *
+ * @param {{field: string, label: string, entries: (row: any, value: any) => import('./StackedCell.js').StackedEntry[], sort?: boolean, filter?: boolean} & GridColumnProps} columnDeclaration
+ *     entries: los datos de cada renglón en orden; `value` es el de la columna ya con su valueFormatter. Un dato vacío
+ *     no se pinta (salvo el principal o uno con etiqueta: enseñan «—»)
+ */
+export declare function stackedColumn({ field, label, entries, sort, filter, ...gridColumnProps }: {
+    field: string;
+    label: string;
+    entries: (row: any, value: any) => import('./StackedCell.js').StackedEntry[];
+    sort?: boolean;
+    filter?: boolean;
+} & GridColumnProps): {
+    width?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    flex?: number;
+    align?: 'left' | 'center' | 'right';
+    headerAlign?: 'left' | 'center' | 'right';
+    valueFormatter?: (value: any, row: any) => string;
+    valueGetter?: (value: any, row: any) => any;
+    field: string;
+    headerName: string;
+    sortable: boolean;
+    filterable: boolean;
+    renderHeader: () => import("react").JSX.Element;
+    calcitaStacked: boolean;
+    renderCell: (params: any) => import("react").JSX.Element;
+};
+/**
+ * Columna de estatus desde un diccionario: el estatus con su color y su explicación (StatusChip), filtro con las facetas del
+ * servidor (como facetColumn) y un ancho que alcanza para la etiqueta más larga del diccionario. Con `t` el ancho se mide
+ * con las etiquetas en el idioma de la pantalla (sin él, 160 px o el `width` que se le dé).
+ *
+ *   statusColumn({field: 'status', label: 'Estado', dictionary: ORDER_STATUS, t})
+ *
+ * @param {{field: string, label: string, dictionary: Record<string, object>, t?: (key: string) => string, short?: boolean, variant?: 'dot'|'chip', sort?: boolean, filter?: boolean, facetKey?: string} & GridColumnProps} columnDeclaration
+ *     filter false: sin filtro en el encabezado (cuando el servidor no da facetas de este campo)
+ */
+export declare function statusColumn({ field, label, dictionary, t, short, variant, sort, filter, facetKey, ...gridColumnProps }: {
+    field: string;
+    label: string;
+    dictionary: Record<string, object>;
+    t?: (key: string) => string;
+    short?: boolean;
+    variant?: 'dot' | 'chip';
+    sort?: boolean;
+    filter?: boolean;
+    facetKey?: string;
+} & GridColumnProps): {
+    width?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    flex?: number;
+    align?: 'left' | 'center' | 'right';
+    headerAlign?: 'left' | 'center' | 'right';
+    valueFormatter?: (value: any, row: any) => string;
+    valueGetter?: (value: any, row: any) => any;
+    field: string;
+    headerName: string;
+    sortable: boolean;
+    filterable: boolean;
+    renderHeader: () => import("react").JSX.Element;
+    renderCell: ({ row }: {
+        row: any;
+    }) => import("react").JSX.Element;
+};
+/**
+ * Columna con el menú «⋯» de cada renglón (ActionsMenu): las acciones van en su columna con un ícono, no con clic en toda
+ * la fila. Va de un ancho fijo, así se puede dejar pegada al deslizar: fixedColumn={[ACTIONS_COLUMN_FIELD, 'company']}.
+ *
+ *   actionsColumn({label: 'Acciones del cliente', actionsOf: (row) => [{key: 'open', label: 'Abrir', to: `/clientes/${row.id}`}]})
+ *
+ * @param {object} declaration
+ * @param {string} declaration.label el nombre del botón (lector de pantalla y su globo), ya traducido
+ * @param {(row: any) => Array<object>} declaration.actionsOf las acciones de ese renglón, con la forma de ActionsMenu
+ * @param {(row: any) => string} [declaration.labelOf] el nombre del botón por renglón («Acciones de Acme»)
+ * @param {number} [declaration.width] por omisión 56
+ */
+export declare function actionsColumn({ label, actionsOf, labelOf: labelOfRow, width, ...unknownOptions }: {
+    label: string;
+    actionsOf: (row: any) => Array<object>;
+    labelOf?: (row: any) => string;
+    width?: number;
+}): {
+    field: string;
+    headerName: string;
+    sortable: boolean;
+    filterable: boolean;
+    disableColumnMenu: boolean;
+    width: number;
+    align: string;
+    renderCell: ({ row }: {
+        row: any;
+    }) => import("react").JSX.Element;
+};

package/dist/types/DataTable/fixedColumns.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Los campos fijos como lista, con el orden en que se dieron.
+ *
+ * @param {string|string[]|null|undefined} fixedColumn
+ * @returns {string[]}
+ */
+export declare function fixedFieldsOf(fixedColumn: string | string[] | null | undefined): string[];
+/**
+ * Cada columna fija con su `left` en px.
+ *
+ * @param {string[]} fields los campos fijos, de izquierda a derecha
+ * @param {Array<{field: string, width?: number, minWidth?: number, flex?: number}>} columns las columnas de la tabla
+ * @param {{startLeft?: number}} [options] startLeft: lo que ya va pegado antes (la casilla de elegir renglones)
+ * @returns {Array<{field: string, left: number, isLast: boolean, hasUnknownWidth: boolean}>} hasUnknownWidth: no es la última
+ *     y su ancho no es fijo (la siguiente podría encimarse)
+ */
+export declare function fixedColumnOffsetsOf(fields: string[], columns: Array<{
+    field: string;
+    width?: number;
+    minWidth?: number;
+    flex?: number;
+}>, { startLeft }?: {
+    startLeft?: number;
+}): Array<{
+    field: string;
+    left: number;
+    isLast: boolean;
+    hasUnknownWidth: boolean;
+}>;

package/dist/types/DataTable/index.d.ts

@@ -6,7 +6,12 @@ export { default as GoToPage } from './GoToPage.js';
 export { SELECTION_PHONE_LAYOUT, default as ServerTable } from './ServerTable.js';
 export { default as ServerTableFilterDrawer } from './ServerTableFilterDrawer.js';
 export { buildChipConfig } from './buildChipConfig.js';
-export { detailColumn, facetColumn, textColumn } from './columns.js';
+export { ACTIONS_COLUMN_FIELD, DETAIL_COLUMN_FIELD, actionsColumn, detailColumn, facetColumn, stackedColumn, statusColumn, textColumn, } from './columns.js';
+export { default as StackedCell } from './StackedCell.js';
+export { statusColumnWidthOf, textWidthOf } from './columnWidths.js';
+export { fixedColumnOffsetsOf, fixedFieldsOf } from './fixedColumns.js';
+export { TableViewToggle, default as TableCardsView } from './TableCardsView.js';
+export { TABLE_VIEW, useTableView } from './useTableView.js';
 export { TableFilterContext, useTableFilter } from './filterContext.js';
 export { toServerTableParams } from './serverTableParams.js';
 export { buildTableActors, tableMachine } from './tableMachine.js';

package/dist/types/DataTable/useTableView.d.ts

@@ -0,0 +1,22 @@
+/** Las dos vistas de la lista. */
+export declare const TABLE_VIEW: Readonly<{
+    table: "table";
+    cards: "cards";
+}>;
+/**
+ * @param {object} options
+ * @param {string} [options.prefix] el de la tabla: con él, la vista va en la dirección
+ * @param {'table'|'cards'} [options.view] la vista que decide la pantalla (controlada)
+ * @param {'table'|'cards'} [options.defaultView] por omisión 'table'
+ * @param {(view: 'table'|'cards') => void} [options.onViewChange]
+ * @returns {{view: 'table'|'cards', setView: (view: 'table'|'cards') => void}}
+ */
+export declare function useTableView({ prefix, view, defaultView, onViewChange }: {
+    prefix?: string;
+    view?: 'table' | 'cards';
+    defaultView?: 'table' | 'cards';
+    onViewChange?: (view: 'table' | 'cards') => void;
+}): {
+    view: 'table' | 'cards';
+    setView: (view: 'table' | 'cards') => void;
+};

package/dist/types/access/PermissionMatrix.d.ts

@@ -1,12 +1,4 @@
-/**
- * @param {object} props
- * @param {Array<{key: string, label: string, permissions: Array<{key: string, label: string, description?: string}>}>} props.groups
- * @param {string[]} props.value los permisos del perfil
- * @param {(value: string[]) => void} [props.onChange] sin ella, o con readOnly, solo se ven
- * @param {boolean} [props.readOnly] un perfil que no se puede cambiar (el de administración)
- * @param {object} [props.texts] los textos que cambian, con la forma de `access` en los textos del paquete
- */
-export default function PermissionMatrix(props: {
+declare const PermissionMatrix: (props: {
     groups: Array<{
         key: string;
         label: string;
@@ -20,4 +12,8 @@ export default function PermissionMatrix(props: {
     onChange?: (value: string[]) => void;
     readOnly?: boolean;
     texts?: object;
-}): import("react").JSX.Element;
+} & {
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object | ((partProps: object) => object)>;
+}) => import("react").JSX.Element;
+export default PermissionMatrix;

package/dist/types/account/AccountSecuritySection.d.ts

@@ -1,9 +1,8 @@
-/**
- * @param {object} props
- * @param {boolean} [props.showPasswordChange] por omisión sí
- * @param {object} [props.texts] los textos que cambian, con la forma de `account` en los textos del paquete
- */
-export default function AccountSecuritySection(props: {
+declare const AccountSecuritySection: (props: {
     showPasswordChange?: boolean;
     texts?: object;
-}): import("react").JSX.Element;
+} & {
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object | ((partProps: object) => object)>;
+}) => import("react").JSX.Element;
+export default AccountSecuritySection;

package/dist/types/account/DemoTotpCodeButton.d.ts

@@ -1,6 +1,7 @@
-/**
- * @param {{loadCode: () => Promise<string|null>}} props
- */
-export default function DemoTotpCodeButton(props: {
+declare const DemoTotpCodeButton: (props: {
     loadCode: () => Promise<string | null>;
-}): import("react").JSX.Element;
+} & {
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object | ((partProps: object) => object)>;
+}) => import("react").JSX.Element;
+export default DemoTotpCodeButton;

package/dist/types/account/ProfileScreen.d.ts

@@ -5,23 +5,7 @@ export declare const PROFILE_TAB: Readonly<{
     preferences: "preferences";
 }>;
 export type AccountUser = import('./accountConnector.js').AccountUser;
-/** @typedef {import('./accountConnector.js').AccountUser} AccountUser */
-/**
- * @param {object} props
- * @param {boolean} [props.showColorScheme] el ajuste de claro u oscuro en Preferencias; sin modo oscuro, false
- * @param {{initialValues?: (user: AccountUser & Record<string, any>) => Record<string, any>, rules?: Record<string, any>, fields: import('react').ReactNode}} [props.extraFields]
- *     campos propios en «Sus datos», debajo del teléfono: sus valores de inicio salen del usuario de la sesión (lo que su
- *     conector ponga en session.user), sus reglas de yup y sus campos (FormTextField, FormSelectField… de /forms). Al guardar
- *     viajan a connector.updateProfile junto con name y phone
- * @param {Array<{key: string, label: string, content: import('react').ReactNode}>} [props.extraTabs] pestañas propias,
- *     después de las de la casa; label ya traducido
- * @param {Array<'data'|'security'|'preferences'>} [props.hiddenTabs] pestañas de la casa que no se ven (PROFILE_TAB)
- * @param {(tab: string) => void} [props.onTabChange] cada que se cambia de pestaña
- * @param {(saved: {values: Record<string, any>, response: unknown}) => void} [props.onProfileSaved] después de guardar «Sus datos»
- * @param {object} [props.texts] los textos que cambian, con la forma de `account` en los textos del paquete:
- *     {profile: {tabs: {data: 'Mis datos'}}}
- */
-export default function ProfileScreen(props: {
+declare const ProfileScreen: (props: {
     showColorScheme?: boolean;
     extraFields?: {
         initialValues?: (user: AccountUser & Record<string, any>) => Record<string, any>;
@@ -40,4 +24,8 @@ export default function ProfileScreen(props: {
         response: unknown;
     }) => void;
     texts?: object;
-}): import("react").JSX.Element | null;
+} & {
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object | ((partProps: object) => object)>;
+}) => import("react").JSX.Element | null;
+export default ProfileScreen;

package/dist/types/account/SignInScreen.d.ts

@@ -1,15 +1,4 @@
-/**
- * @param {object} props
- * @param {string} [props.homePath] a dónde ir si no se quería abrir otra pantalla; por omisión '/'
- * @param {string} [props.forgotPasswordPath] sin ella no sale «¿Olvidó su contraseña?»
- * @param {import('react').ReactNode} [props.logo]
- * @param {string} [props.brandName] por omisión el appName de ToolkitProvider
- * @param {import('react').ReactNode | ((helpers: {signIn: (credentials: {email: string, password: string, remember?: boolean}) => Promise<void>}) => import('react').ReactNode)} [props.footer]
- * @param {boolean} [props.showLanguageToggle] por omisión sí
- * @param {boolean} [props.showColorSchemeToggle] por omisión sí
- * @param {object} [props.texts] los textos que cambian, con la forma de `auth` en los textos del paquete
- */
-export default function SignInScreen(props: {
+declare const SignInScreen: (props: {
     homePath?: string;
     forgotPasswordPath?: string;
     logo?: import('react').ReactNode;
@@ -24,4 +13,8 @@ export default function SignInScreen(props: {
     showLanguageToggle?: boolean;
     showColorSchemeToggle?: boolean;
     texts?: object;
-}): import("react").JSX.Element | null;
+} & {
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object | ((partProps: object) => object)>;
+}) => import("react").JSX.Element | null;
+export default SignInScreen;

package/dist/types/appShell/AccountMenu.d.ts

@@ -1,13 +1,4 @@
-/**
- * @param {object} props
- * @param {{name: string, email?: string, subtitle?: string, avatarUrl?: string}} props.user
- * @param {string} [props.profilePath] sin ella no sale «Mi perfil»
- * @param {Array<{to?: string, onClick?: Function, label?: string, labelKey?: string, Icon?: import('react').ElementType}>} [props.accountMenuItems]
- * @param {() => void} [props.onSignOut] sin él no sale «Salir»
- * @param {boolean} [props.isSigningOut]
- * @param {import('react').ReactNode} [props.settings] los ajustes de la app, entre los datos de la persona y sus ligas
- */
-export default function AccountMenu(props: {
+declare const AccountMenu: (props: {
     user: {
         name: string;
         email?: string;
@@ -25,4 +16,8 @@ export default function AccountMenu(props: {
     onSignOut?: () => void;
     isSigningOut?: boolean;
     settings?: import('react').ReactNode;
-}): import("react").JSX.Element;
+} & {
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object | ((partProps: object) => object)>;
+}) => import("react").JSX.Element;
+export default AccountMenu;

package/dist/types/appShell/AppLayout.d.ts

@@ -3,46 +3,6 @@ export declare const MENU_POSITION: Readonly<{
     side: "side";
     top: "top";
 }>;
-/**
- * @param {object} props
- * @param {import('react').ReactNode} [props.logo] el logo chico (28 px), en la barra junto al nombre y en el cajón del teléfono
- * @param {import('react').ReactNode | {light?: import('react').ReactNode, dark?: import('react').ReactNode}} [props.wordmark] el logo
- *     ancho, la marca con su nombre en una sola imagen (como el de muchas empresas), o uno para cada modo ({light, dark}: el de
- *     color en claro y el blanco en oscuro): va en lugar del logo y el nombre en la barra y arriba del menú del teléfono, a 24 px de alto. Con el menú
- *     encogido se queda el logo chico (logo), si lo hay. brandName sigue siendo su nombre para el lector de pantalla
- * @param {string} [props.brandName] el nombre de la app; por omisión el appName de ToolkitProvider
- * @param {string} [props.brandCaption] el renglón chico debajo del nombre («Panel de administración»)
- * @param {string} [props.homePath] por omisión '/'
- * @param {object[]} [props.menuItems] lo que regresa composeMenu
- * @param {'side'|'top'} [props.menuPosition] por omisión 'side' (MENU_POSITION)
- * @param {{name: string, email?: string, subtitle?: string, avatarUrl?: string}|null} [props.user] quién está dentro
- * @param {string} [props.profilePath] la ruta de Mi perfil
- * @param {object[]} [props.accountMenuItems] renglones propios en el menú de la cuenta ({to | onClick, label | labelKey, Icon})
- * @param {() => void} [props.onSignOut] sin él no sale «Salir» (una app sin sesión)
- * @param {boolean} [props.isSigningOut]
- * @param {import('react').ReactNode} [props.headerActions] botones propios en la barra, antes de la cuenta
- * @param {Record<string, number>} [props.menuBadges] los conteos del servidor por badgeKey de cada entrada del menú
- *     (useMenuBadges): lo pendiente de cada pantalla, como numerito
- * @param {import('react').ReactNode} [props.accountSettings] ajustes propios del proyecto dentro del menú de la cuenta, debajo de
- *     letra, idioma y claro u oscuro (con SettingSection, para que se vean igual)
- * @param {import('react').ReactNode} [props.sidebarFooter] lo de abajo del menú lateral (una tarjeta de ayuda…)
- * @param {boolean} [props.showFontSizeToggle] por omisión sí
- * @param {boolean} [props.showLanguageToggle] por omisión sí
- * @param {boolean} [props.showColorSchemeToggle] por omisión sí
- * @param {import('react').ReactNode} [props.ribbons] avisos propios dentro de la barra
- * @param {boolean} [props.isNavigating] la pantalla siguiente se está descargando (react-router: useIsNavigating)
- * @param {boolean} [props.defaultCollapsed] el menú lateral empieza encogido (la persona lo cambia y se recuerda)
- * @param {boolean} [props.minimizeTabBarOnScroll] en el teléfono con vidrio, la barra de pestañas se encoge al leer hacia
- *     abajo y regresa al subir (como iOS 26); por omisión sí
- * @param {number|string} [props.contentMaxWidth] por omisión 1400
- * @param {(collapsed: boolean) => void} [props.onMenuCollapse] la persona encogió (true) o abrió (false) el menú lateral
- * @param {(isOpen: boolean) => void} [props.onMobileMenuChange] se abrió o se cerró el menú del teléfono (el cajón)
- * @param {(keys: string[]|null) => void} [props.onMobileTabsChange] la persona eligió sus pestañas del teléfono (las llaves
- *     de menuItemKeyOf; null: regresó a las de omisión). Se recuerdan en el navegador; con esto el proyecto las puede guardar
- *     en su servidor
- * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete (para todo el marco)
- * @param {import('react').ReactNode} props.children el contenido
- */
 export declare const AppLayout: (props: {
     logo?: import('react').ReactNode;
     wordmark?: import('react').ReactNode | {
@@ -81,4 +41,7 @@ export declare const AppLayout: (props: {
     onMobileTabsChange?: (keys: string[] | null) => void;
     texts?: object;
     children: import('react').ReactNode;
+} & {
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object | ((partProps: object) => object)>;
 }) => import("react").JSX.Element;

package/dist/types/appShell/AppearanceSettings.d.ts

@@ -21,21 +21,15 @@ export declare function SettingSection({ label, value, options, onChange }: {
     }[];
     onChange: (value: string) => void;
 }): import("react").JSX.Element;
-/**
- * @param {object} props
- * @param {boolean} [props.showFontSize] por omisión sí
- * @param {boolean} [props.showLanguage] por omisión sí
- * @param {boolean} [props.showColorScheme] por omisión sí
- * @param {(level: string) => void} [props.onFontSizeChange] la persona eligió otro tamaño de letra (para guardarlo en su
- *     servidor; el idioma ya sale por onLanguageChange de ToolkitProvider)
- * @param {(mode: 'light'|'dark'|'system') => void} [props.onColorSchemeChange] la persona eligió otro modo
- * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete
- */
-export default function AppearanceSettings(props: {
+declare const AppearanceSettings: (props: {
     showFontSize?: boolean;
     showLanguage?: boolean;
     showColorScheme?: boolean;
     onFontSizeChange?: (level: string) => void;
     onColorSchemeChange?: (mode: 'light' | 'dark' | 'system') => void;
     texts?: object;
-}): import("react").JSX.Element[];
+} & {
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object | ((partProps: object) => object)>;
+}) => import("react").JSX.Element[];
+export default AppearanceSettings;

package/dist/types/appShell/AuthLayout.d.ts

@@ -1,14 +1,3 @@
-/**
- * @param {object} props
- * @param {import('react').ReactNode} [props.logo] el logo chico (28 px)
- * @param {string} [props.brandName] por omisión el appName de ToolkitProvider
- * @param {string} props.title el título de la tarjeta y de la pestaña, ya traducido
- * @param {import('react').ReactNode} [props.description] el renglón debajo del título
- * @param {import('react').ReactNode} props.children el formulario
- * @param {import('react').ReactNode} [props.footer] debajo de la tarjeta (los botones de prueba, el aviso de privacidad…)
- * @param {boolean} [props.showLanguageToggle] por omisión sí
- * @param {boolean} [props.showColorSchemeToggle] por omisión sí
- */
 export declare const AuthLayout: (props: {
     logo?: import('react').ReactNode;
     brandName?: string;
@@ -18,4 +7,7 @@ export declare const AuthLayout: (props: {
     footer?: import('react').ReactNode;
     showLanguageToggle?: boolean;
     showColorSchemeToggle?: boolean;
+} & {
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object | ((partProps: object) => object)>;
 }) => import("react").JSX.Element;

package/dist/types/appShell/BarActionButton.d.ts

@@ -1,15 +1,11 @@
-/**
- * @param {object} props
- * @param {string} props.label el nombre de la acción, ya traducido: «Agregar sucursal»
- * @param {import('react').ReactNode} [props.icon] el ícono (<AddRoundedIcon />); sin él, se ve su texto
- * @param {(event: object) => void} [props.onClick]
- * @param {boolean} [props.disabled]
- * @param {'inherit'|'primary'|'secondary'|'success'|'error'|'info'|'warning'} [props.color] por omisión primary
- */
-export default function BarActionButton({ label, icon, onClick, disabled, color, ...buttonProps }: {
+declare const BarActionButton: (props: {
     label: string;
     icon?: import('react').ReactNode;
     onClick?: (event: object) => void;
     disabled?: boolean;
     color?: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
-}): import("react").JSX.Element;
+} & {
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object | ((partProps: object) => object)>;
+}) => import("react").JSX.Element;
+export default BarActionButton;

package/dist/types/appShell/BarActions.d.ts

@@ -1,17 +1,4 @@
-/**
- * @param {object} props
- * @param {import('react').ReactNode} props.children los botones de este grupo (normalmente BarActionButton)
- * @param {string} [props.label] el nombre del grupo (lector de pantalla): «Acciones de pedidos»
- * @param {number} [props.order] en qué lugar va entre los grupos de la pantalla (CSS order; por omisión el de aparición)
- * @param {object|Function|Array} [props.sx] estilos propios de la cápsula de arriba o de la flotante del teléfono (o del
- *     grupo, en la franja)
- * @param {object|Function|Array} [props.inlineSx] estilos de la cápsula cuando se queda en la pantalla
- * @param {boolean} [props.bare] sin cápsula alrededor: lo de adentro ya es una (un buscador)
- * @param {boolean} [props.exclusive] en el teléfono, mientras se ve, es lo único del renglón flotante (con los demás grupos
- *     exclusivos): los otros se esconden, como el modo de edición del iPhone deja solo lo de lo elegido. Lo usa SelectionActions
- * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete
- */
-export default function BarActions(props: {
+declare const BarActions: (props: {
     children: import('react').ReactNode;
     label?: string;
     order?: number;
@@ -20,4 +7,8 @@ export default function BarActions(props: {
     bare?: boolean;
     exclusive?: boolean;
     texts?: object;
-}): import("react").JSX.Element;
+} & {
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object | ((partProps: object) => object)>;
+}) => import("react").JSX.Element;
+export default BarActions;

package/dist/types/appShell/BarCapsule.d.ts

@@ -7,14 +7,11 @@ export declare const BAR_CAPSULE_HEIGHT_PIXELS = 48;
  * @returns {object} estilos para el sx del contenedor
  */
 export declare function monochromeButtonsSxOf(color: string): object;
-/**
- * Lo demás va al div de la cápsula: aria-label (el nombre del grupo para quien usa lector de pantalla), id, onClick…
- * role va por omisión en 'group' (lo que se agrupa se anuncia junto).
- *
- * @param {Omit<import('react').HTMLAttributes<HTMLDivElement>, 'children'> & {children: import('react').ReactNode, sx?: object|Function|Array<any>}} props
- *     children: los botones del grupo; sx: estilos propios, encima de los de la cápsula
- */
-export default function BarCapsule(props: Omit<import('react').HTMLAttributes<HTMLDivElement>, 'children'> & {
+declare const BarCapsule: (props: Omit<import("react").HTMLAttributes<HTMLDivElement>, "children"> & {
     children: import('react').ReactNode;
     sx?: object | Function | Array<any>;
-}): import("react").JSX.Element;
+} & {
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object | ((partProps: object) => object)>;
+}) => import("react").JSX.Element;
+export default BarCapsule;

package/dist/types/appShell/BarSearch.d.ts

@@ -1,17 +1,4 @@
-/**
- * @param {object} props
- * @param {string} props.value lo escrito
- * @param {(value: string) => void} props.onChange recibe el texto, no el evento
- * @param {string} props.placeholder ya traducido: qué se busca («Buscar por título o etiqueta»); también es su nombre para el
- *     lector de pantalla
- * @param {boolean} [props.inBar] en la barra de la app (por omisión) o dentro de la pantalla
- * @param {boolean} [props.collapsible] en la barra, sin usar se encoge a la lupa; por omisión sí (false: siempre abierta)
- * @param {number} [props.order] en qué lugar va entre las cápsulas de la barra (por omisión la primera)
- * @param {() => void} [props.onFocus]
- * @param {() => void} [props.onBlur]
- * @param {import('react').Ref<HTMLInputElement>} [props.inputRef] la caja, para enfocarla desde afuera (un atajo «/»)
- */
-export default function BarSearch(props: {
+declare const BarSearch: (props: {
     value: string;
     onChange: (value: string) => void;
     placeholder: string;
@@ -21,4 +8,8 @@ export default function BarSearch(props: {
     onFocus?: () => void;
     onBlur?: () => void;
     inputRef?: import('react').Ref<HTMLInputElement>;
-}): import("react").JSX.Element;
+} & {
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object | ((partProps: object) => object)>;
+}) => import("react").JSX.Element;
+export default BarSearch;