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

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

@@ -1,11 +1,15 @@
 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";
+export declare const MultilineInputDefinition = "\nimport React, { useState } from 'react';\nimport { Input } from './Input';\nimport { Box, Typography } from '@mui/material';\n\nexport const MultilineInputExample = () => {\n  const [value, setValue] = useState('Escribe un comentario en varias l\u00EDneas...');\n  return (\n    <Box sx={{ width: 400 }}>\n      <Input\n        label=\"Comentario\"\n        value={value}\n        onChange={(v) => setValue(v.toString())}\n        multiline\n        minRows={3}\n        maxRows={6}\n        fullWidth\n      />\n      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>\n    </Box>\n  );\n};\n";

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

@@ -0,0 +1,14 @@
+import { InputHTMLAttributes } from 'react';
+import { TextFieldProps } from '@mui/material';
+import { InputType } 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", maxLength y readOnly.
+ */
+export declare const buildSlotProps: (type: InputType, min: number | undefined, max: number | undefined, maxLength: number | undefined, customSlotProps: TextFieldProps["slotProps"], customInputProps: InputHTMLAttributes<HTMLInputElement> | undefined, readOnly?: boolean) => TextFieldProps["slotProps"];

package/components/Input/Input.js

@@ -1,5 +1,188 @@
-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 } from "../../formField.sx-8_QRnKxv.js";
+import { F as FIELD_INPUT_PADDING_Y } from "../../tokens-BRrcP_p_.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, maxLength, customSlotProps, customInputProps, 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(__spreadValues({}, customInputProps), customSlotProps == null ? void 0 : customSlotProps.htmlInput), numberAttrs), maxLength !== void 0 && { maxLength }), 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,
+    maxLength,
+    readOnly,
+    inputProps,
+    slotProps,
+    sx,
+    onBlur
+  } = _a, rest = __objRest(_a, [
+    "type",
+    "variant",
+    "size",
+    "borderRadius",
+    "labelPosition",
+    "preset",
+    "min",
+    "max",
+    "maxLength",
+    "readOnly",
+    "inputProps",
+    "slotProps",
+    "sx",
+    "onBlur"
+  ]);
+  const theme = useTheme();
+  const presetSx = resolvePreset("Input", preset, theme);
+  const finalSlotProps = buildSlotProps(
+    type,
+    min,
+    max,
+    maxLength,
+    slotProps,
+    inputProps,
+    readOnly
+  );
+  const mergedSx = [
+    buildInputSx(borderRadius, labelPosition),
+    ...presetSx ? [presetSx] : [],
+    ...Array.isArray(sx) ? sx : sx ? [sx] : []
+  ];
+  if ("control" in props && props.control) {
+    const { name, control, validation, onValueChange } = 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) => {
+                const parsed = parseValue(e.target.value, type);
+                field.onChange(parsed);
+                onValueChange == null ? void 0 : onValueChange(parsed);
+              },
+              onBlur: (e) => {
+                field.onBlur();
+                onBlur == null ? void 0 : onBlur(e);
+              },
+              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)),
+      onBlur,
+      type,
+      variant,
+      size,
+      slotProps: finalSlotProps,
+      sx: mergedSx
+    })
+  );
+};
 export {
-  I as Input
+  Input,
+  Input as default
 };
 //# sourceMappingURL=Input.js.map

package/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"Input.js","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 } 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\", maxLength y readOnly.\n */\nexport const buildSlotProps = (\n  type: InputType,\n  min: number | undefined,\n  max: number | undefined,\n  maxLength: number | undefined,\n  customSlotProps: TextFieldProps['slotProps'],\n  customInputProps: InputHTMLAttributes<HTMLInputElement> | undefined,\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      ...(maxLength !== undefined && { maxLength }),\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  maxLength?: 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  // `any` plano (no `Control<any>`): RHF tipa `Control<T>` con generics en\n  // posiciones tanto contravariantes como covariantes (ej. `_subjects.state`).\n  // Cuando el componente o su uso involucra generics adicionales, TS se\n  // confunde narroweando el discriminated union y `Control<any>` no logra\n  // absorber `Control<MyForm>` en la comparación estructural profunda. El\n  // `any` plano elimina ese ruido. RHF adentro sigue teniendo sus tipos\n  // fuertes — solo degradamos la superficie del prop del componente.\n  control: any;\n  validation?: RegisterOptions;\n  /**\n   * Side-effect que corre después de que RHF actualiza el form state.\n   * Útil para cascadas entre campos (ej. reset de municipio al cambiar\n   * departamento). NO reemplaza al handler de RHF.\n   */\n  onValueChange?: (value: string | number) => void;\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    maxLength,\n    readOnly,\n    inputProps,\n    slotProps,\n    sx,\n    onBlur,\n    ...rest\n  } = props as ControlledInputProps & {\n    control?: Control<any>;\n    validation?: RegisterOptions;\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    maxLength,\n    slotProps,\n    inputProps,\n    readOnly,\n  );\n  const mergedSx = [\n    buildInputSx(borderRadius, labelPosition),\n    ...(presetSx ? [presetSx] : []),\n    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n  ];\n\n  if ('control' in props && props.control) {\n    const { name, control, validation, onValueChange } = 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) => {\n              const parsed = parseValue(e.target.value, type);\n              field.onChange(parsed);\n              onValueChange?.(parsed);\n            }}\n            onBlur={(e) => {\n              field.onBlur();\n              onBlur?.(e);\n            }}\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      onBlur={onBlur}\n      type={type}\n      variant={variant}\n      size={size}\n      slotProps={finalSlotProps}\n      sx={mergedSx}\n    />\n  );\n};\n\nexport default Input;\n"],"names":["_a"],"mappings":"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"}

package/components/Input/Input.sx.d.ts

@@ -0,0 +1,8 @@
+import { TextFieldProps } from '@mui/material';
+import { LabelPosition } from './Input';
+/**
+ * Builder de sx para el Input. Usa el builder compartido
+ * `buildFormFieldSx` y añade overrides específicos de TextField
+ * (padding del input base, filled, standard).
+ */
+export declare const buildInputSx: (borderRadius: number | string, labelPosition: LabelPosition) => TextFieldProps["sx"];

package/components/Input/index.d.ts

@@ -1 +1,2 @@
-export { default as Input } from './Input';
+export { Input, default } from './Input';
+export type { InputProps, BaseInputProps, RHFInputProps, ControlledInputProps, InputType, LabelPosition, } from './Input';

package/components/Input.d.ts

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

package/components/InputGroup/InputGroup.cjs

@@ -18,109 +18,123 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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 DatePicker = require("@mui/x-date-pickers/DatePicker");
-const Input = require("../../Input-c8MwNNPg.cjs");
-const Select = require("../../Select-BO2N56sm.cjs");
-const DatePicker$1 = require("../../DatePicker-BoqxWAhj.cjs");
-const InputGroup = ({ children }) => {
-  const childrenArray = React.Children.toArray(children);
-  const childrenWithDividers = childrenArray.map((child, index) => {
-    if (React.isValidElement(child)) {
-      const childProps = child.props;
-      const childType = child.type;
-      const isInputComponent = childType === material.TextField || childType === Input.Input || childType === material.Select || childType === Select.Select || childType === DatePicker.DatePicker || childType === DatePicker$1.DatePicker;
-      const clonedChild = isInputComponent ? React.cloneElement(child, __spreadProps(__spreadValues({}, childProps), {
-        // Añade la clase directamente al componente clonado
-        className: "InputGroupChild",
-        sx: __spreadProps(__spreadValues({}, childProps.sx), {
-          // Usa el selector correcto para anular el borde del NotchedOutline
-          "& .MuiOutlinedInput-notchedOutline": {
-            border: "none !important"
-          },
-          // Asegura que el botón del DatePicker no tenga borde divisor
-          "& .MuiInputBase-root .MuiButtonBase-root": {
-            borderRight: "none"
-          },
-          // Oculta el legend de MuiOutlinedInput para que el borde no tenga "muescas"
-          "& .MuiOutlinedInput-notchedOutline > legend": {
-            display: "none"
-          },
-          " .InputGroupChild > MuiOutlinedInput-notchedOutline": {
-            border: "none !important"
-          },
-          ".MuiOutlinedInput-notchedOutline, > .MuiOutlinedInput-notchedOutline": {
-            border: "none !important"
-          }
-        })
-      })) : child;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        material.Box,
-        {
-          sx: {
-            flexGrow: 1,
-            display: "flex",
-            alignItems: "center",
-            minWidth: 0,
-            borderRight: index < childrenArray.length - 1 ? "1px solid #ccc" : "none"
-          },
-          children: clonedChild
-        },
-        index
-      );
+const mergeSx = require("../../mergeSx-Dbccoo_H.cjs");
+const tokens = require("../../tokens-jaWWNk39.cjs");
+const InputGroup = ({
+  children,
+  sx,
+  slotSx,
+  borderRadius = 10,
+  disabled,
+  orientation = "horizontal",
+  className
+}) => {
+  const radius = typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
+  const slots = React.Children.toArray(children).filter(React.isValidElement);
+  const isHorizontal = orientation === "horizontal";
+  const baseSx = {
+    // Respeta el label "outside" de Input/Select: los hijos pierden su marginTop
+    // (ver más abajo) y el grupo reserva el mismo espacio arriba para que los
+    // labels floten por encima del borde del grupo.
+    marginTop: tokens.LABEL_MARGIN_TOP,
+    display: "flex",
+    flexDirection: isHorizontal ? "row" : "column",
+    alignItems: "stretch",
+    width: "100%",
+    border: (theme) => `1px solid ${theme.palette.divider}`,
+    borderRadius: radius,
+    backgroundColor: "background.paper",
+    transition: "border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, box-shadow 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms",
+    "&:focus-within": {
+      borderColor: "primary.main",
+      boxShadow: (theme) => `0 0 0 1px ${theme.palette.primary.main}`
+    },
+    opacity: disabled ? 0.6 : 1,
+    pointerEvents: disabled ? "none" : "auto",
+    // Cancelar el marginTop que Input/Select reservan en labelPosition="outside".
+    // El grupo ya lo reservó en su nivel externo.
+    "& .MuiFormControl-root, & > [data-input-group-slot] > .MuiTextField-root, & > [data-input-group-slot] > .MuiFormControl-root": {
+      marginTop: 0
+    },
+    // Quitar el borde del notched outline interno: el borde visible es el del
+    // grupo, los separadores son los borderRight/borderBottom de cada slot.
+    "& .MuiOutlinedInput-notchedOutline": {
+      border: "none"
+    },
+    // Forzar que todos los campos pinten sus esquinas cuadradas (las esquinas
+    // redondeadas se aplican solo al primer/último slot más abajo).
+    "& .MuiInputBase-root, & .MuiChip-root": {
+      borderRadius: 0
+    },
+    // Botones integrados: sin radius propio, altura completa, sin sombra.
+    "& .MuiButton-root": {
+      borderRadius: 0,
+      height: "100%",
+      boxShadow: "none",
+      border: "none"
+    },
+    // Slots: cada hijo vive en un slot neutro que lo centra verticalmente.
+    "& > [data-input-group-slot]": __spreadProps(__spreadValues({
+      flex: 1,
+      display: "flex",
+      alignItems: "center",
+      minWidth: 0
+    }, isHorizontal ? { borderRight: (theme) => `1px solid ${theme.palette.divider}` } : { borderBottom: (theme) => `1px solid ${theme.palette.divider}` }), {
+      "&:last-of-type": {
+        borderRight: "none",
+        borderBottom: "none"
+      }
+    }),
+    // Esquinas redondeadas: primer slot (izquierda o arriba).
+    "& > [data-input-group-slot]:first-of-type .MuiInputBase-root, & > [data-input-group-slot]:first-of-type .MuiButton-root, & > [data-input-group-slot]:first-of-type .MuiChip-root": isHorizontal ? {
+      borderTopLeftRadius: radius,
+      borderBottomLeftRadius: radius
+    } : {
+      borderTopLeftRadius: radius,
+      borderTopRightRadius: radius
+    },
+    // Esquinas redondeadas: último slot (derecha o abajo).
+    "& > [data-input-group-slot]:last-of-type .MuiInputBase-root, & > [data-input-group-slot]:last-of-type .MuiButton-root, & > [data-input-group-slot]:last-of-type .MuiChip-root": isHorizontal ? {
+      borderTopRightRadius: radius,
+      borderBottomRightRadius: radius
+    } : {
+      borderBottomLeftRadius: radius,
+      borderBottomRightRadius: radius
     }
-    return child;
-  });
+  };
+  const baseSlotSx = {
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    minWidth: 0
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     material.Box,
     {
-      sx: {
-        width: "100%",
-        display: "grid",
-        marginBottom: "10px",
-        marginTop: "10px"
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        material.Box,
-        {
-          className: "InputGroupChild",
-          sx: {
-            display: "flex",
-            justifyContent: "space-between",
-            height: "32px",
-            border: "1px solid #ccc",
-            borderRadius: "10px",
-            padding: "8px 0px",
-            marginTop: "-5px",
-            marginBottom: "20px",
-            "& .MuiInputBase-root, & .MuiButtonBase-root, & .MuiChip-root": {
-              borderRadius: 0
-            },
-            "& > div:first-of-type .MuiInputBase-root, & > div:first-of-type .MuiButtonBase-root, & > div:first-of-type .MuiChip-root": {
-              borderTopLeftRadius: "10px",
-              borderBottomLeftRadius: "10px"
-            },
-            "& > div:last-of-type .MuiInputBase-root, & > div:last-of-type .MuiButtonBase-root, & > div:last-of-type .MuiChip-root": {
-              borderTopRightRadius: "10px",
-              borderBottomRightRadius: "10px",
-              border: "none !important"
-            },
-            // Estilo para los componentes que tienen `InputGroupChild` en la clase
-            "& .InputGroupChild": {
-              width: "100%"
-            },
-            "&  > div:first-of-type .MuiInputBase-root > .MuiOutlinedInput-notchedOutline": {
-              border: "none !important"
-            }
+      "data-testid": "input-group",
+      className,
+      "aria-disabled": disabled ? "true" : void 0,
+      sx: mergeSx.mergeSx(baseSx, sx),
+      children: slots.map((child, i) => {
+        var _a;
+        const slotKey = (_a = child.key) != null ? _a : i;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          material.Box,
+          {
+            "data-input-group-slot": true,
+            sx: mergeSx.mergeSx(baseSlotSx, slotSx),
+            children: child
           },
-          children: childrenWithDividers
-        }
-      )
+          slotKey
+        );
+      })
     }
   );
 };
 exports.InputGroup = InputGroup;
+exports.default = InputGroup;
 //# sourceMappingURL=InputGroup.cjs.map

package/components/InputGroup/InputGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.cjs","sources":["../../../src/components/InputGroup/InputGroup.tsx"],"sourcesContent":["import React, { Children, cloneElement, isValidElement } from 'react';\nimport { Box } from '@mui/material';\nimport { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';\nimport { Select as MuiSelect } from '@mui/material';\nimport { TextField as MuiTextField } from '@mui/material';\nimport { Input } from '../Input';\nimport { Select } from '../Select';\nimport { DatePicker } from '../DatePicker';\n\ninterface CommonProps {\n  sx?: object;\n  [key: string]: any;\n}\n\ninterface InputGroupProps {\n  children: React.ReactNode;\n}\n\nconst InputGroup: React.FC<InputGroupProps> = ({ children }) => {\n  const childrenArray = Children.toArray(children);\n\n  const childrenWithDividers = childrenArray.map((child, index) => {\n    if (isValidElement(child)) {\n      const childProps = child.props as CommonProps;\n      const childType = child.type as any;\n\n      const isInputComponent = (\n        childType === MuiTextField || \n        childType === Input || \n        childType === MuiSelect || \n        childType === Select ||\n        childType === MuiDatePicker || \n        childType === DatePicker\n      );\n\n      const clonedChild = isInputComponent ? (\n        cloneElement(child, {\n          ...childProps,\n          // Añade la clase directamente al componente clonado\n          className: 'InputGroupChild',\n          sx: {\n            ...childProps.sx,\n            // Usa el selector correcto para anular el borde del NotchedOutline\n            '& .MuiOutlinedInput-notchedOutline': {\n              border: 'none !important',\n            },\n            // Asegura que el botón del DatePicker no tenga borde divisor\n            '& .MuiInputBase-root .MuiButtonBase-root': {\n              borderRight: 'none',\n            },\n            // Oculta el legend de MuiOutlinedInput para que el borde no tenga \"muescas\"\n            '& .MuiOutlinedInput-notchedOutline > legend': {\n              display: 'none',\n            },\n\n            ' .InputGroupChild > MuiOutlinedInput-notchedOutline': {\n              border: 'none !important',\n\n            }, \n            '.MuiOutlinedInput-notchedOutline, > .MuiOutlinedInput-notchedOutline': {\n              border: 'none !important',\n            }\n\n          },\n        } as CommonProps)\n      ) : (\n        child\n      );\n\n      return (\n        <Box\n          key={index}\n          sx={{\n            flexGrow: 1,\n            display: 'flex',\n            alignItems: 'center',\n            minWidth: 0,\n            borderRight: index < childrenArray.length - 1 ? '1px solid #ccc' : 'none',\n          }}\n        >\n          {clonedChild}\n        </Box>\n      );\n    }\n    return child;\n  });\n\n  return (\n    <Box\n      sx={{\n          width: '100%',\n          display: 'grid',\n          marginBottom: '10px',\n          marginTop: '10px'\n      }}\n\n  >\n    <Box\n      className='InputGroupChild'\n      sx={{\n        display: 'flex',\n        justifyContent: 'space-between',\n        height: '32px',\n        border: '1px solid #ccc',\n        borderRadius: '10px',\n        padding: '8px 0px',\n        marginTop: '-5px',\n        marginBottom: '20px',\n        '& .MuiInputBase-root, & .MuiButtonBase-root, & .MuiChip-root': {\n          borderRadius: 0,\n        },\n        '& > div:first-of-type .MuiInputBase-root, & > div:first-of-type .MuiButtonBase-root, & > div:first-of-type .MuiChip-root': {\n          borderTopLeftRadius: '10px',\n          borderBottomLeftRadius: '10px',\n        },\n        '& > div:last-of-type .MuiInputBase-root, & > div:last-of-type .MuiButtonBase-root, & > div:last-of-type .MuiChip-root': {\n          borderTopRightRadius: '10px',\n          borderBottomRightRadius: '10px',\n          border: 'none !important'\n        },\n        // Estilo para los componentes que tienen `InputGroupChild` en la clase\n        '& .InputGroupChild': {\n          width: '100%',\n        },\n        '&  > div:first-of-type .MuiInputBase-root > .MuiOutlinedInput-notchedOutline': {\n          border: 'none !important',\n        },\n      }}\n    >\n      {childrenWithDividers}\n    </Box>\n  </Box>\n  );\n};\n\nexport default InputGroup;"],"names":["Children","isValidElement","MuiTextField","Input","MuiSelect","Select","MuiDatePicker","DatePicker","cloneElement","jsx","Box"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAM,aAAwC,CAAC,EAAE,eAAe;AAC9D,QAAM,gBAAgBA,MAAAA,SAAS,QAAQ,QAAQ;AAE/C,QAAM,uBAAuB,cAAc,IAAI,CAAC,OAAO,UAAU;AAC/D,QAAIC,MAAAA,eAAe,KAAK,GAAG;AACzB,YAAM,aAAa,MAAM;AACzB,YAAM,YAAY,MAAM;AAExB,YAAM,mBACJ,cAAcC,sBACd,cAAcC,MAAAA,SACd,cAAcC,SAAAA,UACd,cAAcC,OAAAA,UACd,cAAcC,WAAAA,cACd,cAAcC,aAAAA;AAGhB,YAAM,cAAc,mBAClBC,MAAAA,aAAa,OAAO,iCACf,aADe;AAAA;AAAA,QAGlB,WAAW;AAAA,QACX,IAAI,iCACC,WAAW,KADZ;AAAA;AAAA,UAGF,sCAAsC;AAAA,YACpC,QAAQ;AAAA,UAAA;AAAA;AAAA,UAGV,4CAA4C;AAAA,YAC1C,aAAa;AAAA,UAAA;AAAA;AAAA,UAGf,+CAA+C;AAAA,YAC7C,SAAS;AAAA,UAAA;AAAA,UAGX,uDAAuD;AAAA,YACrD,QAAQ;AAAA,UAAA;AAAA,UAGV,wEAAwE;AAAA,YACtE,QAAQ;AAAA,UAAA;AAAA,QACV;AAAA,MAEF,EACc,IAEhB;AAGF,aACEC,2BAAAA;AAAAA,QAACC,SAAAA;AAAAA,QAAA;AAAA,UAEC,IAAI;AAAA,YACF,UAAU;AAAA,YACV,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,UAAU;AAAA,YACV,aAAa,QAAQ,cAAc,SAAS,IAAI,mBAAmB;AAAA,UAAA;AAAA,UAGpE,UAAA;AAAA,QAAA;AAAA,QATI;AAAA,MAAA;AAAA,IAYX;AACA,WAAO;AAAA,EACT,CAAC;AAED,SACED,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACA,OAAO;AAAA,QACP,SAAS;AAAA,QACT,cAAc;AAAA,QACd,WAAW;AAAA,MAAA;AAAA,MAIjB,UAAAD,2BAAAA;AAAAA,QAACC,SAAAA;AAAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,IAAI;AAAA,YACF,SAAS;AAAA,YACT,gBAAgB;AAAA,YAChB,QAAQ;AAAA,YACR,QAAQ;AAAA,YACR,cAAc;AAAA,YACd,SAAS;AAAA,YACT,WAAW;AAAA,YACX,cAAc;AAAA,YACd,gEAAgE;AAAA,cAC9D,cAAc;AAAA,YAAA;AAAA,YAEhB,4HAA4H;AAAA,cAC1H,qBAAqB;AAAA,cACrB,wBAAwB;AAAA,YAAA;AAAA,YAE1B,yHAAyH;AAAA,cACvH,sBAAsB;AAAA,cACtB,yBAAyB;AAAA,cACzB,QAAQ;AAAA,YAAA;AAAA;AAAA,YAGV,sBAAsB;AAAA,cACpB,OAAO;AAAA,YAAA;AAAA,YAET,gFAAgF;AAAA,cAC9E,QAAQ;AAAA,YAAA;AAAA,UACV;AAAA,UAGD,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGJ;;"}
+{"version":3,"file":"InputGroup.cjs","sources":["../../../src/components/InputGroup/InputGroup.tsx"],"sourcesContent":["import React, { Children, isValidElement } from 'react';\nimport { Box, type SxProps, type Theme } from '@mui/material';\n\nimport { mergeSx } from '../_shared/mergeSx';\nimport { LABEL_MARGIN_TOP } from '../../theme/tokens';\n\nexport interface InputGroupProps {\n  children: React.ReactNode;\n  /**\n   * sx aplicado al contenedor raíz del grupo. Se mergea sobre los defaults.\n   */\n  sx?: SxProps<Theme>;\n  /**\n   * sx aplicado a cada slot individual. Útil para controlar flex/gap entre\n   * los hijos del grupo.\n   */\n  slotSx?: SxProps<Theme>;\n  /**\n   * Radio del borde del grupo. Default: 10.\n   */\n  borderRadius?: number | string;\n  /**\n   * Desactiva visualmente el grupo (no cascada lógica — los hijos deben\n   * manejar su propio `disabled`).\n   */\n  disabled?: boolean;\n  /**\n   * Orientación del grupo. Default: 'horizontal'.\n   */\n  orientation?: 'horizontal' | 'vertical';\n  className?: string;\n}\n\n/**\n * Agrupa visualmente varios componentes de entrada (Input / Select / DatePicker /\n * Button, etc.) compartiendo un solo borde y con separadores internos.\n *\n * El grupo respeta el espacio que Input/Select reservan para su label `outside`\n * (`LABEL_MARGIN_TOP`) moviendo ese reservado al contenedor externo y\n * cancelándolo en los hijos. Los labels siguen flotando por encima del borde\n * del grupo con la misma animación que fuera del grupo.\n *\n * No inspecciona el tipo de cada hijo; aplica los overrides a través de\n * descendant selectors por CSS para funcionar con cualquier wrapper / memoizado.\n */\nexport const InputGroup: React.FC<InputGroupProps> = ({\n  children,\n  sx,\n  slotSx,\n  borderRadius = 10,\n  disabled,\n  orientation = 'horizontal',\n  className,\n}) => {\n  const radius = typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;\n  const slots = Children.toArray(children).filter(isValidElement);\n  const isHorizontal = orientation === 'horizontal';\n\n  const baseSx: SxProps<Theme> = {\n    // Respeta el label \"outside\" de Input/Select: los hijos pierden su marginTop\n    // (ver más abajo) y el grupo reserva el mismo espacio arriba para que los\n    // labels floten por encima del borde del grupo.\n    marginTop: LABEL_MARGIN_TOP,\n\n    display: 'flex',\n    flexDirection: isHorizontal ? 'row' : 'column',\n    alignItems: 'stretch',\n    width: '100%',\n    border: (theme) => `1px solid ${theme.palette.divider}`,\n    borderRadius: radius,\n    backgroundColor: 'background.paper',\n    transition:\n      'border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, box-shadow 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',\n    '&:focus-within': {\n      borderColor: 'primary.main',\n      boxShadow: (theme) => `0 0 0 1px ${theme.palette.primary.main}`,\n    },\n    opacity: disabled ? 0.6 : 1,\n    pointerEvents: disabled ? 'none' : 'auto',\n\n    // Cancelar el marginTop que Input/Select reservan en labelPosition=\"outside\".\n    // El grupo ya lo reservó en su nivel externo.\n    '& .MuiFormControl-root, & > [data-input-group-slot] > .MuiTextField-root, & > [data-input-group-slot] > .MuiFormControl-root':\n      {\n        marginTop: 0,\n      },\n\n    // Quitar el borde del notched outline interno: el borde visible es el del\n    // grupo, los separadores son los borderRight/borderBottom de cada slot.\n    '& .MuiOutlinedInput-notchedOutline': {\n      border: 'none',\n    },\n\n    // Forzar que todos los campos pinten sus esquinas cuadradas (las esquinas\n    // redondeadas se aplican solo al primer/último slot más abajo).\n    '& .MuiInputBase-root, & .MuiChip-root': {\n      borderRadius: 0,\n    },\n\n    // Botones integrados: sin radius propio, altura completa, sin sombra.\n    '& .MuiButton-root': {\n      borderRadius: 0,\n      height: '100%',\n      boxShadow: 'none',\n      border: 'none',\n    },\n\n    // Slots: cada hijo vive en un slot neutro que lo centra verticalmente.\n    '& > [data-input-group-slot]': {\n      flex: 1,\n      display: 'flex',\n      alignItems: 'center',\n      minWidth: 0,\n      // Separador entre slots (horizontal: borderRight / vertical: borderBottom),\n      // usando el color de divider del theme.\n      ...(isHorizontal\n        ? { borderRight: (theme: Theme) => `1px solid ${theme.palette.divider}` }\n        : { borderBottom: (theme: Theme) => `1px solid ${theme.palette.divider}` }),\n      '&:last-of-type': {\n        borderRight: 'none',\n        borderBottom: 'none',\n      },\n    },\n\n    // Esquinas redondeadas: primer slot (izquierda o arriba).\n    '& > [data-input-group-slot]:first-of-type .MuiInputBase-root, & > [data-input-group-slot]:first-of-type .MuiButton-root, & > [data-input-group-slot]:first-of-type .MuiChip-root':\n      isHorizontal\n        ? {\n            borderTopLeftRadius: radius,\n            borderBottomLeftRadius: radius,\n          }\n        : {\n            borderTopLeftRadius: radius,\n            borderTopRightRadius: radius,\n          },\n\n    // Esquinas redondeadas: último slot (derecha o abajo).\n    '& > [data-input-group-slot]:last-of-type .MuiInputBase-root, & > [data-input-group-slot]:last-of-type .MuiButton-root, & > [data-input-group-slot]:last-of-type .MuiChip-root':\n      isHorizontal\n        ? {\n            borderTopRightRadius: radius,\n            borderBottomRightRadius: radius,\n          }\n        : {\n            borderBottomLeftRadius: radius,\n            borderBottomRightRadius: radius,\n          },\n  };\n\n  const baseSlotSx: SxProps<Theme> = {\n    flex: 1,\n    display: 'flex',\n    alignItems: 'center',\n    minWidth: 0,\n  };\n\n  return (\n    <Box\n      data-testid=\"input-group\"\n      className={className}\n      aria-disabled={disabled ? 'true' : undefined}\n      sx={mergeSx(baseSx, sx)}\n    >\n      {slots.map((child, i) => {\n        const slotKey = (child as React.ReactElement).key ?? i;\n        return (\n          <Box\n            key={slotKey}\n            data-input-group-slot\n            sx={mergeSx(baseSlotSx, slotSx)}\n          >\n            {child}\n          </Box>\n        );\n      })}\n    </Box>\n  );\n};\n\nexport default InputGroup;\n"],"names":["Children","isValidElement","LABEL_MARGIN_TOP","jsx","Box","mergeSx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA6CO,MAAM,aAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,cAAc;AAAA,EACd;AACF,MAAM;AACJ,QAAM,SAAS,OAAO,iBAAiB,WAAW,GAAG,YAAY,OAAO;AACxE,QAAM,QAAQA,MAAAA,SAAS,QAAQ,QAAQ,EAAE,OAAOC,oBAAc;AAC9D,QAAM,eAAe,gBAAgB;AAErC,QAAM,SAAyB;AAAA;AAAA;AAAA;AAAA,IAI7B,WAAWC,OAAAA;AAAAA,IAEX,SAAS;AAAA,IACT,eAAe,eAAe,QAAQ;AAAA,IACtC,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ,CAAC,UAAU,aAAa,MAAM,QAAQ,OAAO;AAAA,IACrD,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,YACE;AAAA,IACF,kBAAkB;AAAA,MAChB,aAAa;AAAA,MACb,WAAW,CAAC,UAAU,aAAa,MAAM,QAAQ,QAAQ,IAAI;AAAA,IAAA;AAAA,IAE/D,SAAS,WAAW,MAAM;AAAA,IAC1B,eAAe,WAAW,SAAS;AAAA;AAAA;AAAA,IAInC,gIACE;AAAA,MACE,WAAW;AAAA,IAAA;AAAA;AAAA;AAAA,IAKf,sCAAsC;AAAA,MACpC,QAAQ;AAAA,IAAA;AAAA;AAAA;AAAA,IAKV,yCAAyC;AAAA,MACvC,cAAc;AAAA,IAAA;AAAA;AAAA,IAIhB,qBAAqB;AAAA,MACnB,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,QAAQ;AAAA,IAAA;AAAA;AAAA,IAIV,+BAA+B;AAAA,MAC7B,MAAM;AAAA,MACN,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,UAAU;AAAA,OAGN,eACA,EAAE,aAAa,CAAC,UAAiB,aAAa,MAAM,QAAQ,OAAO,OACnE,EAAE,cAAc,CAAC,UAAiB,aAAa,MAAM,QAAQ,OAAO,GAAA,IAT3C;AAAA,MAU7B,kBAAkB;AAAA,QAChB,aAAa;AAAA,QACb,cAAc;AAAA,MAAA;AAAA,IAChB;AAAA;AAAA,IAIF,oLACE,eACI;AAAA,MACE,qBAAqB;AAAA,MACrB,wBAAwB;AAAA,IAAA,IAE1B;AAAA,MACE,qBAAqB;AAAA,MACrB,sBAAsB;AAAA,IAAA;AAAA;AAAA,IAI9B,iLACE,eACI;AAAA,MACE,sBAAsB;AAAA,MACtB,yBAAyB;AAAA,IAAA,IAE3B;AAAA,MACE,wBAAwB;AAAA,MACxB,yBAAyB;AAAA,IAAA;AAAA,EAC3B;AAGR,QAAM,aAA6B;AAAA,IACjC,MAAM;AAAA,IACN,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,EAAA;AAGZ,SACEC,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ;AAAA,MACA,iBAAe,WAAW,SAAS;AAAA,MACnC,IAAIC,QAAAA,QAAQ,QAAQ,EAAE;AAAA,MAErB,UAAA,MAAM,IAAI,CAAC,OAAO,MAAM;;AACvB,cAAM,WAAW,WAA6B,QAA7B,YAAoC;AACrD,eACEF,2BAAAA;AAAAA,UAACC,SAAAA;AAAAA,UAAA;AAAA,YAEC,yBAAqB;AAAA,YACrB,IAAIC,QAAAA,QAAQ,YAAY,MAAM;AAAA,YAE7B,UAAA;AAAA,UAAA;AAAA,UAJI;AAAA,QAAA;AAAA,MAOX,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;;;"}

package/components/InputGroup/InputGroup.d.ts

@@ -1,6 +1,42 @@
 import { default as React } from 'react';
-interface InputGroupProps {
+import { SxProps, Theme } from '@mui/material';
+export interface InputGroupProps {
     children: React.ReactNode;
+    /**
+     * sx aplicado al contenedor raíz del grupo. Se mergea sobre los defaults.
+     */
+    sx?: SxProps<Theme>;
+    /**
+     * sx aplicado a cada slot individual. Útil para controlar flex/gap entre
+     * los hijos del grupo.
+     */
+    slotSx?: SxProps<Theme>;
+    /**
+     * Radio del borde del grupo. Default: 10.
+     */
+    borderRadius?: number | string;
+    /**
+     * Desactiva visualmente el grupo (no cascada lógica — los hijos deben
+     * manejar su propio `disabled`).
+     */
+    disabled?: boolean;
+    /**
+     * Orientación del grupo. Default: 'horizontal'.
+     */
+    orientation?: 'horizontal' | 'vertical';
+    className?: string;
 }
-declare const InputGroup: React.FC<InputGroupProps>;
+/**
+ * Agrupa visualmente varios componentes de entrada (Input / Select / DatePicker /
+ * Button, etc.) compartiendo un solo borde y con separadores internos.
+ *
+ * El grupo respeta el espacio que Input/Select reservan para su label `outside`
+ * (`LABEL_MARGIN_TOP`) moviendo ese reservado al contenedor externo y
+ * cancelándolo en los hijos. Los labels siguen flotando por encima del borde
+ * del grupo con la misma animación que fuera del grupo.
+ *
+ * No inspecciona el tipo de cada hijo; aplica los overrides a través de
+ * descendant selectors por CSS para funcionar con cualquier wrapper / memoizado.
+ */
+export declare const InputGroup: React.FC<InputGroupProps>;
 export default InputGroup;