@stackcraftmx/calcita 0.32.1 → 0.47.0

package/dist/ui/filters/FilterDrawer.js

@@ -0,0 +1,211 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState, useEffect } from "react";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Drawer from "@mui/material/Drawer";
+import IconButton from "@mui/material/IconButton";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import CatalogInput from "../../inputs/CatalogInput.js";
+import CheckboxGroupInput from "../../inputs/CheckboxGroupInput.js";
+import FieldFrame from "../../inputs/FieldFrame.js";
+import NumberInput from "../../inputs/NumberInput.js";
+import SelectInput from "../../inputs/SelectInput.js";
+import TextInput from "../../inputs/TextInput.js";
+import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
+import { drawerValuesOf, invalidRangesOf, emptyDrawerValuesOf, filterKeysOf, FILTER_FIELD_KIND, comparisonOf, COMPARISON_OPERATOR, comparisonTextOf } from "./filterDrawerFields.js";
+const FILTER_DRAWER_ANCHOR = Object.freeze({ left: "left", right: "right" });
+const DEFAULT_WIDTH = 380;
+const ANY_OPTION = "__calcita_any__";
+const THEME_NAME = "CalcitaFilterDrawer";
+const FilterDrawerHeader = piecePart(THEME_NAME, "Header", Stack);
+const FilterDrawerBody = piecePart(THEME_NAME, "Body", Stack);
+const FilterDrawerFooter = piecePart(THEME_NAME, "Footer", Stack);
+function PairedField({ label, inputId, children, template = "1fr 1fr" }) {
+  return /* @__PURE__ */ jsx(FieldFrame, { inputId, label, children: /* @__PURE__ */ jsx(Box, { sx: { display: "grid", gridTemplateColumns: template, gap: 1.5, alignItems: "start" }, children }) });
+}
+function DrawerField({ field, values, setValue, invalidRanges, t }) {
+  const fieldId = useId();
+  const [key] = filterKeysOf(field);
+  switch (field.kind) {
+    case FILTER_FIELD_KIND.text:
+      return /* @__PURE__ */ jsx(TextInput, { label: field.label, value: values[key], onChange: (text) => setValue(key, text), placeholder: field.placeholder });
+    case FILTER_FIELD_KIND.select:
+      return /* @__PURE__ */ jsx(
+        SelectInput,
+        {
+          label: field.label,
+          value: values[key] || ANY_OPTION,
+          onChange: (chosen) => setValue(key, chosen === ANY_OPTION ? "" : chosen),
+          options: [{ value: ANY_OPTION, label: t("filterDrawer.any") }, ...field.options]
+        }
+      );
+    case FILTER_FIELD_KIND.multiSelect:
+      return /* @__PURE__ */ jsx(SelectInput, { label: field.label, value: values[key], onChange: (chosen) => setValue(key, chosen), options: field.options, multiple: true, selectAll: true, checkboxes: true });
+    case FILTER_FIELD_KIND.catalog:
+      return /* @__PURE__ */ jsx(
+        CatalogInput,
+        {
+          label: field.label,
+          value: values[key],
+          onChange: (chosen) => setValue(key, chosen),
+          options: field.options,
+          multiple: field.multiple,
+          selectAll: field.multiple,
+          checkboxes: field.multiple,
+          formatLabel: field.formatLabel,
+          placeholder: field.placeholder
+        }
+      );
+    case FILTER_FIELD_KIND.checkboxes:
+      return /* @__PURE__ */ jsx(CheckboxGroupInput, { label: field.label, value: values[key], onChange: (chosen) => setValue(key, chosen), options: field.options, selectAll: field.selectAll });
+    case FILTER_FIELD_KIND.numberRange: {
+      const [fromKey, toKey] = filterKeysOf(field);
+      const numberProps = { decimals: field.decimals ?? 0, prefix: field.prefix, suffix: field.suffix, helperText: "" };
+      return /* @__PURE__ */ jsxs(PairedField, { label: field.label, inputId: `${fieldId}-from`, children: [
+        /* @__PURE__ */ jsx(NumberInput, { label: t("filterDrawer.from"), value: values[fromKey], onChange: (number) => setValue(fromKey, number), ...numberProps }),
+        /* @__PURE__ */ jsx(
+          NumberInput,
+          {
+            label: t("filterDrawer.to"),
+            value: values[toKey],
+            onChange: (number) => setValue(toKey, number),
+            ...numberProps,
+            error: invalidRanges[toKey] ? t("filterDrawer.rangeBackwards") : void 0
+          }
+        )
+      ] });
+    }
+    case FILTER_FIELD_KIND.dateRange: {
+      const [fromKey, toKey] = filterKeysOf(field);
+      return /* @__PURE__ */ jsxs(PairedField, { label: field.label, inputId: `${fieldId}-from`, children: [
+        /* @__PURE__ */ jsx(TextInput, { type: "date", label: t("filterDrawer.from"), value: values[fromKey], onChange: (date) => setValue(fromKey, date), clearable: false, helperText: "" }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            type: "date",
+            label: t("filterDrawer.to"),
+            value: values[toKey],
+            onChange: (date) => setValue(toKey, date),
+            clearable: false,
+            error: invalidRanges[toKey] ? t("filterDrawer.rangeBackwards") : void 0
+          }
+        )
+      ] });
+    }
+    case FILTER_FIELD_KIND.comparison: {
+      const parts = comparisonOf(values[key]);
+      const operators = field.operators ?? Object.values(COMPARISON_OPERATOR);
+      const operator = parts?.operator ?? field.defaultOperator ?? operators[0];
+      return /* @__PURE__ */ jsxs(PairedField, { label: field.label, inputId: `${fieldId}-value`, template: "minmax(0, 1fr) minmax(0, 1.2fr)", children: [
+        /* @__PURE__ */ jsx(
+          SelectInput,
+          {
+            label: t("filterDrawer.operator"),
+            value: operator,
+            helperText: "",
+            options: operators.map((option) => ({ value: option, label: t(`filterDrawer.operators.${option}`) })),
+            onChange: (chosen) => setValue(key, comparisonTextOf(chosen, parts?.value ?? ""))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          NumberInput,
+          {
+            label: t("filterDrawer.value"),
+            value: parts?.value ?? "",
+            decimals: field.decimals ?? 2,
+            prefix: field.prefix,
+            suffix: field.suffix,
+            helperText: "",
+            onChange: (number) => setValue(key, comparisonTextOf(operator, number))
+          }
+        )
+      ] });
+    }
+    case FILTER_FIELD_KIND.custom:
+      return field.render({ value: values[key], onChange: (next) => setValue(key, next), values, setValue });
+    default:
+      return null;
+  }
+}
+function FilterDrawer(props) {
+  const {
+    open,
+    onClose,
+    fields,
+    values,
+    onApply,
+    anchor = FILTER_DRAWER_ANCHOR.right,
+    width = DEFAULT_WIDTH,
+    title,
+    applyLabel,
+    closeOnApply = true,
+    children,
+    texts,
+    ...unknownProps
+  } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
+  const { t } = useToolkitTranslation("common", texts);
+  const titleId = useId();
+  const [draft, setDraft] = useState(() => drawerValuesOf(fields, values));
+  useEffect(() => {
+    if (open) {
+      setDraft(drawerValuesOf(fields, values));
+    }
+  }, [open]);
+  const invalidRanges = invalidRangesOf(fields, draft);
+  const hasInvalidRange = Object.keys(invalidRanges).length > 0;
+  const setValue = (key, value) => setDraft((current) => ({ ...current, [key]: value }));
+  const apply = () => {
+    onApply(draft);
+    if (closeOnApply) {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Drawer,
+    {
+      anchor,
+      open,
+      onClose,
+      slotProps: { paper: { "aria-labelledby": titleId, className: `${THEME_NAME}-paper`, sx: { width: { xs: "100%", sm: width }, maxWidth: "100%" } } },
+      children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          component: "form",
+          noValidate: true,
+          sx: { display: "flex", flexDirection: "column", height: "100%" },
+          onSubmit: (event) => {
+            event.preventDefault();
+            if (!hasInvalidRange) {
+              apply();
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxs(FilterDrawerHeader, { direction: "row", ownSx: { alignItems: "center", gap: 1, px: 2, py: 1.5, borderBottom: 1, borderColor: "divider" }, children: [
+              /* @__PURE__ */ jsx(IconButton, { "aria-label": t("filterDrawer.close"), onClick: onClose, edge: "start", children: /* @__PURE__ */ jsx(CloseRoundedIcon, {}) }),
+              /* @__PURE__ */ jsx(Typography, { id: titleId, variant: "h6", component: "h2", sx: { flexGrow: 1 }, children: title ?? t("filterDrawer.title") })
+            ] }),
+            /* @__PURE__ */ jsxs(FilterDrawerBody, { spacing: 1, ownSx: { flex: 1, overflowY: "auto", px: 2.5, py: 2 }, children: [
+              fields.map((field) => /* @__PURE__ */ jsx(DrawerField, { field, values: draft, setValue, invalidRanges, t }, field.name)),
+              children
+            ] }),
+            /* @__PURE__ */ jsxs(FilterDrawerFooter, { direction: "row", ownSx: { gap: 1, justifyContent: "flex-end", px: 2.5, py: 1.5, borderTop: 1, borderColor: "divider" }, children: [
+              /* @__PURE__ */ jsx(Button, { onClick: () => setDraft(emptyDrawerValuesOf(fields)), children: t("filterDrawer.clear") }),
+              /* @__PURE__ */ jsx(Button, { type: "submit", variant: "contained", disabled: hasInvalidRange, children: applyLabel ?? t("filterDrawer.apply") })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  FILTER_DRAWER_ANCHOR,
+  FilterDrawer as default
+};
+//# sourceMappingURL=FilterDrawer.js.map

package/dist/ui/filters/FilterDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterDrawer.js","sources":["../../../src/ui/filters/FilterDrawer.jsx"],"sourcesContent":["// El cajón de búsqueda: un panel que sale de un lado con los campos que filtran una lista (las listas, un rango\n// «desde-hasta», unas fechas, un monto con su operador), para cuando los filtros ya no caben arriba de la tabla.\n//\n// Lo que se cambia adentro es un BORRADOR: la lista no se mueve hasta «Buscar» (no se consulta al servidor con cada tecla).\n// «Limpiar» vacía los campos del cajón; «Buscar» manda todos juntos (onApply) y cierra. Un rango al revés («hasta» menor que\n// «desde») se dice en su campo y no deja buscar.\n//\n// Los campos se declaran (filterDrawerFields.js dice cómo viaja cada uno); con kind 'custom' va uno propio (render). Para\n// conectarlo a ServerTable con su botón y sus chips: ServerTableFilterDrawer de /table.\n//\n// Configurable: de qué lado sale (anchor), su ancho, su título y los textos de sus botones. En el teléfono ocupa todo el\n// ancho.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaFilterDrawer con defaultProps y\n// styleOverrides de sus partes: paper, header, body, footer.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useEffect, useId, useState} from 'react';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Drawer from '@mui/material/Drawer';\nimport IconButton from '@mui/material/IconButton';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport CloseRoundedIcon from '@mui/icons-material/CloseRounded';\n\nimport CatalogInput from '@/inputs/CatalogInput.jsx';\nimport CheckboxGroupInput from '@/inputs/CheckboxGroupInput.jsx';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\nimport NumberInput from '@/inputs/NumberInput.jsx';\nimport SelectInput from '@/inputs/SelectInput.jsx';\nimport TextInput from '@/inputs/TextInput.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport {\n    COMPARISON_OPERATOR, FILTER_FIELD_KIND, comparisonOf, comparisonTextOf, drawerValuesOf, emptyDrawerValuesOf, filterKeysOf,\n    invalidRangesOf,\n} from '@/ui/filters/filterDrawerFields.js';\n\n/** De qué lado sale el cajón. */\nexport const FILTER_DRAWER_ANCHOR = Object.freeze({left: 'left', right: 'right'});\nconst DEFAULT_WIDTH = 380;\n// «Cualquiera» de una lista de una sola opción: no es una opción y viaja como '' (sin filtro)\nconst ANY_OPTION = '__calcita_any__';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaFilterDrawer)\nconst THEME_NAME = 'CalcitaFilterDrawer';\nconst FilterDrawerHeader = piecePart(THEME_NAME, 'Header', Stack);\nconst FilterDrawerBody = piecePart(THEME_NAME, 'Body', Stack);\nconst FilterDrawerFooter = piecePart(THEME_NAME, 'Footer', Stack);\n\n/**\n * Dos campos lado a lado (desde y hasta, operador y número); en un cajón angosto se ven bien juntos.\n *\n * @param {{label: import('react').ReactNode, inputId: string, children: import('react').ReactNode, template?: string}} props\n */\nfunction PairedField({label, inputId, children, template = '1fr 1fr'}) {\n    return (\n        <FieldFrame inputId={inputId} label={label}>\n            <Box sx={{display: 'grid', gridTemplateColumns: template, gap: 1.5, alignItems: 'start'}}>{children}</Box>\n        </FieldFrame>\n    );\n}\n\n/**\n * Un campo del cajón según su tipo, con las piezas de la casa.\n *\n * @param {object} props\n */\nfunction DrawerField({field, values, setValue, invalidRanges, t}) {\n    const fieldId = useId();\n    const [key] = filterKeysOf(field);\n    switch (field.kind) {\n        case FILTER_FIELD_KIND.text:\n            return <TextInput label={field.label} value={values[key]} onChange={(text) => setValue(key, text)} placeholder={field.placeholder} />;\n        case FILTER_FIELD_KIND.select:\n            return (\n                <SelectInput label={field.label} value={values[key] || ANY_OPTION} onChange={(chosen) => setValue(key, chosen === ANY_OPTION ? '' : chosen)}\n                             options={[{value: ANY_OPTION, label: t('filterDrawer.any')}, ...field.options]} />\n            );\n        case FILTER_FIELD_KIND.multiSelect:\n            return <SelectInput label={field.label} value={values[key]} onChange={(chosen) => setValue(key, chosen)} options={field.options} multiple selectAll checkboxes />;\n        case FILTER_FIELD_KIND.catalog:\n            return (\n                <CatalogInput label={field.label} value={values[key]} onChange={(chosen) => setValue(key, chosen)} options={field.options}\n                              multiple={field.multiple} selectAll={field.multiple} checkboxes={field.multiple} formatLabel={field.formatLabel}\n                              placeholder={field.placeholder} />\n            );\n        case FILTER_FIELD_KIND.checkboxes:\n            return <CheckboxGroupInput label={field.label} value={values[key]} onChange={(chosen) => setValue(key, chosen)} options={field.options} selectAll={field.selectAll} />;\n        case FILTER_FIELD_KIND.numberRange: {\n            const [fromKey, toKey] = filterKeysOf(field);\n            const numberProps = {decimals: field.decimals ?? 0, prefix: field.prefix, suffix: field.suffix, helperText: ''};\n            return (\n                <PairedField label={field.label} inputId={`${fieldId}-from`}>\n                    <NumberInput label={t('filterDrawer.from')} value={values[fromKey]} onChange={(number) => setValue(fromKey, number)} {...numberProps} />\n                    <NumberInput label={t('filterDrawer.to')} value={values[toKey]} onChange={(number) => setValue(toKey, number)} {...numberProps}\n                                 error={invalidRanges[toKey] ? t('filterDrawer.rangeBackwards') : undefined} />\n                </PairedField>\n            );\n        }\n        case FILTER_FIELD_KIND.dateRange: {\n            const [fromKey, toKey] = filterKeysOf(field);\n            // el calendario del navegador (como DateRangeFilter): viaja AAAA-MM-DD, sin pedir MUI X\n            return (\n                <PairedField label={field.label} inputId={`${fieldId}-from`}>\n                    <TextInput type=\"date\" label={t('filterDrawer.from')} value={values[fromKey]} onChange={(date) => setValue(fromKey, date)} clearable={false} helperText=\"\" />\n                    <TextInput type=\"date\" label={t('filterDrawer.to')} value={values[toKey]} onChange={(date) => setValue(toKey, date)} clearable={false}\n                               error={invalidRanges[toKey] ? t('filterDrawer.rangeBackwards') : undefined} />\n                </PairedField>\n            );\n        }\n        case FILTER_FIELD_KIND.comparison: {\n            const parts = comparisonOf(values[key]);\n            const operators = field.operators ?? Object.values(COMPARISON_OPERATOR);\n            const operator = parts?.operator ?? field.defaultOperator ?? operators[0];\n            return (\n                <PairedField label={field.label} inputId={`${fieldId}-value`} template=\"minmax(0, 1fr) minmax(0, 1.2fr)\">\n                    <SelectInput label={t('filterDrawer.operator')} value={operator} helperText=\"\"\n                                 options={operators.map((option) => ({value: option, label: t(`filterDrawer.operators.${option}`)}))}\n                                 onChange={(chosen) => setValue(key, comparisonTextOf(chosen, parts?.value ?? ''))} />\n                    <NumberInput label={t('filterDrawer.value')} value={parts?.value ?? ''} decimals={field.decimals ?? 2} prefix={field.prefix} suffix={field.suffix}\n                                 helperText=\"\" onChange={(number) => setValue(key, comparisonTextOf(operator, number))} />\n                </PairedField>\n            );\n        }\n        case FILTER_FIELD_KIND.custom:\n            return field.render({value: values[key], onChange: (next) => setValue(key, next), values, setValue});\n        default:\n            return null;\n    }\n}\n\n/**\n * @param {object} props\n * @param {boolean} props.open\n * @param {() => void} props.onClose\n * @param {object[]} props.fields los campos (filterDrawerFields.js): {name, label, kind, options?, keys?, prefix?, suffix?, decimals?, operators?, render?…}\n * @param {Record<string, unknown>} props.values los filtros puestos hoy (de ahí sale el borrador al abrir)\n * @param {(values: Record<string, unknown>) => void} props.onApply todos los campos del cajón juntos, al picar «Buscar»\n * @param {'left'|'right'} [props.anchor] de qué lado sale (FILTER_DRAWER_ANCHOR); por omisión la derecha\n * @param {number} [props.width] su ancho en escritorio, en px\n * @param {string} [props.title] ya traducido; por omisión «Filtros»\n * @param {string} [props.applyLabel] ya traducido; por omisión «Buscar»\n * @param {boolean} [props.closeOnApply] por omisión sí\n * @param {import('react').ReactNode} [props.children] algo más abajo de los campos (una nota, un enlace)\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function FilterDrawer(props) {\n    const {\n        open, onClose, fields, values, onApply, anchor = FILTER_DRAWER_ANCHOR.right, width = DEFAULT_WIDTH, title, applyLabel,\n        closeOnApply = true, children, texts,\n        ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const titleId = useId();\n    const [draft, setDraft] = useState(() => drawerValuesOf(fields, values));\n    // cada vez que se abre, el borrador empieza de lo que hay puesto (lo de la vez pasada sin buscar no se queda)\n    useEffect(() => {\n        if (open) {\n            setDraft(drawerValuesOf(fields, values));\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [open]);\n    const invalidRanges = invalidRangesOf(fields, draft);\n    const hasInvalidRange = Object.keys(invalidRanges).length > 0;\n    const setValue = (key, value) => setDraft((current) => ({...current, [key]: value}));\n    const apply = () => {\n        onApply(draft);\n        if (closeOnApply) {\n            onClose();\n        }\n    };\n\n    return (\n        <Drawer\n            anchor={anchor}\n            open={open}\n            onClose={onClose}\n            slotProps={{paper: {'aria-labelledby': titleId, className: `${THEME_NAME}-paper`, sx: {width: {xs: '100%', sm: width}, maxWidth: '100%'}}}}\n        >\n            <Box component=\"form\" noValidate sx={{display: 'flex', flexDirection: 'column', height: '100%'}}\n                 onSubmit={(event) => {\n                     event.preventDefault();\n                     if (!hasInvalidRange) {\n                         apply();\n                     }\n                 }}>\n                <FilterDrawerHeader direction=\"row\" ownSx={{alignItems: 'center', gap: 1, px: 2, py: 1.5, borderBottom: 1, borderColor: 'divider'}}>\n                    <IconButton aria-label={t('filterDrawer.close')} onClick={onClose} edge=\"start\"><CloseRoundedIcon /></IconButton>\n                    <Typography id={titleId} variant=\"h6\" component=\"h2\" sx={{flexGrow: 1}}>{title ?? t('filterDrawer.title')}</Typography>\n                </FilterDrawerHeader>\n                <FilterDrawerBody spacing={1} ownSx={{flex: 1, overflowY: 'auto', px: 2.5, py: 2}}>\n                    {fields.map((field) => (\n                        <DrawerField key={field.name} field={field} values={draft} setValue={setValue} invalidRanges={invalidRanges} t={t} />\n                    ))}\n                    {children}\n                </FilterDrawerBody>\n                <FilterDrawerFooter direction=\"row\" ownSx={{gap: 1, justifyContent: 'flex-end', px: 2.5, py: 1.5, borderTop: 1, borderColor: 'divider'}}>\n                    <Button onClick={() => setDraft(emptyDrawerValuesOf(fields))}>{t('filterDrawer.clear')}</Button>\n                    <Button type=\"submit\" variant=\"contained\" disabled={hasInvalidRange}>{applyLabel ?? t('filterDrawer.apply')}</Button>\n                </FilterDrawerFooter>\n            </Box>\n        </Drawer>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/ui/filters/filterDrawerFields.js

@@ -0,0 +1,119 @@
+const FILTER_FIELD_KIND = Object.freeze({
+  text: "text",
+  select: "select",
+  multiSelect: "multiSelect",
+  catalog: "catalog",
+  checkboxes: "checkboxes",
+  numberRange: "numberRange",
+  dateRange: "dateRange",
+  comparison: "comparison",
+  custom: "custom"
+});
+const COMPARISON_OPERATOR = Object.freeze({ equals: "eq", greaterThan: "gt", greaterOrEqual: "gte", lessThan: "lt", lessOrEqual: "lte" });
+const OPERATOR_SYMBOLS = Object.freeze({ eq: "=", gt: ">", gte: "≥", lt: "<", lte: "≤" });
+const COMPARISON_SEPARATOR = ":";
+const LIST_KINDS = /* @__PURE__ */ new Set([FILTER_FIELD_KIND.multiSelect, FILTER_FIELD_KIND.checkboxes]);
+function isListField(field) {
+  return LIST_KINDS.has(field.kind) || field.kind === FILTER_FIELD_KIND.catalog && Boolean(field.multiple);
+}
+function filterKeysOf(field) {
+  if (field.kind === FILTER_FIELD_KIND.numberRange) {
+    return [field.keys?.from ?? `${field.name}_min`, field.keys?.to ?? `${field.name}_max`];
+  }
+  if (field.kind === FILTER_FIELD_KIND.dateRange) {
+    return [field.keys?.from ?? `${field.name}_from`, field.keys?.to ?? `${field.name}_to`];
+  }
+  return [field.name];
+}
+function comparisonOf(text) {
+  const [operator, ...rest] = String(text ?? "").split(COMPARISON_SEPARATOR);
+  const value = rest.join(COMPARISON_SEPARATOR);
+  return OPERATOR_SYMBOLS[operator] && value !== "" ? { operator, value } : null;
+}
+function comparisonTextOf(operator, value) {
+  return value === "" || value === null || value === void 0 ? "" : `${operator}${COMPARISON_SEPARATOR}${value}`;
+}
+function isFilterValueSet(value) {
+  return Array.isArray(value) ? value.length > 0 : value !== "" && value !== null && value !== void 0;
+}
+function filterDrawerKindsOf(fields) {
+  return Object.fromEntries(fields.filter(isListField).map((field) => [field.name, "multiSelect"]));
+}
+function drawerValuesOf(fields, filters) {
+  return Object.fromEntries(fields.flatMap((field) => filterKeysOf(field).map((key) => [key, filters?.[key] ?? (isListField(field) ? [] : "")])));
+}
+function emptyDrawerValuesOf(fields) {
+  return drawerValuesOf(fields, {});
+}
+function filterDrawerDefaultsOf(fields) {
+  return emptyDrawerValuesOf(fields);
+}
+function activeDrawerFilterCountOf(fields, filters) {
+  return fields.filter((field) => filterKeysOf(field).some((key) => isFilterValueSet(filters?.[key]))).length;
+}
+function invalidRangesOf(fields, values) {
+  const invalid = {};
+  for (const field of fields) {
+    if (field.kind !== FILTER_FIELD_KIND.numberRange && field.kind !== FILTER_FIELD_KIND.dateRange) {
+      continue;
+    }
+    const [fromKey, toKey] = filterKeysOf(field);
+    const from = values?.[fromKey];
+    const to = values?.[toKey];
+    if (!isFilterValueSet(from) || !isFilterValueSet(to)) {
+      continue;
+    }
+    const isBackwards = field.kind === FILTER_FIELD_KIND.numberRange ? Number(to) < Number(from) : String(to) < String(from);
+    if (isBackwards) {
+      invalid[toKey] = true;
+    }
+  }
+  return invalid;
+}
+function filterDrawerChipsOf(fields, { t, formatDate = (date) => date }) {
+  const text = [];
+  const multiSelect = [];
+  const optionLabelOf = (field, value) => field.options?.find((option) => (option.value ?? option.code) === value)?.label ?? String(value);
+  for (const field of fields) {
+    const withUnit = (value) => `${field.prefix ?? ""}${value}${field.suffix ? ` ${field.suffix}` : ""}`;
+    if (isListField(field)) {
+      multiSelect.push({ key: field.name, label: field.label, itemLabel: (value) => optionLabelOf(field, value) });
+    } else if (field.kind === FILTER_FIELD_KIND.numberRange || field.kind === FILTER_FIELD_KIND.dateRange) {
+      const [fromKey, toKey] = filterKeysOf(field);
+      const format = field.kind === FILTER_FIELD_KIND.dateRange ? formatDate : withUnit;
+      text.push({ key: fromKey, label: t("filterDrawer.chipFrom", { label: field.label }), format });
+      text.push({ key: toKey, label: t("filterDrawer.chipTo", { label: field.label }), format });
+    } else if (field.kind === FILTER_FIELD_KIND.comparison) {
+      text.push({
+        key: field.name,
+        label: field.label,
+        format: (value) => {
+          const parts = comparisonOf(value);
+          return parts ? `${OPERATOR_SYMBOLS[parts.operator]} ${withUnit(parts.value)}` : String(value);
+        }
+      });
+    } else if (field.kind === FILTER_FIELD_KIND.select || field.kind === FILTER_FIELD_KIND.catalog) {
+      text.push({ key: field.name, label: field.label, format: (value) => optionLabelOf(field, value) });
+    } else {
+      text.push({ key: field.name, label: field.label, ...field.chipFormat && { format: field.chipFormat } });
+    }
+  }
+  return { text, multiSelect };
+}
+export {
+  COMPARISON_OPERATOR,
+  FILTER_FIELD_KIND,
+  activeDrawerFilterCountOf,
+  comparisonOf,
+  comparisonTextOf,
+  drawerValuesOf,
+  emptyDrawerValuesOf,
+  filterDrawerChipsOf,
+  filterDrawerDefaultsOf,
+  filterDrawerKindsOf,
+  filterKeysOf,
+  invalidRangesOf,
+  isFilterValueSet,
+  isListField
+};
+//# sourceMappingURL=filterDrawerFields.js.map

package/dist/ui/filters/filterDrawerFields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filterDrawerFields.js","sources":["../../../src/ui/filters/filterDrawerFields.js"],"sourcesContent":["// Los campos del cajón de búsqueda (FilterDrawer): cómo viaja cada uno en los filtros de la lista, cuántos hay puestos y\n// cómo se dicen en sus chips. Un campo se declara una vez y de ahí sale todo:\n//\n//   text          un texto                            {name}: 'ana'\n//   select        una opción                          {name}: 'card'\n//   multiSelect   varias opciones (lista)             {name}: ['card', 'cash']\n//   catalog       una o varias de un catálogo largo   {name}: 'NL' o ['NL', 'JA'] (multiple)\n//   checkboxes    varias, a la vista                  {name}: ['email', 'sms']\n//   numberRange   desde y hasta                       {name}_min: '3', {name}_max: '10'\n//   dateRange     del día al día (AAAA-MM-DD)         {name}_from: '2026-11-01', {name}_to: '2026-11-30'\n//   comparison    un número con su operador           {name}: 'gte:500' (mayor o igual que 500)\n//   custom        uno propio (render)                 {name}: lo que el proyecto decida\n//\n// Los nombres de un rango se cambian con keys ({from: 'created_from', to: 'created_to'}) para usar los que ya tiene el\n// backend. Los textos llegan ya traducidos (label, options[].label); los de la casa salen de `t` (common.filterDrawer).\n//\n// Puro (sin React): se prueba con node (filterDrawerFields.test.js).\n//\n// Genérico del paquete: function (regla de la casa).\n\n/** Los tipos de campo del cajón. */\nexport const FILTER_FIELD_KIND = Object.freeze({\n    text: 'text', select: 'select', multiSelect: 'multiSelect', catalog: 'catalog', checkboxes: 'checkboxes',\n    numberRange: 'numberRange', dateRange: 'dateRange', comparison: 'comparison', custom: 'custom',\n});\n\n/** Los operadores de un campo de comparación, como viajan ('gte:500'). */\nexport const COMPARISON_OPERATOR = Object.freeze({equals: 'eq', greaterThan: 'gt', greaterOrEqual: 'gte', lessThan: 'lt', lessOrEqual: 'lte'});\n\n// cómo se dice cada operador en un chip, corto\nconst OPERATOR_SYMBOLS = Object.freeze({eq: '=', gt: '>', gte: '≥', lt: '<', lte: '≤'});\nconst COMPARISON_SEPARATOR = ':';\n// los que guardan una lista: así los lee la tabla en la dirección\nconst LIST_KINDS = new Set([FILTER_FIELD_KIND.multiSelect, FILTER_FIELD_KIND.checkboxes]);\n\n/**\n * ¿El campo guarda una lista?\n *\n * @param {{kind: string, multiple?: boolean}} field\n * @returns {boolean}\n */\nexport function isListField(field) {\n    return LIST_KINDS.has(field.kind) || (field.kind === FILTER_FIELD_KIND.catalog && Boolean(field.multiple));\n}\n\n/**\n * Los nombres con que viaja un campo en los filtros: uno, o dos para un rango.\n *\n * @param {{name: string, kind: string, keys?: {from?: string, to?: string}}} field\n * @returns {string[]}\n */\nexport function filterKeysOf(field) {\n    if (field.kind === FILTER_FIELD_KIND.numberRange) {\n        return [field.keys?.from ?? `${field.name}_min`, field.keys?.to ?? `${field.name}_max`];\n    }\n    if (field.kind === FILTER_FIELD_KIND.dateRange) {\n        return [field.keys?.from ?? `${field.name}_from`, field.keys?.to ?? `${field.name}_to`];\n    }\n    return [field.name];\n}\n\n/**\n * Un valor de comparación ('gte:500') en sus partes; null si viene vacío o no se entiende.\n *\n * @param {unknown} text\n * @returns {{operator: string, value: string}|null}\n */\nexport function comparisonOf(text) {\n    const [operator, ...rest] = String(text ?? '').split(COMPARISON_SEPARATOR);\n    const value = rest.join(COMPARISON_SEPARATOR);\n    return OPERATOR_SYMBOLS[operator] && value !== '' ? {operator, value} : null;\n}\n\n/**\n * Las partes de una comparación como viajan; '' si falta el número.\n *\n * @param {string} operator COMPARISON_OPERATOR\n * @param {string} value\n * @returns {string}\n */\nexport function comparisonTextOf(operator, value) {\n    return value === '' || value === null || value === undefined ? '' : `${operator}${COMPARISON_SEPARATOR}${value}`;\n}\n\n/**\n * ¿Ese valor de filtro está puesto? Un texto vacío o una lista vacía no cuentan.\n *\n * @param {unknown} value\n * @returns {boolean}\n */\nexport function isFilterValueSet(value) {\n    return Array.isArray(value) ? value.length > 0 : value !== '' && value !== null && value !== undefined;\n}\n\n/**\n * Los tipos de filtro para ServerTable (filterKinds): los de lista se leen como lista en la dirección.\n *\n * @param {object[]} fields\n * @returns {Record<string, string>}\n */\nexport function filterDrawerKindsOf(fields) {\n    return Object.fromEntries(fields.filter(isListField).map((field) => [field.name, 'multiSelect']));\n}\n\n/**\n * Lo que hay en los filtros para los campos del cajón (lo demás no se toca).\n *\n * @param {object[]} fields\n * @param {Record<string, unknown>} filters\n * @returns {Record<string, unknown>}\n */\nexport function drawerValuesOf(fields, filters) {\n    return Object.fromEntries(fields.flatMap((field) => filterKeysOf(field).map((key) => [key, filters?.[key] ?? (isListField(field) ? [] : '')])));\n}\n\n/**\n * Los campos del cajón vacíos: lo que deja «Limpiar».\n *\n * @param {object[]} fields\n * @returns {Record<string, unknown>}\n */\nexport function emptyDrawerValuesOf(fields) {\n    return drawerValuesOf(fields, {});\n}\n\n/**\n * Los campos del cajón vacíos, para sumarlos a filterDefaults de ServerTable: la tabla solo guarda en la dirección los\n * filtros que declara ahí.\n *\n * @param {object[]} fields\n * @returns {Record<string, unknown>}\n */\nexport function filterDrawerDefaultsOf(fields) {\n    return emptyDrawerValuesOf(fields);\n}\n\n/**\n * Cuántos campos del cajón tienen algo puesto (un rango con «desde» y «hasta» cuenta uno): el número del botón «Filtros».\n *\n * @param {object[]} fields\n * @param {Record<string, unknown>} filters\n * @returns {number}\n */\nexport function activeDrawerFilterCountOf(fields, filters) {\n    return fields.filter((field) => filterKeysOf(field).some((key) => isFilterValueSet(filters?.[key]))).length;\n}\n\n/**\n * Los rangos que no tienen sentido («hasta» menor que «desde»): {llave de «hasta»: true}.\n *\n * @param {object[]} fields\n * @param {Record<string, unknown>} values\n * @returns {Record<string, boolean>}\n */\nexport function invalidRangesOf(fields, values) {\n    const invalid = {};\n    for (const field of fields) {\n        if (field.kind !== FILTER_FIELD_KIND.numberRange && field.kind !== FILTER_FIELD_KIND.dateRange) {\n            continue;\n        }\n        const [fromKey, toKey] = filterKeysOf(field);\n        const from = values?.[fromKey];\n        const to = values?.[toKey];\n        if (!isFilterValueSet(from) || !isFilterValueSet(to)) {\n            continue;\n        }\n        // los números como números y las fechas AAAA-MM-DD como texto (ya se ordenan solas)\n        const isBackwards = field.kind === FILTER_FIELD_KIND.numberRange ? Number(to) < Number(from) : String(to) < String(from);\n        if (isBackwards) {\n            invalid[toKey] = true;\n        }\n    }\n    return invalid;\n}\n\n/**\n * Los chips de los campos del cajón, con la forma de buildChipConfig: cada valor con su etiqueta, ya dicho en palabras.\n *\n * @param {object[]} fields\n * @param {object} helpers\n * @param {(key: string, values?: object) => string} helpers.t el de common (filterDrawer.chipFrom, chipTo)\n * @param {(date: string) => string} [helpers.formatDate] cómo se ve una fecha\n * @returns {{text: Array<{key: string, label: string, format?: (value: string) => string}>, multiSelect: Array<{key: string, label: string, itemLabel?: (value: string) => string}>}}\n */\nexport function filterDrawerChipsOf(fields, {t, formatDate = (date) => date}) {\n    const text = [];\n    const multiSelect = [];\n    const optionLabelOf = (field, value) => field.options?.find((option) => (option.value ?? option.code) === value)?.label ?? String(value);\n    for (const field of fields) {\n        const withUnit = (value) => `${field.prefix ?? ''}${value}${field.suffix ? ` ${field.suffix}` : ''}`;\n        if (isListField(field)) {\n            multiSelect.push({key: field.name, label: field.label, itemLabel: (value) => optionLabelOf(field, value)});\n        } else if (field.kind === FILTER_FIELD_KIND.numberRange || field.kind === FILTER_FIELD_KIND.dateRange) {\n            const [fromKey, toKey] = filterKeysOf(field);\n            const format = field.kind === FILTER_FIELD_KIND.dateRange ? formatDate : withUnit;\n            text.push({key: fromKey, label: t('filterDrawer.chipFrom', {label: field.label}), format});\n            text.push({key: toKey, label: t('filterDrawer.chipTo', {label: field.label}), format});\n        } else if (field.kind === FILTER_FIELD_KIND.comparison) {\n            text.push({\n                key: field.name, label: field.label,\n                format: (value) => {\n                    const parts = comparisonOf(value);\n                    return parts ? `${OPERATOR_SYMBOLS[parts.operator]} ${withUnit(parts.value)}` : String(value);\n                },\n            });\n        } else if (field.kind === FILTER_FIELD_KIND.select || field.kind === FILTER_FIELD_KIND.catalog) {\n            text.push({key: field.name, label: field.label, format: (value) => optionLabelOf(field, value)});\n        } else {\n            text.push({key: field.name, label: field.label, ...(field.chipFormat && {format: field.chipFormat})});\n        }\n    }\n    return {text, multiSelect};\n}\n"],"names":[],"mappings":"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"}

package/dist/ui/help/HelpButton.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import HelpOutlineRoundedIcon from "@mui/icons-material/HelpOutlineRounded";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
+function HelpButton({ onClick, label, size = "medium", sx, texts, ...unknownProps }) {
+  warnUnknownProps("HelpButton", unknownProps);
+  const { t } = useToolkitTranslation("common", texts);
+  const text = label ?? t("help.button");
+  return /* @__PURE__ */ jsx(Tooltip, { title: text, children: /* @__PURE__ */ jsx(IconButton, { "aria-label": text, onClick, size, sx, children: /* @__PURE__ */ jsx(HelpOutlineRoundedIcon, { fontSize: size === "small" ? "small" : "medium" }) }) });
+}
+export {
+  HelpButton as default
+};
+//# sourceMappingURL=HelpButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HelpButton.js","sources":["../../../src/ui/help/HelpButton.jsx"],"sourcesContent":["// El botón «?» que vuelve a abrir la ayuda de una pantalla (la del carrusel o la que sea): un ícono con su nombre para el\n// lector de pantalla y su globo al pasar el cursor.\n//\n// Genérico del paquete: function (regla de la casa).\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport HelpOutlineRoundedIcon from '@mui/icons-material/HelpOutlineRounded';\n\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n/**\n * @param {object} props\n * @param {() => void} props.onClick\n * @param {string} [props.label] ya traducido; por omisión «Ayuda de esta pantalla»\n * @param {'small'|'medium'|'large'} [props.size]\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 HelpButton({onClick, label, size = 'medium', sx, texts, ...unknownProps}) {\n    warnUnknownProps('HelpButton', unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const text = label ?? t('help.button');\n    return (\n        <Tooltip title={text}>\n            <IconButton aria-label={text} onClick={onClick} size={size} sx={sx}>\n                <HelpOutlineRoundedIcon fontSize={size === 'small' ? 'small' : 'medium'} />\n            </IconButton>\n        </Tooltip>\n    );\n}\n"],"names":[],"mappings":";;;;;;;AAmBA,SAAwB,WAAW,EAAC,SAAS,OAAO,OAAO,UAAU,IAAI,OAAO,GAAG,gBAAe;AAC9F,mBAAiB,cAAc,YAAY;AAC3C,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,OAAO,SAAS,EAAE,aAAa;AACrC,6BACK,SAAA,EAAQ,OAAO,MACZ,UAAA,oBAAC,YAAA,EAAW,cAAY,MAAM,SAAkB,MAAY,IACxD,UAAA,oBAAC,0BAAuB,UAAU,SAAS,UAAU,UAAU,UAAU,GAC7E,EAAA,CACJ;AAER;"}

package/dist/ui/help/HelpCarouselDialog.js

@@ -0,0 +1,154 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId, useState, useRef, useEffect } from "react";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import ButtonBase from "@mui/material/ButtonBase";
+import Checkbox from "@mui/material/Checkbox";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import Fade from "@mui/material/Fade";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import IconButton from "@mui/material/IconButton";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
+const HELP_CLOSE_REASON = Object.freeze({ finished: "finished", closed: "closed" });
+const SWIPE_DISTANCE = 50;
+const FADE_MILLISECONDS = 220;
+const MEDIA_HEIGHT = 200;
+const THEME_NAME = "CalcitaHelpCarouselDialog";
+const HelpMedia = piecePart(THEME_NAME, "Media", Box);
+const HelpContent = piecePart(THEME_NAME, "Content", DialogContent);
+const HelpDots = piecePart(THEME_NAME, "Dots", Stack);
+const HelpActions = piecePart(THEME_NAME, "Actions", DialogActions);
+function HelpCarouselDialog(props) {
+  const {
+    open,
+    onClose,
+    steps,
+    title,
+    showDontShowAgain = true,
+    onStepChange,
+    initialStep = 0,
+    texts,
+    ...unknownProps
+  } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
+  const { t } = useToolkitTranslation("common", texts);
+  const titleId = useId();
+  const [stepIndex, setStepIndex] = useState(initialStep);
+  const [dontShowAgain, setDontShowAgain] = useState(false);
+  const reducesMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+  const swipeStartRef = useRef(null);
+  const lastIndex = steps.length - 1;
+  const step = steps[Math.min(stepIndex, lastIndex)];
+  useEffect(() => {
+    if (open) {
+      setStepIndex(initialStep);
+    }
+  }, [open]);
+  useEffect(() => {
+    if (open) {
+      onStepChange?.(stepIndex);
+    }
+  }, [open, stepIndex]);
+  const goTo = (index) => setStepIndex(Math.max(0, Math.min(lastIndex, index)));
+  const close = (reason) => onClose(reason, { dontShowAgain });
+  const next = () => stepIndex >= lastIndex ? close(HELP_CLOSE_REASON.finished) : goTo(stepIndex + 1);
+  if (!step) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open,
+      onClose: () => close(HELP_CLOSE_REASON.closed),
+      maxWidth: "sm",
+      fullWidth: true,
+      "aria-labelledby": titleId,
+      onKeyDown: (event) => {
+        if (event.key === "ArrowRight") {
+          goTo(stepIndex + 1);
+        } else if (event.key === "ArrowLeft") {
+          goTo(stepIndex - 1);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            onPointerDown: (event) => {
+              swipeStartRef.current = event.clientX;
+            },
+            onPointerUp: (event) => {
+              const distance = swipeStartRef.current === null ? 0 : event.clientX - swipeStartRef.current;
+              swipeStartRef.current = null;
+              if (Math.abs(distance) >= SWIPE_DISTANCE) {
+                goTo(stepIndex + (distance < 0 ? 1 : -1));
+              }
+            },
+            sx: { position: "relative", touchAction: "pan-y" },
+            children: [
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  "aria-label": t("help.close"),
+                  onClick: () => close(HELP_CLOSE_REASON.closed),
+                  sx: { position: "absolute", top: 8, right: 8, zIndex: 1 },
+                  children: /* @__PURE__ */ jsx(CloseRoundedIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(Fade, { in: true, appear: !reducesMotion, timeout: reducesMotion ? 0 : FADE_MILLISECONDS, children: /* @__PURE__ */ jsxs("div", { children: [
+                (step.image || step.media) && /* @__PURE__ */ jsx(HelpMedia, { ownSx: { height: MEDIA_HEIGHT, display: "grid", placeItems: "center", overflow: "hidden", bgcolor: "action.hover" }, children: step.media ?? /* @__PURE__ */ jsx(Box, { component: "img", src: step.image, alt: step.imageAlt ?? "", sx: { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" } }) }),
+                /* @__PURE__ */ jsxs(HelpContent, { ownSx: { pt: 2.5 }, children: [
+                  title && /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "text.secondary", component: "p", children: title }),
+                  /* @__PURE__ */ jsx(Typography, { id: titleId, variant: "h6", component: "h2", sx: { pr: 4 }, children: step.title }),
+                  /* @__PURE__ */ jsx(Typography, { component: "div", color: "text.secondary", sx: { mt: 1 }, children: step.content })
+                ] })
+              ] }) }, stepIndex)
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(HelpDots, { direction: "row", ownSx: { justifyContent: "center", gap: 1, pb: 1 }, role: "group", "aria-label": t("help.stepOf", { current: stepIndex + 1, total: steps.length }), children: steps.map((unused, index) => /* @__PURE__ */ jsx(
+          ButtonBase,
+          {
+            onClick: () => goTo(index),
+            "aria-label": t("help.goToStep", { number: index + 1 }),
+            "aria-current": index === stepIndex ? "step" : void 0,
+            sx: {
+              width: index === stepIndex ? 22 : 8,
+              height: 8,
+              borderRadius: 4,
+              transition: reducesMotion ? "none" : "width 200ms",
+              bgcolor: index === stepIndex ? "primary.main" : "action.disabled"
+            }
+          },
+          index
+        )) }),
+        /* @__PURE__ */ jsxs(HelpActions, { ownSx: { px: 3, pb: 2, gap: 1, flexWrap: "wrap" }, children: [
+          showDontShowAgain && /* @__PURE__ */ jsx(
+            FormControlLabel,
+            {
+              sx: { mr: "auto" },
+              label: t("help.dontShowAgain"),
+              control: /* @__PURE__ */ jsx(Checkbox, { size: "small", checked: dontShowAgain, onChange: (event) => setDontShowAgain(event.target.checked) })
+            }
+          ),
+          stepIndex > 0 && /* @__PURE__ */ jsx(Button, { onClick: () => goTo(stepIndex - 1), children: t("help.back") }),
+          /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: next, autoFocus: true, children: stepIndex >= lastIndex ? t("help.done") : t("help.next") })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  HELP_CLOSE_REASON,
+  HelpCarouselDialog as default
+};
+//# sourceMappingURL=HelpCarouselDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HelpCarouselDialog.js","sources":["../../../src/ui/help/HelpCarouselDialog.jsx"],"sourcesContent":["// La ayuda en carrusel: unos cuantos pasos, cada uno con su imagen o ilustración, su título y su texto, para explicar una\n// pantalla la primera vez que se entra (o cuando cambia). Se avanza con «Siguiente», con los puntos de abajo, con las\n// flechas del teclado o deslizando con el dedo; el último paso dice «Listo». Con «reducir movimiento» del sistema no hay\n// animación.\n//\n// Cuándo sale y que se recuerde lo hace useHelpCarousel; esta ventana solo enseña y avisa:\n//   onClose(reason, {dontShowAgain})   reason 'finished' (terminó) o 'closed' (la cerró antes); el proyecto puede guardarlo\n//                                      también en su servidor\n//   onStepChange(index)                cada paso que se ve\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaHelpCarouselDialog con defaultProps y\n// styleOverrides de sus partes: media, content, dots, actions.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useEffect, useId, useRef, useState} from 'react';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport ButtonBase from '@mui/material/ButtonBase';\nimport Checkbox from '@mui/material/Checkbox';\nimport Dialog from '@mui/material/Dialog';\nimport DialogActions from '@mui/material/DialogActions';\nimport DialogContent from '@mui/material/DialogContent';\nimport Fade from '@mui/material/Fade';\nimport FormControlLabel from '@mui/material/FormControlLabel';\nimport IconButton from '@mui/material/IconButton';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\nimport CloseRoundedIcon from '@mui/icons-material/CloseRounded';\n\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n/** Por qué se cerró la ayuda. */\nexport const HELP_CLOSE_REASON = Object.freeze({finished: 'finished', closed: 'closed'});\n\n// lo que hay que deslizar con el dedo para cambiar de paso (px)\nconst SWIPE_DISTANCE = 50;\nconst FADE_MILLISECONDS = 220;\nconst MEDIA_HEIGHT = 200;\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaHelpCarouselDialog)\nconst THEME_NAME = 'CalcitaHelpCarouselDialog';\nconst HelpMedia = piecePart(THEME_NAME, 'Media', Box);\nconst HelpContent = piecePart(THEME_NAME, 'Content', DialogContent);\nconst HelpDots = piecePart(THEME_NAME, 'Dots', Stack);\nconst HelpActions = piecePart(THEME_NAME, 'Actions', DialogActions);\n\n/**\n * @param {object} props\n * @param {boolean} props.open\n * @param {(reason: string, details: {dontShowAgain: boolean}) => void} props.onClose HELP_CLOSE_REASON y si marcó «No volver a mostrar»\n * @param {Array<{title: string, content: import('react').ReactNode, image?: string, imageAlt?: string, media?: import('react').ReactNode}>} props.steps\n *     title y content ya traducidos; image (una dirección) o media (una ilustración propia) arriba\n * @param {string} [props.title] ya traducido: de qué es la ayuda («Cómo usar el tablero»), arriba de los pasos\n * @param {boolean} [props.showDontShowAgain] la casilla «No volver a mostrar al entrar» (por omisión sí)\n * @param {(index: number) => void} [props.onStepChange]\n * @param {number} [props.initialStep]\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function HelpCarouselDialog(props) {\n    const {\n        open, onClose, steps, title, showDontShowAgain = true, onStepChange, initialStep = 0, texts,\n        ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const titleId = useId();\n    const [stepIndex, setStepIndex] = useState(initialStep);\n    const [dontShowAgain, setDontShowAgain] = useState(false);\n    const reducesMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n    const swipeStartRef = useRef(null);\n    const lastIndex = steps.length - 1;\n    const step = steps[Math.min(stepIndex, lastIndex)];\n\n    // cada vez que se abre empieza en su primer paso\n    useEffect(() => {\n        if (open) {\n            setStepIndex(initialStep);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [open]);\n    useEffect(() => {\n        if (open) {\n            onStepChange?.(stepIndex);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [open, stepIndex]);\n\n    const goTo = (index) => setStepIndex(Math.max(0, Math.min(lastIndex, index)));\n    const close = (reason) => onClose(reason, {dontShowAgain});\n    const next = () => (stepIndex >= lastIndex ? close(HELP_CLOSE_REASON.finished) : goTo(stepIndex + 1));\n\n    if (!step) {\n        return null;\n    }\n    return (\n        <Dialog\n            open={open}\n            onClose={() => close(HELP_CLOSE_REASON.closed)}\n            maxWidth=\"sm\"\n            fullWidth\n            aria-labelledby={titleId}\n            onKeyDown={(event) => {\n                // las flechas cambian de paso (dentro de la casilla o de un botón también: no escriben nada)\n                if (event.key === 'ArrowRight') {\n                    goTo(stepIndex + 1);\n                } else if (event.key === 'ArrowLeft') {\n                    goTo(stepIndex - 1);\n                }\n            }}\n        >\n            <Box\n                onPointerDown={(event) => {\n                    swipeStartRef.current = event.clientX;\n                }}\n                onPointerUp={(event) => {\n                    const distance = swipeStartRef.current === null ? 0 : event.clientX - swipeStartRef.current;\n                    swipeStartRef.current = null;\n                    if (Math.abs(distance) >= SWIPE_DISTANCE) {\n                        goTo(stepIndex + (distance < 0 ? 1 : -1));\n                    }\n                }}\n                sx={{position: 'relative', touchAction: 'pan-y'}}\n            >\n                <IconButton aria-label={t('help.close')} onClick={() => close(HELP_CLOSE_REASON.closed)}\n                            sx={{position: 'absolute', top: 8, right: 8, zIndex: 1}}>\n                    <CloseRoundedIcon />\n                </IconButton>\n                <Fade key={stepIndex} in appear={!reducesMotion} timeout={reducesMotion ? 0 : FADE_MILLISECONDS}>\n                    <div>\n                        {(step.image || step.media) && (\n                            <HelpMedia ownSx={{height: MEDIA_HEIGHT, display: 'grid', placeItems: 'center', overflow: 'hidden', bgcolor: 'action.hover'}}>\n                                {step.media ?? <Box component=\"img\" src={step.image} alt={step.imageAlt ?? ''} sx={{maxWidth: '100%', maxHeight: '100%', objectFit: 'contain'}} />}\n                            </HelpMedia>\n                        )}\n                        <HelpContent ownSx={{pt: 2.5}}>\n                            {title && <Typography variant=\"overline\" color=\"text.secondary\" component=\"p\">{title}</Typography>}\n                            <Typography id={titleId} variant=\"h6\" component=\"h2\" sx={{pr: 4}}>{step.title}</Typography>\n                            <Typography component=\"div\" color=\"text.secondary\" sx={{mt: 1}}>{step.content}</Typography>\n                        </HelpContent>\n                    </div>\n                </Fade>\n            </Box>\n            {/* los puntos: dónde va y para saltar a un paso */}\n            <HelpDots direction=\"row\" ownSx={{justifyContent: 'center', gap: 1, pb: 1}} role=\"group\" aria-label={t('help.stepOf', {current: stepIndex + 1, total: steps.length})}>\n                {steps.map((unused, index) => (\n                    <ButtonBase key={index} onClick={() => goTo(index)} aria-label={t('help.goToStep', {number: index + 1})}\n                                aria-current={index === stepIndex ? 'step' : undefined}\n                                sx={{width: index === stepIndex ? 22 : 8, height: 8, borderRadius: 4, transition: reducesMotion ? 'none' : 'width 200ms',\n                                    bgcolor: index === stepIndex ? 'primary.main' : 'action.disabled'}} />\n                ))}\n            </HelpDots>\n            <HelpActions ownSx={{px: 3, pb: 2, gap: 1, flexWrap: 'wrap'}}>\n                {showDontShowAgain && (\n                    <FormControlLabel sx={{mr: 'auto'}} label={t('help.dontShowAgain')}\n                                      control={<Checkbox size=\"small\" checked={dontShowAgain} onChange={(event) => setDontShowAgain(event.target.checked)} />} />\n                )}\n                {stepIndex > 0 && <Button onClick={() => goTo(stepIndex - 1)}>{t('help.back')}</Button>}\n                <Button variant=\"contained\" onClick={next} autoFocus>\n                    {stepIndex >= lastIndex ? t('help.done') : t('help.next')}\n                </Button>\n            </HelpActions>\n        </Dialog>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/ui/help/useHelpCarousel.js

@@ -0,0 +1,25 @@
+"use client";
+import { useState } from "react";
+import { acceptedVersionOf, rememberAcceptedVersion } from "../../legal/consentStorage.js";
+const STORAGE_PREFIX = "calcita:help:";
+function useHelpCarousel({ helpKey, version = "1", autoOpen = true, seen = false }) {
+  const storageKey = `${STORAGE_PREFIX}${helpKey}`;
+  const wasSeen = seen || acceptedVersionOf(storageKey) === version;
+  const [open, setOpen] = useState(() => autoOpen && !wasSeen);
+  return {
+    open,
+    wasSeen,
+    openHelp: () => setOpen(true),
+    // terminarla la recuerda; cerrarla antes, solo con «No volver a mostrar»
+    closeHelp: (reason, { dontShowAgain = false } = {}) => {
+      setOpen(false);
+      if (reason === "finished" || dontShowAgain) {
+        rememberAcceptedVersion(storageKey, version);
+      }
+    }
+  };
+}
+export {
+  useHelpCarousel
+};
+//# sourceMappingURL=useHelpCarousel.js.map