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

package/dist/components/InputGroup/InputGroup.cjs

@@ -0,0 +1,139 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const material = require("@mui/material");
+const mergeSx = (base, extra) => {
+  if (!extra) return base;
+  const baseArr = Array.isArray(base) ? base : [base];
+  const extraArr = Array.isArray(extra) ? extra : [extra];
+  return [...baseArr, ...extraArr];
+};
+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: "14px",
+    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, & > .InputGroup__slot > .MuiTextField-root, & > .InputGroup__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.
+    "& > .InputGroup__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).
+    "& > .InputGroup__slot:first-of-type .MuiInputBase-root, & > .InputGroup__slot:first-of-type .MuiButton-root, & > .InputGroup__slot:first-of-type .MuiChip-root": isHorizontal ? {
+      borderTopLeftRadius: radius,
+      borderBottomLeftRadius: radius
+    } : {
+      borderTopLeftRadius: radius,
+      borderTopRightRadius: radius
+    },
+    // Esquinas redondeadas: último slot (derecha o abajo).
+    "& > .InputGroup__slot:last-of-type .MuiInputBase-root, & > .InputGroup__slot:last-of-type .MuiButton-root, & > .InputGroup__slot:last-of-type .MuiChip-root": isHorizontal ? {
+      borderTopRightRadius: radius,
+      borderBottomRightRadius: radius
+    } : {
+      borderBottomLeftRadius: radius,
+      borderBottomRightRadius: radius
+    }
+  };
+  const baseSlotSx = {
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    minWidth: 0
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Box,
+    {
+      "data-testid": "input-group",
+      className,
+      "aria-disabled": disabled ? "true" : void 0,
+      sx: mergeSx(baseSx, sx),
+      children: slots.map((child, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        material.Box,
+        {
+          className: "InputGroup__slot",
+          sx: mergeSx(baseSlotSx, slotSx),
+          children: child
+        },
+        i
+      ))
+    }
+  );
+};
+exports.InputGroup = InputGroup;
+//# sourceMappingURL=InputGroup.cjs.map

package/dist/components/InputGroup/InputGroup.cjs.map

@@ -0,0 +1 @@
+{"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\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\nconst mergeSx = (base: SxProps<Theme>, extra?: SxProps<Theme>): SxProps<Theme> => {\n  if (!extra) return base;\n  const baseArr = Array.isArray(base) ? base : [base];\n  const extraArr = Array.isArray(extra) ? extra : [extra];\n  return [...baseArr, ...extraArr] as SxProps<Theme>;\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 * (marginTop=14px) moviendo ese reservado al contenedor externo y cancelándolo\n * en los hijos. Los labels siguen flotando por encima del borde del grupo con\n * 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 */\nconst 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: '14px',\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: '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, & > .InputGroup__slot > .MuiTextField-root, & > .InputGroup__slot > .MuiFormControl-root': {\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    '& > .InputGroup__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    '& > .InputGroup__slot:first-of-type .MuiInputBase-root, & > .InputGroup__slot:first-of-type .MuiButton-root, & > .InputGroup__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    '& > .InputGroup__slot:last-of-type .MuiInputBase-root, & > .InputGroup__slot:last-of-type .MuiButton-root, & > .InputGroup__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        <Box\n          key={i}\n          className=\"InputGroup__slot\"\n          sx={mergeSx(baseSlotSx, slotSx)}\n        >\n          {child}\n        </Box>\n      ))}\n    </Box>\n  );\n};\n\nexport default InputGroup;\n"],"names":["Children","isValidElement","jsx","Box"],"mappings":"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"}

package/dist/components/InputGroup/InputGroup.d.ts

@@ -0,0 +1,42 @@
+import { default as React } from 'react';
+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;
+}
+/**
+ * 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`
+ * (marginTop=14px) 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.
+ */
+declare const InputGroup: React.FC<InputGroupProps>;
+export default InputGroup;

package/dist/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/dist/components/InputGroup/InputGroup.js

@@ -0,0 +1,139 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx } from "react/jsx-runtime";
+import { Children, isValidElement } from "react";
+import { Box } from "@mui/material";
+const mergeSx = (base, extra) => {
+  if (!extra) return base;
+  const baseArr = Array.isArray(base) ? base : [base];
+  const extraArr = Array.isArray(extra) ? extra : [extra];
+  return [...baseArr, ...extraArr];
+};
+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: "14px",
+    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, & > .InputGroup__slot > .MuiTextField-root, & > .InputGroup__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.
+    "& > .InputGroup__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).
+    "& > .InputGroup__slot:first-of-type .MuiInputBase-root, & > .InputGroup__slot:first-of-type .MuiButton-root, & > .InputGroup__slot:first-of-type .MuiChip-root": isHorizontal ? {
+      borderTopLeftRadius: radius,
+      borderBottomLeftRadius: radius
+    } : {
+      borderTopLeftRadius: radius,
+      borderTopRightRadius: radius
+    },
+    // Esquinas redondeadas: último slot (derecha o abajo).
+    "& > .InputGroup__slot:last-of-type .MuiInputBase-root, & > .InputGroup__slot:last-of-type .MuiButton-root, & > .InputGroup__slot:last-of-type .MuiChip-root": isHorizontal ? {
+      borderTopRightRadius: radius,
+      borderBottomRightRadius: radius
+    } : {
+      borderBottomLeftRadius: radius,
+      borderBottomRightRadius: radius
+    }
+  };
+  const baseSlotSx = {
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    minWidth: 0
+  };
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-testid": "input-group",
+      className,
+      "aria-disabled": disabled ? "true" : void 0,
+      sx: mergeSx(baseSx, sx),
+      children: slots.map((child, i) => /* @__PURE__ */ jsx(
+        Box,
+        {
+          className: "InputGroup__slot",
+          sx: mergeSx(baseSlotSx, slotSx),
+          children: child
+        },
+        i
+      ))
+    }
+  );
+};
+export {
+  InputGroup
+};
+//# sourceMappingURL=InputGroup.js.map

package/dist/components/InputGroup/InputGroup.js.map

@@ -0,0 +1 @@
+{"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\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\nconst mergeSx = (base: SxProps<Theme>, extra?: SxProps<Theme>): SxProps<Theme> => {\n  if (!extra) return base;\n  const baseArr = Array.isArray(base) ? base : [base];\n  const extraArr = Array.isArray(extra) ? extra : [extra];\n  return [...baseArr, ...extraArr] as SxProps<Theme>;\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 * (marginTop=14px) moviendo ese reservado al contenedor externo y cancelándolo\n * en los hijos. Los labels siguen flotando por encima del borde del grupo con\n * 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 */\nconst 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: '14px',\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: '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, & > .InputGroup__slot > .MuiTextField-root, & > .InputGroup__slot > .MuiFormControl-root': {\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    '& > .InputGroup__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    '& > .InputGroup__slot:first-of-type .MuiInputBase-root, & > .InputGroup__slot:first-of-type .MuiButton-root, & > .InputGroup__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    '& > .InputGroup__slot:last-of-type .MuiInputBase-root, & > .InputGroup__slot:last-of-type .MuiButton-root, & > .InputGroup__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        <Box\n          key={i}\n          className=\"InputGroup__slot\"\n          sx={mergeSx(baseSlotSx, slotSx)}\n        >\n          {child}\n        </Box>\n      ))}\n    </Box>\n  );\n};\n\nexport default InputGroup;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAM,UAAU,CAAC,MAAsB,UAA2C;AAChF,MAAI,CAAC,MAAO,QAAO;AACnB,QAAM,UAAU,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI;AAClD,QAAM,WAAW,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK;AACtD,SAAO,CAAC,GAAG,SAAS,GAAG,QAAQ;AACjC;AAcA,MAAM,aAAwC,CAAC;AAAA,EAC7C;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,YAAY;AAAA,IACZ,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,oHAAoH;AAAA,MAClH,WAAW;AAAA,IAAA;AAAA;AAAA;AAAA,IAKb,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,yBAAyB;AAAA,MACvB,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,IATjD;AAAA,MAUvB,kBAAkB;AAAA,QAChB,aAAa;AAAA,QACb,cAAc;AAAA,MAAA;AAAA,IAChB;AAAA;AAAA,IAIF,kKACE,eACI;AAAA,MACE,qBAAqB;AAAA,MACrB,wBAAwB;AAAA,IAAA,IAE1B;AAAA,MACE,qBAAqB;AAAA,MACrB,sBAAsB;AAAA,IAAA;AAAA;AAAA,IAI9B,+JACE,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,MACjB;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UACV,IAAI,QAAQ,YAAY,MAAM;AAAA,UAE7B,UAAA;AAAA,QAAA;AAAA,QAJI;AAAA,MAAA,CAMR;AAAA,IAAA;AAAA,EAAA;AAGP;"}