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

package/dist/components/Icon/Icon.d.ts

@@ -1,7 +1,40 @@
 import { default as React, ReactNode } from 'react';
 export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface IconProps {
-    children: ReactNode;
+    /**
+     * Contenido icono. Modo legacy: acepta un elemento MUI o SVG ya armado.
+     * Si se usa junto con `path` o `url`, `children` tiene prioridad.
+     */
+    children?: ReactNode;
+    /**
+     * Ruta SVG inline (el contenido del atributo `d` de un `<path>`). Útil para
+     * los iconos custom de Metronic que vienen como strings de path.
+     *
+     * ```tsx
+     * <Icon path="M12 2L2 22h20L12 2z" />
+     * ```
+     *
+     * Si el string contiene el tag `<svg>` completo (no solo el `d`), también
+     * se soporta y se inyecta tal cual via `dangerouslySetInnerHTML`.
+     */
+    path?: string;
+    /**
+     * URL a un archivo `.svg` (asset local o remoto). Se renderiza vía `<img>`.
+     *
+     * ```tsx
+     * <Icon url="/assets/icons/custom-warning.svg" />
+     * ```
+     */
+    url?: string;
+    /**
+     * Alt text cuando se usa `url`. Default: `"icon"`.
+     */
+    alt?: string;
+    /**
+     * ViewBox cuando se usa `path`. Default: `"0 0 24 24"`. Ignorado si `path`
+     * ya viene como `<svg>` completo.
+     */
+    viewBox?: string;
     color?: string;
     outlined?: boolean;
     spin?: boolean;

package/dist/components/Icon/Icon.js

@@ -1,4 +1,4 @@
-import "../../index.js";
+import '../../styles.css';/* empty css                    */
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { styled, Badge } from "@mui/material";
@@ -11,8 +11,12 @@ const sizeMap = {
 };
 const StyledIcon = styled("span")(({ color, fontSize, spin, outlined }) => ({
   display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
   color,
   fontSize,
+  width: fontSize,
+  height: fontSize,
   animation: spin ? "spin 1s linear infinite" : void 0,
   border: outlined ? "1px solid currentColor" : void 0,
   borderRadius: "50%",
@@ -20,17 +24,31 @@ const StyledIcon = styled("span")(({ color, fontSize, spin, outlined }) => ({
   "@keyframes spin": {
     "0%": { transform: "rotate(0deg)" },
     "100%": { transform: "rotate(360deg)" }
+  },
+  "& svg": {
+    width: "100%",
+    height: "100%",
+    fill: "currentColor",
+    display: "block"
+  },
+  "& img": {
+    width: "100%",
+    height: "100%",
+    display: "block"
   }
 }));
 const Icon = ({
   children,
+  path,
+  url,
+  alt = "icon",
+  viewBox = "0 0 24 24",
   color = "var(--primary-color)",
   outlined = false,
   spin = false,
   badge,
   badgeColor = "primary",
   badgePosition = { vertical: "bottom", horizontal: "right" },
-  badgeSize = "medium",
   size = "sm",
   black,
   white,
@@ -42,6 +60,29 @@ const Icon = ({
     return color;
   }, [color, white, black]);
   const iconSize = sizeMap[size];
+  const content = useMemo(() => {
+    if (children) return children;
+    if (path) {
+      const trimmed = path.trim();
+      if (trimmed.startsWith("<svg")) {
+        return /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: trimmed } });
+      }
+      return /* @__PURE__ */ jsx(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox,
+          fill: "currentColor",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx("path", { d: trimmed })
+        }
+      );
+    }
+    if (url) {
+      return /* @__PURE__ */ jsx("img", { src: url, alt });
+    }
+    return null;
+  }, [children, path, url, alt, viewBox]);
   return /* @__PURE__ */ jsx(
     Badge,
     {
@@ -58,7 +99,7 @@ const Icon = ({
           spin,
           outlined,
           className: `hsi-icon ${className || ""}`,
-          children
+          children: content
         }
       )
     }

package/dist/components/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from 'react';\nimport { Badge, SvgIconProps, styled } from '@mui/material';\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface IconProps {\n  children: ReactNode;\n  color?: string;\n  outlined?: boolean;\n  spin?: boolean;\n  badge?: string | number;\n  badgeColor?: 'primary' | 'secondary' | 'error';\n  badgePosition?: {\n    vertical: 'top' | 'bottom';\n    horizontal: 'right' | 'left';\n  };\n  badgeSize?: 'small' | 'medium' | 'large';\n  size?: IconSize;\n  black?: boolean;\n  white?: boolean;\n  className?: string;\n}\n\nconst sizeMap: Record<IconSize, number> = {\n  xs: 18,\n  sm: 24,\n  md: 36,\n  lg: 48,\n  xl: 64,\n};\n\nconst StyledIcon = styled('span')<{\n  color?: string;\n  fontSize?: number;\n  spin?: boolean;\n  outlined?: boolean;\n}>(({ color, fontSize, spin, outlined }) => ({\n  display: 'inline-flex',\n  color: color,\n  fontSize: fontSize,\n  animation: spin ? 'spin 1s linear infinite' : undefined,\n  border: outlined ? '1px solid currentColor' : undefined,\n  borderRadius: '50%',\n  padding: outlined ? 4 : 0,\n  '@keyframes spin': {\n    '0%': { transform: 'rotate(0deg)' },\n    '100%': { transform: 'rotate(360deg)' },\n  },\n}));\n\nexport const Icon: React.FC<IconProps> = ({\n  children,\n  color = 'var(--primary-color)',\n  outlined = false,\n  spin = false,\n  badge,\n  badgeColor = 'primary',\n  badgePosition = { vertical: 'bottom', horizontal: 'right' },\n  badgeSize = 'medium',\n  size = 'sm',\n  black,\n  white,\n  className,\n}) => {\n  const finalColor = useMemo(() => {\n    if (white) return 'white';\n    if (black) return 'black';\n    return color;\n  }, [color, white, black]);\n\n  const iconSize = sizeMap[size];\n\n  return (\n    <Badge\n      badgeContent={badge}\n      color={badgeColor}\n      anchorOrigin={badgePosition}\n      invisible={badge === undefined}\n      sx={{ '.MuiBadge-badge': { transform: 'scale(1)' } }}\n    >\n      <StyledIcon\n        color={finalColor}\n        fontSize={iconSize}\n        spin={spin}\n        outlined={outlined}\n        className={`hsi-icon ${className || ''}`}\n      >\n        {children}\n      </StyledIcon>\n    </Badge>\n  );\n};\n\nexport default Icon;"],"names":[],"mappings":";;;;AAuBA,MAAM,UAAoC;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,aAAa,OAAO,MAAM,EAK7B,CAAC,EAAE,OAAO,UAAU,MAAM,gBAAgB;AAAA,EAC3C,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,WAAW,OAAO,4BAA4B;AAAA,EAC9C,QAAQ,WAAW,2BAA2B;AAAA,EAC9C,cAAc;AAAA,EACd,SAAS,WAAW,IAAI;AAAA,EACxB,mBAAmB;AAAA,IACjB,MAAM,EAAE,WAAW,eAAA;AAAA,IACnB,QAAQ,EAAE,WAAW,iBAAA;AAAA,EAAiB;AAE1C,EAAE;AAEK,MAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB,EAAE,UAAU,UAAU,YAAY,QAAA;AAAA,EAClD,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI,MAAO,QAAO;AAClB,QAAI,MAAO,QAAO;AAClB,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,OAAO,KAAK,CAAC;AAExB,QAAM,WAAW,QAAQ,IAAI;AAE7B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAc;AAAA,MACd,OAAO;AAAA,MACP,cAAc;AAAA,MACd,WAAW,UAAU;AAAA,MACrB,IAAI,EAAE,mBAAmB,EAAE,WAAW,aAAW;AAAA,MAEjD,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO;AAAA,UACP,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,WAAW,YAAY,aAAa,EAAE;AAAA,UAErC;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Icon.js","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import React, { type ReactNode, useMemo } from 'react';\nimport { Badge, styled } from '@mui/material';\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface IconProps {\n  /**\n   * Contenido icono. Modo legacy: acepta un elemento MUI o SVG ya armado.\n   * Si se usa junto con `path` o `url`, `children` tiene prioridad.\n   */\n  children?: ReactNode;\n  /**\n   * Ruta SVG inline (el contenido del atributo `d` de un `<path>`). Útil para\n   * los iconos custom de Metronic que vienen como strings de path.\n   *\n   * ```tsx\n   * <Icon path=\"M12 2L2 22h20L12 2z\" />\n   * ```\n   *\n   * Si el string contiene el tag `<svg>` completo (no solo el `d`), también\n   * se soporta y se inyecta tal cual via `dangerouslySetInnerHTML`.\n   */\n  path?: string;\n  /**\n   * URL a un archivo `.svg` (asset local o remoto). Se renderiza vía `<img>`.\n   *\n   * ```tsx\n   * <Icon url=\"/assets/icons/custom-warning.svg\" />\n   * ```\n   */\n  url?: string;\n  /**\n   * Alt text cuando se usa `url`. Default: `\"icon\"`.\n   */\n  alt?: string;\n  /**\n   * ViewBox cuando se usa `path`. Default: `\"0 0 24 24\"`. Ignorado si `path`\n   * ya viene como `<svg>` completo.\n   */\n  viewBox?: string;\n  color?: string;\n  outlined?: boolean;\n  spin?: boolean;\n  badge?: string | number;\n  badgeColor?: 'primary' | 'secondary' | 'error';\n  badgePosition?: {\n    vertical: 'top' | 'bottom';\n    horizontal: 'right' | 'left';\n  };\n  badgeSize?: 'small' | 'medium' | 'large';\n  size?: IconSize;\n  black?: boolean;\n  white?: boolean;\n  className?: string;\n}\n\nconst sizeMap: Record<IconSize, number> = {\n  xs: 18,\n  sm: 24,\n  md: 36,\n  lg: 48,\n  xl: 64,\n};\n\nconst StyledIcon = styled('span')<{\n  color?: string;\n  fontSize?: number;\n  spin?: boolean;\n  outlined?: boolean;\n}>(({ color, fontSize, spin, outlined }) => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: color,\n  fontSize: fontSize,\n  width: fontSize,\n  height: fontSize,\n  animation: spin ? 'spin 1s linear infinite' : undefined,\n  border: outlined ? '1px solid currentColor' : undefined,\n  borderRadius: '50%',\n  padding: outlined ? 4 : 0,\n  '@keyframes spin': {\n    '0%': { transform: 'rotate(0deg)' },\n    '100%': { transform: 'rotate(360deg)' },\n  },\n  '& svg': {\n    width: '100%',\n    height: '100%',\n    fill: 'currentColor',\n    display: 'block',\n  },\n  '& img': {\n    width: '100%',\n    height: '100%',\n    display: 'block',\n  },\n}));\n\nexport const Icon: React.FC<IconProps> = ({\n  children,\n  path,\n  url,\n  alt = 'icon',\n  viewBox = '0 0 24 24',\n  color = 'var(--primary-color)',\n  outlined = false,\n  spin = false,\n  badge,\n  badgeColor = 'primary',\n  badgePosition = { vertical: 'bottom', horizontal: 'right' },\n  size = 'sm',\n  black,\n  white,\n  className,\n}) => {\n  const finalColor = useMemo(() => {\n    if (white) return 'white';\n    if (black) return 'black';\n    return color;\n  }, [color, white, black]);\n\n  const iconSize = sizeMap[size];\n\n  // Resolver el contenido según la prop activa.\n  const content = useMemo(() => {\n    if (children) return children;\n\n    if (path) {\n      const trimmed = path.trim();\n      // Si es un SVG completo (empieza con <svg), lo inyectamos tal cual.\n      if (trimmed.startsWith('<svg')) {\n        return <span dangerouslySetInnerHTML={{ __html: trimmed }} />;\n      }\n      // Si no, asumimos que es el atributo `d` de un <path>.\n      return (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox={viewBox}\n          fill=\"currentColor\"\n          aria-hidden=\"true\"\n        >\n          <path d={trimmed} />\n        </svg>\n      );\n    }\n\n    if (url) {\n      return <img src={url} alt={alt} />;\n    }\n\n    return null;\n  }, [children, path, url, alt, viewBox]);\n\n  return (\n    <Badge\n      badgeContent={badge}\n      color={badgeColor}\n      anchorOrigin={badgePosition}\n      invisible={badge === undefined}\n      sx={{ '.MuiBadge-badge': { transform: 'scale(1)' } }}\n    >\n      <StyledIcon\n        color={finalColor}\n        fontSize={iconSize}\n        spin={spin}\n        outlined={outlined}\n        className={`hsi-icon ${className || ''}`}\n      >\n        {content}\n      </StyledIcon>\n    </Badge>\n  );\n};\n\nexport default Icon;\n"],"names":[],"mappings":";;;;AAwDA,MAAM,UAAoC;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,aAAa,OAAO,MAAM,EAK7B,CAAC,EAAE,OAAO,UAAU,MAAM,gBAAgB;AAAA,EAC3C,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW,OAAO,4BAA4B;AAAA,EAC9C,QAAQ,WAAW,2BAA2B;AAAA,EAC9C,cAAc;AAAA,EACd,SAAS,WAAW,IAAI;AAAA,EACxB,mBAAmB;AAAA,IACjB,MAAM,EAAE,WAAW,eAAA;AAAA,IACnB,QAAQ,EAAE,WAAW,iBAAA;AAAA,EAAiB;AAAA,EAExC,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAAA,EAEX,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EAAA;AAEb,EAAE;AAEK,MAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB,EAAE,UAAU,UAAU,YAAY,QAAA;AAAA,EAClD,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI,MAAO,QAAO;AAClB,QAAI,MAAO,QAAO;AAClB,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,OAAO,KAAK,CAAC;AAExB,QAAM,WAAW,QAAQ,IAAI;AAG7B,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,SAAU,QAAO;AAErB,QAAI,MAAM;AACR,YAAM,UAAU,KAAK,KAAA;AAErB,UAAI,QAAQ,WAAW,MAAM,GAAG;AAC9B,mCAAQ,QAAA,EAAK,yBAAyB,EAAE,QAAQ,WAAW;AAAA,MAC7D;AAEA,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UAEZ,UAAA,oBAAC,QAAA,EAAK,GAAG,QAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAGxB;AAEA,QAAI,KAAK;AACP,aAAO,oBAAC,OAAA,EAAI,KAAK,KAAK,IAAA,CAAU;AAAA,IAClC;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,MAAM,KAAK,KAAK,OAAO,CAAC;AAEtC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAc;AAAA,MACd,OAAO;AAAA,MACP,cAAc;AAAA,MACd,WAAW,UAAU;AAAA,MACrB,IAAI,EAAE,mBAAmB,EAAE,WAAW,aAAW;AAAA,MAEjD,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO;AAAA,UACP,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,WAAW,YAAY,aAAa,EAAE;AAAA,UAErC,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;"}

package/dist/components/Input/Input.cjs

@@ -1,5 +1,175 @@
 "use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const Input = require("../../Input-c8MwNNPg.cjs");
-exports.Input = Input.Input;
+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 material = require("@mui/material");
+const styles = require("@mui/material/styles");
+const reactHookForm = require("react-hook-form");
+const formField_sx = require("../../formField.sx-CQ1mbk9M.cjs");
+const resolvePreset = require("../../resolvePreset-CT3kU-K2.cjs");
+const parseValue = (raw, type) => {
+  if (type !== "number") return raw;
+  if (raw === "" || raw === "-") return raw;
+  const n = parseFloat(raw);
+  return isNaN(n) ? raw : n;
+};
+const buildSlotProps = (type, min, max, customSlotProps, customInputProps, _labelPosition, readOnly) => {
+  const numberAttrs = type === "number" ? __spreadValues({ min: min != null ? min : Number.NEGATIVE_INFINITY }, max !== void 0 && { max }) : {};
+  return __spreadProps(__spreadValues({}, customSlotProps), {
+    htmlInput: __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, customInputProps), customSlotProps == null ? void 0 : customSlotProps.htmlInput), numberAttrs), readOnly && { readOnly: true }),
+    // Dejamos que MUI maneje el shrink nativamente (animación inside → up).
+    // El consumidor puede forzar shrink con slotProps.inputLabel.shrink=true si lo necesita.
+    inputLabel: __spreadValues({}, customSlotProps == null ? void 0 : customSlotProps.inputLabel)
+  });
+};
+const buildInputSx = (borderRadius, labelPosition) => {
+  const radius = typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
+  return formField_sx.buildFormFieldSx({
+    borderRadius,
+    labelPosition,
+    extraOutsideSx: {
+      "& .MuiInputBase-input": {
+        paddingTop: formField_sx.FIELD_INPUT_PADDING_Y,
+        paddingBottom: formField_sx.FIELD_INPUT_PADDING_Y
+      },
+      // Filled: quitar el padding-top reservado para el label flotante dentro.
+      "& .MuiFilledInput-root": {
+        paddingTop: 0,
+        borderRadius: `${radius} ${radius} 0 0`
+      },
+      "& .MuiFilledInput-input": {
+        paddingTop: formField_sx.FIELD_INPUT_PADDING_Y
+      },
+      // Standard: quitar el margin-top reservado para el label flotante.
+      "& .MuiInput-root": {
+        marginTop: 0
+      }
+    }
+  });
+};
+const Input = (props) => {
+  const _a = props, {
+    type = "text",
+    variant = "outlined",
+    size = "small",
+    borderRadius = 10,
+    labelPosition = "outside",
+    preset,
+    min,
+    max,
+    readOnly,
+    inputProps,
+    slotProps,
+    sx
+  } = _a, rest = __objRest(_a, [
+    "type",
+    "variant",
+    "size",
+    "borderRadius",
+    "labelPosition",
+    "preset",
+    "min",
+    "max",
+    "readOnly",
+    "inputProps",
+    "slotProps",
+    "sx"
+  ]);
+  const theme = styles.useTheme();
+  const presetSx = resolvePreset.resolvePreset("Input", preset, theme);
+  const finalSlotProps = buildSlotProps(
+    type,
+    min,
+    max,
+    slotProps,
+    inputProps,
+    labelPosition,
+    readOnly
+  );
+  const mergedSx = [
+    buildInputSx(borderRadius, labelPosition),
+    ...presetSx ? [presetSx] : [],
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
+  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 } }) => {
+          var _a2, _b;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            material.TextField,
+            __spreadProps(__spreadValues({
+              fullWidth: true
+            }, rest), {
+              name: field.name,
+              value: (_a2 = field.value) != null ? _a2 : "",
+              onChange: (e) => field.onChange(parseValue(e.target.value, type)),
+              onBlur: field.onBlur,
+              inputRef: field.ref,
+              type,
+              variant,
+              size,
+              slotProps: finalSlotProps,
+              sx: mergedSx,
+              error: !!error || rest.error,
+              helperText: (_b = error == null ? void 0 : error.message) != null ? _b : rest.helperText
+            })
+          );
+        }
+      }
+    );
+  }
+  const { value, onChange } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.TextField,
+    __spreadProps(__spreadValues({
+      fullWidth: true
+    }, rest), {
+      value: value != null ? value : "",
+      onChange: (e) => onChange(parseValue(e.target.value, type)),
+      type,
+      variant,
+      size,
+      slotProps: finalSlotProps,
+      sx: mergedSx
+    })
+  );
+};
+exports.Input = Input;
+exports.default = Input;
 //# sourceMappingURL=Input.cjs.map

package/dist/components/Input/Input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"Input.cjs","sources":["../../../src/components/Input/Input.helpers.ts","../../../src/components/Input/Input.sx.ts","../../../src/components/Input/Input.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport type { TextFieldProps } from '@mui/material';\nimport type { InputType, LabelPosition } from './Input';\n\n/**\n * Convierte el valor raw del evento al tipo apropiado.\n * Para type=\"number\" intenta parsear a número; si falla, devuelve el raw\n * (permite estados intermedios como \"\" o \"-\" mientras el usuario tipea).\n */\nexport const parseValue = (raw: string, type: InputType): string | number => {\n  if (type !== 'number') return raw;\n  if (raw === '' || raw === '-') return raw;\n  const n = parseFloat(raw);\n  return isNaN(n) ? raw : n;\n};\n\n/**\n * Construye los slotProps del TextField consolidando htmlInput + inputLabel.\n * Maneja los atributos min/max cuando type=\"number\" y readOnly.\n */\nexport const buildSlotProps = (\n  type: InputType,\n  min: number | undefined,\n  max: number | undefined,\n  customSlotProps: TextFieldProps['slotProps'],\n  customInputProps: InputHTMLAttributes<HTMLInputElement> | undefined,\n  _labelPosition: LabelPosition,\n  readOnly?: boolean,\n): TextFieldProps['slotProps'] => {\n  const numberAttrs =\n    type === 'number'\n      ? { min: min ?? Number.NEGATIVE_INFINITY, ...(max !== undefined && { max }) }\n      : {};\n\n  return {\n    ...customSlotProps,\n    htmlInput: {\n      ...customInputProps,\n      ...(customSlotProps as any)?.htmlInput,\n      ...numberAttrs,\n      ...(readOnly && { readOnly: true }),\n    },\n    // Dejamos que MUI maneje el shrink nativamente (animación inside → up).\n    // El consumidor puede forzar shrink con slotProps.inputLabel.shrink=true si lo necesita.\n    inputLabel: {\n      ...(customSlotProps as any)?.inputLabel,\n    },\n  };\n};\n","import type { TextFieldProps } from '@mui/material';\n\nimport { buildFormFieldSx } from '../_shared/formField.sx';\nimport { FIELD_INPUT_PADDING_Y } from '../../theme/tokens';\nimport type { LabelPosition } from './Input';\n\n/**\n * Builder de sx para el Input. Usa el builder compartido\n * `buildFormFieldSx` y añade overrides específicos de TextField\n * (padding del input base, filled, standard).\n */\nexport const buildInputSx = (\n  borderRadius: number | string,\n  labelPosition: LabelPosition,\n): TextFieldProps['sx'] => {\n  const radius = typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;\n\n  return buildFormFieldSx({\n    borderRadius,\n    labelPosition,\n    extraOutsideSx: {\n      '& .MuiInputBase-input': {\n        paddingTop: FIELD_INPUT_PADDING_Y,\n        paddingBottom: FIELD_INPUT_PADDING_Y,\n      },\n\n      // Filled: quitar el padding-top reservado para el label flotante dentro.\n      '& .MuiFilledInput-root': {\n        paddingTop: 0,\n        borderRadius: `${radius} ${radius} 0 0`,\n      },\n      '& .MuiFilledInput-input': {\n        paddingTop: FIELD_INPUT_PADDING_Y,\n      },\n\n      // Standard: quitar el margin-top reservado para el label flotante.\n      '& .MuiInput-root': {\n        marginTop: 0,\n      },\n    },\n  });\n};\n","import { TextField, type TextFieldProps } from '@mui/material';\nimport { useTheme } from '@mui/material/styles';\nimport { Controller, type Control, type RegisterOptions } from 'react-hook-form';\n\nimport { parseValue, buildSlotProps } from './Input.helpers';\nimport { buildInputSx } from './Input.sx';\nimport { resolvePreset } from '../_shared/resolvePreset';\n\n// ── Tipos de dominio ─────────────────────────────────────────────────────\nexport type InputType =\n  | 'text' | 'number' | 'email' | 'password' | 'tel'\n  | 'url' | 'search' | 'date' | 'datetime-local'\n  | 'month' | 'week' | 'time' | 'color';\n\nexport type LabelPosition = 'outside' | 'floating';\n\n// ── Props base (todo lo común entre RHF y controlado) ────────────────────\nexport interface BaseInputProps\n  extends Omit<TextFieldProps, 'value' | 'onChange' | 'type'> {\n  type?: InputType;\n  min?: number;\n  max?: number;\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  readOnly?: boolean;\n  /**\n   * Nombre del preset de estilo registrado en `theme.styles.Input`.\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}\n\n// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────\nexport interface RHFInputProps extends BaseInputProps {\n  name: string;\n  control: Control<any>;\n  validation?: RegisterOptions;\n  value?: never;\n  onChange?: never;\n}\n\nexport interface ControlledInputProps extends BaseInputProps {\n  name?: string;\n  control?: never;\n  validation?: never;\n  value: string | number;\n  onChange: (value: string | number) => void;\n}\n\n// ── API pública final ────────────────────────────────────────────────────\nexport type InputProps = RHFInputProps | ControlledInputProps;\n\nexport const Input: React.FC<InputProps> = (props) => {\n  const {\n    type = 'text',\n    variant = 'outlined',\n    size = 'small',\n    borderRadius = 10,\n    labelPosition = 'outside',\n    preset,\n    min,\n    max,\n    readOnly,\n    inputProps,\n    slotProps,\n    sx,\n    ...rest\n  } = props as ControlledInputProps & {\n    control?: Control<any>;\n    validation?: RegisterOptions;\n    readOnly?: boolean;\n    preset?: string;\n  };\n\n  const theme = useTheme();\n  const presetSx = resolvePreset('Input', preset, theme);\n\n  const finalSlotProps = buildSlotProps(\n    type,\n    min,\n    max,\n    slotProps,\n    inputProps,\n    labelPosition,\n    readOnly,\n  );\n  const mergedSx = [\n    buildInputSx(borderRadius, labelPosition),\n    ...(presetSx ? [presetSx] : []),\n    ...(Array.isArray(sx) ? sx : [sx]),\n  ];\n\n  if ('control' in props && props.control) {\n    const { name, control, validation } = props as RHFInputProps;\n    return (\n      <Controller\n        name={name}\n        control={control}\n        rules={validation}\n        render={({ field, fieldState: { error } }) => (\n          <TextField\n            fullWidth\n            {...rest}\n            name={field.name}\n            value={field.value ?? ''}\n            onChange={(e) => field.onChange(parseValue(e.target.value, type))}\n            onBlur={field.onBlur}\n            inputRef={field.ref}\n            type={type}\n            variant={variant}\n            size={size}\n            slotProps={finalSlotProps}\n            sx={mergedSx}\n            error={!!error || rest.error}\n            helperText={error?.message ?? rest.helperText}\n          />\n        )}\n      />\n    );\n  }\n\n  const { value, onChange } = props as ControlledInputProps;\n  return (\n    <TextField\n      fullWidth\n      {...rest}\n      value={value ?? ''}\n      onChange={(e) => onChange(parseValue(e.target.value, type))}\n      type={type}\n      variant={variant}\n      size={size}\n      slotProps={finalSlotProps}\n      sx={mergedSx}\n    />\n  );\n};\n\nexport default Input;\n"],"names":["buildFormFieldSx","FIELD_INPUT_PADDING_Y","useTheme","resolvePreset","jsx","Controller","TextField","_a"],"mappings":"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"}

package/dist/components/Input/Input.d.ts

@@ -1,32 +1,37 @@
-import { default as React } from 'react';
 import { TextFieldProps } from '@mui/material';
 import { Control, RegisterOptions } from 'react-hook-form';
-interface BaseInputProps extends Omit<TextFieldProps, 'value' | 'onChange' | 'variant' | 'type' | 'inputProps' | 'slotProps' | 'error' | 'helperText'> {
-    type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'date' | 'datetime-local' | 'month' | 'week' | 'time' | 'color';
-    variant?: 'outlined' | 'filled' | 'standard';
+export type InputType = 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'date' | 'datetime-local' | 'month' | 'week' | 'time' | 'color';
+export type LabelPosition = 'outside' | 'floating';
+export interface BaseInputProps extends Omit<TextFieldProps, 'value' | 'onChange' | 'type'> {
+    type?: InputType;
     min?: number;
     max?: number;
-    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
-    slotProps?: TextFieldProps['slotProps'];
-    disabled?: 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;
     readOnly?: boolean;
-    error?: boolean;
-    helperText?: string;
+    /**
+     * Nombre del preset de estilo registrado en `theme.styles.Input`.
+     * - `"default"` (o ausente) = estilo built-in del paquete.
+     * - Cualquier otro string = mergea el preset encima del estilo built-in.
+     */
+    preset?: string;
 }
-interface RHFInputProps extends BaseInputProps {
+export interface RHFInputProps extends BaseInputProps {
     name: string;
     control: Control<any>;
     validation?: RegisterOptions;
-    value?: string | number;
-    onChange?: (value: string | number) => void;
+    value?: never;
+    onChange?: never;
 }
-interface StandardInputPropsWithOptionalName extends BaseInputProps {
+export interface ControlledInputProps extends BaseInputProps {
     name?: string;
     control?: never;
     validation?: never;
     value: string | number;
     onChange: (value: string | number) => void;
 }
-export type InputProps = RHFInputProps | StandardInputPropsWithOptionalName;
-export declare const Input: React.ForwardRefExoticComponent<(Omit<RHFInputProps, "ref"> | Omit<StandardInputPropsWithOptionalName, "ref">) & React.RefAttributes<HTMLInputElement>>;
+export type InputProps = RHFInputProps | ControlledInputProps;
+export declare const Input: React.FC<InputProps>;
 export default Input;

package/dist/components/Input/Input.definitions.d.ts

@@ -1,11 +1,14 @@
 export declare const BasicTextInputDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box, Typography } from '@mui/material';\n\nexport const BasicTextInputExample = () => {\n  const [value, setValue] = useState('Texto de ejemplo');\n  return (\n    <Box sx={{ width: 300 }}>\n      <Input\n        label=\"Nombre\"\n        value={value}\n        onChange={setValue}\n      />\n      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>\n    </Box>\n  );\n};\n";
 export declare const NumberInputDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box, Typography } from '@mui/material';\n\nexport const NumberInputExample = () => {\n  const [value, setValue] = useState(123);\n  return (\n    <Box sx={{ width: 300 }}>\n      <Input\n        label=\"Cantidad\"\n        type=\"number\"\n        value={value}\n        onChange={setValue}\n      />\n      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>\n    </Box>\n  );\n};\n";
-export declare const EmailInputDefinition = "\nimport React, { useState } => from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box, Typography } from '@mui/material';\n\nexport const EmailInputExample = () => {\n  const [value, setValue] = useState('ejemplo@dominio.com');\n  return (\n    <Box sx={{ width: 300 }}>\n      <Input\n        label=\"Correo Electr\u00F3nico\"\n        type=\"email\"\n        value={value}\n        onChange={setValue}\n      />\n      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>\n    </Box>\n  );\n};\n";
+export declare const EmailInputDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box, Typography } from '@mui/material';\n\nexport const EmailInputExample = () => {\n  const [value, setValue] = useState('ejemplo@dominio.com');\n  return (\n    <Box sx={{ width: 300 }}>\n      <Input\n        label=\"Correo Electr\u00F3nico\"\n        type=\"email\"\n        value={value}\n        onChange={setValue}\n      />\n      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>\n    </Box>\n  );\n};\n";
 export declare const PasswordInputDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box, Typography } from '@mui/material';\n\nexport const PasswordInputExample = () => {\n  const [value, setValue] = useState('micontrase\u00F1a');\n  return (\n    <Box sx={{ width: 300 }}>\n      <Input\n        label=\"Contrase\u00F1a\"\n        type=\"password\"\n        value={value}\n        onChange={setValue}\n      />\n      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>\n    </Box>\n  );\n};\n";
 export declare const InputWithPlaceholderDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box, Typography } from '@mui/material';\n\nexport const InputWithPlaceholderExample = () => {\n  const [value, setValue] = useState('');\n  return (\n    <Box sx={{ width: 300 }}>\n      <Input\n        label=\"B\u00FAsqueda\"\n        placeholder=\"Escribe tu t\u00E9rmino de b\u00FAsqueda...\"\n        value={value}\n        onChange={setValue}\n      />\n      <Typography sx={{ mt: 2 }}>Valor actual: {value || 'Vac\u00EDo'}</Typography>\n    </Box>\n  );\n};\n";
 export declare const InputWithErrorDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box, Typography } from '@mui/material';\n\nexport const InputWithErrorExample = () => {\n  const [value, setValue] = useState('invalido');\n  const hasError = value.length < 5 && value.length > 0;\n  return (\n    <Box sx={{ width: 300 }}>\n      <Input\n        label=\"Nombre de usuario\"\n        value={value}\n        onChange={setValue}\n        error={hasError}\n        helperText={hasError ? 'M\u00EDnimo 5 caracteres' : ''}\n      />\n      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>\n    </Box>\n  );\n};\n";
 export declare const DisabledInputDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box, Typography } from '@mui/material';\n\nexport const DisabledInputExample = () => {\n  const [value, setValue] = useState('Campo deshabilitado');\n  return (\n    <Box sx={{ width: 300 }}>\n      <Input\n        label=\"Estado\"\n        value={value}\n        onChange={setValue}\n        disabled\n      />\n      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>\n    </Box>\n  );\n};\n";
-export declare const ReadOnlyInputDefinition = "\nimport React, { useState } => from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box, Typography } from '@mui/material';\n\nexport const ReadOnlyInputExample = () => {\n  const [value, setValue] = useState('Valor de solo lectura');\n  return (\n    <Box sx={{ width: 300 }}>\n      <Input\n        label=\"Informaci\u00F3n\"\n        value={value}\n        onChange={setValue}\n        readOnly\n      />\n      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>\n    </Box>\n  );\n};\n";
+export declare const ReadOnlyInputDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box, Typography } from '@mui/material';\n\nexport const ReadOnlyInputExample = () => {\n  const [value, setValue] = useState('Valor de solo lectura');\n  return (\n    <Box sx={{ width: 300 }}>\n      <Input\n        label=\"Informaci\u00F3n\"\n        value={value}\n        onChange={setValue}\n        readOnly\n      />\n      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>\n    </Box>\n  );\n};\n";
 export declare const InputVariantsDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box, Typography } from '@mui/material';\n\nexport const InputVariantsExample = () => {\n  const [valueOutlined, setValueOutlined] = useState('Outlined');\n  const [valueFilled, setValueFilled] = useState('Filled');\n  const [valueStandard, setValueStandard] = useState('Standard');\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, width: 300 }}>\n      <Input\n        label=\"Esquema Outlined\"\n        value={valueOutlined}\n        onChange={setValueOutlined}\n        variant=\"outlined\"\n      />\n      <Input\n        label=\"Esquema Filled\"\n        value={valueFilled}\n        onChange={setValueFilled}\n        variant=\"filled\"\n      />\n      <Input\n        label=\"Esquema Standard\"\n        value={valueStandard}\n        onChange={setValueStandard}\n        variant=\"standard\"\n      />\n    </Box>\n  );\n};\n";
 export declare const InputSizesDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box, Typography } from '@mui/material';\n\nexport const InputSizesExample = () => {\n  const [valueMedium, setValueMedium] = useState('Tama\u00F1o Mediano');\n  const [valueSmall, setValueSmall] = useState('Tama\u00F1o Peque\u00F1o');\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, width: 300 }}>\n      <Input\n        label=\"Input Mediano\"\n        value={valueMedium}\n        onChange={setValueMedium}\n        size=\"medium\"\n      />\n      <Input\n        label=\"Input Peque\u00F1o\"\n        value={valueSmall}\n        onChange={setValueSmall}\n        size=\"small\"\n      />\n    </Box>\n  );\n};\n";
 export declare const FullWidthInputDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box, Typography } from '@mui/material';\n\nexport const FullWidthInputExample = () => {\n  const [value, setValue] = useState('Ocupa todo el ancho');\n  return (\n    <Box sx={{ width: '100%' }}>\n      <Input\n        label=\"Input de Ancho Completo\"\n        value={value}\n        onChange={setValue}\n        fullWidth\n      />\n      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>\n    </Box>\n  );\n};\n";
+export declare const LabelPositionFloatingDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box } from '@mui/material';\n\nexport const LabelPositionExample = () => {\n  const [outside, setOutside] = useState('Outside (default)');\n  const [floating, setFloating] = useState('Floating');\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, width: 300 }}>\n      <Input\n        label=\"Label outside\"\n        value={outside}\n        onChange={setOutside}\n        labelPosition=\"outside\"\n      />\n      <Input\n        label=\"Label floating (MUI cl\u00E1sico)\"\n        value={floating}\n        onChange={setFloating}\n        labelPosition=\"floating\"\n      />\n    </Box>\n  );\n};\n";
+export declare const CustomBorderRadiusDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box } from '@mui/material';\n\nexport const CustomBorderRadiusExample = () => {\n  const [v, setV] = useState('Texto');\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, width: 300 }}>\n      <Input label=\"Sin radius\" value={v} onChange={setV} borderRadius={0} />\n      <Input label=\"Radius 4px\" value={v} onChange={setV} borderRadius={4} />\n      <Input label=\"Default (10px)\" value={v} onChange={setV} />\n      <Input label=\"Pill (24px)\" value={v} onChange={setV} borderRadius={24} />\n    </Box>\n  );\n};\n";
+export declare const CustomStylingDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input'; // Ajusta la ruta si es necesario\nimport { Box } from '@mui/material';\n\nexport const CustomStylingExample = () => {\n  const [v, setV] = useState('Custom completo');\n  return (\n    <Box sx={{ width: 300 }}>\n      <Input\n        label=\"Combinado: bg + borderColor + label color\"\n        value={v}\n        onChange={setV}\n        sx={{\n          '& .MuiInputLabel-root': { color: 'primary.main' },\n          '& .MuiOutlinedInput-root': { bgcolor: '#fff7e6' },\n          '& .MuiOutlinedInput-notchedOutline': {\n            borderColor: 'warning.main',\n            borderWidth: 2,\n          },\n        }}\n      />\n    </Box>\n  );\n};\n";

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

@@ -0,0 +1,14 @@
+import { InputHTMLAttributes } from 'react';
+import { TextFieldProps } from '@mui/material';
+import { InputType, LabelPosition } from './Input';
+/**
+ * Convierte el valor raw del evento al tipo apropiado.
+ * Para type="number" intenta parsear a número; si falla, devuelve el raw
+ * (permite estados intermedios como "" o "-" mientras el usuario tipea).
+ */
+export declare const parseValue: (raw: string, type: InputType) => string | number;
+/**
+ * Construye los slotProps del TextField consolidando htmlInput + inputLabel.
+ * Maneja los atributos min/max cuando type="number" y readOnly.
+ */
+export declare const buildSlotProps: (type: InputType, min: number | undefined, max: number | undefined, customSlotProps: TextFieldProps["slotProps"], customInputProps: InputHTMLAttributes<HTMLInputElement> | undefined, _labelPosition: LabelPosition, readOnly?: boolean) => TextFieldProps["slotProps"];

package/dist/components/Input/Input.js

@@ -1,5 +1,175 @@
-import { I } from "../../Input-DFHs7cJ_.js";
+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;
+};
+import { jsx } from "react/jsx-runtime";
+import { TextField } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+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 parseValue = (raw, type) => {
+  if (type !== "number") return raw;
+  if (raw === "" || raw === "-") return raw;
+  const n = parseFloat(raw);
+  return isNaN(n) ? raw : n;
+};
+const buildSlotProps = (type, min, max, customSlotProps, customInputProps, _labelPosition, readOnly) => {
+  const numberAttrs = type === "number" ? __spreadValues({ min: min != null ? min : Number.NEGATIVE_INFINITY }, max !== void 0 && { max }) : {};
+  return __spreadProps(__spreadValues({}, customSlotProps), {
+    htmlInput: __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, customInputProps), customSlotProps == null ? void 0 : customSlotProps.htmlInput), numberAttrs), readOnly && { readOnly: true }),
+    // Dejamos que MUI maneje el shrink nativamente (animación inside → up).
+    // El consumidor puede forzar shrink con slotProps.inputLabel.shrink=true si lo necesita.
+    inputLabel: __spreadValues({}, customSlotProps == null ? void 0 : customSlotProps.inputLabel)
+  });
+};
+const buildInputSx = (borderRadius, labelPosition) => {
+  const radius = typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
+  return buildFormFieldSx({
+    borderRadius,
+    labelPosition,
+    extraOutsideSx: {
+      "& .MuiInputBase-input": {
+        paddingTop: FIELD_INPUT_PADDING_Y,
+        paddingBottom: FIELD_INPUT_PADDING_Y
+      },
+      // Filled: quitar el padding-top reservado para el label flotante dentro.
+      "& .MuiFilledInput-root": {
+        paddingTop: 0,
+        borderRadius: `${radius} ${radius} 0 0`
+      },
+      "& .MuiFilledInput-input": {
+        paddingTop: FIELD_INPUT_PADDING_Y
+      },
+      // Standard: quitar el margin-top reservado para el label flotante.
+      "& .MuiInput-root": {
+        marginTop: 0
+      }
+    }
+  });
+};
+const Input = (props) => {
+  const _a = props, {
+    type = "text",
+    variant = "outlined",
+    size = "small",
+    borderRadius = 10,
+    labelPosition = "outside",
+    preset,
+    min,
+    max,
+    readOnly,
+    inputProps,
+    slotProps,
+    sx
+  } = _a, rest = __objRest(_a, [
+    "type",
+    "variant",
+    "size",
+    "borderRadius",
+    "labelPosition",
+    "preset",
+    "min",
+    "max",
+    "readOnly",
+    "inputProps",
+    "slotProps",
+    "sx"
+  ]);
+  const theme = useTheme();
+  const presetSx = resolvePreset("Input", preset, theme);
+  const finalSlotProps = buildSlotProps(
+    type,
+    min,
+    max,
+    slotProps,
+    inputProps,
+    labelPosition,
+    readOnly
+  );
+  const mergedSx = [
+    buildInputSx(borderRadius, labelPosition),
+    ...presetSx ? [presetSx] : [],
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
+  if ("control" in props && props.control) {
+    const { name, control, validation } = props;
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        name,
+        control,
+        rules: validation,
+        render: ({ field, fieldState: { error } }) => {
+          var _a2, _b;
+          return /* @__PURE__ */ jsx(
+            TextField,
+            __spreadProps(__spreadValues({
+              fullWidth: true
+            }, rest), {
+              name: field.name,
+              value: (_a2 = field.value) != null ? _a2 : "",
+              onChange: (e) => field.onChange(parseValue(e.target.value, type)),
+              onBlur: field.onBlur,
+              inputRef: field.ref,
+              type,
+              variant,
+              size,
+              slotProps: finalSlotProps,
+              sx: mergedSx,
+              error: !!error || rest.error,
+              helperText: (_b = error == null ? void 0 : error.message) != null ? _b : rest.helperText
+            })
+          );
+        }
+      }
+    );
+  }
+  const { value, onChange } = props;
+  return /* @__PURE__ */ jsx(
+    TextField,
+    __spreadProps(__spreadValues({
+      fullWidth: true
+    }, rest), {
+      value: value != null ? value : "",
+      onChange: (e) => onChange(parseValue(e.target.value, type)),
+      type,
+      variant,
+      size,
+      slotProps: finalSlotProps,
+      sx: mergedSx
+    })
+  );
+};
 export {
-  I as Input
+  Input,
+  Input as default
 };
 //# sourceMappingURL=Input.js.map