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

package/components/Autocomplete/Autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.js","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  Autocomplete,\n  TextField,\n  Chip,\n  Avatar,\n  Box,\n  Typography,\n  CircularProgress,\n} from \"@mui/material\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\nimport { styled } from \"@mui/system\";\n\nexport interface SelectOption {\n  value: string | number;\n  label: string;\n  img?: string;\n  disabled?: boolean;\n  group?: string;\n  [key: string]: any;\n}\n\ntype RenderOptionItem = (item: SelectOption) => React.ReactNode;\ntype RenderChipLabel = (item: SelectOption) => React.ReactNode;\n\ninterface AutocompleteProps<\n  TValue extends SelectOption[\"value\"] = SelectOption[\"value\"],\n> {\n  label?: string;\n  value: TValue | TValue[];\n  onChange: (val: TValue | TValue[]) => void;\n  options?: SelectOption[];\n  placeholder?: string;\n  multiple?: boolean;\n  disabled?: boolean;\n  loading?: boolean;\n  error?: boolean;\n  helperText?: string;\n  maxChipsToShow?: number;\n  renderOptionItem?: RenderOptionItem;\n  renderChipLabel?: RenderChipLabel;\n}\n\nconst StyledAutocomplete = styled(Autocomplete as typeof Autocomplete)(\n  ({ theme }) => ({\n    \"& .MuiOutlinedInput-root\": {\n      maxHeight: \"36px\",\n      padding: \"8px 10px\",\n      borderRadius: \"10px\",\n      display: \"flex\",\n      alignItems: \"center\",\n      fontSize: \"14px\",\n    },\n\n    \"& .MuiAutocomplete-inputRoot\": {\n      padding: \"0 !important\",\n    },\n\n    \"& .MuiAutocomplete-input\": {\n      padding: \"0 !important\",\n      height: \"28px\",\n      marginLeft: \"8px\",\n    },\n\n    \"& .MuiOutlinedInput-notchedOutline\": {\n      marginBottom: \"-4px\",\n      borderRadius: \"10px\",\n    },\n\n    \"& .MuiOutlinedInput-notchedOutline > legend\": {\n      display: \"none\",\n    },\n\n    \"& .MuiAutocomplete-endAdornment\": {\n      top: \"50%\",\n      transform: \"translateY(-50%)\",\n    },\n  }),\n);\n\nexport function AutocompleteSelect<\n  TValue extends SelectOption[\"value\"] = SelectOption[\"value\"],\n>(props: AutocompleteProps<TValue>) {\n  const {\n    label,\n    options = [],\n    value,\n    onChange,\n    placeholder,\n    multiple = false,\n    disabled = false,\n    loading = false,\n    error = false,\n    helperText,\n    renderOptionItem,\n    renderChipLabel,\n    maxChipsToShow = 3,\n  } = props;\n\n  const renderTags = (value: SelectOption[], getTagProps: any) => {\n    const displayed = value.slice(0, maxChipsToShow);\n    const hidden = value.length - maxChipsToShow;\n\n    return (\n      <>\n        {displayed.map((option, index) => (\n          <Chip\n            {...getTagProps({ index })}\n            key={option.value}\n            label={renderChipLabel ? renderChipLabel(option) : option.label}\n            avatar={option.img ? <Avatar src={option.img} /> : undefined}\n            deleteIcon={<ClearIcon />}\n          />\n        ))}\n\n        {hidden > 0 && <Chip label={`+${hidden} más`} />}\n      </>\n    );\n  };\n\n  const renderOption = (propsLi: any, option: SelectOption) => (\n    <li {...propsLi} key={option.value}>\n      {renderOptionItem ? renderOptionItem(option) : option.label}\n    </li>\n  );\n\n  const renderAutocomplete = (value: any, onChange: any) => (\n    <Box\n      sx={{\n        width: \"100%\",\n        display: \"grid\",\n        marginBottom: \"10px\",\n        marginTop: \"10px\",\n      }}\n    >\n      <StyledAutocomplete\n        multiple={multiple}\n        options={options}\n        value={\n          multiple\n            ? (options.filter((o) =>\n                (value as string[] | undefined)?.includes(o.value as string),\n              ) ?? [])\n            : (options.find((o) => o.value === value) ?? null)\n        }\n        disabled={disabled}\n        loading={loading}\n        getOptionLabel={(opt: any) => opt?.label ?? \"\"}\n        isOptionEqualToValue={(a: any, b: any) => a.value === b.value}\n        onChange={onChange}\n      //   renderOption={renderOption}\n      //   renderTags={multiple ? renderTags : undefined}\n        noOptionsText=\"No hay opciones\"\n        loadingText={\n          <Box sx={{ display: \"flex\", alignItems: \"center\", gap: 1 }}>\n            <CircularProgress size={20} />\n            <Typography>Cargando...</Typography>\n          </Box>\n        }\n        renderInput={(params) => (\n          <TextField\n            {...params}\n            // label={label}\n            placeholder={placeholder}\n            error={error}\n            helperText={helperText}\n          />\n        )}\n      />\n    </Box>\n  );\n\n  const handleChangeInternal = (event: any, newValue: any) => {\n    if (multiple) {\n      const values = (newValue ?? []).map((opt: any) => opt.value);\n      (onChange as (val: TValue[]) => void)?.(values);\n    } else {\n      const value = newValue?.value ?? \"\";\n      (onChange as (val: TValue) => void)?.(value);\n    }\n  };\n\n  return renderAutocomplete(value, handleChangeInternal);\n}\n\nexport default AutocompleteSelect;\n"],"names":["value","onChange","_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAM,qBAAqB,OAAO,YAAmC;AAAA,EACnE,CAAC,EAAE,MAAA,OAAa;AAAA,IACd,4BAA4B;AAAA,MAC1B,WAAW;AAAA,MACX,SAAS;AAAA,MACT,cAAc;AAAA,MACd,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,UAAU;AAAA,IAAA;AAAA,IAGZ,gCAAgC;AAAA,MAC9B,SAAS;AAAA,IAAA;AAAA,IAGX,4BAA4B;AAAA,MAC1B,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,YAAY;AAAA,IAAA;AAAA,IAGd,sCAAsC;AAAA,MACpC,cAAc;AAAA,MACd,cAAc;AAAA,IAAA;AAAA,IAGhB,+CAA+C;AAAA,MAC7C,SAAS;AAAA,IAAA;AAAA,IAGX,mCAAmC;AAAA,MACjC,KAAK;AAAA,MACL,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ;AAEO,SAAS,mBAEd,OAAkC;AAClC,QAAM;AAAA,IACJ;AAAA,IACA,UAAU,CAAA;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,EAAA,IACf;AA6BJ,QAAM,qBAAqB,CAACA,QAAYC;;AACtC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF,OAAO;AAAA,UACP,SAAS;AAAA,UACT,cAAc;AAAA,UACd,WAAW;AAAA,QAAA;AAAA,QAGb,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,OACE,YACK,aAAQ;AAAA,cAAO,CAAC,MACdD,iCAAgC,SAAS,EAAE;AAAA,YAAe,MAD5D,YAEI,CAAA,KACJ,aAAQ,KAAK,CAAC,MAAM,EAAE,UAAUA,MAAK,MAArC,YAA0C;AAAA,YAEjD;AAAA,YACA;AAAA,YACA,gBAAgB,CAAC;;AAAa,sBAAAE,MAAA,2BAAK,UAAL,OAAAA,MAAc;AAAA;AAAA,YAC5C,sBAAsB,CAAC,GAAQ,MAAW,EAAE,UAAU,EAAE;AAAA,YACxD,UAAUD;AAAAA,YAGV,eAAc;AAAA,YACd,aACE,qBAAC,KAAA,EAAI,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,EAAA,GACrD,UAAA;AAAA,cAAA,oBAAC,kBAAA,EAAiB,MAAM,GAAA,CAAI;AAAA,cAC5B,oBAAC,cAAW,UAAA,cAAA,CAAW;AAAA,YAAA,GACzB;AAAA,YAEF,aAAa,CAAC,WACZ;AAAA,cAAC;AAAA,cAAA,iCACK,SADL;AAAA,gBAGC;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA;AAAA;AAIJ,QAAM,uBAAuB,CAAC,OAAY,aAAkB;;AAC1D,QAAI,UAAU;AACZ,YAAM,UAAU,8BAAY,CAAA,GAAI,IAAI,CAAC,QAAa,IAAI,KAAK;AAC1D,2CAAuC;AAAA,IAC1C,OAAO;AACL,YAAMD,UAAQ,0CAAU,UAAV,YAAmB;AAChC,2CAAqCA;AAAAA,IACxC;AAAA,EACF;AAEA,SAAO,mBAAmB,OAAO,oBAAoB;AACvD;"}
+{"version":3,"file":"Autocomplete.js","sources":["../../../src/components/Autocomplete/Autocomplete.sx.ts","../../../src/components/Autocomplete/Autocomplete.helpers.ts","../../../src/components/Autocomplete/_parts/AutocompleteOption.tsx","../../../src/components/Autocomplete/_parts/AutocompleteChips.tsx","../../../src/components/Autocomplete/_parts/AutocompleteLoader.tsx","../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles';\n\nimport { buildFormFieldSx } from '../_shared/formField.sx';\nimport type { LabelPosition } from './Autocomplete';\n\n/**\n * Builder del sx del Autocomplete. Reutiliza `buildFormFieldSx` y añade\n * los paddings propios del Autocomplete (chips + input interno).\n */\nexport const buildAutocompleteSx = (\n  borderRadius: number | string,\n  labelPosition: LabelPosition,\n): SxProps<Theme> =>\n  buildFormFieldSx({\n    borderRadius,\n    labelPosition,\n    extraOutsideSx: {\n      // El input interno del Autocomplete.\n      '& .MuiAutocomplete-input': {\n        paddingTop: '4px',\n        paddingBottom: '4px',\n      },\n\n      // Contenedor del input (donde viven los chips en modo multiple).\n      '& .MuiAutocomplete-inputRoot': {\n        paddingTop: '4px',\n        paddingBottom: '4px',\n      },\n    },\n  });\n","import type { SxProps, Theme } from '@mui/material/styles';\nimport type { AutocompleteValueKey, SelectOption } from './Autocomplete';\n\n/** Resuelve un value único a su SelectOption dentro del pool. */\nexport const resolveSingleValue = <TValue,>(\n  options: SelectOption<TValue>[],\n  value: TValue | null | undefined,\n  getKey: (v: TValue) => AutocompleteValueKey,\n): SelectOption<TValue> | null => {\n  if (value === null || value === undefined) return null;\n  const key = getKey(value);\n  return options.find((o) => getKey(o.value) === key) ?? null;\n};\n\n/** Resuelve un array de values a sus SelectOption dentro del pool. */\nexport const resolveMultipleValue = <TValue,>(\n  options: SelectOption<TValue>[],\n  value: TValue[] | null | undefined,\n  getKey: (v: TValue) => AutocompleteValueKey,\n): SelectOption<TValue>[] => {\n  if (!Array.isArray(value)) return [];\n  const keys = new Set(value.map(getKey));\n  return options.filter((o) => keys.has(getKey(o.value)));\n};\n\n/** Merge de sx base + extra del consumer, respetando el contrato de MUI. */\nexport const mergeSx = (\n  base: SxProps<Theme>,\n  extra?: SxProps<Theme>,\n): SxProps<Theme> => {\n  if (!extra) return base;\n  return [base, ...(Array.isArray(extra) ? extra : [extra])] as SxProps<Theme>;\n};\n\n/**\n * Compara dos SelectOption por todas sus props (shallow). Se usa para detectar\n * cambios de metadata (p.ej. `label`, `img`) cuando `value` no cambió, para\n * que la estabilización no tape datos frescos del server. Para `value` se\n * compara vía `getKey` (no por `===`), de modo que values objeto con misma\n * identidad lógica pero referencia distinta no rompan la estabilización.\n */\nconst areOptionsShallowEqual = <TValue,>(\n  a: SelectOption<TValue>,\n  b: SelectOption<TValue>,\n  getKey: (v: TValue) => AutocompleteValueKey,\n): boolean => {\n  const keysA = Object.keys(a);\n  const keysB = Object.keys(b);\n  if (keysA.length !== keysB.length) return false;\n  return keysA.every((k) => {\n    if (k === 'value') return getKey(a.value) === getKey(b.value);\n    return a[k] === b[k];\n  });\n};\n\n/**\n * Compara dos valores resueltos (single o multiple) estructuralmente para\n * decidir si se puede reusar la referencia previa. Se usa para estabilizar la\n * referencia que se pasa a MUI Autocomplete (MUI compara value por referencia\n * con `!==`, y una nueva referencia — aunque el contenido sea igual — dispara\n * `resetInputValue` y borra el texto mientras el usuario tipea).\n *\n * Comparamos todas las props del SelectOption, no solo `value`, para que un\n * refresh de metadata (label/img/etc.) invalide la referencia estabilizada\n * y la UI muestre los datos actualizados.\n */\nexport const areResolvedValuesEqual = <TValue,>(\n  prev: SelectOption<TValue> | SelectOption<TValue>[] | null,\n  next: SelectOption<TValue> | SelectOption<TValue>[] | null,\n  multiple: boolean,\n  getKey: (v: TValue) => AutocompleteValueKey,\n): boolean => {\n  if (multiple) {\n    if (!Array.isArray(prev) || !Array.isArray(next)) return false;\n    if (prev.length !== next.length) return false;\n    return prev.every((o, i) => {\n      const n = next[i];\n      return !!n && areOptionsShallowEqual(o, n, getKey);\n    });\n  }\n  const p = prev as SelectOption<TValue> | null;\n  const n = next as SelectOption<TValue> | null;\n  if (p === n) return true;\n  if (!p || !n) return false;\n  return areOptionsShallowEqual(p, n, getKey);\n};\n\n/** Determina si un valor resuelto está vacío (para placeholder/shrink). */\nexport const isResolvedValueEmpty = (\n  resolvedValue: unknown,\n  multiple: boolean,\n): boolean => {\n  if (multiple) {\n    return !Array.isArray(resolvedValue) || resolvedValue.length === 0;\n  }\n  return !resolvedValue;\n};\n","import React from 'react';\nimport type {\n  AutocompleteValueKey,\n  RenderOptionItem,\n  SelectOption,\n} from '../Autocomplete';\n\ninterface AutocompleteOptionProps<TValue = AutocompleteValueKey> {\n  liProps: React.HTMLAttributes<HTMLLIElement>;\n  option: SelectOption<TValue>;\n  customRender?: RenderOptionItem<TValue>;\n}\n\n/**\n * Render por defecto de un `<li>` del dropdown del Autocomplete.\n * MUI lo invoca desde `renderOption={(props, option) => ...}` en el padre.\n *\n * La `key` la maneja el padre (`renderOption` en Autocomplete.tsx). Este\n * componente solo recibe los props restantes del `<li>` para spread.\n */\nexport const AutocompleteOption = <TValue,>({\n  liProps,\n  option,\n  customRender,\n}: AutocompleteOptionProps<TValue>) => {\n  return (\n    <li {...liProps}>\n      {customRender ? customRender(option) : option.label}\n    </li>\n  );\n};\n\nexport default AutocompleteOption;\n","import { Avatar, Chip } from '@mui/material';\nimport ClearIcon from '@mui/icons-material/Clear';\n\nimport type {\n  AutocompleteSize,\n  AutocompleteValueKey,\n  RenderChipLabel,\n  SelectOption,\n} from '../Autocomplete';\n\ninterface AutocompleteChipsProps<TValue = AutocompleteValueKey> {\n  value: SelectOption<TValue>[];\n  getTagProps: (args: { index: number }) => Record<string, any>;\n  size: AutocompleteSize;\n  maxChipsToShow: number;\n  renderChipLabel?: RenderChipLabel<TValue>;\n  /** Extrae la React key estable a partir del value (necesario para values objeto). */\n  getKey: (value: TValue) => AutocompleteValueKey;\n}\n\n/**\n * Render de los chips del Autocomplete en modo multiple.\n * Trunca después de `maxChipsToShow` con un chip \"+N más\".\n * El `getTagProps({ index })` viene de MUI y contiene el handler de delete,\n * la key, etc. — se spreadea tal cual al Chip.\n */\nexport const AutocompleteChips = <TValue,>({\n  value,\n  getTagProps,\n  size,\n  maxChipsToShow,\n  renderChipLabel,\n  getKey,\n}: AutocompleteChipsProps<TValue>) => {\n  const displayed = value.slice(0, maxChipsToShow);\n  const hidden = value.length - maxChipsToShow;\n\n  return (\n    <>\n      {displayed.map((option, index) => {\n        const { key: _ignored, ...tagProps } = getTagProps({ index });\n        return (\n          <Chip\n            key={getKey(option.value)}\n            {...tagProps}\n            size={size}\n            label={renderChipLabel ? renderChipLabel(option) : option.label}\n            avatar={option.img ? <Avatar src={option.img} /> : undefined}\n            deleteIcon={<ClearIcon />}\n          />\n        );\n      })}\n      {hidden > 0 && <Chip size={size} label={`+${hidden} más`} />}\n    </>\n  );\n};\n\nexport default AutocompleteChips;\n","import React from 'react';\nimport { Box, CircularProgress, Typography } from '@mui/material';\n\n/**\n * Loader por defecto para el `loadingText` del Autocomplete.\n * El consumer puede sobrescribirlo pasando `loadingText` al componente padre.\n */\nexport const AutocompleteLoader: React.FC<{ text?: string }> = ({\n  text = 'Cargando...',\n}) => (\n  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n    <CircularProgress size={16} />\n    <Typography variant=\"body2\">{text}</Typography>\n  </Box>\n);\n\nexport default AutocompleteLoader;\n","import React, {\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n  type SyntheticEvent,\n} from 'react';\nimport {\n  Autocomplete as MuiAutocomplete,\n  TextField,\n  type TextFieldProps,\n} from '@mui/material';\nimport { useTheme, type SxProps, type Theme } from '@mui/material/styles';\n\nimport { buildAutocompleteSx } from './Autocomplete.sx';\nimport {\n  areResolvedValuesEqual,\n  isResolvedValueEmpty,\n  resolveMultipleValue,\n  resolveSingleValue,\n} from './Autocomplete.helpers';\nimport { resolvePreset } from '../_shared/resolvePreset';\nimport { AutocompleteOption } from './_parts/AutocompleteOption';\nimport { AutocompleteChips } from './_parts/AutocompleteChips';\nimport { AutocompleteLoader } from './_parts/AutocompleteLoader';\n\n// ── Tipos de dominio ─────────────────────────────────────────────────────\n/** Key estable usada para comparar values, indexar caches y como React key. */\nexport type AutocompleteValueKey = string | number;\n\nexport interface SelectOption<TValue = AutocompleteValueKey> {\n  value: TValue;\n  label: string;\n  img?: string;\n  disabled?: boolean;\n  group?: string;\n  [key: string]: any; //campos extras que puede tener la opcion\n}\n\nexport type LabelPosition = 'outside' | 'floating';\nexport type AutocompleteSize = 'small' | 'medium';\n\n// ── Render slots ─────────────────────────────────────────────────────────\nexport type RenderOptionItem<TValue = AutocompleteValueKey> = (\n  item: SelectOption<TValue>,\n) => ReactNode;\nexport type RenderChipLabel<TValue = AutocompleteValueKey> = (\n  item: SelectOption<TValue>,\n) => ReactNode;\nexport type RenderSingleValue<TValue = AutocompleteValueKey> = (\n  item: SelectOption<TValue>,\n) => ReactNode;\n\n// ── Props base ───────────────────────────────────────────────────────────\nexport type BaseAutocompleteProps<TValue = AutocompleteValueKey> = {\n  label?: string;\n  options: SelectOption<TValue>[];\n  placeholder?: string;\n  multiple?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  loading?: boolean;\n  error?: boolean;\n  helperText?: string;\n  maxChipsToShow?: number;\n  renderOptionItem?: RenderOptionItem<TValue>;\n  renderChipLabel?: RenderChipLabel<TValue>;\n  /**\n   * Renderiza JSX custom como `startAdornment` del input en single mode.\n   * Recibe la `SelectOption` seleccionada. Útil para mostrar avatars, iconos,\n   * etc. junto al texto del label. En `multiple` no aplica (se usa `renderChipLabel`).\n   */\n  renderSingleValue?: RenderSingleValue<TValue>;\n  /**\n   * Extrae una key estable (string | number) desde el `value`. Obligatorio\n   * cuando `TValue` es un objeto: se usa para comparar values (`isOptionEqualToValue`,\n   * resolución desde el value del form), indexar el cache interno de opciones\n   * vistas y como React key en chips/options del dropdown. Para primitivos se\n   * puede omitir (default: identidad, o sea `===`).\n   */\n  getOptionKey?: (value: TValue) => AutocompleteValueKey;\n  /** Border radius del input. Default: 10. */\n  borderRadius?: number | string;\n  /** \"outside\" (default) = label arriba del input; \"floating\" = comportamiento nativo MUI. */\n  labelPosition?: LabelPosition;\n  /** Tamaño del TextField. Default: 'small'. */\n  size?: AutocompleteSize;\n  /** Texto cuando no hay coincidencias. */\n  noOptionsText?: ReactNode;\n  /** Texto cuando está cargando. */\n  loadingText?: ReactNode;\n  sx?: SxProps<Theme>;\n  /**\n   * Nombre del preset de estilo registrado en `theme.styles.Autocomplete`.\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  /** Props para el TextField subyacente. */\n  textFieldProps?: Partial<TextFieldProps>;\n\n  // ── Búsqueda asíncrona / remota ──────────────────────────────────────\n  /** Se dispara cada vez que el usuario escribe. Útil para llamadas a servicios\n   *  (debounce recomendado en el consumer). */\n  onInputChange?: (\n    event: SyntheticEvent,\n    value: string,\n    reason: 'input' | 'reset' | 'clear' | 'blur' | 'selectOption' | 'removeOption',\n  ) => void;\n  /** Valor controlado del texto de búsqueda. */\n  inputValue?: string;\n  /** Filtro custom. Para búsqueda remota pasar `(x) => x` y confiar sólo en el servicio. */\n  filterOptions?: (\n    options: SelectOption<TValue>[],\n    state: any,\n  ) => SelectOption<TValue>[];\n  /** Permite valores arbitrarios (no solo de la lista). */\n  freeSolo?: boolean;\n  open?: boolean;\n  onOpen?: (event: SyntheticEvent) => void;\n  onClose?: (event: SyntheticEvent, reason: string) => void;\n};\n\n// ── API pública final ────────────────────────────────────────────────────\nexport interface AutocompleteProps<TValue = AutocompleteValueKey>\n  extends BaseAutocompleteProps<TValue> {\n  value: TValue | TValue[] | null;\n  onChange: (val: TValue | TValue[] | null) => void;\n  name?: string;\n}\n\nexport function Autocomplete<TValue = AutocompleteValueKey>(\n  props: AutocompleteProps<TValue>,\n) {\n  const {\n    label,\n    options,\n    placeholder,\n    multiple = false,\n    disabled = false,\n    readOnly = false,\n    loading = false,\n    error: errorProp = false,\n    helperText,\n    maxChipsToShow = 3,\n    renderOptionItem,\n    renderChipLabel,\n    renderSingleValue,\n    borderRadius = 10,\n    labelPosition = 'outside',\n    size = 'small',\n    noOptionsText = 'No hay opciones',\n    loadingText,\n    sx,\n    preset,\n    textFieldProps,\n    onInputChange,\n    inputValue,\n    filterOptions,\n    freeSolo,\n    open,\n    onOpen,\n    onClose,\n    getOptionKey,\n  } = props as BaseAutocompleteProps<TValue>;\n\n  // Default identidad: para primitivos (string|number) funciona como `===`.\n  // Para values objeto, el consumer DEBE pasar `getOptionKey` o la igualdad\n  // caerá a referencia (Map/Set agruparían por identidad).\n  const getKey = (getOptionKey ??\n    ((v: TValue) => v as unknown as AutocompleteValueKey)) as (\n      v: TValue,\n    ) => AutocompleteValueKey;\n\n  // Focus tracking para mostrar placeholder solo cuando el label sube.\n  const [isFocused, setIsFocused] = useState(false);\n\n  // Cache interno de opciones vistas (indexado por key estable). Crítico para\n  // async multiple: cuando `options` cambian por un nuevo search, los items\n  // ya seleccionados no desaparecen de los chips porque los recordamos acá.\n  const seenOptionsRef = useRef<\n    Map<AutocompleteValueKey, SelectOption<TValue>>\n  >(new Map());\n  for (const opt of options) {\n    seenOptionsRef.current.set(getKey(opt.value), opt);\n  }\n\n  // Pool de opciones para resolver values (merge de options + vistas).\n  const resolvePool = useMemo<SelectOption<TValue>[]>(() => {\n    const merged = new Map(seenOptionsRef.current);\n    for (const opt of options) merged.set(getKey(opt.value), opt);\n    return Array.from(merged.values());\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [options]);\n\n  // Estabiliza la referencia del resolvedValue que pasamos a MUI Autocomplete.\n  // MUI compara value con `!==`: una referencia nueva con mismo contenido\n  // dispara resetInputValue() y borra el texto que el usuario está escribiendo.\n  const prevResolvedRef = useRef<\n    SelectOption<TValue>[] | SelectOption<TValue> | null\n  >(multiple ? [] : null);\n\n  const stabilizeResolved = (\n    newVal: SelectOption<TValue>[] | SelectOption<TValue> | null,\n  ): SelectOption<TValue>[] | SelectOption<TValue> | null => {\n    if (\n      areResolvedValuesEqual(prevResolvedRef.current, newVal, multiple, getKey)\n    ) {\n      return prevResolvedRef.current;\n    }\n    prevResolvedRef.current = newVal;\n    return newVal;\n  };\n\n  const theme = useTheme();\n  const presetSx = resolvePreset('Autocomplete', preset, theme);\n\n  const mergedSx = [\n    buildAutocompleteSx(borderRadius, labelPosition),\n    ...(presetSx ? [presetSx] : []),\n    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n  ];\n\n  const renderAutocomplete = (\n    resolvedValue: any,\n    handleChange: (event: any, newValue: any) => void,\n  ) => {\n    const isEmpty = isResolvedValueEmpty(resolvedValue, multiple);\n    const showPlaceholder = isEmpty && isFocused && !!placeholder;\n    const singleAdornment =\n      !multiple && resolvedValue && renderSingleValue\n        ? renderSingleValue(resolvedValue as SelectOption<TValue>)\n        : null;\n\n    return (\n      <MuiAutocomplete\n        multiple={multiple}\n        options={options}\n        value={resolvedValue}\n        disabled={disabled}\n        readOnly={readOnly}\n        loading={loading}\n        sx={mergedSx}\n        freeSolo={freeSolo as any}\n        open={open}\n        onOpen={onOpen}\n        onClose={onClose}\n        inputValue={inputValue}\n        onInputChange={onInputChange}\n        filterOptions={filterOptions as any}\n        getOptionLabel={(opt) =>\n          typeof opt === 'string' ? opt : (opt?.label ?? '')\n        }\n        isOptionEqualToValue={(a, b) => {\n          if (typeof a === 'string' || typeof b === 'string') return a === b;\n          if (!a || !b) return a === b;\n          return getKey(a.value) === getKey(b.value);\n        }}\n        getOptionDisabled={(opt) =>\n          typeof opt === 'string' ? false : !!opt?.disabled\n        }\n        onChange={handleChange}\n        onFocus={() => setIsFocused(true)}\n        onBlur={() => setIsFocused(false)}\n        renderOption={(liProps, option) => {\n          // MUI inyecta la `key` dentro de `liProps`. React necesita la key\n          // en el elemento más externo que devuelve `renderOption` (acá el\n          // wrapper), no en el `<li>` interno. El resto de `liProps` viaja\n          // al `<li>`. La key auto-generada por MUI cae a `getOptionLabel`,\n          // que colisiona si hay opciones con label duplicado. Usamos\n          // `option.value` (único por contrato de SelectOption) para\n          // garantizar uniqueness aunque haya labels repetidos.\n          const { key: _muiKey, ...liRest } = liProps as React.HTMLAttributes<HTMLLIElement> & {\n            key?: React.Key;\n          };\n          return (\n            <AutocompleteOption<TValue>\n              key={getKey(option.value)}\n              liProps={liRest}\n              option={option}\n              customRender={renderOptionItem}\n            />\n          );\n        }}\n        renderValue={\n          multiple\n            ? (value, getItemProps) => (\n              <AutocompleteChips<TValue>\n                value={value as SelectOption<TValue>[]}\n                getTagProps={getItemProps}\n                size={size}\n                maxChipsToShow={maxChipsToShow}\n                renderChipLabel={renderChipLabel}\n                getKey={getKey}\n              />\n            )\n            : undefined\n        }\n        noOptionsText={noOptionsText}\n        loadingText={loadingText ?? <AutocompleteLoader />}\n        renderInput={(params) => {\n          const paramsInputLabel =\n            (params as any).InputLabelProps as Record<string, any> | undefined;\n          const consumerInputLabel =\n            (textFieldProps?.slotProps as any)?.inputLabel ??\n            (textFieldProps as any)?.InputLabelProps;\n          // Para inyectar `singleAdornment` necesitamos pasar `slotProps.input`\n          // a TextField, pero `slotProps.input` gana sobre `params.InputProps`\n          // (que trae endAdornment con chevron + clear). Por eso, cuando hay\n          // adornment custom, mergeamos params.InputProps + lo que el consumer\n          // haya pasado por textFieldProps + nuestro startAdornment. Si no hay\n          // adornment, no tocamos `slotProps.input` y se preserva el flujo legacy.\n          const muiInputProps = (params as any).InputProps as\n            | Record<string, any>\n            | undefined;\n          const consumerInputProps =\n            (textFieldProps?.slotProps as any)?.input ??\n            (textFieldProps as any)?.InputProps;\n          const inputSlot = singleAdornment\n            ? {\n              ...muiInputProps,\n              ...consumerInputProps,\n              startAdornment: (\n                <>\n                  {singleAdornment}\n                  {consumerInputProps?.startAdornment}\n                  {muiInputProps?.startAdornment}\n                </>\n              ),\n            }\n            : undefined;\n\n          return (\n            <TextField\n              {...params}\n              label={label}\n              size={size}\n              variant=\"outlined\"\n              placeholder={showPlaceholder ? placeholder : undefined}\n              error={!!errorProp}\n              helperText={helperText}\n              {...textFieldProps}\n              slotProps={{\n                ...textFieldProps?.slotProps,\n                ...(inputSlot ? { input: inputSlot } : {}),\n                inputLabel: {\n                  ...paramsInputLabel,\n                  ...consumerInputLabel,\n                  shrink:\n                    labelPosition === 'outside'\n                      ? !isEmpty || isFocused\n                      : paramsInputLabel?.shrink,\n                },\n              }}\n            />\n          );\n        }}\n      />\n    );\n  };\n\n  //obtiene el primitivo (o objeto) value desde la opción seleccionada\n  const extractValue = (opt: any): TValue | null => {\n    if (opt === null || opt === undefined) return null;\n    if (typeof opt === 'string') return opt as unknown as TValue;\n    return (opt?.value ?? null) as TValue | null;\n  };\n\n  const handleControlledChange = (_event: any, newValue: any) => {\n    const { onChange } = props;\n    if (multiple) {\n      const values = (newValue ?? [])\n        .map((opt: SelectOption<TValue> | string) => extractValue(opt))\n        .filter((v: TValue | null): v is TValue => v !== null);\n      onChange(values);\n    } else {\n      onChange(extractValue(newValue));\n    }\n  };\n\n  const resolvedValue = stabilizeResolved(\n    multiple\n      ? resolveMultipleValue(resolvePool, props.value as TValue[], getKey)\n      : resolveSingleValue(resolvePool, props.value as TValue, getKey),\n  );\n\n  return renderAutocomplete(resolvedValue, handleControlledChange);\n}\n\n/** Alias de `Autocomplete`. Ambos nombres son equivalentes. */\nexport const AutocompleteSelect = Autocomplete;\n\nexport default Autocomplete;\n"],"names":["n","resolvedValue","MuiAutocomplete"],"mappings":"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"}

package/components/Autocomplete/Autocomplete.sx.d.ts

@@ -0,0 +1,7 @@
+import { SxProps, Theme } from '@mui/material/styles';
+import { LabelPosition } from './Autocomplete';
+/**
+ * Builder del sx del Autocomplete. Reutiliza `buildFormFieldSx` y añade
+ * los paddings propios del Autocomplete (chips + input interno).
+ */
+export declare const buildAutocompleteSx: (borderRadius: number | string, labelPosition: LabelPosition) => SxProps<Theme>;

package/components/Autocomplete/_parts/AutocompleteChips.d.ts

@@ -0,0 +1,20 @@
+import { AutocompleteSize, AutocompleteValueKey, RenderChipLabel, SelectOption } from '../Autocomplete';
+interface AutocompleteChipsProps<TValue = AutocompleteValueKey> {
+    value: SelectOption<TValue>[];
+    getTagProps: (args: {
+        index: number;
+    }) => Record<string, any>;
+    size: AutocompleteSize;
+    maxChipsToShow: number;
+    renderChipLabel?: RenderChipLabel<TValue>;
+    /** Extrae la React key estable a partir del value (necesario para values objeto). */
+    getKey: (value: TValue) => AutocompleteValueKey;
+}
+/**
+ * Render de los chips del Autocomplete en modo multiple.
+ * Trunca después de `maxChipsToShow` con un chip "+N más".
+ * El `getTagProps({ index })` viene de MUI y contiene el handler de delete,
+ * la key, etc. — se spreadea tal cual al Chip.
+ */
+export declare const AutocompleteChips: <TValue>({ value, getTagProps, size, maxChipsToShow, renderChipLabel, getKey, }: AutocompleteChipsProps<TValue>) => import("react/jsx-runtime").JSX.Element;
+export default AutocompleteChips;

package/components/Autocomplete/_parts/AutocompleteLoader.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+/**
+ * Loader por defecto para el `loadingText` del Autocomplete.
+ * El consumer puede sobrescribirlo pasando `loadingText` al componente padre.
+ */
+export declare const AutocompleteLoader: React.FC<{
+    text?: string;
+}>;
+export default AutocompleteLoader;

package/components/Autocomplete/_parts/AutocompleteOption.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { AutocompleteValueKey, RenderOptionItem, SelectOption } from '../Autocomplete';
+interface AutocompleteOptionProps<TValue = AutocompleteValueKey> {
+    liProps: React.HTMLAttributes<HTMLLIElement>;
+    option: SelectOption<TValue>;
+    customRender?: RenderOptionItem<TValue>;
+}
+/**
+ * Render por defecto de un `<li>` del dropdown del Autocomplete.
+ * MUI lo invoca desde `renderOption={(props, option) => ...}` en el padre.
+ *
+ * La `key` la maneja el padre (`renderOption` en Autocomplete.tsx). Este
+ * componente solo recibe los props restantes del `<li>` para spread.
+ */
+export declare const AutocompleteOption: <TValue>({ liProps, option, customRender, }: AutocompleteOptionProps<TValue>) => import("react/jsx-runtime").JSX.Element;
+export default AutocompleteOption;

package/components/Autocomplete/index.d.ts

@@ -1 +1,2 @@
-export { default as Autocomplete } from './Autocomplete';
+export { Autocomplete, AutocompleteSelect, default } from './Autocomplete';
+export type { AutocompleteProps, SelectOption, BaseAutocompleteProps, RenderOptionItem, RenderChipLabel, RenderSingleValue, LabelPosition, AutocompleteSize, AutocompleteValueKey, } from './Autocomplete';

package/components/Autocomplete.d.ts

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

package/components/Avatar/Avatar.cjs

@@ -20,107 +20,143 @@ var __spreadValues = (a, b) => {
 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 AccountCircleIcon = require("@mui/icons-material/AccountCircle");
-const React = require("react");
-const sizes = {
-  sm: {
-    avatar: { width: 35, height: 35, borderWidth: 3, marginTop: ".5rem" },
-    icon: { width: 42, height: 42, marginTop: ".5rem", fontSize: 42 },
-    badge: { width: 35, height: 35, borderWidth: 3, marginTop: ".5rem", fontSize: 16 }
-  },
-  xl: {
-    avatar: { width: 105, height: 105, borderWidth: 10, marginTop: "0" },
-    icon: { width: 126, height: 126, marginTop: "0", fontSize: 126 },
-    badge: { width: 105, height: 105, borderWidth: 10, marginTop: "0", fontSize: 64 }
+const sizeMap = {
+  sm: { px: 32, border: 2, font: 14, overlap: 8 },
+  md: { px: 40, border: 2, font: 16, overlap: 10 },
+  lg: { px: 56, border: 3, font: 22, overlap: 14 },
+  xl: { px: 96, border: 4, font: 36, overlap: 20 }
+};
+const resolveSize = (size) => {
+  if (typeof size === "number") {
+    return {
+      px: size,
+      border: Math.max(2, Math.round(size * 0.05)),
+      font: Math.round(size * 0.4),
+      overlap: Math.round(size * 0.25)
+    };
   }
+  return sizeMap[size];
+};
+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 Avatar = ({
   items,
   type,
   displayedAvatars = 4,
   size = "sm",
-  trustUrls = false,
   showText = true,
-  showTooltip = false
+  showTooltip = false,
+  sx,
+  avatarSx,
+  className,
+  overlap
 }) => {
-  const [errorIndex, setErrorIndex] = React.useState(/* @__PURE__ */ new Set());
-  const handleImageError = (index) => {
-    setErrorIndex((prev) => new Set(prev).add(index));
+  var _a;
+  const [failedUrls, setFailedUrls] = React.useState(/* @__PURE__ */ new Set());
+  const handleImageError = (url) => {
+    setFailedUrls((prev) => {
+      if (prev.has(url)) return prev;
+      const next = new Set(prev);
+      next.add(url);
+      return next;
+    });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "avatar-container", className: "flex items-center leading-2 h-full w-full", children: [
-    items.slice(0, displayedAvatars).map((item, i) => {
-      const commonStyle = {
-        zIndex: displayedAvatars - i,
-        marginLeft: i > 0 ? -22 : 0
-      };
-      const style = sizes[size];
-      const imgSrc = trustUrls ? item.imageUrl : item.imageUrl;
-      const showFallbackIcon = !item.imageUrl && !item.badge || errorIndex.has(i) && !item.badge;
-      const showBadge = item.badge && !item.imageUrl || item.badge && errorIndex.has(i);
-      const content = /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-testid": "avatar", style: commonStyle, children: [
-        item.imageUrl && !errorIndex.has(i) ? /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            "data-testid": "image",
-            alt: item.text || "User avatar",
-            src: imgSrc,
-            onError: () => handleImageError(i),
-            style: __spreadProps(__spreadValues({}, style.avatar), {
-              color: item.color || "#667688",
-              border: `${style.avatar.borderWidth}px solid white`,
-              borderRadius: "9999px",
-              marginTop: style.avatar.marginTop
-            })
+  if (!items || items.length === 0) {
+    return null;
+  }
+  const s = resolveSize(size);
+  const effectiveOverlap = overlap != null ? overlap : s.overlap;
+  const visibleItems = items.slice(0, displayedAvatars);
+  const baseAvatarSx = {
+    width: s.px,
+    height: s.px,
+    fontSize: s.font,
+    fontWeight: 700,
+    border: (theme) => `${s.border}px solid ${theme.palette.background.paper}`,
+    boxSizing: "content-box"
+  };
+  const renderSingleAvatar = (item, i) => {
+    var _a2, _b, _c, _d, _e;
+    const hasImage = !!item.imageUrl && !failedUrls.has(item.imageUrl);
+    const showBadgeFallback = !!item.badge;
+    const itemKey = (_c = item.imageUrl) != null ? _c : `${(_a2 = item.text) != null ? _a2 : ""}-${(_b = item.badge) != null ? _b : ""}-${i}`;
+    const itemSx = __spreadProps(__spreadValues({
+      bgcolor: (_d = item.backgroundColor) != null ? _d : "action.selected",
+      color: (_e = item.color) != null ? _e : "text.secondary"
+    }, i > 0 && { marginLeft: `-${effectiveOverlap}px` }), {
+      zIndex: visibleItems.length - i
+    });
+    const finalSx = mergeSx(mergeSx(baseAvatarSx, itemSx), avatarSx);
+    const avatarEl = /* @__PURE__ */ jsxRuntime.jsx(
+      material.Avatar,
+      {
+        alt: item.text || "User avatar",
+        src: hasImage ? item.imageUrl : void 0,
+        imgProps: {
+          onError: () => {
+            if (item.imageUrl) handleImageError(item.imageUrl);
           }
-        ) : showFallbackIcon ? /* @__PURE__ */ jsxRuntime.jsx(
+        },
+        sx: finalSx,
+        children: !hasImage && showBadgeFallback ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-label": item.text, children: item.badge }) : !hasImage ? /* @__PURE__ */ jsxRuntime.jsx(
           AccountCircleIcon,
           {
-            "data-testid": "icon",
             "aria-label": item.text,
-            sx: __spreadProps(__spreadValues({}, style.icon), {
-              fontSize: style.icon.fontSize,
-              marginTop: style.icon.marginTop,
-              borderRadius: "9999px",
-              backgroundColor: "#fff",
-              color: item.color || "#667688"
-            })
+            sx: { width: "100%", height: "100%" }
           }
-        ) : null,
-        showBadge && /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
+        ) : null
+      }
+    );
+    if (showTooltip && item.text) {
+      return /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: item.text, children: avatarEl }, itemKey);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: avatarEl }, itemKey);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Box,
+    {
+      className,
+      sx: mergeSx(
+        {
+          display: "flex",
+          alignItems: "center",
+          lineHeight: 1,
+          width: "fit-content"
+        },
+        sx
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", alignItems: "center" }, children: visibleItems.map((item, i) => renderSingleAvatar(item, i)) }),
+        showText && ((_a = items[0]) == null ? void 0 : _a.text) && /* @__PURE__ */ jsxRuntime.jsxs(
+          material.Typography,
           {
-            "data-testid": "badge",
-            "aria-label": item.text,
-            style: __spreadProps(__spreadValues({}, style.badge), {
-              display: "inline-block",
-              backgroundColor: item.backgroundColor || "#c8d5e9",
-              color: item.color || "#667688",
-              fontWeight: 700,
-              textAlign: "center",
-              borderRadius: "9999px",
-              border: `${style.badge.borderWidth}px solid white`,
-              lineHeight: style.badge.height,
-              fontSize: style.badge.fontSize,
-              marginTop: style.badge.marginTop,
-              marginBottom: style.badge.marginTop
-            }),
-            children: item.badge
+            variant: "caption",
+            sx: {
+              ml: 1,
+              fontSize: "0.75rem",
+              fontWeight: 400,
+              color: "text.primary"
+            },
+            children: [
+              type && items.length === 1 && /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { component: "span", sx: { mr: 0.5 }, children: [
+                type,
+                ":"
+              ] }),
+              items[0].text,
+              items.length > 1 && ` +${items.length - 1}`
+            ]
           }
         )
-      ] }, i);
-      return showTooltip && item.text ? /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: item.text, children: content }, i) : content;
-    }),
-    showText && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-testid": "text", className: "ml-2 text-xs font-normal", children: [
-      type && items.length === 1 && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-testid": "type", children: [
-        type,
-        ": "
-      ] }),
-      items[0].text,
-      " ",
-      items.length > 2 && `+${items.length - 1}`
-    ] })
-  ] });
+      ]
+    }
+  );
 };
 exports.Avatar = Avatar;
 //# sourceMappingURL=Avatar.cjs.map

package/components/Avatar/Avatar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.cjs","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { Avatar as MuiAvatar, Tooltip } from '@mui/material';\nimport AccountCircleIcon from '@mui/icons-material/AccountCircle';\nimport React, { useState } from 'react';\n\nexport interface AvatarItem {\n  text?: string;\n  imageUrl?: string;\n  badge?: string;\n  color?: string;\n  backgroundColor?: string;\n}\n\nexport interface AvatarProps {\n  type?: string;\n  items: AvatarItem[];\n  displayedAvatars?: number;\n  size?: 'sm' | 'xl';\n  trustUrls?: boolean;\n  showText?: boolean;\n  showTooltip?: boolean;\n}\n\nconst sizes = {\n  sm: {\n    avatar: { width: 35, height: 35, borderWidth: 3, marginTop: '.5rem' },\n    icon: { width: 42, height: 42, marginTop: '.5rem', fontSize: 42 },\n    badge: { width: 35, height: 35, borderWidth: 3, marginTop: '.5rem', fontSize: 16 },\n  },\n  xl: {\n    avatar: { width: 105, height: 105, borderWidth: 10, marginTop: '0' },\n    icon: { width: 126, height: 126, marginTop: '0', fontSize: 126 },\n    badge: { width: 105, height: 105, borderWidth: 10, marginTop: '0', fontSize: 64 },\n  },\n};\n\nexport const Avatar: React.FC<AvatarProps> = ({\n  items,\n  type,\n  displayedAvatars = 4,\n  size = 'sm',\n  trustUrls = false,\n  showText = true,\n  showTooltip = false,\n}) => {\n  const [errorIndex, setErrorIndex] = useState<Set<number>>(new Set());\n\n  const handleImageError = (index: number) => {\n    setErrorIndex((prev) => new Set(prev).add(index));\n  };\n\n  return (\n    <div data-testid=\"avatar-container\" className=\"flex items-center leading-2 h-full w-full\">\n      {items.slice(0, displayedAvatars).map((item, i) => {\n        const commonStyle = {\n          zIndex: displayedAvatars - i,\n          marginLeft: i > 0 ? -22 : 0,\n        };\n\n        const style = sizes[size];\n\n        const imgSrc = trustUrls ? item.imageUrl : item.imageUrl;\n\n        const showFallbackIcon = (!item.imageUrl && !item.badge) || (errorIndex.has(i) && !item.badge);\n        const showBadge = (item.badge && !item.imageUrl) || (item.badge && errorIndex.has(i));\n\n        const content = (\n          <span key={i} data-testid=\"avatar\" style={commonStyle}>\n            {item.imageUrl && !errorIndex.has(i) ? (\n              <img\n                data-testid=\"image\"\n                alt={item.text || 'User avatar'}\n                src={imgSrc}\n                onError={() => handleImageError(i)}\n                style={{\n                  ...style.avatar,\n                  color: item.color || '#667688',\n                  border: `${style.avatar.borderWidth}px solid white`,\n                  borderRadius: '9999px',\n                  marginTop: style.avatar.marginTop,\n                }}\n              />\n            ) : showFallbackIcon ? (\n              <AccountCircleIcon\n                data-testid=\"icon\"\n                aria-label={item.text}\n                sx={{\n                  ...style.icon,\n                  fontSize: style.icon.fontSize,\n                  marginTop: style.icon.marginTop,\n                  borderRadius: '9999px',\n                  backgroundColor: '#fff',\n                  color: item.color || '#667688',\n                }}\n              />\n            ) : null}\n\n            {showBadge && (\n              <span\n                data-testid=\"badge\"\n                aria-label={item.text}\n                style={{\n                  ...style.badge,\n                  display: 'inline-block',\n                  backgroundColor: item.backgroundColor || '#c8d5e9',\n                  color: item.color || '#667688',\n                  fontWeight: 700,\n                  textAlign: 'center',\n                  borderRadius: '9999px',\n                  border: `${style.badge.borderWidth}px solid white`,\n                  lineHeight: style.badge.height,\n                  fontSize: style.badge.fontSize,\n                  marginTop: style.badge.marginTop,\n                  marginBottom: style.badge.marginTop,\n                }}\n              >\n                {item.badge}\n              </span>\n            )}\n          </span>\n        );\n\n        return showTooltip && item.text ? (\n          <Tooltip key={i} title={item.text}>\n            {content}\n          </Tooltip>\n        ) : (\n          content\n        );\n      })}\n\n      {showText && (\n        <span data-testid=\"text\" className=\"ml-2 text-xs font-normal\">\n          {type && items.length === 1 && (\n            <span data-testid=\"type\">{type}: </span>\n          )}\n          {items[0].text} {items.length > 2 && `+${items.length - 1}`}\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default Avatar;"],"names":["useState","jsxs","jsx","Tooltip"],"mappings":"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"}
+{"version":3,"file":"Avatar.cjs","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n  Avatar as MuiAvatar,\n  Box,\n  Tooltip,\n  Typography,\n  type SxProps,\n  type Theme,\n} from '@mui/material';\nimport AccountCircleIcon from '@mui/icons-material/AccountCircle';\n\nexport interface AvatarItem {\n  text?: string;\n  imageUrl?: string;\n  badge?: string;\n  color?: string;\n  backgroundColor?: string;\n}\n\nexport type AvatarSize = 'sm' | 'md' | 'lg' | 'xl' | number;\n\nexport interface AvatarProps {\n  type?: string;\n  items: AvatarItem[];\n  displayedAvatars?: number;\n  size?: AvatarSize;\n  showText?: boolean;\n  showTooltip?: boolean;\n  /**\n   * sx aplicado al contenedor raíz.\n   */\n  sx?: SxProps<Theme>;\n  /**\n   * sx aplicado a cada MuiAvatar individual (se mergea sobre los defaults).\n   */\n  avatarSx?: SxProps<Theme>;\n  className?: string;\n  /**\n   * Overlap (px) entre avatares cuando hay varios. Default depende del tamaño.\n   */\n  overlap?: number;\n}\n\n// Escala alineada con la escala de MUI (sm=32, md=40, lg=56, xl=96) con borde\n// proporcional para el efecto stacked.\nconst sizeMap: Record<\n  Exclude<AvatarSize, number>,\n  { px: number; border: number; font: number; overlap: number }\n> = {\n  sm: { px: 32, border: 2, font: 14, overlap: 8 },\n  md: { px: 40, border: 2, font: 16, overlap: 10 },\n  lg: { px: 56, border: 3, font: 22, overlap: 14 },\n  xl: { px: 96, border: 4, font: 36, overlap: 20 },\n};\n\nconst resolveSize = (size: AvatarSize) => {\n  if (typeof size === 'number') {\n    return {\n      px: size,\n      border: Math.max(2, Math.round(size * 0.05)),\n      font: Math.round(size * 0.4),\n      overlap: Math.round(size * 0.25),\n    };\n  }\n  return sizeMap[size];\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\nexport const Avatar: React.FC<AvatarProps> = ({\n  items,\n  type,\n  displayedAvatars = 4,\n  size = 'sm',\n  showText = true,\n  showTooltip = false,\n  sx,\n  avatarSx,\n  className,\n  overlap,\n}) => {\n  // Indexamos por URL (no por posición) para que cambios en `items` — reorder,\n  // filtrado, paginación — no hagan que un avatar válido \"herede\" el estado de\n  // imagen rota de un item anterior que estaba en la misma posición.\n  const [failedUrls, setFailedUrls] = useState<Set<string>>(new Set());\n\n  const handleImageError = (url: string) => {\n    setFailedUrls((prev) => {\n      if (prev.has(url)) return prev;\n      const next = new Set(prev);\n      next.add(url);\n      return next;\n    });\n  };\n\n  if (!items || items.length === 0) {\n    return null;\n  }\n\n  const s = resolveSize(size);\n  const effectiveOverlap = overlap ?? s.overlap;\n  const visibleItems = items.slice(0, displayedAvatars);\n\n  const baseAvatarSx: SxProps<Theme> = {\n    width: s.px,\n    height: s.px,\n    fontSize: s.font,\n    fontWeight: 700,\n    border: (theme) => `${s.border}px solid ${theme.palette.background.paper}`,\n    boxSizing: 'content-box',\n  };\n\n  const renderSingleAvatar = (item: AvatarItem, i: number) => {\n    const hasImage = !!item.imageUrl && !failedUrls.has(item.imageUrl);\n    const showBadgeFallback = !!item.badge;\n    const itemKey = item.imageUrl ?? `${item.text ?? ''}-${item.badge ?? ''}-${i}`;\n\n    // Defaults tirando al theme; item.color / item.backgroundColor tienen prioridad.\n    const itemSx: SxProps<Theme> = {\n      bgcolor: item.backgroundColor ?? 'action.selected',\n      color: item.color ?? 'text.secondary',\n      // Stacking manual: margen negativo al segundo avatar en adelante.\n      ...(i > 0 && { marginLeft: `-${effectiveOverlap}px` }),\n      zIndex: visibleItems.length - i,\n    };\n\n    const finalSx = mergeSx(mergeSx(baseAvatarSx, itemSx), avatarSx);\n\n    const avatarEl = (\n      <MuiAvatar\n        alt={item.text || 'User avatar'}\n        src={hasImage ? item.imageUrl : undefined}\n        imgProps={{\n          onError: () => {\n            if (item.imageUrl) handleImageError(item.imageUrl);\n          },\n        }}\n        sx={finalSx}\n      >\n        {!hasImage && showBadgeFallback ? (\n          <span aria-label={item.text}>{item.badge}</span>\n        ) : !hasImage ? (\n          <AccountCircleIcon\n            aria-label={item.text}\n            sx={{ width: '100%', height: '100%' }}\n          />\n        ) : null}\n      </MuiAvatar>\n    );\n\n    if (showTooltip && item.text) {\n      return (\n        <Tooltip key={itemKey} title={item.text}>\n          {avatarEl}\n        </Tooltip>\n      );\n    }\n    return <React.Fragment key={itemKey}>{avatarEl}</React.Fragment>;\n  };\n\n  return (\n    <Box\n      className={className}\n      sx={mergeSx(\n        {\n          display: 'flex',\n          alignItems: 'center',\n          lineHeight: 1,\n          width: 'fit-content',\n        },\n        sx,\n      )}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center' }}>\n        {visibleItems.map((item, i) => renderSingleAvatar(item, i))}\n      </Box>\n\n      {showText && items[0]?.text && (\n        <Typography\n          variant=\"caption\"\n          sx={{\n            ml: 1,\n            fontSize: '0.75rem',\n            fontWeight: 400,\n            color: 'text.primary',\n          }}\n        >\n          {type && items.length === 1 && (\n            <Box component=\"span\" sx={{ mr: 0.5 }}>\n              {type}:\n            </Box>\n          )}\n          {items[0].text}\n          {items.length > 1 && ` +${items.length - 1}`}\n        </Typography>\n      )}\n    </Box>\n  );\n};\n\nexport default Avatar;\n"],"names":["useState","_a","jsx","MuiAvatar","Tooltip","jsxs","Box","Typography"],"mappings":"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"}

package/components/Avatar/Avatar.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { SxProps, Theme } from '@mui/material';
 export interface AvatarItem {
     text?: string;
     imageUrl?: string;
@@ -6,14 +7,27 @@ export interface AvatarItem {
     color?: string;
     backgroundColor?: string;
 }
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl' | number;
 export interface AvatarProps {
     type?: string;
     items: AvatarItem[];
     displayedAvatars?: number;
-    size?: 'sm' | 'xl';
-    trustUrls?: boolean;
+    size?: AvatarSize;
     showText?: boolean;
     showTooltip?: boolean;
+    /**
+     * sx aplicado al contenedor raíz.
+     */
+    sx?: SxProps<Theme>;
+    /**
+     * sx aplicado a cada MuiAvatar individual (se mergea sobre los defaults).
+     */
+    avatarSx?: SxProps<Theme>;
+    className?: string;
+    /**
+     * Overlap (px) entre avatares cuando hay varios. Default depende del tamaño.
+     */
+    overlap?: number;
 }
 export declare const Avatar: React.FC<AvatarProps>;
 export default Avatar;

package/components/Avatar/Avatar.definitions.d.ts

@@ -0,0 +1,11 @@
+export declare const DefaultAvatarDefinition = "\nimport { Avatar } from './Avatar';\n\nexport const DefaultAvatarExample = () => (\n    <Avatar\n        items={[\n            { text: 'User One', imageUrl: 'https://i.pravatar.cc/150?img=1' },\n            { text: 'User Two', imageUrl: 'https://i.pravatar.cc/150?img=2' },\n        ]}\n    />\n);\n";
+export declare const WithTypeAndTextDefinition = "\nimport { Avatar } from './Avatar';\n\nexport const WithTypeAndTextExample = () => (\n    <Avatar\n        type=\"Owner\"\n        items={[{ text: 'Maria', imageUrl: 'https://i.pravatar.cc/150?img=5' }]}\n        showText\n    />\n);\n";
+export declare const WithBadgesAndTooltipDefinition = "\nimport { Avatar } from './Avatar';\n\nexport const WithBadgesAndTooltipExample = () => (\n    <Avatar\n        showTooltip\n        items={[\n            { text: 'John D.', badge: 'JD', backgroundColor: '#EF5350', color: '#fff' },\n            { text: 'Alice B.', badge: 'AB', backgroundColor: '#AB47BC', color: '#fff' },\n        ]}\n    />\n);\n";
+export declare const SizeSmallDefinition = "\nimport { Avatar } from './Avatar';\n\nexport const SizeSmallExample = () => (\n    <Avatar\n        size=\"sm\"\n        items={[\n            { text: 'User One', imageUrl: 'https://i.pravatar.cc/150?img=11' },\n            { text: 'User Two', imageUrl: 'https://i.pravatar.cc/150?img=12' },\n            { text: 'User Three', imageUrl: 'https://i.pravatar.cc/150?img=13' },\n        ]}\n    />\n);\n";
+export declare const SizeMediumDefinition = "\nimport { Avatar } from './Avatar';\n\nexport const SizeMediumExample = () => (\n    <Avatar\n        size=\"md\"\n        items={[\n            { text: 'User One', imageUrl: 'https://i.pravatar.cc/150?img=21' },\n            { text: 'User Two', imageUrl: 'https://i.pravatar.cc/150?img=22' },\n            { text: 'User Three', imageUrl: 'https://i.pravatar.cc/150?img=23' },\n        ]}\n    />\n);\n";
+export declare const SizeLargeDefinition = "\nimport { Avatar } from './Avatar';\n\nexport const SizeLargeExample = () => (\n    <Avatar\n        size=\"lg\"\n        items={[\n            { text: 'User One', imageUrl: 'https://i.pravatar.cc/150?img=31' },\n            { text: 'User Two', imageUrl: 'https://i.pravatar.cc/150?img=32' },\n        ]}\n    />\n);\n";
+export declare const SizeExtraLargeDefinition = "\nimport { Avatar } from './Avatar';\n\nexport const SizeExtraLargeExample = () => (\n    <Avatar\n        size=\"xl\"\n        items={[{ text: 'Maria', imageUrl: 'https://i.pravatar.cc/150?img=5' }]}\n        showText={false}\n    />\n);\n";
+export declare const NumericSizeDefinition = "\nimport { Avatar } from './Avatar';\n\nexport const NumericSizeExample = () => (\n    <Avatar\n        size={72}\n        items={[\n            { text: 'User One', imageUrl: 'https://i.pravatar.cc/150?img=41' },\n            { text: 'User Two', imageUrl: 'https://i.pravatar.cc/150?img=42' },\n        ]}\n        showText={false}\n    />\n);\n";
+export declare const FallbackIconDefinition = "\nimport { Avatar } from './Avatar';\n\nexport const FallbackIconExample = () => (\n    <Avatar\n        items={[\n            { text: 'Without image' },\n            { text: 'Broken image', imageUrl: 'https://example.invalid/broken.png' },\n        ]}\n        showTooltip\n    />\n);\n";
+export declare const DisplayedAvatarsLimitDefinition = "\nimport { Avatar } from './Avatar';\n\nexport const DisplayedAvatarsLimitExample = () => (\n    <Avatar\n        displayedAvatars={3}\n        items={[\n            { text: 'User 1', imageUrl: 'https://i.pravatar.cc/150?img=51' },\n            { text: 'User 2', imageUrl: 'https://i.pravatar.cc/150?img=52' },\n            { text: 'User 3', imageUrl: 'https://i.pravatar.cc/150?img=53' },\n            { text: 'User 4', imageUrl: 'https://i.pravatar.cc/150?img=54' },\n            { text: 'User 5', imageUrl: 'https://i.pravatar.cc/150?img=55' },\n        ]}\n    />\n);\n";
+export declare const CustomStylingDefinition = "\nimport { Avatar } from './Avatar';\n\nexport const CustomStylingExample = () => (\n    <Avatar\n        size=\"md\"\n        items={[\n            { text: 'User One', imageUrl: 'https://i.pravatar.cc/150?img=61' },\n            { text: 'User Two', imageUrl: 'https://i.pravatar.cc/150?img=62' },\n        ]}\n        sx={{\n            p: 1,\n            borderRadius: 2,\n            bgcolor: 'action.hover',\n        }}\n        avatarSx={{\n            border: (theme) => '3px solid ' + theme.palette.primary.main,\n        }}\n    />\n);\n";