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

package/components/AppBar/AppBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppBar.js","sources":["../../../src/components/AppBar/AppBarContext.ts","../../../src/components/AppBar/AppBar.sx.ts","../../../src/components/AppBar/AppBar.tsx","../../../src/components/AppBar/AppBarMenuToggle.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\n/**\n * Context interno del AppBar. Permite que sub-componentes (MenuToggle, etc.)\n * consuman callbacks registrados en el AppBar padre sin tener que pasarlos\n * por props explícitas.\n */\nexport interface AppBarContextValue {\n  /** Handler del botón hamburguesa. Si es undefined, el toggle se oculta. */\n  onMenuToggle?: () => void;\n  /** Estado actual del drawer asociado (usado por el icono del toggle). */\n  menuOpen?: boolean;\n}\n\nexport const AppBarContext = createContext<AppBarContextValue | null>(null);\n\n/**\n * Hook para leer el contexto del AppBar. Si se llama fuera de un `<AppBar>`,\n * devuelve un objeto vacío — los sub-componentes caen en modo \"standalone\"\n * con sus defaults en lugar de romper.\n */\nexport function useAppBarContext(): AppBarContextValue {\n  const ctx = useContext(AppBarContext);\n  return ctx ?? {};\n}\n","import type { SxProps, Theme } from '@mui/material/styles';\n\nexport interface BuildAppBarSxArgs {\n  /** Altura en px. Default: 64. */\n  height?: number;\n  /** Color del AppBar (se pasa al MuiAppBar). */\n  transparent?: boolean;\n}\n\n/**\n * sx del root del MuiAppBar. Define altura fija y layout flex del Toolbar\n * interno. El color/elevación se dejan a las props nativas de MuiAppBar.\n */\nexport function buildAppBarSx({\n  height = 64,\n  transparent = false,\n}: BuildAppBarSxArgs): SxProps<Theme> {\n  return (theme) => ({\n    minHeight: height,\n    justifyContent: 'center',\n    backgroundImage: 'none',\n    ...(transparent && {\n      backgroundColor: 'transparent',\n      boxShadow: 'none',\n      borderBottom: `1px solid ${theme.palette.divider}`,\n    }),\n    '& .MuiToolbar-root': {\n      minHeight: height,\n      gap: 1.5,\n    },\n  });\n}\n","import React, { useMemo, type ReactNode } from 'react';\nimport {\n  AppBar as MuiAppBar,\n  Toolbar,\n  type AppBarProps as MuiAppBarProps,\n} from '@mui/material';\nimport {\n  useTheme,\n  type SxProps,\n  type Theme,\n} from '@mui/material/styles';\n\nimport { AppBarContext } from './AppBarContext';\nimport { buildAppBarSx } from './AppBar.sx';\nimport { resolvePreset } from '../_shared/resolvePreset';\n\nexport type AppBarPosition = 'fixed' | 'sticky' | 'static' | 'absolute' | 'relative';\nexport type AppBarColor =\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'transparent'\n  | 'inherit';\n\nexport interface AppBarProps {\n  /** Contenido del AppBar (típicamente sub-componentes + acciones custom). */\n  children?: ReactNode;\n  /** Posicionamiento. Default: `'sticky'`. */\n  position?: AppBarPosition;\n  /** Color. Default: `'default'`. */\n  color?: AppBarColor;\n  /** Nivel de sombra. Default: 1. */\n  elevation?: number;\n  /** Altura en px. Default: 64. */\n  height?: number;\n  /**\n   * Handler del botón hamburguesa. Se expone vía AppBarContext para que el\n   * sub-componente `<AppBarMenuToggle>` lo consuma sin prop drilling.\n   */\n  onMenuToggle?: () => void;\n  /** Estado del drawer asociado (para que el icono del toggle cambie). */\n  menuOpen?: boolean;\n  /**\n   * Nombre del preset de estilo registrado en `theme.styles.AppBar`.\n   * - `\"default\"` (o ausente) = estilo built-in del paquete.\n   */\n  preset?: string;\n  /** sx del root (se mergea después del preset). */\n  sx?: SxProps<Theme>;\n  /** sx del Toolbar interno. */\n  toolbarSx?: SxProps<Theme>;\n  className?: string;\n  /** Otras props nativas del MuiAppBar (ej. `enableColorOnDark`). */\n  appBarProps?: Omit<\n    MuiAppBarProps,\n    'position' | 'color' | 'elevation' | 'sx' | 'children' | 'className'\n  >;\n}\n\n/**\n * AppBar (header superior) del paquete. Se diseñó como un shell compositivo\n * — el consumer arma el contenido libremente (logo, título, menú de usuario,\n * etc.) y puede usar `<AppBarMenuToggle>` para el botón hamburguesa\n * integrado con el contexto.\n *\n * Patrón recomendado para navegación en dashboards:\n *\n * ```tsx\n * <AppBar onMenuToggle={toggleDrawer}>\n *   <AppBarMenuToggle />\n *   <MyBrand />\n *   <Box sx={{ flex: 1 }} />\n *   <MyUserMenu />\n * </AppBar>\n * ```\n */\nexport function AppBar({\n  children,\n  position = 'sticky',\n  color = 'default',\n  elevation = 1,\n  height = 64,\n  onMenuToggle,\n  menuOpen,\n  preset,\n  sx,\n  toolbarSx,\n  appBarProps,\n}: AppBarProps) {\n  const theme = useTheme();\n  const presetSx = resolvePreset('AppBar', preset, theme);\n\n  const rootSx: SxProps<Theme> = [\n    buildAppBarSx({ height, transparent: color === 'transparent' }),\n    ...(presetSx ? [presetSx] : []),\n    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n  ];\n\n  const contextValue = useMemo(\n    () => ({ onMenuToggle, menuOpen }),\n    [onMenuToggle, menuOpen],\n  );\n\n  return (\n    <AppBarContext.Provider value={contextValue}>\n      <MuiAppBar\n        position={position}\n        color={color}\n        elevation={elevation}\n        sx={rootSx}\n        {...appBarProps}\n      >\n        <Toolbar sx={toolbarSx}>{children}</Toolbar>\n      </MuiAppBar>\n    </AppBarContext.Provider>\n  );\n}\n\nexport default AppBar;\n","import { type ReactNode } from 'react';\nimport { IconButton, Tooltip } from '@mui/material';\nimport MenuIcon from '@mui/icons-material/Menu';\nimport MenuOpenIcon from '@mui/icons-material/MenuOpen';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nimport { useAppBarContext } from './AppBarContext';\n\nexport interface AppBarMenuToggleProps {\n  /**\n   * Callback explícito. Si se omite, se consume del `AppBarContext`. Útil para\n   * usar el toggle fuera de un `<AppBar>` (p.ej. en un header custom).\n   */\n  onClick?: () => void;\n  /** Estado del drawer asociado. Si se omite, se lee del `AppBarContext`. */\n  menuOpen?: boolean;\n  /** Icono custom cuando el drawer está cerrado. Default: `<MenuIcon />`. */\n  closedIcon?: ReactNode;\n  /** Icono custom cuando el drawer está abierto. Default: `<MenuOpenIcon />`. */\n  openIcon?: ReactNode;\n  /** Texto de tooltip. Default: \"Menú\". */\n  tooltip?: string;\n  /** aria-label del botón. Default: el mismo tooltip. */\n  ariaLabel?: string;\n  /** Tamaño del IconButton. Default: `'medium'`. */\n  size?: 'small' | 'medium' | 'large';\n  /** Oculta el botón cuando no hay handler disponible. Default: true. */\n  hideIfNoHandler?: boolean;\n  sx?: SxProps<Theme>;\n  className?: string;\n}\n\n/**\n * Botón hamburguesa del AppBar. Por default consume `onMenuToggle` y\n * `menuOpen` del `AppBarContext` (pattern composicional), pero permite\n * overrides explícitos si se usa fuera de un `<AppBar>`.\n *\n * ```tsx\n * <AppBar onMenuToggle={toggleDrawer} menuOpen={open}>\n *   <AppBarMenuToggle />\n *   ...\n * </AppBar>\n * ```\n */\nexport function AppBarMenuToggle({\n  onClick,\n  menuOpen,\n  closedIcon,\n  openIcon,\n  tooltip = 'Menú',\n  ariaLabel,\n  size = 'medium',\n  hideIfNoHandler = true,\n  sx,\n  className,\n}: AppBarMenuToggleProps) {\n  const ctx = useAppBarContext();\n\n  const handler = onClick ?? ctx.onMenuToggle;\n  const open = menuOpen ?? ctx.menuOpen ?? false;\n\n  if (!handler && hideIfNoHandler) {\n    return null;\n  }\n\n  const icon = open\n    ? (openIcon ?? <MenuOpenIcon />)\n    : (closedIcon ?? <MenuIcon />);\n\n  return (\n    <Tooltip title={tooltip} arrow>\n      <span>\n        <IconButton\n          size={size}\n          edge=\"start\"\n          color=\"inherit\"\n          aria-label={ariaLabel ?? tooltip}\n          onClick={handler}\n          disabled={!handler}\n          className={className}\n          sx={sx}\n        >\n          {icon}\n        </IconButton>\n      </span>\n    </Tooltip>\n  );\n}\n\nexport default AppBarMenuToggle;\n"],"names":["MuiAppBar"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,gBAAgB,cAAyC,IAAI;AAOnE,SAAS,mBAAuC;AACrD,QAAM,MAAM,WAAW,aAAa;AACpC,SAAO,oBAAO,CAAA;AAChB;ACXO,SAAS,cAAc;AAAA,EAC5B,SAAS;AAAA,EACT,cAAc;AAChB,GAAsC;AACpC,SAAO,CAAC,UAAW;AAAA,IACjB,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,KACb,eAAe;AAAA,IACjB,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,cAAc,aAAa,MAAM,QAAQ,OAAO;AAAA,EAAA,IAPjC;AAAA,IASjB,sBAAsB;AAAA,MACpB,WAAW;AAAA,MACX,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ;AC6CO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgB;AACd,QAAM,QAAQ,SAAA;AACd,QAAM,WAAW,cAAc,UAAU,QAAQ,KAAK;AAEtD,QAAM,SAAyB;AAAA,IAC7B,cAAc,EAAE,QAAQ,aAAa,UAAU,eAAe;AAAA,IAC9D,GAAI,WAAW,CAAC,QAAQ,IAAI,CAAA;AAAA,IAC5B,GAAI,MAAM,QAAQ,EAAE,IAAI,KAAK,KAAK,CAAC,EAAE,IAAI,CAAA;AAAA,EAAC;AAG5C,QAAM,eAAe;AAAA,IACnB,OAAO,EAAE,cAAc;IACvB,CAAC,cAAc,QAAQ;AAAA,EAAA;AAGzB,SACE,oBAAC,cAAc,UAAd,EAAuB,OAAO,cAC7B,UAAA;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,IAAI;AAAA,OACA,cALL;AAAA,MAOC,UAAA,oBAAC,SAAA,EAAQ,IAAI,WAAY,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA,GAEtC;AAEJ;ACxEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,OAAO;AAAA,EACP,kBAAkB;AAAA,EAClB;AAAA,EACA;AACF,GAA0B;;AACxB,QAAM,MAAM,iBAAA;AAEZ,QAAM,UAAU,4BAAW,IAAI;AAC/B,QAAM,QAAO,mCAAY,IAAI,aAAhB,YAA4B;AAEzC,MAAI,CAAC,WAAW,iBAAiB;AAC/B,WAAO;AAAA,EACT;AAEA,QAAM,OAAO,OACR,8BAAY,oBAAC,gBAAa,IAC1B,sDAAe,UAAA,CAAA,CAAS;AAE7B,6BACG,SAAA,EAAQ,OAAO,SAAS,OAAK,MAC5B,8BAAC,QAAA,EACC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,OAAM;AAAA,MACN,cAAY,gCAAa;AAAA,MACzB,SAAS;AAAA,MACT,UAAU,CAAC;AAAA,MACX;AAAA,MACA;AAAA,MAEC,UAAA;AAAA,IAAA;AAAA,EAAA,GAEL,EAAA,CACF;AAEJ;"}

package/components/AppBar/AppBar.sx.d.ts

@@ -0,0 +1,12 @@
+import { SxProps, Theme } from '@mui/material/styles';
+export interface BuildAppBarSxArgs {
+    /** Altura en px. Default: 64. */
+    height?: number;
+    /** Color del AppBar (se pasa al MuiAppBar). */
+    transparent?: boolean;
+}
+/**
+ * sx del root del MuiAppBar. Define altura fija y layout flex del Toolbar
+ * interno. El color/elevación se dejan a las props nativas de MuiAppBar.
+ */
+export declare function buildAppBarSx({ height, transparent, }: BuildAppBarSxArgs): SxProps<Theme>;

package/components/AppBar/AppBarContext.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Context interno del AppBar. Permite que sub-componentes (MenuToggle, etc.)
+ * consuman callbacks registrados en el AppBar padre sin tener que pasarlos
+ * por props explícitas.
+ */
+export interface AppBarContextValue {
+    /** Handler del botón hamburguesa. Si es undefined, el toggle se oculta. */
+    onMenuToggle?: () => void;
+    /** Estado actual del drawer asociado (usado por el icono del toggle). */
+    menuOpen?: boolean;
+}
+export declare const AppBarContext: import('react').Context<AppBarContextValue | null>;
+/**
+ * Hook para leer el contexto del AppBar. Si se llama fuera de un `<AppBar>`,
+ * devuelve un objeto vacío — los sub-componentes caen en modo "standalone"
+ * con sus defaults en lugar de romper.
+ */
+export declare function useAppBarContext(): AppBarContextValue;

package/components/AppBar/AppBarMenuToggle.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+export interface AppBarMenuToggleProps {
+    /**
+     * Callback explícito. Si se omite, se consume del `AppBarContext`. Útil para
+     * usar el toggle fuera de un `<AppBar>` (p.ej. en un header custom).
+     */
+    onClick?: () => void;
+    /** Estado del drawer asociado. Si se omite, se lee del `AppBarContext`. */
+    menuOpen?: boolean;
+    /** Icono custom cuando el drawer está cerrado. Default: `<MenuIcon />`. */
+    closedIcon?: ReactNode;
+    /** Icono custom cuando el drawer está abierto. Default: `<MenuOpenIcon />`. */
+    openIcon?: ReactNode;
+    /** Texto de tooltip. Default: "Menú". */
+    tooltip?: string;
+    /** aria-label del botón. Default: el mismo tooltip. */
+    ariaLabel?: string;
+    /** Tamaño del IconButton. Default: `'medium'`. */
+    size?: 'small' | 'medium' | 'large';
+    /** Oculta el botón cuando no hay handler disponible. Default: true. */
+    hideIfNoHandler?: boolean;
+    sx?: SxProps<Theme>;
+    className?: string;
+}
+/**
+ * Botón hamburguesa del AppBar. Por default consume `onMenuToggle` y
+ * `menuOpen` del `AppBarContext` (pattern composicional), pero permite
+ * overrides explícitos si se usa fuera de un `<AppBar>`.
+ *
+ * ```tsx
+ * <AppBar onMenuToggle={toggleDrawer} menuOpen={open}>
+ *   <AppBarMenuToggle />
+ *   ...
+ * </AppBar>
+ * ```
+ */
+export declare function AppBarMenuToggle({ onClick, menuOpen, closedIcon, openIcon, tooltip, ariaLabel, size, hideIfNoHandler, sx, className, }: AppBarMenuToggleProps): import("react/jsx-runtime").JSX.Element | null;
+export default AppBarMenuToggle;

package/components/AppBar/index.d.ts

@@ -0,0 +1,6 @@
+export { AppBar, default } from './AppBar';
+export type { AppBarProps, AppBarPosition, AppBarColor, } from './AppBar';
+export { AppBarMenuToggle } from './AppBarMenuToggle';
+export type { AppBarMenuToggleProps } from './AppBarMenuToggle';
+export { AppBarContext, useAppBarContext } from './AppBarContext';
+export type { AppBarContextValue } from './AppBarContext';

package/components/AppBar.d.ts

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

package/components/Autocomplete/Autocomplete.cjs

@@ -0,0 +1,313 @@
+"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));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const material = require("@mui/material");
+const styles = require("@mui/material/styles");
+const formField_sx = require("../../formField.sx-BAX7KwMR.cjs");
+const resolvePreset = require("../../resolvePreset-CT3kU-K2.cjs");
+const ClearIcon = require("@mui/icons-material/Clear");
+const buildAutocompleteSx = (borderRadius, labelPosition) => formField_sx.buildFormFieldSx({
+  borderRadius,
+  labelPosition,
+  extraOutsideSx: {
+    // El input interno del Autocomplete.
+    "& .MuiAutocomplete-input": {
+      paddingTop: "4px",
+      paddingBottom: "4px"
+    },
+    // Contenedor del input (donde viven los chips en modo multiple).
+    "& .MuiAutocomplete-inputRoot": {
+      paddingTop: "4px",
+      paddingBottom: "4px"
+    }
+  }
+});
+const resolveSingleValue = (options, value, getKey) => {
+  var _a;
+  if (value === null || value === void 0) return null;
+  const key = getKey(value);
+  return (_a = options.find((o) => getKey(o.value) === key)) != null ? _a : null;
+};
+const resolveMultipleValue = (options, value, getKey) => {
+  if (!Array.isArray(value)) return [];
+  const keys = new Set(value.map(getKey));
+  return options.filter((o) => keys.has(getKey(o.value)));
+};
+const areOptionsShallowEqual = (a, b, getKey) => {
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+  return keysA.every((k) => {
+    if (k === "value") return getKey(a.value) === getKey(b.value);
+    return a[k] === b[k];
+  });
+};
+const areResolvedValuesEqual = (prev, next, multiple, getKey) => {
+  if (multiple) {
+    if (!Array.isArray(prev) || !Array.isArray(next)) return false;
+    if (prev.length !== next.length) return false;
+    return prev.every((o, i) => {
+      const n2 = next[i];
+      return !!n2 && areOptionsShallowEqual(o, n2, getKey);
+    });
+  }
+  const p = prev;
+  const n = next;
+  if (p === n) return true;
+  if (!p || !n) return false;
+  return areOptionsShallowEqual(p, n, getKey);
+};
+const isResolvedValueEmpty = (resolvedValue, multiple) => {
+  if (multiple) {
+    return !Array.isArray(resolvedValue) || resolvedValue.length === 0;
+  }
+  return !resolvedValue;
+};
+const AutocompleteOption = ({
+  liProps,
+  option,
+  customRender
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("li", __spreadProps(__spreadValues({}, liProps), { children: customRender ? customRender(option) : option.label }));
+};
+const AutocompleteChips = ({
+  value,
+  getTagProps,
+  size,
+  maxChipsToShow,
+  renderChipLabel,
+  getKey
+}) => {
+  const displayed = value.slice(0, maxChipsToShow);
+  const hidden = value.length - maxChipsToShow;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    displayed.map((option, index) => {
+      const _a = getTagProps({ index }), { key: _ignored } = _a, tagProps = __objRest(_a, ["key"]);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        material.Chip,
+        __spreadProps(__spreadValues({}, tagProps), {
+          size,
+          label: renderChipLabel ? renderChipLabel(option) : option.label,
+          avatar: option.img ? /* @__PURE__ */ jsxRuntime.jsx(material.Avatar, { src: option.img }) : void 0,
+          deleteIcon: /* @__PURE__ */ jsxRuntime.jsx(ClearIcon, {})
+        }),
+        getKey(option.value)
+      );
+    }),
+    hidden > 0 && /* @__PURE__ */ jsxRuntime.jsx(material.Chip, { size, label: `+${hidden} más` })
+  ] });
+};
+const AutocompleteLoader = ({
+  text = "Cargando..."
+}) => /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+  /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 16 }),
+  /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", children: text })
+] });
+function Autocomplete(props) {
+  const {
+    label,
+    options,
+    placeholder,
+    multiple = false,
+    disabled = false,
+    readOnly = false,
+    loading = false,
+    error: errorProp = false,
+    helperText,
+    maxChipsToShow = 3,
+    renderOptionItem,
+    renderChipLabel,
+    renderSingleValue,
+    borderRadius = 10,
+    labelPosition = "outside",
+    size = "small",
+    noOptionsText = "No hay opciones",
+    loadingText,
+    sx,
+    preset,
+    textFieldProps,
+    onInputChange,
+    inputValue,
+    filterOptions,
+    freeSolo,
+    open,
+    onOpen,
+    onClose,
+    getOptionKey
+  } = props;
+  const getKey = getOptionKey != null ? getOptionKey : ((v) => v);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const seenOptionsRef = React.useRef(/* @__PURE__ */ new Map());
+  for (const opt of options) {
+    seenOptionsRef.current.set(getKey(opt.value), opt);
+  }
+  const resolvePool = React.useMemo(() => {
+    const merged = new Map(seenOptionsRef.current);
+    for (const opt of options) merged.set(getKey(opt.value), opt);
+    return Array.from(merged.values());
+  }, [options]);
+  const prevResolvedRef = React.useRef(multiple ? [] : null);
+  const stabilizeResolved = (newVal) => {
+    if (areResolvedValuesEqual(prevResolvedRef.current, newVal, multiple, getKey)) {
+      return prevResolvedRef.current;
+    }
+    prevResolvedRef.current = newVal;
+    return newVal;
+  };
+  const theme = styles.useTheme();
+  const presetSx = resolvePreset.resolvePreset("Autocomplete", preset, theme);
+  const mergedSx = [
+    buildAutocompleteSx(borderRadius, labelPosition),
+    ...presetSx ? [presetSx] : [],
+    ...Array.isArray(sx) ? sx : sx ? [sx] : []
+  ];
+  const renderAutocomplete = (resolvedValue2, handleChange) => {
+    const isEmpty = isResolvedValueEmpty(resolvedValue2, multiple);
+    const showPlaceholder = isEmpty && isFocused && !!placeholder;
+    const singleAdornment = !multiple && resolvedValue2 && renderSingleValue ? renderSingleValue(resolvedValue2) : null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      material.Autocomplete,
+      {
+        multiple,
+        options,
+        value: resolvedValue2,
+        disabled,
+        readOnly,
+        loading,
+        sx: mergedSx,
+        freeSolo,
+        open,
+        onOpen,
+        onClose,
+        inputValue,
+        onInputChange,
+        filterOptions,
+        getOptionLabel: (opt) => {
+          var _a;
+          return typeof opt === "string" ? opt : (_a = opt == null ? void 0 : opt.label) != null ? _a : "";
+        },
+        isOptionEqualToValue: (a, b) => {
+          if (typeof a === "string" || typeof b === "string") return a === b;
+          if (!a || !b) return a === b;
+          return getKey(a.value) === getKey(b.value);
+        },
+        getOptionDisabled: (opt) => typeof opt === "string" ? false : !!(opt == null ? void 0 : opt.disabled),
+        onChange: handleChange,
+        onFocus: () => setIsFocused(true),
+        onBlur: () => setIsFocused(false),
+        renderOption: (liProps, option) => {
+          const _a = liProps, { key: _muiKey } = _a, liRest = __objRest(_a, ["key"]);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            AutocompleteOption,
+            {
+              liProps: liRest,
+              option,
+              customRender: renderOptionItem
+            },
+            getKey(option.value)
+          );
+        },
+        renderValue: multiple ? (value, getItemProps) => /* @__PURE__ */ jsxRuntime.jsx(
+          AutocompleteChips,
+          {
+            value,
+            getTagProps: getItemProps,
+            size,
+            maxChipsToShow,
+            renderChipLabel,
+            getKey
+          }
+        ) : void 0,
+        noOptionsText,
+        loadingText: loadingText != null ? loadingText : /* @__PURE__ */ jsxRuntime.jsx(AutocompleteLoader, {}),
+        renderInput: (params) => {
+          var _a, _b, _c, _d;
+          const paramsInputLabel = params.InputLabelProps;
+          const consumerInputLabel = (_b = (_a = textFieldProps == null ? void 0 : textFieldProps.slotProps) == null ? void 0 : _a.inputLabel) != null ? _b : textFieldProps == null ? void 0 : textFieldProps.InputLabelProps;
+          const muiInputProps = params.InputProps;
+          const consumerInputProps = (_d = (_c = textFieldProps == null ? void 0 : textFieldProps.slotProps) == null ? void 0 : _c.input) != null ? _d : textFieldProps == null ? void 0 : textFieldProps.InputProps;
+          const inputSlot = singleAdornment ? __spreadProps(__spreadValues(__spreadValues({}, muiInputProps), consumerInputProps), {
+            startAdornment: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              singleAdornment,
+              consumerInputProps == null ? void 0 : consumerInputProps.startAdornment,
+              muiInputProps == null ? void 0 : muiInputProps.startAdornment
+            ] })
+          }) : void 0;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            material.TextField,
+            __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, params), {
+              label,
+              size,
+              variant: "outlined",
+              placeholder: showPlaceholder ? placeholder : void 0,
+              error: !!errorProp,
+              helperText
+            }), textFieldProps), {
+              slotProps: __spreadProps(__spreadValues(__spreadValues({}, textFieldProps == null ? void 0 : textFieldProps.slotProps), inputSlot ? { input: inputSlot } : {}), {
+                inputLabel: __spreadProps(__spreadValues(__spreadValues({}, paramsInputLabel), consumerInputLabel), {
+                  shrink: labelPosition === "outside" ? !isEmpty || isFocused : paramsInputLabel == null ? void 0 : paramsInputLabel.shrink
+                })
+              })
+            })
+          );
+        }
+      }
+    );
+  };
+  const extractValue = (opt) => {
+    var _a;
+    if (opt === null || opt === void 0) return null;
+    if (typeof opt === "string") return opt;
+    return (_a = opt == null ? void 0 : opt.value) != null ? _a : null;
+  };
+  const handleControlledChange = (_event, newValue) => {
+    const { onChange } = props;
+    if (multiple) {
+      const values = (newValue != null ? newValue : []).map((opt) => extractValue(opt)).filter((v) => v !== null);
+      onChange(values);
+    } else {
+      onChange(extractValue(newValue));
+    }
+  };
+  const resolvedValue = stabilizeResolved(
+    multiple ? resolveMultipleValue(resolvePool, props.value, getKey) : resolveSingleValue(resolvePool, props.value, getKey)
+  );
+  return renderAutocomplete(resolvedValue, handleControlledChange);
+}
+const AutocompleteSelect = Autocomplete;
+exports.Autocomplete = Autocomplete;
+exports.AutocompleteSelect = AutocompleteSelect;
+exports.default = Autocomplete;
+//# sourceMappingURL=Autocomplete.cjs.map

package/components/Autocomplete/Autocomplete.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.cjs","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":["buildFormFieldSx","n","jsx","jsxs","Fragment","Chip","Avatar","Box","CircularProgress","Typography","useState","useRef","useMemo","useTheme","resolvePreset","resolvedValue","MuiAutocomplete","TextField"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASO,MAAM,sBAAsB,CACjC,cACA,kBAEAA,8BAAiB;AAAA,EACf;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA;AAAA,IAEd,4BAA4B;AAAA,MAC1B,YAAY;AAAA,MACZ,eAAe;AAAA,IAAA;AAAA;AAAA,IAIjB,gCAAgC;AAAA,MAC9B,YAAY;AAAA,MACZ,eAAe;AAAA,IAAA;AAAA,EACjB;AAEJ,CAAC;ACzBI,MAAM,qBAAqB,CAChC,SACA,OACA,WACgC;;AAChC,MAAI,UAAU,QAAQ,UAAU,OAAW,QAAO;AAClD,QAAM,MAAM,OAAO,KAAK;AACxB,UAAO,aAAQ,KAAK,CAAC,MAAM,OAAO,EAAE,KAAK,MAAM,GAAG,MAA3C,YAAgD;AACzD;AAGO,MAAM,uBAAuB,CAClC,SACA,OACA,WAC2B;AAC3B,MAAI,CAAC,MAAM,QAAQ,KAAK,UAAU,CAAA;AAClC,QAAM,OAAO,IAAI,IAAI,MAAM,IAAI,MAAM,CAAC;AACtC,SAAO,QAAQ,OAAO,CAAC,MAAM,KAAK,IAAI,OAAO,EAAE,KAAK,CAAC,CAAC;AACxD;AAkBA,MAAM,yBAAyB,CAC7B,GACA,GACA,WACY;AACZ,QAAM,QAAQ,OAAO,KAAK,CAAC;AAC3B,QAAM,QAAQ,OAAO,KAAK,CAAC;AAC3B,MAAI,MAAM,WAAW,MAAM,OAAQ,QAAO;AAC1C,SAAO,MAAM,MAAM,CAAC,MAAM;AACxB,QAAI,MAAM,QAAS,QAAO,OAAO,EAAE,KAAK,MAAM,OAAO,EAAE,KAAK;AAC5D,WAAO,EAAE,CAAC,MAAM,EAAE,CAAC;AAAA,EACrB,CAAC;AACH;AAaO,MAAM,yBAAyB,CACpC,MACA,MACA,UACA,WACY;AACZ,MAAI,UAAU;AACZ,QAAI,CAAC,MAAM,QAAQ,IAAI,KAAK,CAAC,MAAM,QAAQ,IAAI,EAAG,QAAO;AACzD,QAAI,KAAK,WAAW,KAAK,OAAQ,QAAO;AACxC,WAAO,KAAK,MAAM,CAAC,GAAG,MAAM;AAC1B,YAAMC,KAAI,KAAK,CAAC;AAChB,aAAO,CAAC,CAACA,MAAK,uBAAuB,GAAGA,IAAG,MAAM;AAAA,IACnD,CAAC;AAAA,EACH;AACA,QAAM,IAAI;AACV,QAAM,IAAI;AACV,MAAI,MAAM,EAAG,QAAO;AACpB,MAAI,CAAC,KAAK,CAAC,EAAG,QAAO;AACrB,SAAO,uBAAuB,GAAG,GAAG,MAAM;AAC5C;AAGO,MAAM,uBAAuB,CAClC,eACA,aACY;AACZ,MAAI,UAAU;AACZ,WAAO,CAAC,MAAM,QAAQ,aAAa,KAAK,cAAc,WAAW;AAAA,EACnE;AACA,SAAO,CAAC;AACV;AC5EO,MAAM,qBAAqB,CAAU;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AACF,MAAuC;AACrC,SACEC,+BAAC,uCAAO,YACL,yBAAe,aAAa,MAAM,IAAI,OAAO,MAAA,EAChD;AAEJ;ACJO,MAAM,oBAAoB,CAAU;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAsC;AACpC,QAAM,YAAY,MAAM,MAAM,GAAG,cAAc;AAC/C,QAAM,SAAS,MAAM,SAAS;AAE9B,SACEC,2BAAAA,KAAAC,qBAAA,EACG,UAAA;AAAA,IAAA,UAAU,IAAI,CAAC,QAAQ,UAAU;AAChC,YAAuC,iBAAY,EAAE,OAAO,GAApD,OAAK,aAA0B,IAAb,qBAAa,IAAb,CAAlB;AACR,aACEF,2BAAAA;AAAAA,QAACG,SAAAA;AAAAA,QAAA,iCAEK,WAFL;AAAA,UAGC;AAAA,UACA,OAAO,kBAAkB,gBAAgB,MAAM,IAAI,OAAO;AAAA,UAC1D,QAAQ,OAAO,MAAMH,+BAACI,SAAAA,UAAO,KAAK,OAAO,KAAK,IAAK;AAAA,UACnD,2CAAa,WAAA,CAAA,CAAU;AAAA,QAAA;AAAA,QALlB,OAAO,OAAO,KAAK;AAAA,MAAA;AAAA,IAQ9B,CAAC;AAAA,IACA,SAAS,KAAKJ,+BAACG,SAAAA,MAAA,EAAK,MAAY,OAAO,IAAI,MAAM,OAAA,CAAQ;AAAA,EAAA,GAC5D;AAEJ;AChDO,MAAM,qBAAkD,CAAC;AAAA,EAC9D,OAAO;AACT,MACEF,gCAACI,SAAAA,KAAA,EAAI,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,EAAA,GACrD,UAAA;AAAA,EAAAL,2BAAAA,IAACM,SAAAA,kBAAA,EAAiB,MAAM,GAAA,CAAI;AAAA,EAC5BN,2BAAAA,IAACO,SAAAA,YAAA,EAAW,SAAQ,SAAS,UAAA,KAAA,CAAK;AAAA,GACpC;ACsHK,SAAS,aACd,OACA;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV,OAAO,YAAY;AAAA,IACnB;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAKJ,QAAM,SAAU,uCACb,CAAC,MAAc;AAKlB,QAAM,CAAC,WAAW,YAAY,IAAIC,MAAAA,SAAS,KAAK;AAKhD,QAAM,iBAAiBC,MAAAA,OAErB,oBAAI,KAAK;AACX,aAAW,OAAO,SAAS;AACzB,mBAAe,QAAQ,IAAI,OAAO,IAAI,KAAK,GAAG,GAAG;AAAA,EACnD;AAGA,QAAM,cAAcC,MAAAA,QAAgC,MAAM;AACxD,UAAM,SAAS,IAAI,IAAI,eAAe,OAAO;AAC7C,eAAW,OAAO,QAAS,QAAO,IAAI,OAAO,IAAI,KAAK,GAAG,GAAG;AAC5D,WAAO,MAAM,KAAK,OAAO,OAAA,CAAQ;AAAA,EAEnC,GAAG,CAAC,OAAO,CAAC;AAKZ,QAAM,kBAAkBD,MAAAA,OAEtB,WAAW,CAAA,IAAK,IAAI;AAEtB,QAAM,oBAAoB,CACxB,WACyD;AACzD,QACE,uBAAuB,gBAAgB,SAAS,QAAQ,UAAU,MAAM,GACxE;AACA,aAAO,gBAAgB;AAAA,IACzB;AACA,oBAAgB,UAAU;AAC1B,WAAO;AAAA,EACT;AAEA,QAAM,QAAQE,OAAAA,SAAA;AACd,QAAM,WAAWC,cAAAA,cAAc,gBAAgB,QAAQ,KAAK;AAE5D,QAAM,WAAW;AAAA,IACf,oBAAoB,cAAc,aAAa;AAAA,IAC/C,GAAI,WAAW,CAAC,QAAQ,IAAI,CAAA;AAAA,IAC5B,GAAI,MAAM,QAAQ,EAAE,IAAI,KAAK,KAAK,CAAC,EAAE,IAAI,CAAA;AAAA,EAAC;AAG5C,QAAM,qBAAqB,CACzBC,gBACA,iBACG;AACH,UAAM,UAAU,qBAAqBA,gBAAe,QAAQ;AAC5D,UAAM,kBAAkB,WAAW,aAAa,CAAC,CAAC;AAClD,UAAM,kBACJ,CAAC,YAAYA,kBAAiB,oBAC1B,kBAAkBA,cAAqC,IACvD;AAEN,WACEb,2BAAAA;AAAAA,MAACc,SAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAOD;AAAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA,IAAI;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB,CAAC,QAAA;;AACf,wBAAO,QAAQ,WAAW,OAAO,gCAAK,UAAL,YAAc;AAAA;AAAA,QAEjD,sBAAsB,CAAC,GAAG,MAAM;AAC9B,cAAI,OAAO,MAAM,YAAY,OAAO,MAAM,iBAAiB,MAAM;AACjE,cAAI,CAAC,KAAK,CAAC,UAAU,MAAM;AAC3B,iBAAO,OAAO,EAAE,KAAK,MAAM,OAAO,EAAE,KAAK;AAAA,QAC3C;AAAA,QACA,mBAAmB,CAAC,QAClB,OAAO,QAAQ,WAAW,QAAQ,CAAC,EAAC,2BAAK;AAAA,QAE3C,UAAU;AAAA,QACV,SAAS,MAAM,aAAa,IAAI;AAAA,QAChC,QAAQ,MAAM,aAAa,KAAK;AAAA,QAChC,cAAc,CAAC,SAAS,WAAW;AAQjC,gBAAoC,cAA5B,OAAK,YAAuB,IAAX,mBAAW,IAAX,CAAjB;AAGR,iBACEb,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cAEC,SAAS;AAAA,cACT;AAAA,cACA,cAAc;AAAA,YAAA;AAAA,YAHT,OAAO,OAAO,KAAK;AAAA,UAAA;AAAA,QAM9B;AAAA,QACA,aACE,WACI,CAAC,OAAO,iBACRA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,aAAa;AAAA,YACb;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA,IAGF;AAAA,QAEN;AAAA,QACA,aAAa,oCAAeA,+BAAC,oBAAA,CAAA,CAAmB;AAAA,QAChD,aAAa,CAAC,WAAW;;AACvB,gBAAM,mBACH,OAAe;AAClB,gBAAM,sBACH,4DAAgB,cAAhB,mBAAmC,eAAnC,YACA,iDAAwB;AAO3B,gBAAM,gBAAiB,OAAe;AAGtC,gBAAM,sBACH,4DAAgB,cAAhB,mBAAmC,UAAnC,YACA,iDAAwB;AAC3B,gBAAM,YAAY,kBACd,gDACG,gBACA,qBAFH;AAAA,YAGA,gBACEC,2BAAAA,KAAAC,qBAAA,EACG,UAAA;AAAA,cAAA;AAAA,cACA,yDAAoB;AAAA,cACpB,+CAAe;AAAA,YAAA,EAAA,CAClB;AAAA,UAAA,KAGF;AAEJ,iBACEF,2BAAAA;AAAAA,YAACe,SAAAA;AAAAA,YAAA,8DACK,SADL;AAAA,cAEC;AAAA,cACA;AAAA,cACA,SAAQ;AAAA,cACR,aAAa,kBAAkB,cAAc;AAAA,cAC7C,OAAO,CAAC,CAAC;AAAA,cACT;AAAA,gBACI,iBARL;AAAA,cASC,WAAW,gDACN,iDAAgB,YACf,YAAY,EAAE,OAAO,UAAA,IAAc,CAAA,IAF9B;AAAA,gBAGT,YAAY,gDACP,mBACA,qBAFO;AAAA,kBAGV,QACE,kBAAkB,YACd,CAAC,WAAW,YACZ,qDAAkB;AAAA,gBAAA;AAAA,cAC1B;AAAA,YACF;AAAA,UAAA;AAAA,QAGN;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAGA,QAAM,eAAe,CAAC,QAA4B;;AAChD,QAAI,QAAQ,QAAQ,QAAQ,OAAW,QAAO;AAC9C,QAAI,OAAO,QAAQ,SAAU,QAAO;AACpC,YAAQ,gCAAK,UAAL,YAAc;AAAA,EACxB;AAEA,QAAM,yBAAyB,CAAC,QAAa,aAAkB;AAC7D,UAAM,EAAE,aAAa;AACrB,QAAI,UAAU;AACZ,YAAM,UAAU,8BAAY,CAAA,GACzB,IAAI,CAAC,QAAuC,aAAa,GAAG,CAAC,EAC7D,OAAO,CAAC,MAAkC,MAAM,IAAI;AACvD,eAAS,MAAM;AAAA,IACjB,OAAO;AACL,eAAS,aAAa,QAAQ,CAAC;AAAA,IACjC;AAAA,EACF;AAEA,QAAM,gBAAgB;AAAA,IACpB,WACI,qBAAqB,aAAa,MAAM,OAAmB,MAAM,IACjE,mBAAmB,aAAa,MAAM,OAAiB,MAAM;AAAA,EAAA;AAGnE,SAAO,mBAAmB,eAAe,sBAAsB;AACjE;AAGO,MAAM,qBAAqB;;;;"}

package/components/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,86 @@
+import { ReactNode, SyntheticEvent } from 'react';
+import { TextFieldProps } from '@mui/material';
+import { SxProps, Theme } from '@mui/material/styles';
+/** Key estable usada para comparar values, indexar caches y como React key. */
+export type AutocompleteValueKey = string | number;
+export interface SelectOption<TValue = AutocompleteValueKey> {
+    value: TValue;
+    label: string;
+    img?: string;
+    disabled?: boolean;
+    group?: string;
+    [key: string]: any;
+}
+export type LabelPosition = 'outside' | 'floating';
+export type AutocompleteSize = 'small' | 'medium';
+export type RenderOptionItem<TValue = AutocompleteValueKey> = (item: SelectOption<TValue>) => ReactNode;
+export type RenderChipLabel<TValue = AutocompleteValueKey> = (item: SelectOption<TValue>) => ReactNode;
+export type RenderSingleValue<TValue = AutocompleteValueKey> = (item: SelectOption<TValue>) => ReactNode;
+export type BaseAutocompleteProps<TValue = AutocompleteValueKey> = {
+    label?: string;
+    options: SelectOption<TValue>[];
+    placeholder?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    loading?: boolean;
+    error?: boolean;
+    helperText?: string;
+    maxChipsToShow?: number;
+    renderOptionItem?: RenderOptionItem<TValue>;
+    renderChipLabel?: RenderChipLabel<TValue>;
+    /**
+     * Renderiza JSX custom como `startAdornment` del input en single mode.
+     * Recibe la `SelectOption` seleccionada. Útil para mostrar avatars, iconos,
+     * etc. junto al texto del label. En `multiple` no aplica (se usa `renderChipLabel`).
+     */
+    renderSingleValue?: RenderSingleValue<TValue>;
+    /**
+     * Extrae una key estable (string | number) desde el `value`. Obligatorio
+     * cuando `TValue` es un objeto: se usa para comparar values (`isOptionEqualToValue`,
+     * resolución desde el value del form), indexar el cache interno de opciones
+     * vistas y como React key en chips/options del dropdown. Para primitivos se
+     * puede omitir (default: identidad, o sea `===`).
+     */
+    getOptionKey?: (value: TValue) => AutocompleteValueKey;
+    /** Border radius del input. Default: 10. */
+    borderRadius?: number | string;
+    /** "outside" (default) = label arriba del input; "floating" = comportamiento nativo MUI. */
+    labelPosition?: LabelPosition;
+    /** Tamaño del TextField. Default: 'small'. */
+    size?: AutocompleteSize;
+    /** Texto cuando no hay coincidencias. */
+    noOptionsText?: ReactNode;
+    /** Texto cuando está cargando. */
+    loadingText?: ReactNode;
+    sx?: SxProps<Theme>;
+    /**
+     * Nombre del preset de estilo registrado en `theme.styles.Autocomplete`.
+     * - `"default"` (o ausente) = estilo built-in del paquete.
+     * - Cualquier otro string = mergea el preset encima del estilo built-in.
+     */
+    preset?: string;
+    /** Props para el TextField subyacente. */
+    textFieldProps?: Partial<TextFieldProps>;
+    /** Se dispara cada vez que el usuario escribe. Útil para llamadas a servicios
+     *  (debounce recomendado en el consumer). */
+    onInputChange?: (event: SyntheticEvent, value: string, reason: 'input' | 'reset' | 'clear' | 'blur' | 'selectOption' | 'removeOption') => void;
+    /** Valor controlado del texto de búsqueda. */
+    inputValue?: string;
+    /** Filtro custom. Para búsqueda remota pasar `(x) => x` y confiar sólo en el servicio. */
+    filterOptions?: (options: SelectOption<TValue>[], state: any) => SelectOption<TValue>[];
+    /** Permite valores arbitrarios (no solo de la lista). */
+    freeSolo?: boolean;
+    open?: boolean;
+    onOpen?: (event: SyntheticEvent) => void;
+    onClose?: (event: SyntheticEvent, reason: string) => void;
+};
+export interface AutocompleteProps<TValue = AutocompleteValueKey> extends BaseAutocompleteProps<TValue> {
+    value: TValue | TValue[] | null;
+    onChange: (val: TValue | TValue[] | null) => void;
+    name?: string;
+}
+export declare function Autocomplete<TValue = AutocompleteValueKey>(props: AutocompleteProps<TValue>): import("react/jsx-runtime").JSX.Element;
+/** Alias de `Autocomplete`. Ambos nombres son equivalentes. */
+export declare const AutocompleteSelect: typeof Autocomplete;
+export default Autocomplete;

package/components/Autocomplete/Autocomplete.definitions.d.ts

@@ -0,0 +1,16 @@
+export declare const SimpleAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\nimport { Box, Typography } from '@mui/material';\n\nconst options = [\n  { value: '10', label: '10' },\n  { value: '25', label: '25' },\n];\n\nexport const SimpleExample = () => {\n  const [value, setValue] = useState(options[1]);\n\n  return (\n    <Box sx={{ width: 250 }}>\n      <Autocomplete\n        label=\"Registros por p\u00E1gina\"\n        options={options}\n        value={value}\n        onChange={(val) => {\n          setValue(val as string);\n        }}\n      />\n      <Typography sx={{ mt: 2 }}>\n        Valor: {value}\n      </Typography>\n    </Box>\n  );\n};\n";
+export declare const WithPlaceholderAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\nimport { Box, Typography } from '@mui/material';\n\nexport const WithPlaceholderExample = () => {\n  const [value, setValue] = useState(null);\n\n  return (\n    <Box sx={{ width: 300 }}>\n      <Autocomplete\n        label=\"Seleccione una opci\u00F3n\"\n        options={[]}\n        value={value}\n        onChange={(val) => {\n         setValue(val as string);\n        }}\n        placeholder=\"Ninguna opci\u00F3n seleccionada\"\n      />\n      <Typography sx={{ mt: 2 }}>\n        {value || 'Ninguno'}\n      </Typography>\n    </Box>\n  );\n};\n";
+export declare const MultipleAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\nimport { Box } from '@mui/material';\n\nconst options = [\n  { value: 'pending', label: 'Pendiente' },\n  { value: 'approved', label: 'Aprobado' },\n];\n\nexport const MultipleExample = () => {\n  const [value, setValue] = useState([]);\n\n  return (\n    <Box sx={{ width: 400 }}>\n      <Autocomplete\n        multiple\n        options={options}\n        value={value}\n        onChange={(val) => {\n          setValue(val as string[]);\n        }}\n      />\n    </Box>\n  );\n};\n";
+export declare const MultipleWithLimitAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\n\nexport const MultipleWithLimitExample = () => {\n  const [value, setValue] = useState([]);\n\n  return (\n    <Autocomplete\n      multiple\n      maxChipsToShow={2}\n      options={[]}\n      value={value}\n      onChange={(val) => {\n        setValue(val as string[]);\n      }}\n    />\n  );\n};\n";
+export declare const CustomRenderOptionAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\nimport { Avatar, Box } from '@mui/material';\n\nconst users = [\n  { value: 'admin', label: 'Administrador', img: '...' },\n];\n\nexport const CustomRenderExample = () => {\n  const [value, setValue] = useState([]);\n\n  return (\n    <Autocomplete\n      multiple\n      options={users}\n      value={value}\n      onChange={(val) => {\n        setValue(val as string[]);\n      }}\n      renderOptionItem={(item) => (\n        <Box sx={{ display: 'flex', gap: 1 }}>\n          <Avatar src={item.img} />\n          {item.label}\n        </Box>\n      )}\n    />\n  );\n};\n";
+export declare const CustomChipRenderAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\nimport { Typography } from '@mui/material';\n\nexport const CustomChipExample = () => {\n  const [value, setValue] = useState([]);\n\n  return (\n    <Autocomplete\n      multiple\n      options={[]}\n      value={value}\n      onChange={(val) => {\n        setValue(val as string[]);\n      }}\n      renderChipLabel={(item) => (\n        <Typography variant=\"caption\">\n          {item.label.charAt(0)}\n        </Typography>\n      )}\n    />\n  );\n};\n";
+export declare const LoadingAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\n\nexport const LoadingExample = () => {\n  const [value, setValue] = useState(null);\n\n  return (\n    <Autocomplete\n      loading\n      options={[]}\n      value={value}\n      onChange={(val) => {\n\t\t\t\tsetValue(val as string);\n\t\t\t}}\n    />\n  );\n};\n";
+export declare const EmptyOptionsAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\n\nexport const EmptyExample = () => {\n  const [value, setValue] = useState(null);\n\n  return (\n    <Autocomplete\n      options={[]}\n      value={value}\n      onChange={(val) => {\n\t\t\t\tsetValue(val as string);\n\t\t\t}}\n      placeholder=\"No hay opciones\"\n    />\n  );\n};\n";
+export declare const ManyOptionsAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\n\nconst options = Array.from({ length: 50 }, (_, i) => ({\n  value: i,\n  label: 'Opci\u00F3n ' + i,\n}));\n\nexport const ManyOptionsExample = () => {\n  const [value, setValue] = useState(null);\n\n  return (\n    <Autocomplete\n      options={options}\n      value={value}\n      onChange={(val) => {\n\t\t\t\tsetValue(val as string);\n\t\t\t}}\n    />\n  );\n};\n";
+export declare const WithErrorAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\nimport { Box } from '@mui/material';\n\nconst options = [\n  { value: '10', label: '10' },\n  { value: '25', label: '25' },\n];\n\nexport const WithErrorExample = () => {\n  const [value, setValue] = useState<string | null>(null);\n  return (\n    <Box sx={{ width: 300 }}>\n      <Autocomplete\n        label=\"Cantidad\"\n        options={options}\n        value={value}\n        onChange={(val) => setValue(val as string | null)}\n        error={!value}\n        helperText={!value ? 'Debes seleccionar una cantidad' : ' '}\n      />\n    </Box>\n  );\n};\n";
+export declare const LabelPositionAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\nimport { Box, Stack } from '@mui/material';\n\nconst options = [\n  { value: 'a', label: 'Opci\u00F3n A' },\n  { value: 'b', label: 'Opci\u00F3n B' },\n];\n\nexport const LabelPositionExample = () => {\n  const [a, setA] = useState<string | null>(null);\n  const [b, setB] = useState<string | null>(null);\n  return (\n    <Stack spacing={3} sx={{ width: 320 }}>\n      <Autocomplete\n        label=\"Outside (default)\"\n        labelPosition=\"outside\"\n        options={options}\n        value={a}\n        onChange={(val) => setA(val as string | null)}\n      />\n      <Autocomplete\n        label=\"Floating\"\n        labelPosition=\"floating\"\n        options={options}\n        value={b}\n        onChange={(val) => setB(val as string | null)}\n      />\n    </Stack>\n  );\n};\n";
+export declare const CustomBorderRadiusAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\nimport { Box, Stack } from '@mui/material';\n\nconst options = [\n  { value: '10', label: '10' },\n  { value: '25', label: '25' },\n];\n\nexport const CustomBorderRadiusExample = () => {\n  const [a, setA] = useState<string | null>(null);\n  const [b, setB] = useState<string | null>(null);\n  const [c, setC] = useState<string | null>(null);\n  return (\n    <Stack spacing={2} sx={{ width: 300 }}>\n      <Autocomplete label=\"0\" borderRadius={0} options={options} value={a} onChange={(v) => setA(v as string | null)} />\n      <Autocomplete label=\"10 (default)\" borderRadius={10} options={options} value={b} onChange={(v) => setB(v as string | null)} />\n      <Autocomplete label=\"24 (pill)\" borderRadius={24} options={options} value={c} onChange={(v) => setC(v as string | null)} />\n    </Stack>\n  );\n};\n";
+export declare const EmptyWithPlaceholderAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\nimport { Box } from '@mui/material';\n\nconst options = [\n  { value: 'mx', label: 'M\u00E9xico' },\n  { value: 'co', label: 'Colombia' },\n  { value: 'ar', label: 'Argentina' },\n];\n\nexport const EmptyWithPlaceholderExample = () => {\n  const [value, setValue] = useState<string | null>(null);\n  return (\n    <Box sx={{ width: 300 }}>\n      <Autocomplete\n        label=\"Pa\u00EDs\"\n        placeholder=\"Buscar pa\u00EDs...\"\n        options={options}\n        value={value}\n        onChange={(val) => setValue(val as string | null)}\n      />\n    </Box>\n  );\n};\n";
+export declare const RHFAutocompleteDefinition = "\nimport React from 'react';\nimport { Controller, useForm } from 'react-hook-form';\nimport Autocomplete from './Autocomplete';\nimport { Box, Button, Stack } from '@mui/material';\n\nconst options = [\n  { value: 'mx', label: 'M\u00E9xico' },\n  { value: 'co', label: 'Colombia' },\n  { value: 'ar', label: 'Argentina' },\n];\n\ntype FormValues = { country: string | null };\n\nexport const RHFExample = () => {\n  const { control, handleSubmit } = useForm<FormValues>({\n    defaultValues: { country: null },\n  });\n\n  return (\n    <Box component=\"form\" onSubmit={handleSubmit((data) => console.log(data))}>\n      <Stack spacing={2} sx={{ width: 320 }}>\n        <Controller\n          name=\"country\"\n          control={control}\n          rules={{ required: 'Campo requerido' }}\n          render={({ field, fieldState }) => (\n            <Autocomplete\n              label=\"Pa\u00EDs\"\n              placeholder=\"Seleccione...\"\n              options={options}\n              value={field.value}\n              onChange={(v) => field.onChange(v as string | null)}\n              error={!!fieldState.error}\n              helperText={fieldState.error?.message}\n            />\n          )}\n        />\n        <Button type=\"submit\" variant=\"contained\">Guardar</Button>\n      </Stack>\n    </Box>\n  );\n};\n";
+export declare const ObjectValueAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete, { SelectOption } from './Autocomplete';\nimport { Box, Typography } from '@mui/material';\n\ntype Country = { id: string; iso: string; name: string };\n\nconst options: SelectOption<Country>[] = [\n  { value: { id: '1', iso: 'MX', name: 'M\u00E9xico' }, label: 'M\u00E9xico' },\n  { value: { id: '2', iso: 'CO', name: 'Colombia' }, label: 'Colombia' },\n  { value: { id: '3', iso: 'AR', name: 'Argentina' }, label: 'Argentina' },\n];\n\n// Obligatorio cuando TValue es objeto: extrae una key estable (string|number).\nconst getCountryKey = (c: Country) => c.id;\n\nexport const ObjectValueExample = () => {\n  const [value, setValue] = useState<Country | null>(null);\n\n  return (\n    <Box sx={{ width: 320 }}>\n      <Autocomplete<Country>\n        label=\"Pa\u00EDs\"\n        options={options}\n        value={value}\n        onChange={(v) => setValue(v as Country | null)}\n        getOptionKey={getCountryKey}\n      />\n      <Typography>{value ? value.iso : 'Ninguno'}</Typography>\n    </Box>\n  );\n};\n";
+export declare const AsyncServiceAutocompleteDefinition: string;