@soyfri/shared-library 1.5.0 → 2.0.0-beta.1

package/dist/components/DateTimePicker/DateTimePicker.js

@@ -31,178 +31,192 @@ var __objRest = (source, exclude) => {
 };
 import { jsx } from "react/jsx-runtime";
 import React__default, { useMemo } from "react";
+import { useTheme } from "@mui/material/styles";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { DateTimePicker as DateTimePicker$1 } from "@mui/x-date-pickers/DateTimePicker";
-import { styled } from "@mui/system";
-import { TextField, Box } from "@mui/material";
-const StyledTextField = styled(TextField)(({ theme }) => ({
-  "& .MuiInputBase-root": {
-    maxHeight: "34px",
-    padding: "8px 10px",
-    borderRadius: "10px",
-    display: "flex",
-    alignItems: "center",
-    fontSize: "14px"
-  },
-  "& .MuiInputBase-input": {
-    padding: "0 !important",
-    height: "18px",
-    display: "flex",
-    alignItems: "center",
-    marginTop: "-4px"
-  },
-  "& .MuiInputLabel-root": {
-    top: "50%",
-    transform: "translate(14px, -50%)",
-    "&.MuiInputLabel-shrink": {
-      transform: "translate(1px, -200%) scale(0.75)",
-      fontSize: "16px !important",
-      "> legend": {
-        display: "none"
-      }
+import { Controller } from "react-hook-form";
+import { b as buildFormFieldSx, F as FIELD_INPUT_PADDING_Y } from "../../formField.sx-DfVbMe0V.js";
+import { r as resolvePreset } from "../../resolvePreset-B-IB0ehH.js";
+const buildDateTimePickerSx = (borderRadius, labelPosition) => buildFormFieldSx({
+  borderRadius,
+  labelPosition,
+  includePickersApi: true,
+  extraOutsideSx: {
+    "& .MuiInputBase-input": {
+      paddingTop: FIELD_INPUT_PADDING_Y,
+      paddingBottom: FIELD_INPUT_PADDING_Y
+    },
+    "& .MuiPickersInputBase-sectionsContainer": {
+      paddingTop: FIELD_INPUT_PADDING_Y,
+      paddingBottom: FIELD_INPUT_PADDING_Y
     }
-  },
-  "& .MuiOutlinedInput-notchedOutline": {
-    border: "0.7px solid",
-    borderColor: "#e0e0e0"
   }
-}));
-const DateTimePicker = (_a) => {
-  var _b = _a, {
+});
+const getDateTimeValidationMessage = (error) => {
+  switch (error) {
+    case "minDate":
+    case "maxDate":
+    case "invalidDate":
+      return "Formato de fecha/hora inválido";
+    case "disableFuture":
+      return "No se permiten fechas/horas futuras";
+    case "disablePast":
+      return "No se permiten fechas/horas pasadas";
+    default:
+      return "";
+  }
+};
+const buildLocaleText = (clearButtonText, cancelButtonText, acceptButtonText) => {
+  const text = {};
+  if (clearButtonText) text.clearButtonLabel = clearButtonText;
+  if (cancelButtonText) text.cancelButtonLabel = cancelButtonText;
+  if (acceptButtonText) text.okButtonLabel = acceptButtonText;
+  return text;
+};
+const DateTimePicker = (props) => {
+  const _a = props, {
     label,
-    selectedDateTime,
-    onDateTimeChange,
     minDateTime,
     maxDateTime,
     disabled,
     readOnly,
-    customClass = "",
     inputFormat,
-    slotProps,
+    borderRadius = 10,
+    labelPosition = "outside",
+    size = "small",
+    helperText,
+    error: errorProp,
+    sx,
+    className,
+    preset,
+    adapterLocale,
     clearButtonText,
     cancelButtonText,
     acceptButtonText,
     minutesStep,
     minTime,
+    customClass,
     viewRenderers,
     timeSteps,
-    ampm
-  } = _b, rest = __objRest(_b, [
+    ampm = false,
+    textFieldProps,
+    slotProps: slotPropsProp
+  } = _a, rest = __objRest(_a, [
     "label",
-    "selectedDateTime",
-    "onDateTimeChange",
     "minDateTime",
     "maxDateTime",
     "disabled",
     "readOnly",
-    "customClass",
     "inputFormat",
-    "slotProps",
+    "borderRadius",
+    "labelPosition",
+    "size",
+    "helperText",
+    "error",
+    "sx",
+    "className",
+    "preset",
+    "adapterLocale",
     "clearButtonText",
     "cancelButtonText",
     "acceptButtonText",
     "minutesStep",
     "minTime",
+    "customClass",
     "viewRenderers",
     "timeSteps",
-    "ampm"
+    "ampm",
+    "textFieldProps",
+    "slotProps"
   ]);
-  var _a2, _b2, _c;
-  const [error, setError] = React__default.useState(null);
-  const errorMessage = useMemo(() => {
-    switch (error) {
-      case "minDate":
-      case "maxDate":
-      case "invalidDate": {
-        return "Formato de fecha/hora inválido";
+  const [validationError, setValidationError] = React__default.useState(null);
+  const validationErrorMessage = useMemo(
+    () => getDateTimeValidationMessage(validationError),
+    [validationError]
+  );
+  const customLocaleText = useMemo(
+    () => buildLocaleText(clearButtonText, cancelButtonText, acceptButtonText),
+    [clearButtonText, cancelButtonText, acceptButtonText]
+  );
+  const theme = useTheme();
+  const presetSx = resolvePreset("DateTimePicker", preset, theme);
+  const mergedSx = [
+    buildDateTimePickerSx(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__ */ jsx(
+      LocalizationProvider,
+      __spreadProps(__spreadValues({
+        dateAdapter: AdapterDayjs
+      }, adapterLocale ? { adapterLocale } : {}), {
+        children: /* @__PURE__ */ jsx(
+          DateTimePicker$1,
+          __spreadValues({
+            className: customClass || className,
+            label,
+            value,
+            onChange,
+            onError: setValidationError,
+            minDateTime,
+            maxDateTime,
+            minutesStep,
+            disabled,
+            readOnly,
+            minTime,
+            format: inputFormat != null ? inputFormat : "DD/MM/YYYY HH:mm",
+            viewRenderers,
+            timeSteps,
+            ampm,
+            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)
+            }),
+            localeText: customLocaleText
+          }, rest)
+        )
+      })
+    );
+  };
+  if ("control" in props && props.control) {
+    const { name, control, validation } = props;
+    return /* @__PURE__ */ jsx(
+      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
+          );
+        }
       }
-      case "disableFuture": {
-        return "No se permiten fechas/horas futuras";
-      }
-      case "disablePast": {
-        return "No se permiten fechas/horas pasadas";
-      }
-      default: {
-        return "";
-      }
-    }
-  }, [error]);
-  const customLocaleText = useMemo(() => {
-    const text = {};
-    if (clearButtonText) text.clearButtonLabel = clearButtonText;
-    if (cancelButtonText) text.cancelButtonLabel = cancelButtonText;
-    if (acceptButtonText) text.okButtonLabel = acceptButtonText;
-    return text;
-  }, [clearButtonText, cancelButtonText, acceptButtonText]);
-  return /* @__PURE__ */ jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsx(
-    Box,
-    {
-      sx: {
-        width: "100%",
-        display: "grid",
-        marginBottom: "10px",
-        marginTop: "10px"
-      },
-      children: /* @__PURE__ */ jsx(
-        DateTimePicker$1,
-        __spreadValues({
-          className: customClass,
-          label,
-          value: selectedDateTime,
-          onChange: onDateTimeChange,
-          minDateTime,
-          maxDateTime,
-          minutesStep,
-          disabled,
-          readOnly,
-          minTime,
-          format: inputFormat ? inputFormat : "DD/MM/YYYY HH:mm",
-          viewRenderers,
-          timeSteps,
-          sx: {
-            "& .MuiPickersInputBase-root, .MuiPickersOutlinedInput-root": {
-              maxHeight: "28px",
-              borderRadius: "10px"
-            },
-            "& .MuiInputLabel-root": {
-              // El label se alinea con el padding del input base.
-              top: "50%",
-              transform: "translate(14px, -50%)",
-              // Estilo para el label "encogido" cuando el input está lleno o en foco
-              "&.MuiInputLabel-shrink": {
-                transform: "translate(1px, -200%) scale(0.75)",
-                // Ajustar la posición para que se vea por encima del input
-                fontSize: "16px !important",
-                "> legend": {
-                  display: "none"
-                  // Ocultar el legend del outline
-                }
-              }
-            },
-            "& .MuiPickersInputBase-root > fieldset > legend": {
-              display: "none"
-              // Ocultar el legend del outline
-            }
-          },
-          slotProps: __spreadProps(__spreadValues({}, slotProps), {
-            // 2. Usar 'slotProps' para pasar el componente estilizado al TextField
-            textField: __spreadProps(__spreadValues({}, slotProps == null ? void 0 : slotProps.textField), {
-              helperText: errorMessage || ((_a2 = slotProps == null ? void 0 : slotProps.textField) == null ? void 0 : _a2.helperText),
-              error: !!errorMessage || ((_b2 = slotProps == null ? void 0 : slotProps.textField) == null ? void 0 : _b2.error),
-              InputProps: __spreadProps(__spreadValues({}, (_c = slotProps == null ? void 0 : slotProps.textField) == null ? void 0 : _c.InputProps), {
-                inputComponent: StyledTextField
-              })
-            })
-          }),
-          localeText: __spreadValues({}, customLocaleText),
-          ampm: false
-        }, rest)
-      )
-    }
-  ) });
+    );
+  }
+  const { selectedDateTime, onDateTimeChange } = props;
+  return renderPicker(selectedDateTime, onDateTimeChange);
 };
 export {
-  DateTimePicker
+  DateTimePicker,
+  DateTimePicker as default
 };
 //# sourceMappingURL=DateTimePicker.js.map

package/dist/components/DateTimePicker/DateTimePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.js","sources":["../../../src/components/DateTimePicker/DateTimePicker.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { DateTimePicker as MuiDateTimePicker } from '@mui/x-date-pickers/DateTimePicker';\nimport { DateValidationError } from '@mui/x-date-pickers/models';\nimport { Dayjs } from 'dayjs';\nimport { styled } from '@mui/system';\nimport { Box, TextField, TextFieldProps } from '@mui/material';\n\n// Define las props para el DateTimePicker\nexport interface DateTimePickerProps {\n  label: string;\n  selectedDateTime: Dayjs | null;\n  onDateTimeChange: (dateTime: Dayjs | null) => void;\n  minDateTime?: Dayjs;\n  maxDateTime?: Dayjs;\n  disabled?: boolean;\n  readOnly?: boolean;\n  inputFormat?: string;\n  slotProps?: any;\n  clearButtonText?: string;\n  cancelButtonText?: string;\n  acceptButtonText?: string;\n  minutesStep?: number;\n  minTime?: Dayjs;\n  customClass?: string;\n  viewRenderers?: any\n  timeSteps?: any\n  ampm?: boolean;\n}\n\n// 1. Crear un componente estilizado para el TextField\n// Este componente tendrá los mismos estilos de altura, padding y label que tu Input.tsx\nconst StyledTextField = styled(TextField)(({ theme }) => ({\n  '& .MuiInputBase-root': {\n    maxHeight: '34px',\n    padding: '8px 10px',\n    borderRadius: '10px',\n    display: 'flex',\n    alignItems: 'center',\n    fontSize: '14px',\n  },\n  '& .MuiInputBase-input': {\n    padding: '0 !important',\n    height: '18px',\n    display: 'flex',\n    alignItems: 'center',\n    marginTop: '-4px'\n  },\n  '& .MuiInputLabel-root': {\n    top: '50%',\n    transform: 'translate(14px, -50%)',\n    '&.MuiInputLabel-shrink': {\n      transform: 'translate(1px, -200%) scale(0.75)',\n      fontSize: '16px !important',\n      '> legend': {\n        display: 'none',\n      }\n    },\n  },\n  '& .MuiOutlinedInput-notchedOutline': {\n    border: '0.7px solid',\n    borderColor: '#e0e0e0',\n  },\n}));\n\n/**\n * Custom Material UI DateTimePicker component.\n * Allows selecting a date and time, and updates a Dayjs state.\n */\nexport const DateTimePicker: React.FC<DateTimePickerProps> = ({\n  label,\n  selectedDateTime,\n  onDateTimeChange,\n  minDateTime,\n  maxDateTime,\n  disabled,\n  readOnly,\n  customClass= '',\n  inputFormat,\n  slotProps,\n  clearButtonText,\n  cancelButtonText,\n  acceptButtonText,\n  minutesStep,\n  minTime,\n  viewRenderers,\n  timeSteps,\n  ampm,\n  ...rest\n}) => {\n  const [error, setError] = React.useState<DateValidationError | null>(null);\n\n  const errorMessage = useMemo(() => {\n    switch (error) {\n      case 'minDate':\n      case 'maxDate':\n      case 'invalidDate': {\n        return 'Formato de fecha/hora inválido';\n      }\n      case 'disableFuture': {\n        return 'No se permiten fechas/horas futuras';\n      }\n      case 'disablePast': {\n        return 'No se permiten fechas/horas pasadas';\n      }\n      default: {\n        return '';\n      }\n    }\n  }, [error]);\n\n  const customLocaleText = useMemo(() => {\n    const text: Record<string, string> = {};\n    if (clearButtonText) text.clearButtonLabel = clearButtonText;\n    if (cancelButtonText) text.cancelButtonLabel = cancelButtonText;\n    if (acceptButtonText) text.okButtonLabel = acceptButtonText;\n    return text;\n  }, [clearButtonText, cancelButtonText, acceptButtonText]);\n\n  return (\n    <LocalizationProvider dateAdapter={AdapterDayjs}>\n      <Box\n          sx={{\n              width: '100%',\n              display: 'grid',\n              marginBottom: '10px',\n              marginTop: '10px'\n          }}\n\n      >\n      <MuiDateTimePicker\n        className={customClass}\n        label={label}\n        value={selectedDateTime}\n        onChange={onDateTimeChange}\n        minDateTime={minDateTime}\n        maxDateTime={maxDateTime}\n        minutesStep={minutesStep}\n        disabled={disabled}\n        readOnly={readOnly}\n        minTime={minTime}\n        format={inputFormat ? inputFormat: 'DD/MM/YYYY HH:mm'}\n        viewRenderers={viewRenderers}\n        timeSteps={timeSteps}\n        sx={{\n          '& .MuiPickersInputBase-root, .MuiPickersOutlinedInput-root': {\n            maxHeight: '28px',\n            borderRadius: '10px',\n          },\n          '& .MuiInputLabel-root': {\n            // El label se alinea con el padding del input base.\n            top: '50%',\n            transform: 'translate(14px, -50%)',\n            \n            // Estilo para el label \"encogido\" cuando el input está lleno o en foco\n            '&.MuiInputLabel-shrink': {\n              transform: 'translate(1px, -200%) scale(0.75)', // Ajustar la posición para que se vea por encima del input\n              fontSize: '16px !important',\n              '> legend': {\n                display: 'none', // Ocultar el legend del outline\n              }\n            },\n          },\n          '& .MuiPickersInputBase-root > fieldset > legend':{\n            display: 'none', // Ocultar el legend del outline\n          },\n        }}\n        slotProps={{\n          ...slotProps,\n          // 2. Usar 'slotProps' para pasar el componente estilizado al TextField\n          textField: {\n            ...slotProps?.textField,\n            helperText: errorMessage || slotProps?.textField?.helperText,\n            error: !!errorMessage || slotProps?.textField?.error,\n            InputProps: {\n              ...slotProps?.textField?.InputProps,\n              inputComponent: StyledTextField,\n            },\n          },\n        }}\n        localeText={{ ...customLocaleText }}\n        ampm={false}\n        {...rest}\n      />\n      </Box>\n    </LocalizationProvider>\n  );\n};\n\nexport default DateTimePicker;"],"names":["React","MuiDateTimePicker","_a","_b"],"mappings":"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"}
+{"version":3,"file":"DateTimePicker.js","sources":["../../../src/components/DateTimePicker/DateTimePicker.sx.ts","../../../src/components/DateTimePicker/DateTimePicker.helpers.ts","../../../src/components/DateTimePicker/DateTimePicker.tsx"],"sourcesContent":["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 './DateTimePicker';\n\n/**\n * Builder de sx para el DateTimePicker. Mismo patrón que DatePicker.\n * Usa `includePickersApi: true` para soportar la API nueva de MUI X v8.\n */\nexport const buildDateTimePickerSx = (\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      '& .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 error del DateTimePicker a un mensaje en español. Se usa\n * internamente para poblar `helperText` cuando hay error de validación.\n */\nexport const getDateTimeValidationMessage = (\n  error: DateValidationError | null,\n): string => {\n  switch (error) {\n    case 'minDate':\n    case 'maxDate':\n    case 'invalidDate':\n      return 'Formato de fecha/hora inválido';\n    case 'disableFuture':\n      return 'No se permiten fechas/horas futuras';\n    case 'disablePast':\n      return 'No se permiten fechas/horas pasadas';\n    default:\n      return '';\n  }\n};\n\n/**\n * Construye el `localeText` que MUI acepta para overridear los labels de los\n * botones del popover (Cancel / OK / Clear).\n */\nexport const buildLocaleText = (\n  clearButtonText?: string,\n  cancelButtonText?: string,\n  acceptButtonText?: string,\n): Record<string, string> => {\n  const text: Record<string, string> = {};\n  if (clearButtonText) text.clearButtonLabel = clearButtonText;\n  if (cancelButtonText) text.cancelButtonLabel = cancelButtonText;\n  if (acceptButtonText) text.okButtonLabel = acceptButtonText;\n  return text;\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  DateTimePicker as MuiDateTimePicker,\n  type DateTimePickerProps as MuiDateTimePickerProps,\n} from '@mui/x-date-pickers/DateTimePicker';\nimport { DateValidationError } from '@mui/x-date-pickers/models';\nimport { Dayjs } from 'dayjs';\nimport { Controller, type Control, type RegisterOptions } from 'react-hook-form';\n\nimport { buildDateTimePickerSx } from './DateTimePicker.sx';\nimport {\n  buildLocaleText,\n  getDateTimeValidationMessage,\n} from './DateTimePicker.helpers';\nimport { resolvePreset } from '../_shared/resolvePreset';\n\n// ── Tipos de dominio ─────────────────────────────────────────────────────\nexport type LabelPosition = 'outside' | 'floating';\nexport type DateTimePickerSize = 'small' | 'medium';\n\n// ── Props base ───────────────────────────────────────────────────────────\nexport interface BaseDateTimePickerProps\n  extends Omit<MuiDateTimePickerProps, 'value' | 'onChange' | 'slotProps' | 'format'> {\n  label?: string;\n  minDateTime?: Dayjs;\n  maxDateTime?: Dayjs;\n  disabled?: boolean;\n  readOnly?: boolean;\n  /** Formato de la fecha/hora. Default: 'DD/MM/YYYY HH:mm'. */\n  inputFormat?: string;\n  /** Border radius del input. Default: 10. */\n  borderRadius?: number | string;\n  /** \"outside\" (default) o \"floating\". */\n  labelPosition?: LabelPosition;\n  /** Tamaño del TextField. Default: 'small'. */\n  size?: DateTimePickerSize;\n  helperText?: string;\n  error?: boolean;\n  sx?: SxProps<Theme>;\n  className?: string;\n  /**\n   * Nombre del preset de estilo registrado en `theme.styles.DateTimePicker`.\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 del adaptador dayjs. */\n  adapterLocale?: string;\n  /** Textos de los botones del popover. */\n  clearButtonText?: string;\n  cancelButtonText?: string;\n  acceptButtonText?: string;\n  minutesStep?: number;\n  minTime?: Dayjs;\n  customClass?: string;\n  viewRenderers?: any;\n  timeSteps?: any;\n  /** Si es true usa formato 12h, false = 24h. Default: false. */\n  ampm?: boolean;\n  textFieldProps?: Record<string, any>;\n  /** Passthrough completo a slotProps del MuiDateTimePicker. */\n  slotProps?: MuiDateTimePickerProps['slotProps'];\n}\n\n// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────\nexport interface RHFDateTimePickerProps extends BaseDateTimePickerProps {\n  name: string;\n  control: Control<any>;\n  validation?: RegisterOptions;\n  selectedDateTime?: never;\n  onDateTimeChange?: never;\n}\n\nexport interface ControlledDateTimePickerProps extends BaseDateTimePickerProps {\n  name?: string;\n  control?: never;\n  validation?: never;\n  selectedDateTime: Dayjs | null;\n  onDateTimeChange: (dateTime: Dayjs | null) => void;\n}\n\n// ── API pública final ────────────────────────────────────────────────────\nexport type DateTimePickerProps =\n  | RHFDateTimePickerProps\n  | ControlledDateTimePickerProps;\n\nexport const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {\n  const {\n    label,\n    minDateTime,\n    maxDateTime,\n    disabled,\n    readOnly,\n    inputFormat,\n    borderRadius = 10,\n    labelPosition = 'outside',\n    size = 'small',\n    helperText,\n    error: errorProp,\n    sx,\n    className,\n    preset,\n    adapterLocale,\n    clearButtonText,\n    cancelButtonText,\n    acceptButtonText,\n    minutesStep,\n    minTime,\n    customClass,\n    viewRenderers,\n    timeSteps,\n    ampm = false,\n    textFieldProps,\n    slotProps: slotPropsProp,\n    ...rest\n  } = props as ControlledDateTimePickerProps & {\n    control?: Control<any>;\n    validation?: RegisterOptions;\n  };\n\n  const [validationError, setValidationError] = React.useState<DateValidationError | null>(null);\n\n  const validationErrorMessage = useMemo(\n    () => getDateTimeValidationMessage(validationError),\n    [validationError],\n  );\n\n  const customLocaleText = useMemo(\n    () => buildLocaleText(clearButtonText, cancelButtonText, acceptButtonText),\n    [clearButtonText, cancelButtonText, acceptButtonText],\n  );\n\n  const theme = useTheme();\n  const presetSx = resolvePreset('DateTimePicker', preset, theme);\n\n  const mergedSx = [\n    buildDateTimePickerSx(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\n        dateAdapter={AdapterDayjs}\n        {...(adapterLocale ? { adapterLocale } : {})}\n      >\n        <MuiDateTimePicker\n          className={customClass || className}\n          label={label}\n          value={value}\n          onChange={onChange}\n          onError={setValidationError}\n          minDateTime={minDateTime}\n          maxDateTime={maxDateTime}\n          minutesStep={minutesStep}\n          disabled={disabled}\n          readOnly={readOnly}\n          minTime={minTime}\n          format={inputFormat ?? 'DD/MM/YYYY HH:mm'}\n          viewRenderers={viewRenderers}\n          timeSteps={timeSteps}\n          ampm={ampm}\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          localeText={customLocaleText}\n          {...(rest as any)}\n        />\n      </LocalizationProvider>\n    );\n  };\n\n  if ('control' in props && props.control) {\n    const { name, control, validation } = props as RHFDateTimePickerProps;\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  const { selectedDateTime, onDateTimeChange } = props as ControlledDateTimePickerProps;\n  return renderPicker(selectedDateTime, onDateTimeChange);\n};\n\nexport default DateTimePicker;\n"],"names":["React","MuiDateTimePicker","_a"],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+import { SxProps, Theme } from '@mui/material';
+import { LabelPosition } from './DateTimePicker';
+/**
+ * Builder de sx para el DateTimePicker. Mismo patrón que DatePicker.
+ * Usa `includePickersApi: true` para soportar la API nueva de MUI X v8.
+ */
+export declare const buildDateTimePickerSx: (borderRadius: number | string, labelPosition: LabelPosition) => SxProps<Theme>;

package/dist/components/DateTimePicker/DateTimePicker.types.d.ts

@@ -0,0 +1 @@
+export type { LabelPosition, DateTimePickerSize, BaseDateTimePickerProps, RHFDateTimePickerProps, ControlledDateTimePickerProps, DateTimePickerProps, } from './DateTimePicker';

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

@@ -1 +1,2 @@
-export { default as DateTimePicker } from './DateTimePicker';
+export { DateTimePicker, default } from './DateTimePicker';
+export type { DateTimePickerProps, BaseDateTimePickerProps, RHFDateTimePickerProps, ControlledDateTimePickerProps, LabelPosition, DateTimePickerSize, } from './DateTimePicker.types';

package/dist/components/DateTimePicker.d.ts

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

package/dist/components/Drawer/Drawer.cjs

@@ -0,0 +1,271 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const material = require("@mui/material");
+const styles = require("@mui/material/styles");
+const ChevronLeftIcon = require("@mui/icons-material/ChevronLeft");
+const ChevronRightIcon = require("@mui/icons-material/ChevronRight");
+const resolvePreset = require("../../resolvePreset-CT3kU-K2.cjs");
+const DrawerContext = React.createContext(null);
+function useDrawerContext() {
+  const ctx = React.useContext(DrawerContext);
+  if (ctx) return ctx;
+  return { collapsed: false, width: 260 };
+}
+function buildDrawerSx({
+  width,
+  transitionDuration = 200
+}) {
+  return {
+    width,
+    flexShrink: 0,
+    whiteSpace: "nowrap",
+    boxSizing: "border-box",
+    transition: (theme) => theme.transitions.create("width", {
+      easing: theme.transitions.easing.sharp,
+      duration: transitionDuration
+    }),
+    "& .MuiDrawer-paper": {
+      width,
+      boxSizing: "border-box",
+      overflowX: "hidden",
+      transition: (theme) => theme.transitions.create("width", {
+        easing: theme.transitions.easing.sharp,
+        duration: transitionDuration
+      })
+    }
+  };
+}
+function buildDrawerItemSx({
+  collapsed,
+  active,
+  danger
+}) {
+  return (theme) => ({
+    minHeight: 44,
+    px: collapsed ? 1 : 2,
+    py: 1,
+    mx: 1,
+    my: 0.25,
+    borderRadius: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: collapsed ? "center" : "flex-start",
+    gap: collapsed ? 0 : 1.5,
+    cursor: "pointer",
+    color: danger ? theme.palette.error.main : active ? theme.palette.primary.main : theme.palette.text.primary,
+    backgroundColor: active ? theme.palette.action.selected : "transparent",
+    transition: theme.transitions.create(
+      ["background-color", "color", "padding"],
+      { duration: 150 }
+    ),
+    "&:hover": {
+      backgroundColor: danger ? theme.palette.error.light + "22" : theme.palette.action.hover
+    },
+    "& .drawer-item__icon": {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      minWidth: 24
+    },
+    "& .drawer-item__label": {
+      flex: 1,
+      minWidth: 0,
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      opacity: collapsed ? 0 : 1,
+      width: collapsed ? 0 : "auto",
+      transition: theme.transitions.create(["opacity", "width"], {
+        duration: collapsed ? 100 : 200
+      })
+    }
+  });
+}
+function Drawer({
+  children,
+  variant = "permanent",
+  anchor = "left",
+  collapsed = false,
+  onToggleCollapse,
+  open,
+  onClose,
+  expandedWidth = 260,
+  collapsedWidth = 72,
+  showCollapseButton,
+  header,
+  footer,
+  preset,
+  sx,
+  paperSx,
+  className
+}) {
+  const theme = styles.useTheme();
+  const presetSx = resolvePreset.resolvePreset("Drawer", preset, theme);
+  const supportsCollapsed = variant !== "temporary";
+  const effectiveWidth = supportsCollapsed && collapsed ? collapsedWidth : expandedWidth;
+  const contextValue = React.useMemo(
+    () => ({
+      collapsed: supportsCollapsed && collapsed,
+      width: effectiveWidth
+    }),
+    [supportsCollapsed, collapsed, effectiveWidth]
+  );
+  const rootSx = [
+    buildDrawerSx({ width: effectiveWidth }),
+    ...presetSx ? [presetSx] : [],
+    ...Array.isArray(sx) ? sx : sx ? [sx] : []
+  ];
+  const shouldShowToggle = showCollapseButton != null ? showCollapseButton : supportsCollapsed && !!onToggleCollapse;
+  const openProp = variant === "permanent" ? true : open !== void 0 ? open : false;
+  return /* @__PURE__ */ jsxRuntime.jsx(DrawerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Drawer,
+    {
+      variant,
+      anchor,
+      open: openProp,
+      onClose,
+      className,
+      sx: rootSx,
+      PaperProps: {
+        sx: paperSx
+      },
+      children: [
+        header && /* @__PURE__ */ jsxRuntime.jsxs(
+          material.Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: contextValue.collapsed ? "center" : "space-between",
+              px: contextValue.collapsed ? 1 : 2,
+              py: 1.5,
+              minHeight: 64,
+              flexShrink: 0
+            },
+            children: [
+              !contextValue.collapsed && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { flex: 1, minWidth: 0 }, children: header }),
+              shouldShowToggle && /* @__PURE__ */ jsxRuntime.jsx(
+                material.IconButton,
+                {
+                  size: "small",
+                  onClick: onToggleCollapse,
+                  "aria-label": collapsed ? "Expandir menú" : "Colapsar menú",
+                  children: collapsed ? /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, {})
+                }
+              )
+            ]
+          }
+        ),
+        !header && shouldShowToggle && /* @__PURE__ */ jsxRuntime.jsx(
+          material.Box,
+          {
+            sx: {
+              display: "flex",
+              justifyContent: contextValue.collapsed ? "center" : "flex-end",
+              px: 1,
+              py: 1
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              material.IconButton,
+              {
+                size: "small",
+                onClick: onToggleCollapse,
+                "aria-label": collapsed ? "Expandir menú" : "Colapsar menú",
+                children: collapsed ? /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, {})
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Box,
+          {
+            component: "nav",
+            sx: {
+              flex: 1,
+              overflowY: "auto",
+              overflowX: "hidden",
+              py: 1
+            },
+            children
+          }
+        ),
+        footer && /* @__PURE__ */ jsxRuntime.jsx(
+          material.Box,
+          {
+            sx: {
+              flexShrink: 0,
+              borderTop: (t) => `1px solid ${t.palette.divider}`,
+              p: contextValue.collapsed ? 1 : 1.5,
+              display: "flex",
+              justifyContent: contextValue.collapsed ? "center" : "flex-start"
+            },
+            children: footer
+          }
+        )
+      ]
+    }
+  ) });
+}
+function DrawerItem({
+  icon,
+  label,
+  onClick,
+  active = false,
+  danger = false,
+  disabled = false,
+  endAdornment,
+  sx,
+  className
+}) {
+  const { collapsed } = useDrawerContext();
+  const baseSx = buildDrawerItemSx({ collapsed, active, danger });
+  const mergedSx = [
+    baseSx,
+    disabled && { pointerEvents: "none", opacity: 0.5 },
+    ...Array.isArray(sx) ? sx : sx ? [sx] : []
+  ].filter(Boolean);
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Box,
+    {
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      "aria-disabled": disabled,
+      onClick: disabled ? void 0 : onClick,
+      onKeyDown: (event) => {
+        if (disabled) return;
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          onClick == null ? void 0 : onClick(event);
+        }
+      },
+      className,
+      sx: mergedSx,
+      children: [
+        icon !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { className: "drawer-item__icon", component: "span", children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Typography,
+          {
+            component: "span",
+            variant: "body2",
+            className: "drawer-item__label",
+            sx: { fontWeight: active ? 600 : 400 },
+            children: label
+          }
+        ),
+        !collapsed && endAdornment && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: "span", sx: { flexShrink: 0, ml: "auto" }, children: endAdornment })
+      ]
+    }
+  );
+  if (collapsed && typeof label === "string") {
+    return /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: label, placement: "right", arrow: true, children: content });
+  }
+  return content;
+}
+exports.Drawer = Drawer;
+exports.DrawerItem = DrawerItem;
+exports.default = Drawer;
+exports.useDrawerContext = useDrawerContext;
+//# sourceMappingURL=Drawer.cjs.map