@soyfri/shared-library 1.5.0-beta.4 → 2.0.0-beta.0

package/dist/components/Card/Card.js

@@ -0,0 +1,187 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTheme, Card as Card$1, Box, Typography } from "@mui/material";
+import { r as resolvePreset } from "../../resolvePreset-B-IB0ehH.js";
+const paddingMap = {
+  none: 0,
+  dense: 1.5,
+  normal: 2.5,
+  loose: 4
+};
+function buildCardSx({
+  variant,
+  padding,
+  clickable
+}) {
+  return (theme) => __spreadProps(__spreadValues({
+    borderRadius: 2,
+    backgroundColor: "background.paper",
+    boxShadow: variant === "elevated" ? theme.shadows[1] : "none",
+    border: variant === "outlined" ? `1px solid ${theme.palette.divider}` : "none",
+    transition: theme.transitions.create(
+      ["box-shadow", "transform", "border-color"],
+      { duration: theme.transitions.duration.shorter }
+    ),
+    cursor: clickable ? "pointer" : "default"
+  }, clickable && {
+    "&:hover": {
+      boxShadow: variant === "elevated" ? theme.shadows[3] : variant === "outlined" ? theme.shadows[1] : "none",
+      transform: variant !== "plain" ? "translateY(-1px)" : "none"
+    },
+    "&:active": {
+      transform: "translateY(0)"
+    }
+  }), {
+    // Body padding (cuando no hay header/footer envolventes). Para el caso
+    // compuesto los slots manejan su propio padding, dejamos el root en 0.
+    p: paddingMap[padding]
+  });
+}
+function buildCardHeaderSx() {
+  return (theme) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: 1.5,
+    px: 2.5,
+    py: 1.75,
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    "& .card-header-text": {
+      flex: 1,
+      minWidth: 0
+    },
+    "& .card-header-actions": {
+      display: "flex",
+      alignItems: "center",
+      gap: 0.5,
+      flexShrink: 0
+    }
+  });
+}
+function buildCardBodySx(padding) {
+  return {
+    px: padding === "none" ? 0 : padding === "dense" ? 1.5 : padding === "loose" ? 4 : 2.5,
+    py: padding === "none" ? 0 : padding === "dense" ? 1.5 : padding === "loose" ? 4 : 2.5
+  };
+}
+function buildCardFooterSx() {
+  return (theme) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: 1,
+    px: 2.5,
+    py: 1.5,
+    borderTop: `1px solid ${theme.palette.divider}`,
+    backgroundColor: theme.palette.action.hover
+  });
+}
+function Card({
+  children,
+  title,
+  subtitle,
+  actions,
+  header,
+  footer,
+  variant,
+  padding = "normal",
+  clickable = false,
+  preset,
+  raised,
+  sx,
+  bodySx,
+  headerSx,
+  footerSx,
+  onClick,
+  onBlur,
+  className,
+  "data-testid": dataTestId
+}) {
+  const theme = useTheme();
+  const resolvedVariant = raised ? "elevated" : variant != null ? variant : "elevated";
+  const hasHeader = Boolean(header || title || subtitle || actions);
+  const hasFooter = Boolean(footer);
+  const isCompound = hasHeader || hasFooter;
+  const rootPadding = isCompound ? "none" : padding;
+  const presetSx = resolvePreset("Card", preset, theme);
+  const rootSx = [
+    buildCardSx({
+      variant: resolvedVariant,
+      padding: rootPadding,
+      clickable: clickable || Boolean(onClick)
+    }),
+    ...presetSx ? [presetSx] : [],
+    ...Array.isArray(sx) ? sx : sx ? [sx] : []
+  ];
+  const renderHeader = () => {
+    if (header) return /* @__PURE__ */ jsx(Box, { sx: [buildCardHeaderSx(), ...Array.isArray(headerSx) ? headerSx : headerSx ? [headerSx] : []], children: header });
+    if (!title && !subtitle && !actions) return null;
+    return /* @__PURE__ */ jsxs(Box, { sx: [buildCardHeaderSx(), ...Array.isArray(headerSx) ? headerSx : headerSx ? [headerSx] : []], children: [
+      /* @__PURE__ */ jsxs(Box, { className: "card-header-text", children: [
+        title && /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "subtitle1",
+            component: "div",
+            sx: { fontWeight: 600, lineHeight: 1.3 },
+            noWrap: true,
+            children: title
+          }
+        ),
+        subtitle && /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "caption",
+            color: "text.secondary",
+            component: "div",
+            noWrap: true,
+            children: subtitle
+          }
+        )
+      ] }),
+      actions && /* @__PURE__ */ jsx(Box, { className: "card-header-actions", children: actions })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs(
+    Card$1,
+    {
+      sx: rootSx,
+      className,
+      "data-testid": dataTestId,
+      onClick,
+      onBlur,
+      elevation: 0,
+      children: [
+        renderHeader(),
+        isCompound ? /* @__PURE__ */ jsx(Box, { sx: [buildCardBodySx(padding), ...Array.isArray(bodySx) ? bodySx : bodySx ? [bodySx] : []], children }) : children,
+        hasFooter && /* @__PURE__ */ jsx(Box, { sx: [buildCardFooterSx(), ...Array.isArray(footerSx) ? footerSx : footerSx ? [footerSx] : []], children: footer })
+      ]
+    }
+  );
+}
+export {
+  Card,
+  buildCardBodySx,
+  buildCardFooterSx,
+  buildCardHeaderSx,
+  buildCardSx,
+  Card as default
+};
+//# sourceMappingURL=Card.js.map

package/dist/components/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.sx.ts","../../../src/components/Card/Card.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles';\n\nexport type CardVariant = 'elevated' | 'outlined' | 'plain';\nexport type CardPadding = 'none' | 'dense' | 'normal' | 'loose';\n\nexport interface BuildCardSxArgs {\n  variant: CardVariant;\n  padding: CardPadding;\n  clickable: boolean;\n}\n\nconst paddingMap: Record<CardPadding, number> = {\n  none: 0,\n  dense: 1.5,\n  normal: 2.5,\n  loose: 4,\n};\n\n/**\n * Estilo base del Card (root). La props `sx` del consumer se compone encima\n * junto al preset resuelto (en Card.tsx). Este builder solo se ocupa del\n * variant + padding, para que siga siendo predecible.\n */\nexport function buildCardSx({\n  variant,\n  padding,\n  clickable,\n}: BuildCardSxArgs): SxProps<Theme> {\n  return (theme) => ({\n    borderRadius: 2,\n    backgroundColor: 'background.paper',\n    boxShadow:\n      variant === 'elevated'\n        ? theme.shadows[1]\n        : 'none',\n    border:\n      variant === 'outlined'\n        ? `1px solid ${theme.palette.divider}`\n        : 'none',\n    transition: theme.transitions.create(\n      ['box-shadow', 'transform', 'border-color'],\n      { duration: theme.transitions.duration.shorter },\n    ),\n    cursor: clickable ? 'pointer' : 'default',\n    ...(clickable && {\n      '&:hover': {\n        boxShadow:\n          variant === 'elevated'\n            ? theme.shadows[3]\n            : variant === 'outlined'\n              ? theme.shadows[1]\n              : 'none',\n        transform: variant !== 'plain' ? 'translateY(-1px)' : 'none',\n      },\n      '&:active': {\n        transform: 'translateY(0)',\n      },\n    }),\n    // Body padding (cuando no hay header/footer envolventes). Para el caso\n    // compuesto los slots manejan su propio padding, dejamos el root en 0.\n    p: paddingMap[padding],\n  });\n}\n\nexport function buildCardHeaderSx(): SxProps<Theme> {\n  return (theme) => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 1.5,\n    px: 2.5,\n    py: 1.75,\n    borderBottom: `1px solid ${theme.palette.divider}`,\n    '& .card-header-text': {\n      flex: 1,\n      minWidth: 0,\n    },\n    '& .card-header-actions': {\n      display: 'flex',\n      alignItems: 'center',\n      gap: 0.5,\n      flexShrink: 0,\n    },\n  });\n}\n\nexport function buildCardBodySx(padding: CardPadding): SxProps<Theme> {\n  return {\n    px: padding === 'none' ? 0 : padding === 'dense' ? 1.5 : padding === 'loose' ? 4 : 2.5,\n    py: padding === 'none' ? 0 : padding === 'dense' ? 1.5 : padding === 'loose' ? 4 : 2.5,\n  };\n}\n\nexport function buildCardFooterSx(): SxProps<Theme> {\n  return (theme) => ({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n    gap: 1,\n    px: 2.5,\n    py: 1.5,\n    borderTop: `1px solid ${theme.palette.divider}`,\n    backgroundColor: theme.palette.action.hover,\n  });\n}\n","import React, { type ReactNode } from 'react';\nimport { Box, Card as MuiCard, Typography, useTheme } from '@mui/material';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nimport { resolvePreset } from '../_shared/resolvePreset';\nimport {\n  buildCardSx,\n  buildCardHeaderSx,\n  buildCardBodySx,\n  buildCardFooterSx,\n  type CardVariant,\n  type CardPadding,\n} from './Card.sx';\n\nexport interface CardProps {\n  /** Contenido principal. */\n  children?: ReactNode;\n  /**\n   * Título del Card. Si se provee, renderiza un header con separador. Puede\n   * ser string o cualquier ReactNode para permitir iconos / chips.\n   */\n  title?: ReactNode;\n  /** Texto secundario debajo del título. */\n  subtitle?: ReactNode;\n  /**\n   * Acciones del header (botones, ActionMenu, etc). Se renderizan alineadas\n   * a la derecha.\n   */\n  actions?: ReactNode;\n  /**\n   * Header totalmente custom. Si se provee, ignora `title`/`subtitle`/`actions`\n   * y toma control del slot entero.\n   */\n  header?: ReactNode;\n  /** Footer custom (botones, mensajes, etc). */\n  footer?: ReactNode;\n  /**\n   * Variante visual.\n   * - `elevated` (default): sombra sutil.\n   * - `outlined`: borde sin sombra.\n   * - `plain`: sin borde ni sombra, útil para layouts con nesting.\n   */\n  variant?: CardVariant;\n  /**\n   * Densidad del padding interno. Solo aplica al body cuando hay header/footer;\n   * cuando no hay slots, aplica al root.\n   */\n  padding?: CardPadding;\n  /** Si `true`, muestra feedback de hover/active (cursor, sombra). */\n  clickable?: boolean;\n  /**\n   * Preset registrado en `theme.styles.Card`. `\"default\"` usa el estilo\n   * built-in sin preset extra.\n   */\n  preset?: string;\n  /**\n   * MUI `raised` legacy — mantenido por backward-compat. Equivale a\n   * `variant=\"elevated\"` con sombra mayor. Ignora `variant` si se usa.\n   */\n  raised?: boolean;\n  /** sx del root. Se compone sobre el base + preset. */\n  sx?: SxProps<Theme>;\n  /** sx custom del slot body. */\n  bodySx?: SxProps<Theme>;\n  /** sx custom del slot header. */\n  headerSx?: SxProps<Theme>;\n  /** sx custom del slot footer. */\n  footerSx?: SxProps<Theme>;\n  onClick?: () => void;\n  onBlur?: () => void;\n  className?: string;\n  'data-testid'?: string;\n}\n\n/**\n * Card semántico con slots `title` / `subtitle` / `actions` / `footer`.\n * Reemplaza el patrón `<div class=\"card\"><div class=\"card-header\">...</div>...`\n * de Metronic/Bootstrap con composición declarativa.\n *\n * Backward-compat: si solo se pasa `children`, se comporta como el Card\n * original (MUI Card + body padding).\n *\n * ```tsx\n * <Card\n *   title=\"Datos del cliente\"\n *   subtitle=\"Última actualización: hace 2h\"\n *   actions={<ActionMenu items={menuItems} />}\n *   footer={<Button>Guardar</Button>}\n * >\n *   <CustomerForm />\n * </Card>\n * ```\n */\nexport function Card({\n  children,\n  title,\n  subtitle,\n  actions,\n  header,\n  footer,\n  variant,\n  padding = 'normal',\n  clickable = false,\n  preset,\n  raised,\n  sx,\n  bodySx,\n  headerSx,\n  footerSx,\n  onClick,\n  onBlur,\n  className,\n  'data-testid': dataTestId,\n}: CardProps) {\n  const theme = useTheme();\n\n  // Back-compat: `raised` legacy => elevated. Si no vienen ni `raised` ni\n  // `variant`, default a 'elevated'.\n  const resolvedVariant: CardVariant = raised\n    ? 'elevated'\n    : (variant ?? 'elevated');\n\n  const hasHeader = Boolean(header || title || subtitle || actions);\n  const hasFooter = Boolean(footer);\n  const isCompound = hasHeader || hasFooter;\n\n  // Cuando hay slots, el root no lleva padding (lo llevan los slots).\n  const rootPadding: CardPadding = isCompound ? 'none' : padding;\n\n  const presetSx = resolvePreset('Card', preset, theme);\n\n  const rootSx: SxProps<Theme> = [\n    buildCardSx({\n      variant: resolvedVariant,\n      padding: rootPadding,\n      clickable: clickable || Boolean(onClick),\n    }),\n    ...(presetSx ? [presetSx] : []),\n    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n  ];\n\n  const renderHeader = () => {\n    if (header) return <Box sx={[buildCardHeaderSx(), ...(Array.isArray(headerSx) ? headerSx : headerSx ? [headerSx] : [])]}>{header}</Box>;\n    if (!title && !subtitle && !actions) return null;\n    return (\n      <Box sx={[buildCardHeaderSx(), ...(Array.isArray(headerSx) ? headerSx : headerSx ? [headerSx] : [])]}>\n        <Box className=\"card-header-text\">\n          {title && (\n            <Typography\n              variant=\"subtitle1\"\n              component=\"div\"\n              sx={{ fontWeight: 600, lineHeight: 1.3 }}\n              noWrap\n            >\n              {title}\n            </Typography>\n          )}\n          {subtitle && (\n            <Typography\n              variant=\"caption\"\n              color=\"text.secondary\"\n              component=\"div\"\n              noWrap\n            >\n              {subtitle}\n            </Typography>\n          )}\n        </Box>\n        {actions && <Box className=\"card-header-actions\">{actions}</Box>}\n      </Box>\n    );\n  };\n\n  return (\n    <MuiCard\n      sx={rootSx}\n      className={className}\n      data-testid={dataTestId}\n      onClick={onClick}\n      onBlur={onBlur}\n      elevation={0} // sombra la maneja buildCardSx\n    >\n      {renderHeader()}\n      {isCompound ? (\n        <Box sx={[buildCardBodySx(padding), ...(Array.isArray(bodySx) ? bodySx : bodySx ? [bodySx] : [])]}>\n          {children}\n        </Box>\n      ) : (\n        children\n      )}\n      {hasFooter && (\n        <Box sx={[buildCardFooterSx(), ...(Array.isArray(footerSx) ? footerSx : footerSx ? [footerSx] : [])]}>\n          {footer}\n        </Box>\n      )}\n    </MuiCard>\n  );\n}\n\nexport default Card;\n"],"names":["MuiCard"],"mappings":"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"}

package/dist/components/Card/Card.sx.d.ts

@@ -0,0 +1,17 @@
+import { SxProps, Theme } from '@mui/material/styles';
+export type CardVariant = 'elevated' | 'outlined' | 'plain';
+export type CardPadding = 'none' | 'dense' | 'normal' | 'loose';
+export interface BuildCardSxArgs {
+    variant: CardVariant;
+    padding: CardPadding;
+    clickable: boolean;
+}
+/**
+ * Estilo base del Card (root). La props `sx` del consumer se compone encima
+ * junto al preset resuelto (en Card.tsx). Este builder solo se ocupa del
+ * variant + padding, para que siga siendo predecible.
+ */
+export declare function buildCardSx({ variant, padding, clickable, }: BuildCardSxArgs): SxProps<Theme>;
+export declare function buildCardHeaderSx(): SxProps<Theme>;
+export declare function buildCardBodySx(padding: CardPadding): SxProps<Theme>;
+export declare function buildCardFooterSx(): SxProps<Theme>;

package/dist/components/Card/index.d.ts

@@ -0,0 +1,4 @@
+export { Card, default } from './Card';
+export type { CardProps } from './Card';
+export type { CardVariant, CardPadding } from './Card.sx';
+export { buildCardSx, buildCardHeaderSx, buildCardBodySx, buildCardFooterSx, } from './Card.sx';

package/dist/components/Card.d.ts

@@ -0,0 +1,6 @@
+export * from './Card/index'
+export {}
+import _default from './Card/index'
+export default _default
+export * from './Card/index'
+export {}

package/dist/components/DatePicker/DatePicker.cjs

@@ -0,0 +1,203 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const styles = require("@mui/material/styles");
+const AdapterDayjs = require("@mui/x-date-pickers/AdapterDayjs");
+const LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
+const DatePicker$1 = require("@mui/x-date-pickers/DatePicker");
+const reactHookForm = require("react-hook-form");
+const require$$0 = require("dayjs");
+const formField_sx = require("../../formField.sx-CQ1mbk9M.cjs");
+const resolvePreset = require("../../resolvePreset-CT3kU-K2.cjs");
+var enGb$1 = { exports: {} };
+var enGb = enGb$1.exports;
+var hasRequiredEnGb;
+function requireEnGb() {
+  if (hasRequiredEnGb) return enGb$1.exports;
+  hasRequiredEnGb = 1;
+  (function(module2, exports2) {
+    !(function(e, a) {
+      module2.exports = a(require$$0);
+    })(enGb, (function(e) {
+      function a(e2) {
+        return e2 && "object" == typeof e2 && "default" in e2 ? e2 : { default: e2 };
+      }
+      var t = a(e), _ = { name: "en-gb", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), weekdaysShort: "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"), weekdaysMin: "Su_Mo_Tu_We_Th_Fr_Sa".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), monthsShort: "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"), weekStart: 1, yearStart: 4, relativeTime: { future: "in %s", past: "%s ago", s: "a few seconds", m: "a minute", mm: "%d minutes", h: "an hour", hh: "%d hours", d: "a day", dd: "%d days", M: "a month", MM: "%d months", y: "a year", yy: "%d years" }, formats: { LT: "HH:mm", LTS: "HH:mm:ss", L: "DD/MM/YYYY", LL: "D MMMM YYYY", LLL: "D MMMM YYYY HH:mm", LLLL: "dddd, D MMMM YYYY HH:mm" }, ordinal: function(e2) {
+        var a2 = ["th", "st", "nd", "rd"], t2 = e2 % 100;
+        return "[" + e2 + (a2[(t2 - 20) % 10] || a2[t2] || a2[0]) + "]";
+      } };
+      return t.default.locale(_, null, true), _;
+    }));
+  })(enGb$1);
+  return enGb$1.exports;
+}
+requireEnGb();
+const buildDatePickerSx = (borderRadius, labelPosition) => formField_sx.buildFormFieldSx({
+  borderRadius,
+  labelPosition,
+  includePickersApi: true,
+  extraOutsideSx: {
+    "& .MuiInputBase-input": {
+      paddingTop: formField_sx.FIELD_INPUT_PADDING_Y,
+      paddingBottom: formField_sx.FIELD_INPUT_PADDING_Y
+    },
+    // Secciones editables del PickersTextField (DD/MM/YYYY en API nueva).
+    "& .MuiPickersInputBase-sectionsContainer": {
+      paddingTop: formField_sx.FIELD_INPUT_PADDING_Y,
+      paddingBottom: formField_sx.FIELD_INPUT_PADDING_Y
+    }
+  }
+});
+const getDateValidationMessage = (error) => {
+  switch (error) {
+    case "minDate":
+    case "maxDate":
+      return "Fecha fuera del rango permitido";
+    case "invalidDate":
+      return "Formato de fecha inválido";
+    case "disableFuture":
+      return "No se permiten fechas futuras";
+    case "disablePast":
+      return "No se permiten fechas pasadas";
+    default:
+      return "";
+  }
+};
+const DatePicker = (props) => {
+  const _a = props, {
+    label,
+    minDate,
+    maxDate,
+    disabled,
+    readOnly,
+    borderRadius = 10,
+    labelPosition = "outside",
+    size = "small",
+    helperText,
+    error: errorProp,
+    sx,
+    className,
+    preset,
+    adapterLocale = "en-gb",
+    textFieldProps,
+    slotProps: slotPropsProp
+  } = _a, rest = __objRest(_a, [
+    "label",
+    "minDate",
+    "maxDate",
+    "disabled",
+    "readOnly",
+    "borderRadius",
+    "labelPosition",
+    "size",
+    "helperText",
+    "error",
+    "sx",
+    "className",
+    "preset",
+    "adapterLocale",
+    "textFieldProps",
+    "slotProps"
+  ]);
+  const [validationError, setValidationError] = React.useState(null);
+  const validationErrorMessage = React.useMemo(
+    () => getDateValidationMessage(validationError),
+    [validationError]
+  );
+  const theme = styles.useTheme();
+  const presetSx = resolvePreset.resolvePreset("DatePicker", preset, theme);
+  const mergedSx = [
+    buildDatePickerSx(borderRadius, labelPosition),
+    ...presetSx ? [presetSx] : [],
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
+  const renderPicker = (value, onChange, onBlur, inputRef, rhfError, rhfHelperText) => {
+    const finalError = rhfError || !!validationErrorMessage || !!errorProp;
+    const finalHelperText = rhfHelperText || validationErrorMessage || helperText;
+    return /* @__PURE__ */ jsxRuntime.jsx(LocalizationProvider.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs, adapterLocale, children: /* @__PURE__ */ jsxRuntime.jsx(
+      DatePicker$1.DatePicker,
+      __spreadValues({
+        label,
+        value,
+        onChange,
+        minDate,
+        maxDate,
+        onError: setValidationError,
+        disabled,
+        readOnly,
+        className,
+        sx: mergedSx,
+        slotProps: __spreadProps(__spreadValues({}, slotPropsProp), {
+          textField: __spreadValues(__spreadValues({
+            fullWidth: true,
+            size,
+            variant: "outlined",
+            onBlur,
+            inputRef,
+            error: !!finalError,
+            helperText: finalHelperText
+          }, slotPropsProp == null ? void 0 : slotPropsProp.textField), textFieldProps)
+        })
+      }, rest)
+    ) });
+  };
+  if ("control" in props && props.control) {
+    const { name, control, validation } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactHookForm.Controller,
+      {
+        name,
+        control,
+        rules: validation,
+        render: ({ field, fieldState: { error: fieldError } }) => {
+          var _a2;
+          return renderPicker(
+            (_a2 = field.value) != null ? _a2 : null,
+            field.onChange,
+            field.onBlur,
+            field.ref,
+            !!fieldError,
+            fieldError == null ? void 0 : fieldError.message
+          );
+        }
+      }
+    );
+  }
+  const { selectedDate, onDateChange } = props;
+  return renderPicker(selectedDate, onDateChange);
+};
+exports.DatePicker = DatePicker;
+exports.default = DatePicker;
+//# sourceMappingURL=DatePicker.cjs.map

package/dist/components/DatePicker/DatePicker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.cjs","sources":["../../../node_modules/dayjs/locale/en-gb.js","../../../src/components/DatePicker/DatePicker.sx.ts","../../../src/components/DatePicker/DatePicker.helpers.ts","../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["!function(e,a){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=a(require(\"dayjs\")):\"function\"==typeof define&&define.amd?define([\"dayjs\"],a):(e=\"undefined\"!=typeof globalThis?globalThis:e||self).dayjs_locale_en_gb=a(e.dayjs)}(this,(function(e){\"use strict\";function a(e){return e&&\"object\"==typeof e&&\"default\"in e?e:{default:e}}var t=a(e),_={name:\"en-gb\",weekdays:\"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday\".split(\"_\"),weekdaysShort:\"Sun_Mon_Tue_Wed_Thu_Fri_Sat\".split(\"_\"),weekdaysMin:\"Su_Mo_Tu_We_Th_Fr_Sa\".split(\"_\"),months:\"January_February_March_April_May_June_July_August_September_October_November_December\".split(\"_\"),monthsShort:\"Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec\".split(\"_\"),weekStart:1,yearStart:4,relativeTime:{future:\"in %s\",past:\"%s ago\",s:\"a few seconds\",m:\"a minute\",mm:\"%d minutes\",h:\"an hour\",hh:\"%d hours\",d:\"a day\",dd:\"%d days\",M:\"a month\",MM:\"%d months\",y:\"a year\",yy:\"%d years\"},formats:{LT:\"HH:mm\",LTS:\"HH:mm:ss\",L:\"DD/MM/YYYY\",LL:\"D MMMM YYYY\",LLL:\"D MMMM YYYY HH:mm\",LLLL:\"dddd, D MMMM YYYY HH:mm\"},ordinal:function(e){var a=[\"th\",\"st\",\"nd\",\"rd\"],t=e%100;return\"[\"+e+(a[(t-20)%10]||a[t]||a[0])+\"]\"}};return t.default.locale(_,null,!0),_}));","import type { SxProps, Theme } from '@mui/material';\n\nimport { buildFormFieldSx } from '../_shared/formField.sx';\nimport { FIELD_INPUT_PADDING_Y } from '../../theme/tokens';\nimport type { LabelPosition } from './DatePicker';\n\n/**\n * Builder de sx para el DatePicker. Reutiliza `buildFormFieldSx` con\n * `includePickersApi: true` para cubrir tanto la API clásica (MuiInputBase /\n * MuiOutlinedInput) como la nueva (MuiPickersInputBase / MuiPickersOutlinedInput)\n * del DatePicker de MUI X v8.\n */\nexport const buildDatePickerSx = (\n  borderRadius: number | string,\n  labelPosition: LabelPosition,\n): SxProps<Theme> =>\n  buildFormFieldSx({\n    borderRadius,\n    labelPosition,\n    includePickersApi: true,\n    extraOutsideSx: {\n      '& .MuiInputBase-input': {\n        paddingTop: FIELD_INPUT_PADDING_Y,\n        paddingBottom: FIELD_INPUT_PADDING_Y,\n      },\n\n      // Secciones editables del PickersTextField (DD/MM/YYYY en API nueva).\n      '& .MuiPickersInputBase-sectionsContainer': {\n        paddingTop: FIELD_INPUT_PADDING_Y,\n        paddingBottom: FIELD_INPUT_PADDING_Y,\n      },\n    },\n  });\n","import type { DateValidationError } from '@mui/x-date-pickers/models';\n\n/**\n * Traduce el código de error del DatePicker de MUI X a un mensaje en español.\n * Se usa internamente para poblar `helperText` cuando hay error de validación\n * y el consumer no pasó un mensaje propio.\n */\nexport const getDateValidationMessage = (\n  error: DateValidationError | null,\n): string => {\n  switch (error) {\n    case 'minDate':\n    case 'maxDate':\n      return 'Fecha fuera del rango permitido';\n    case 'invalidDate':\n      return 'Formato de fecha inválido';\n    case 'disableFuture':\n      return 'No se permiten fechas futuras';\n    case 'disablePast':\n      return 'No se permiten fechas pasadas';\n    default:\n      return '';\n  }\n};\n","import React, { useMemo } from 'react';\nimport type { SxProps, Theme } from '@mui/material';\nimport { useTheme } from '@mui/material/styles';\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport {\n  DatePicker as MuiDatePicker,\n  type DatePickerProps as MuiDatePickerProps,\n} from '@mui/x-date-pickers/DatePicker';\nimport { DateValidationError } from '@mui/x-date-pickers/models';\nimport { Dayjs } from 'dayjs';\nimport { Controller, type Control, type RegisterOptions } from 'react-hook-form';\nimport 'dayjs/locale/en-gb';\n\nimport { buildDatePickerSx } from './DatePicker.sx';\nimport { getDateValidationMessage } from './DatePicker.helpers';\nimport { resolvePreset } from '../_shared/resolvePreset';\n\n// ── Tipos de dominio ─────────────────────────────────────────────────────\nexport type LabelPosition = 'outside' | 'floating';\nexport type DatePickerSize = 'small' | 'medium';\n\n// ── Props base ───────────────────────────────────────────────────────────\nexport interface BaseDatePickerProps\n  extends Omit<MuiDatePickerProps, 'value' | 'onChange' | 'slotProps'> {\n  label?: string;\n  minDate?: Dayjs;\n  maxDate?: Dayjs;\n  disabled?: boolean;\n  readOnly?: boolean;\n  /** Border radius del input. Default: 10 */\n  borderRadius?: number | string;\n  /** \"outside\" = label arriba del campo (default). \"floating\" = label clásico MUI dentro del borde */\n  labelPosition?: LabelPosition;\n  /** Tamaño del TextField renderizado. Default: 'small' */\n  size?: DatePickerSize;\n  /** helperText pasado al TextField (se sobrescribe por el error de validación si hay). */\n  helperText?: string;\n  /** Error external override. */\n  error?: boolean;\n  /** sx que se mergea al TextField interno del picker. */\n  sx?: SxProps<Theme>;\n  className?: string;\n  /**\n   * Nombre del preset de estilo registrado en `theme.styles.DatePicker`.\n   * - `\"default\"` (o ausente) = estilo built-in del paquete.\n   * - Cualquier otro string = mergea el preset encima del estilo built-in.\n   */\n  preset?: string;\n  /** Locale para el adaptador dayjs. Default: 'en-gb'. */\n  adapterLocale?: string;\n  /** Passthrough a slotProps.textField. */\n  textFieldProps?: Record<string, any>;\n  /** Passthrough completo a slotProps del MuiDatePicker. */\n  slotProps?: MuiDatePickerProps['slotProps'];\n}\n\n// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────\nexport interface RHFDatePickerProps extends BaseDatePickerProps {\n  name: string;\n  control: Control<any>;\n  validation?: RegisterOptions;\n  selectedDate?: never;\n  onDateChange?: never;\n}\n\nexport interface ControlledDatePickerProps extends BaseDatePickerProps {\n  name?: string;\n  control?: never;\n  validation?: never;\n  selectedDate: Dayjs | null;\n  onDateChange: (date: Dayjs | null) => void;\n}\n\n// ── API pública final ────────────────────────────────────────────────────\nexport type DatePickerProps = RHFDatePickerProps | ControlledDatePickerProps;\n\nexport const DatePicker: React.FC<DatePickerProps> = (props) => {\n  const {\n    label,\n    minDate,\n    maxDate,\n    disabled,\n    readOnly,\n    borderRadius = 10,\n    labelPosition = 'outside',\n    size = 'small',\n    helperText,\n    error: errorProp,\n    sx,\n    className,\n    preset,\n    adapterLocale = 'en-gb',\n    textFieldProps,\n    slotProps: slotPropsProp,\n    ...rest\n  } = props as ControlledDatePickerProps & {\n    control?: Control<any>;\n    validation?: RegisterOptions;\n  };\n\n  const [validationError, setValidationError] = React.useState<DateValidationError | null>(null);\n\n  const validationErrorMessage = useMemo(\n    () => getDateValidationMessage(validationError),\n    [validationError],\n  );\n\n  const theme = useTheme();\n  const presetSx = resolvePreset('DatePicker', preset, theme);\n\n  const mergedSx = [\n    buildDatePickerSx(borderRadius, labelPosition),\n    ...(presetSx ? [presetSx] : []),\n    ...(Array.isArray(sx) ? sx : [sx]),\n  ];\n\n  const renderPicker = (\n    value: Dayjs | null,\n    onChange: (date: Dayjs | null) => void,\n    onBlur?: () => void,\n    inputRef?: React.Ref<any>,\n    rhfError?: boolean,\n    rhfHelperText?: string,\n  ) => {\n    const finalError = rhfError || !!validationErrorMessage || !!errorProp;\n    const finalHelperText = rhfHelperText || validationErrorMessage || helperText;\n\n    return (\n      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={adapterLocale}>\n        <MuiDatePicker\n          label={label}\n          value={value}\n          onChange={onChange}\n          minDate={minDate}\n          maxDate={maxDate}\n          onError={setValidationError}\n          disabled={disabled}\n          readOnly={readOnly}\n          className={className}\n          sx={mergedSx}\n          slotProps={{\n            ...slotPropsProp,\n            textField: {\n              fullWidth: true,\n              size,\n              variant: 'outlined',\n              onBlur,\n              inputRef,\n              error: !!finalError,\n              helperText: finalHelperText,\n              ...(slotPropsProp?.textField as Record<string, any> | undefined),\n              ...textFieldProps,\n            } as any,\n          }}\n          {...(rest as any)}\n        />\n      </LocalizationProvider>\n    );\n  };\n\n  // --- RHF mode ---\n  if ('control' in props && props.control) {\n    const { name, control, validation } = props as RHFDatePickerProps;\n    return (\n      <Controller\n        name={name}\n        control={control}\n        rules={validation}\n        render={({ field, fieldState: { error: fieldError } }) =>\n          renderPicker(\n            field.value ?? null,\n            field.onChange,\n            field.onBlur,\n            field.ref,\n            !!fieldError,\n            fieldError?.message,\n          )\n        }\n      />\n    );\n  }\n\n  // --- Controlado ---\n  const { selectedDate, onDateChange } = props as ControlledDatePickerProps;\n  return renderPicker(selectedDate, onDateChange);\n};\n\nexport default DatePicker;\n"],"names":["module","this","e","a","t","buildFormFieldSx","FIELD_INPUT_PADDING_Y","useMemo","useTheme","resolvePreset","jsx","LocalizationProvider","AdapterDayjs","MuiDatePicker","Controller","_a"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,56 @@
+import { default as React } from 'react';
+import { SxProps, Theme } from '@mui/material';
+import { DatePickerProps as MuiDatePickerProps } from '@mui/x-date-pickers/DatePicker';
+import { Dayjs } from 'dayjs';
+import { Control, RegisterOptions } from 'react-hook-form';
+export type LabelPosition = 'outside' | 'floating';
+export type DatePickerSize = 'small' | 'medium';
+export interface BaseDatePickerProps extends Omit<MuiDatePickerProps, 'value' | 'onChange' | 'slotProps'> {
+    label?: string;
+    minDate?: Dayjs;
+    maxDate?: Dayjs;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** Border radius del input. Default: 10 */
+    borderRadius?: number | string;
+    /** "outside" = label arriba del campo (default). "floating" = label clásico MUI dentro del borde */
+    labelPosition?: LabelPosition;
+    /** Tamaño del TextField renderizado. Default: 'small' */
+    size?: DatePickerSize;
+    /** helperText pasado al TextField (se sobrescribe por el error de validación si hay). */
+    helperText?: string;
+    /** Error external override. */
+    error?: boolean;
+    /** sx que se mergea al TextField interno del picker. */
+    sx?: SxProps<Theme>;
+    className?: string;
+    /**
+     * Nombre del preset de estilo registrado en `theme.styles.DatePicker`.
+     * - `"default"` (o ausente) = estilo built-in del paquete.
+     * - Cualquier otro string = mergea el preset encima del estilo built-in.
+     */
+    preset?: string;
+    /** Locale para el adaptador dayjs. Default: 'en-gb'. */
+    adapterLocale?: string;
+    /** Passthrough a slotProps.textField. */
+    textFieldProps?: Record<string, any>;
+    /** Passthrough completo a slotProps del MuiDatePicker. */
+    slotProps?: MuiDatePickerProps['slotProps'];
+}
+export interface RHFDatePickerProps extends BaseDatePickerProps {
+    name: string;
+    control: Control<any>;
+    validation?: RegisterOptions;
+    selectedDate?: never;
+    onDateChange?: never;
+}
+export interface ControlledDatePickerProps extends BaseDatePickerProps {
+    name?: string;
+    control?: never;
+    validation?: never;
+    selectedDate: Dayjs | null;
+    onDateChange: (date: Dayjs | null) => void;
+}
+export type DatePickerProps = RHFDatePickerProps | ControlledDatePickerProps;
+export declare const DatePicker: React.FC<DatePickerProps>;
+export default DatePicker;

package/{components → dist/components}/DatePicker/DatePicker.definitions.d.ts

@@ -5,3 +5,4 @@ export declare const DatePickerWithErrorDefinition = "\nimport React, { useState
 export declare const DatePickerSmallSizeDefinition = "\nimport React, { useState } from 'react';\nimport { DatePicker } from '@soyfri/shared-library/DatePicker';\nimport dayjs from 'dayjs';\nimport { Box, Typography } from '@mui/material';\n\nexport const DatePickerSmallSizeExample = () => {\n  const [selectedDate, setSelectedDate] = useState(dayjs());\n  return (\n    <Box sx={{ width: 250 }}>\n      <DatePicker\n        label=\"Fecha (Peque\u00F1o)\"\n        selectedDate={selectedDate}\n        onDateChange={setSelectedDate}\n        slotProps={{ textField: { size: 'small' } }} // Prop para hacer el TextField peque\u00F1o\n      />\n      <Typography sx={{ mt: 2 }}>\n        Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}\n      </Typography>\n    </Box>\n  );\n};\n";
 export declare const DatePickerDisabledDefinition = "\nimport React, { useState } from 'react';\nimport { DatePicker } from '@soyfri/shared-library/DatePicker';\nimport dayjs from 'dayjs';\nimport { Box, Typography } from '@mui/material';\n\nexport const DatePickerDisabledExample = () => {\n  const [selectedDate, setSelectedDate] = useState(dayjs());\n  return (\n    <Box sx={{ width: 300 }}>\n      <DatePicker\n        label=\"Fecha (Deshabilitado)\"\n        selectedDate={selectedDate}\n        onDateChange={setSelectedDate}\n        disabled\n      />\n      <Typography sx={{ mt: 2 }}>\n        Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}\n      </Typography>\n    </Box>\n  );\n};\n";
 export declare const DatePickerReadOnlyDefinition = "\n    import React, { useState } from 'react';\n    import { DatePicker } from '@soyfri/shared-library/DatePicker';\n    import dayjs from 'dayjs';\n    import { Box, Typography } from '@mui/material';\n\n    export const DatePickerReadOnlyDefinition = () => {\n    const [selectedDate, setSelectedDate] = useState<Dayjs | null>(dayjs('2024-07-24'));\n      return (\n        <Box sx={{ width: 300 }}>\n          <DatePicker\n            label=\"Fecha (Solo Lectura)\"\n            selectedDate={selectedDate}\n            onDateChange={() => {}} // No permite cambios\n            readOnly\n          />\n          <Typography sx={{ mt: 2 }}>\n            Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}\n          </Typography>\n        </Box>\n      );\n};\n";
+export declare const DatePickerEmptyWithMaskDefinition = "\nimport React, { useState } from 'react';\nimport { DatePicker } from '@soyfri/shared-library/DatePicker';\nimport { Dayjs } from 'dayjs';\nimport { Box, Typography } from '@mui/material';\n\nexport const DatePickerEmptyWithMaskExample = () => {\n  const [selectedDate, setSelectedDate] = useState<Dayjs | null>(null);\n  return (\n    <Box sx={{ width: 300 }}>\n      <DatePicker\n        label=\"Fecha\"\n        selectedDate={selectedDate}\n        onDateChange={setSelectedDate}\n        format=\"DD/MM/YY\"\n      />\n      <Typography sx={{ mt: 2 }} variant=\"caption\" color=\"text.secondary\">\n        Al estar vac\u00EDo, el campo muestra la m\u00E1scara del formato (DD/MM/AA).\n      </Typography>\n    </Box>\n  );\n};\n";

package/dist/components/DatePicker/DatePicker.helpers.d.ts

@@ -0,0 +1,7 @@
+import { DateValidationError } from '@mui/x-date-pickers/models';
+/**
+ * Traduce el código de error del DatePicker de MUI X a un mensaje en español.
+ * Se usa internamente para poblar `helperText` cuando hay error de validación
+ * y el consumer no pasó un mensaje propio.
+ */
+export declare const getDateValidationMessage: (error: DateValidationError | null) => string;