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

package/components/AppBar/AppBar.js

@@ -0,0 +1,129 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+import { AppBar as AppBar$1, Toolbar, Tooltip, IconButton } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import { r as resolvePreset } from "../../resolvePreset-B-IB0ehH.js";
+import MenuIcon from "@mui/icons-material/Menu";
+import MenuOpenIcon from "@mui/icons-material/MenuOpen";
+const AppBarContext = createContext(null);
+function useAppBarContext() {
+  const ctx = useContext(AppBarContext);
+  return ctx != null ? ctx : {};
+}
+function buildAppBarSx({
+  height = 64,
+  transparent = false
+}) {
+  return (theme) => __spreadProps(__spreadValues({
+    minHeight: height,
+    justifyContent: "center",
+    backgroundImage: "none"
+  }, transparent && {
+    backgroundColor: "transparent",
+    boxShadow: "none",
+    borderBottom: `1px solid ${theme.palette.divider}`
+  }), {
+    "& .MuiToolbar-root": {
+      minHeight: height,
+      gap: 1.5
+    }
+  });
+}
+function AppBar({
+  children,
+  position = "sticky",
+  color = "default",
+  elevation = 1,
+  height = 64,
+  onMenuToggle,
+  menuOpen,
+  preset,
+  sx,
+  toolbarSx,
+  appBarProps
+}) {
+  const theme = useTheme();
+  const presetSx = resolvePreset("AppBar", preset, theme);
+  const rootSx = [
+    buildAppBarSx({ height, transparent: color === "transparent" }),
+    ...presetSx ? [presetSx] : [],
+    ...Array.isArray(sx) ? sx : sx ? [sx] : []
+  ];
+  const contextValue = useMemo(
+    () => ({ onMenuToggle, menuOpen }),
+    [onMenuToggle, menuOpen]
+  );
+  return /* @__PURE__ */ jsx(AppBarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    AppBar$1,
+    __spreadProps(__spreadValues({
+      position,
+      color,
+      elevation,
+      sx: rootSx
+    }, appBarProps), {
+      children: /* @__PURE__ */ jsx(Toolbar, { sx: toolbarSx, children })
+    })
+  ) });
+}
+function AppBarMenuToggle({
+  onClick,
+  menuOpen,
+  closedIcon,
+  openIcon,
+  tooltip = "Menú",
+  ariaLabel,
+  size = "medium",
+  hideIfNoHandler = true,
+  sx,
+  className
+}) {
+  var _a;
+  const ctx = useAppBarContext();
+  const handler = onClick != null ? onClick : ctx.onMenuToggle;
+  const open = (_a = menuOpen != null ? menuOpen : ctx.menuOpen) != null ? _a : false;
+  if (!handler && hideIfNoHandler) {
+    return null;
+  }
+  const icon = open ? openIcon != null ? openIcon : /* @__PURE__ */ jsx(MenuOpenIcon, {}) : closedIcon != null ? closedIcon : /* @__PURE__ */ jsx(MenuIcon, {});
+  return /* @__PURE__ */ jsx(Tooltip, { title: tooltip, arrow: true, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      size,
+      edge: "start",
+      color: "inherit",
+      "aria-label": ariaLabel != null ? ariaLabel : tooltip,
+      onClick: handler,
+      disabled: !handler,
+      className,
+      sx,
+      children: icon
+    }
+  ) }) });
+}
+export {
+  AppBar,
+  AppBarContext,
+  AppBarMenuToggle,
+  AppBar as default,
+  useAppBarContext
+};
+//# sourceMappingURL=AppBar.js.map

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

@@ -18,115 +18,296 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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");
-require("react");
+const React = require("react");
 const material = require("@mui/material");
-require("@mui/icons-material/Clear");
-const system = require("@mui/system");
-const StyledAutocomplete = system.styled(material.Autocomplete)(
-  ({ theme }) => ({
-    "& .MuiOutlinedInput-root": {
-      maxHeight: "36px",
-      padding: "8px 10px",
-      borderRadius: "10px",
-      display: "flex",
-      alignItems: "center",
-      fontSize: "14px"
-    },
-    "& .MuiAutocomplete-inputRoot": {
-      padding: "0 !important"
-    },
+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": {
-      padding: "0 !important",
-      height: "28px",
-      marginLeft: "8px"
-    },
-    "& .MuiOutlinedInput-notchedOutline": {
-      marginBottom: "-4px",
-      borderRadius: "10px"
+      paddingTop: "4px",
+      paddingBottom: "4px"
     },
-    "& .MuiOutlinedInput-notchedOutline > legend": {
-      display: "none"
-    },
-    "& .MuiAutocomplete-endAdornment": {
-      top: "50%",
-      transform: "translateY(-50%)"
+    // Contenedor del input (donde viven los chips en modo multiple).
+    "& .MuiAutocomplete-inputRoot": {
+      paddingTop: "4px",
+      paddingBottom: "4px"
     }
-  })
-);
-function AutocompleteSelect(props) {
+  }
+});
+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 = [],
-    value,
-    onChange,
+    options,
     placeholder,
     multiple = false,
     disabled = false,
+    readOnly = false,
     loading = false,
-    error = false,
+    error: errorProp = false,
     helperText,
+    maxChipsToShow = 3,
     renderOptionItem,
     renderChipLabel,
-    maxChipsToShow = 3
+    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 renderAutocomplete = (value2, onChange2) => {
-    var _a, _b;
+  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.Box,
+      material.Autocomplete,
       {
-        sx: {
-          width: "100%",
-          display: "grid",
-          marginBottom: "10px",
-          marginTop: "10px"
+        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 : "";
         },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          StyledAutocomplete,
-          {
-            multiple,
-            options,
-            value: multiple ? (_a = options.filter(
-              (o) => value2 == null ? void 0 : value2.includes(o.value)
-            )) != null ? _a : [] : (_b = options.find((o) => o.value === value2)) != null ? _b : null,
-            disabled,
-            loading,
-            getOptionLabel: (opt) => {
-              var _a2;
-              return (_a2 = opt == null ? void 0 : opt.label) != null ? _a2 : "";
+        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
             },
-            isOptionEqualToValue: (a, b) => a.value === b.value,
-            onChange: onChange2,
-            noOptionsText: "No hay opciones",
-            loadingText: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 20 }),
-              /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { children: "Cargando..." })
-            ] }),
-            renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
-              material.TextField,
-              __spreadProps(__spreadValues({}, params), {
-                placeholder,
-                error,
-                helperText
-              })
-            )
+            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 handleChangeInternal = (event, newValue) => {
+  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) => opt.value);
-      onChange == null ? void 0 : onChange(values);
+      const values = (newValue != null ? newValue : []).map((opt) => extractValue(opt)).filter((v) => v !== null);
+      onChange(values);
     } else {
-      const value2 = (_a = newValue == null ? void 0 : newValue.value) != null ? _a : "";
-      onChange == null ? void 0 : onChange(value2);
+      onChange(extractValue(newValue));
     }
   };
-  return renderAutocomplete(value, handleChangeInternal);
+  const resolvedValue = stabilizeResolved(
+    multiple ? resolveMultipleValue(resolvePool, props.value, getKey) : resolveSingleValue(resolvePool, props.value, getKey)
+  );
+  return renderAutocomplete(resolvedValue, handleControlledChange);
 }
-exports.Autocomplete = AutocompleteSelect;
+const AutocompleteSelect = Autocomplete;
+exports.Autocomplete = Autocomplete;
+exports.AutocompleteSelect = AutocompleteSelect;
+exports.default = Autocomplete;
 //# sourceMappingURL=Autocomplete.cjs.map