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

package/components/InputGroup/InputGroup.definitions.d.ts

@@ -0,0 +1,6 @@
+export declare const BasicInputGroupDefinition = "\nimport { useState } from 'react';\nimport { Box, Typography } from '@mui/material';\nimport InputGroup from './InputGroup';\nimport { Input } from '../Input';\nimport { Button } from '../Button';\n\nexport const BasicInputGroupExample = () => {\n    const [text, setText] = useState('');\n    return (\n        <Box>\n            <Typography variant=\"h6\" sx={{ mb: 2 }}>\n                Grupo de entrada b\u00E1sico\n            </Typography>\n            <InputGroup>\n                <Input label=\"Buscar\" value={text} onChange={(val) => setText(val as string)} />\n                <Button variant=\"outlined\">Buscar</Button>\n            </InputGroup>\n        </Box>\n    );\n};\n";
+export declare const CombinedInputGroupDefinition = "\nimport { useState } from 'react';\nimport { Box, Typography } from '@mui/material';\nimport InputGroup from './InputGroup';\nimport { Input } from '../Input';\nimport Select, { SelectOption } from '../Select/Select';\nimport { Button } from '../Button';\n\nconst basicOptions: SelectOption[] = [\n    { value: '10', label: '10' },\n    { value: '25', label: '25' },\n    { value: '50', label: '50' },\n    { value: '100', label: '100' },\n];\n\nexport const CombinedInputGroupExample = () => {\n    const [text, setText] = useState('');\n    const [selectValue, setSelectValue] = useState('25');\n\n    return (\n        <Box>\n            <Typography variant=\"h6\" sx={{ mb: 2 }}>\n                Grupo de entrada combinado\n            </Typography>\n            <InputGroup>\n                <Select\n                    label=\"Registros\"\n                    options={basicOptions}\n                    value={selectValue}\n                    onChange={(val) => setSelectValue(val as string)}\n                />\n                <Input\n                    label=\"Filtrar por nombre\"\n                    value={text}\n                    onChange={(val) => setText(val as string)}\n                />\n                <Button variant=\"contained\">Aplicar</Button>\n            </InputGroup>\n        </Box>\n    );\n};\n";
+export declare const DatePickerInputGroupDefinition = "\nimport { useState } from 'react';\nimport { Box, Typography } from '@mui/material';\nimport dayjs, { Dayjs } from 'dayjs';\nimport InputGroup from './InputGroup';\nimport { DatePicker } from '../DatePicker';\nimport { Button } from '../Button';\n\nexport const DatePickerInputGroupExample = () => {\n    const [selectedDate, setSelectedDate] = useState<Dayjs | null>(dayjs());\n\n    return (\n        <Box>\n            <Typography variant=\"h6\" sx={{ mb: 2 }}>\n                Grupo de entrada con DatePicker\n            </Typography>\n            <InputGroup>\n                <DatePicker\n                    label=\"Fecha de inicio\"\n                    selectedDate={selectedDate}\n                    onDateChange={(date) => setSelectedDate(date)}\n                />\n                <Button variant=\"contained\">Ver calendario</Button>\n            </InputGroup>\n        </Box>\n    );\n};\n";
+export declare const VerticalInputGroupDefinition = "\nimport { useState } from 'react';\nimport { Box } from '@mui/material';\nimport InputGroup from './InputGroup';\nimport { Input } from '../Input';\n\nexport const VerticalInputGroupExample = () => {\n    const [nombre, setNombre] = useState('');\n    const [email, setEmail] = useState('');\n\n    return (\n        <Box sx={{ width: 320 }}>\n            <InputGroup orientation=\"vertical\">\n                <Input label=\"Nombre\" value={nombre} onChange={(val) => setNombre(val as string)} />\n                <Input label=\"Email\" value={email} onChange={(val) => setEmail(val as string)} />\n            </InputGroup>\n        </Box>\n    );\n};\n";
+export declare const CustomStylingInputGroupDefinition = "\nimport { useState } from 'react';\nimport { Box } from '@mui/material';\nimport InputGroup from './InputGroup';\nimport { Input } from '../Input';\nimport { Button } from '../Button';\n\nexport const CustomStylingInputGroupExample = () => {\n    const [q, setQ] = useState('');\n\n    return (\n        <Box sx={{ width: 500 }}>\n            <InputGroup\n                borderRadius={999}\n                sx={{\n                    bgcolor: 'action.hover',\n                    borderColor: 'primary.main',\n                }}\n            >\n                <Input label=\"B\u00FAsqueda avanzada\" value={q} onChange={(val) => setQ(val as string)} />\n                <Button variant=\"contained\" color=\"primary\">Buscar</Button>\n            </InputGroup>\n        </Box>\n    );\n};\n";
+export declare const DisabledInputGroupDefinition = "\nimport { Box } from '@mui/material';\nimport InputGroup from './InputGroup';\nimport { Input } from '../Input';\nimport { Button } from '../Button';\n\nexport const DisabledInputGroupExample = () => (\n    <Box sx={{ width: 400 }}>\n        <InputGroup disabled>\n            <Input label=\"B\u00FAsqueda\" value=\"\" onChange={() => {}} disabled />\n            <Button variant=\"outlined\" disabled>Buscar</Button>\n        </InputGroup>\n    </Box>\n);\n";

package/components/InputGroup/InputGroup.js

@@ -18,109 +18,123 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsx } from "react/jsx-runtime";
-import { Children, isValidElement, cloneElement } from "react";
-import { Box, TextField, Select } from "@mui/material";
-import { DatePicker } from "@mui/x-date-pickers/DatePicker";
-import { I as Input } from "../../Input-DFHs7cJ_.js";
-import { S as Select$1 } from "../../Select-BcLkyHSE.js";
-import { D as DatePicker$1 } from "../../DatePicker-BSNboVhN.js";
-const InputGroup = ({ children }) => {
-  const childrenArray = Children.toArray(children);
-  const childrenWithDividers = childrenArray.map((child, index) => {
-    if (isValidElement(child)) {
-      const childProps = child.props;
-      const childType = child.type;
-      const isInputComponent = childType === TextField || childType === Input || childType === Select || childType === Select$1 || childType === DatePicker || childType === DatePicker$1;
-      const clonedChild = isInputComponent ? 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__ */ jsx(
-        Box,
-        {
-          sx: {
-            flexGrow: 1,
-            display: "flex",
-            alignItems: "center",
-            minWidth: 0,
-            borderRight: index < childrenArray.length - 1 ? "1px solid #ccc" : "none"
-          },
-          children: clonedChild
-        },
-        index
-      );
+import { Children, isValidElement } from "react";
+import { Box } from "@mui/material";
+import { m as mergeSx } from "../../mergeSx-BXoNZjB_.js";
+import { L as LABEL_MARGIN_TOP } from "../../tokens-BRrcP_p_.js";
+const InputGroup = ({
+  children,
+  sx,
+  slotSx,
+  borderRadius = 10,
+  disabled,
+  orientation = "horizontal",
+  className
+}) => {
+  const radius = typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
+  const slots = Children.toArray(children).filter(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: 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__ */ jsx(
     Box,
     {
-      sx: {
-        width: "100%",
-        display: "grid",
-        marginBottom: "10px",
-        marginTop: "10px"
-      },
-      children: /* @__PURE__ */ jsx(
-        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(baseSx, sx),
+      children: slots.map((child, i) => {
+        var _a;
+        const slotKey = (_a = child.key) != null ? _a : i;
+        return /* @__PURE__ */ jsx(
+          Box,
+          {
+            "data-input-group-slot": true,
+            sx: mergeSx(baseSlotSx, slotSx),
+            children: child
           },
-          children: childrenWithDividers
-        }
-      )
+          slotKey
+        );
+      })
     }
   );
 };
 export {
-  InputGroup
+  InputGroup,
+  InputGroup as default
 };
 //# sourceMappingURL=InputGroup.js.map

package/components/InputGroup/InputGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.js","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":["MuiTextField","MuiSelect","Select","MuiDatePicker","DatePicker"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAM,aAAwC,CAAC,EAAE,eAAe;AAC9D,QAAM,gBAAgB,SAAS,QAAQ,QAAQ;AAE/C,QAAM,uBAAuB,cAAc,IAAI,CAAC,OAAO,UAAU;AAC/D,QAAI,eAAe,KAAK,GAAG;AACzB,YAAM,aAAa,MAAM;AACzB,YAAM,YAAY,MAAM;AAExB,YAAM,mBACJ,cAAcA,aACd,cAAc,SACd,cAAcC,UACd,cAAcC,YACd,cAAcC,cACd,cAAcC;AAGhB,YAAM,cAAc,mBAClB,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,aACE;AAAA,QAAC;AAAA,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,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACA,OAAO;AAAA,QACP,SAAS;AAAA,QACT,cAAc;AAAA,QACd,WAAW;AAAA,MAAA;AAAA,MAIjB,UAAA;AAAA,QAAC;AAAA,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.js","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":[],"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,QAAQ,SAAS,QAAQ,QAAQ,EAAE,OAAO,cAAc;AAC9D,QAAM,eAAe,gBAAgB;AAErC,QAAM,SAAyB;AAAA;AAAA;AAAA;AAAA,IAI7B,WAAW;AAAA,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,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ;AAAA,MACA,iBAAe,WAAW,SAAS;AAAA,MACnC,IAAI,QAAQ,QAAQ,EAAE;AAAA,MAErB,UAAA,MAAM,IAAI,CAAC,OAAO,MAAM;;AACvB,cAAM,WAAW,WAA6B,QAA7B,YAAoC;AACrD,eACE;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,yBAAqB;AAAA,YACrB,IAAI,QAAQ,YAAY,MAAM;AAAA,YAE7B,UAAA;AAAA,UAAA;AAAA,UAJI;AAAA,QAAA;AAAA,MAOX,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/components/InputGroup/index.d.ts

@@ -1 +1,2 @@
-export { default as InputGroup } from './InputGroup';
+export { InputGroup, default } from './InputGroup';
+export type { InputGroupProps } from './InputGroup';

package/components/InputGroup.d.ts

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