@soyfri/shared-library 1.3.7 → 1.3.9

package/Select-BcLkyHSE.js

@@ -0,0 +1,412 @@
+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;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default, { useMemo, isValidElement, useState, useRef, useEffect } from "react";
+import { Select as Select$1, InputLabel, OutlinedInput, ListSubheader, TextField, MenuItem, Box, CircularProgress, Typography, ListItemIcon, FormControl, Chip, Avatar } from "@mui/material";
+import { styled } from "@mui/system";
+import ClearIcon from "@mui/icons-material/Clear";
+import CheckIcon from "@mui/icons-material/Check";
+import { Controller } from "react-hook-form";
+function Option(_props) {
+  return null;
+}
+Option.displayName = "Option";
+const StyledSelect = styled(Select$1)(({ theme }) => ({
+  "& .MuiInputBase-root": {
+    maxHeight: "4px",
+    padding: "8px 10px",
+    borderRadius: "10px",
+    display: "flex",
+    alignItems: "center",
+    fontSize: "14px"
+  },
+  "& .MuiSelect-select": {
+    padding: "0 !important",
+    height: "28px !important",
+    display: "flex",
+    alignItems: "center",
+    marginLeft: "8px"
+  },
+  "& .MuiOutlinedInput-notchedOutline": {
+    marginBottom: "-4px !important",
+    borderRadius: "10px"
+  },
+  "& .MuiSelect-icon": {
+    top: "50%",
+    transform: "translateY(-50%)"
+  },
+  "& .MuiOutlinedInput-notchedOutline > legend": {
+    display: "none"
+  }
+}));
+const StyledLabel = styled(InputLabel)(({ theme }) => ({
+  "&.MuiInputLabel-root": {
+    top: "50%",
+    transform: "translate(14px, -50%)"
+  },
+  "&.MuiInputLabel-shrink": {
+    transform: "translate(1px, -200%) scale(0.75)",
+    fontSize: "16px",
+    "> legend": {
+      display: "none"
+    }
+  },
+  "&.MuiInputLabel-animated": {
+    "&.MuiInputLabel-shrink": {
+      display: "block"
+    }
+  }
+}));
+const StyledOutlinedInput = styled(OutlinedInput)(({ theme }) => ({
+  "& .MuiInputBase-root": {
+    maxHeight: "34px",
+    padding: "8px 10px",
+    borderRadius: "10px",
+    display: "flex",
+    alignItems: "center",
+    fontSize: "14px",
+    " & > .MuiAvatar-img": {
+      width: "14px",
+      height: "14px"
+    }
+  },
+  "& .MuiInputBase-input": {
+    padding: "0 !important",
+    height: "18px",
+    display: "flex",
+    alignItems: "center"
+  },
+  "& .MuiOutlinedInput-notchedOutline": {
+    border: "0.7px solid",
+    borderColor: "#e0e0e0"
+  }
+}));
+function Select(props) {
+  const _a = props, {
+    label,
+    options = [],
+    value,
+    onChange,
+    defaultValue,
+    size = "medium",
+    multiple = false,
+    filterable = false,
+    placeholder,
+    children,
+    maxHeight = 300,
+    maxWidth,
+    maxChipsToShow = 3,
+    renderChipLabel,
+    chipVariant = "outlined",
+    loadOptions,
+    loadingMessage = "Cargando opciones...",
+    noOptionsMessage = "No hay opciones",
+    debounceTimeout = 300,
+    disabled = false,
+    error = false,
+    helperText
+  } = _a, rest = __objRest(_a, [
+    "label",
+    "options",
+    "value",
+    "onChange",
+    "defaultValue",
+    "size",
+    "multiple",
+    "filterable",
+    "placeholder",
+    "children",
+    "maxHeight",
+    "maxWidth",
+    "maxChipsToShow",
+    "renderChipLabel",
+    "chipVariant",
+    "loadOptions",
+    "loadingMessage",
+    "noOptionsMessage",
+    "debounceTimeout",
+    "disabled",
+    "error",
+    "helperText"
+  ]);
+  const isRHFMode = "control" in rest && rest.control !== void 0;
+  const customRender = useMemo(() => {
+    var _a2;
+    if (React__default.Children.count(children) === 1) {
+      const child = React__default.Children.only(children);
+      if (isValidElement(child) && ((_a2 = child.type) == null ? void 0 : _a2.displayName) === "Option") {
+        return child.props.children;
+      }
+    }
+    return null;
+  }, [children]);
+  const [search, setSearch] = useState("");
+  const [asyncOptions, setAsyncOptions] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const debounceTimerRef = useRef(null);
+  const searchInputRef = useRef(null);
+  const isAsync = typeof loadOptions === "function";
+  const currentOptions = isAsync ? asyncOptions : options;
+  useEffect(() => {
+    if (isAsync) {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      if (search) {
+        setLoading(true);
+        debounceTimerRef.current = window.setTimeout(() => {
+          loadOptions(search).then((loadedOpts) => {
+            setAsyncOptions(loadedOpts);
+          }).finally(() => {
+            setLoading(false);
+            if (searchInputRef.current) {
+              searchInputRef.current.focus();
+            }
+          });
+        }, debounceTimeout);
+      } else {
+        setAsyncOptions([]);
+        setLoading(false);
+        if (searchInputRef.current) {
+          searchInputRef.current.focus();
+        }
+      }
+    }
+  }, [search, isAsync, loadOptions, debounceTimeout]);
+  const filteredOptions = useMemo(() => {
+    if (isAsync) {
+      return currentOptions;
+    }
+    if (!filterable || !search) return currentOptions;
+    return currentOptions.filter(
+      (opt) => opt.label.toLowerCase().includes(search.toLowerCase())
+    );
+  }, [search, filterable, currentOptions, isAsync]);
+  const groupedOptions = useMemo(() => {
+    const groups = {};
+    filteredOptions.forEach((opt) => {
+      const group = opt.group || "__default";
+      if (!groups[group]) groups[group] = [];
+      groups[group].push(opt);
+    });
+    return groups;
+  }, [filteredOptions]);
+  const renderValue = (selected) => {
+    var _a2;
+    if (!selected || Array.isArray(selected) && selected.length === 0) {
+      return /* @__PURE__ */ jsx(Typography, { sx: { color: "text.disabled" }, children: placeholder || "" });
+    }
+    if (!multiple) {
+      const item = currentOptions.find((opt) => opt.value === selected);
+      return renderChipLabel && item ? renderChipLabel(item) : (_a2 = item == null ? void 0 : item.label) != null ? _a2 : String(selected);
+    }
+    const selectedValuesArray = selected;
+    const displayedChips = selectedValuesArray.slice(0, maxChipsToShow);
+    const hiddenChipsCount = selectedValuesArray.length - maxChipsToShow;
+    return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: [
+      displayedChips.map((val) => {
+        const item = currentOptions.find((o) => o.value === val);
+        if (!item) return null;
+        const handleDelete = (chipValue) => {
+          const newSelected = value.filter((v) => v !== chipValue);
+          onChange == null ? void 0 : onChange(newSelected);
+        };
+        return /* @__PURE__ */ jsx(
+          Chip,
+          {
+            variant: chipVariant,
+            color: "primary",
+            label: renderChipLabel ? renderChipLabel(item) : item.label,
+            avatar: item.img ? /* @__PURE__ */ jsx(
+              Avatar,
+              {
+                sx: {
+                  "& > .MuiAvatar-root, .MuiChip-avatar": {
+                    backgroundColor: "red"
+                  }
+                },
+                src: item.img
+              }
+            ) : void 0,
+            onDelete: () => handleDelete(val),
+            deleteIcon: /* @__PURE__ */ jsx(ClearIcon, { sx: { fontSize: "12px !important" } }),
+            sx: {
+              height: "27px",
+              marginTop: "1px"
+            }
+          },
+          val
+        );
+      }),
+      hiddenChipsCount > 0 && /* @__PURE__ */ jsx(
+        Chip,
+        {
+          sx: {
+            height: "27px",
+            marginTop: "0px"
+          },
+          label: `+${hiddenChipsCount} más`,
+          variant: chipVariant
+        }
+      )
+    ] });
+  };
+  const menuItems = useMemo(() => {
+    const items = [];
+    if (filterable || isAsync) {
+      items.push(
+        /* @__PURE__ */ jsx(ListSubheader, { sx: { px: 2, pt: 1, pb: 1, backgroundColor: "background.paper", zIndex: 1, position: "sticky", top: 0 }, children: /* @__PURE__ */ jsx(
+          TextField,
+          {
+            inputRef: searchInputRef,
+            placeholder: "Buscar...",
+            variant: "standard",
+            size: "small",
+            fullWidth: true,
+            value: search,
+            onChange: (e) => setSearch(e.target.value),
+            inputProps: { autoFocus: true },
+            onClick: (e) => e.stopPropagation(),
+            onKeyDown: (e) => e.stopPropagation()
+          }
+        ) }, "search-header")
+      );
+    }
+    if (loading) {
+      items.push(
+        /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+          /* @__PURE__ */ jsx(CircularProgress, { size: 20 }),
+          /* @__PURE__ */ jsx(Typography, { children: loadingMessage })
+        ] }) }, "loading-message")
+      );
+    } else if (Object.keys(groupedOptions).length === 0 || Object.keys(groupedOptions).length === 1 && groupedOptions["__default"] && groupedOptions["__default"].length === 0) {
+      items.push(
+        /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: /* @__PURE__ */ jsx(Typography, { children: noOptionsMessage }) }, "no-options-message")
+      );
+    } else {
+      Object.entries(groupedOptions).forEach(([group, opts]) => {
+        if (group !== "__default") {
+          items.push(
+            /* @__PURE__ */ jsx(ListSubheader, { disableSticky: true, children: group }, group)
+          );
+        }
+        opts.forEach((opt) => {
+          const isSelected = multiple ? value == null ? void 0 : value.includes(opt.value) : value === opt.value;
+          items.push(
+            /* @__PURE__ */ jsxs(MenuItem, { value: opt.value, disabled: opt.disabled, selected: isSelected, children: [
+              /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 32 }, children: isSelected && /* @__PURE__ */ jsx(CheckIcon, { sx: { color: "green" } }) }),
+              customRender ? customRender(opt) : opt.label
+            ] }, opt.value)
+          );
+        });
+      });
+    }
+    return items;
+  }, [groupedOptions, customRender, filterable, isAsync, search, loading, loadingMessage, noOptionsMessage, multiple, value]);
+  const showLabel = label && !placeholder;
+  const handleChangeInternal = (event, rhfOnChange) => {
+    const newValue = event.target.value;
+    if (isRHFMode) {
+      rhfOnChange == null ? void 0 : rhfOnChange(newValue);
+    } else {
+      onChange == null ? void 0 : onChange(newValue);
+    }
+  };
+  const isRHFModeRender = "control" in rest && rest.control !== void 0;
+  const renderSelect = (selectValue, selectOnChange, onBlur, inputRef) => /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, size, error, disabled, children: [
+    showLabel && /* @__PURE__ */ jsx(StyledLabel, { children: label }),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          width: "100%",
+          display: "grid",
+          marginBottom: "10px",
+          marginTop: "10px"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            StyledSelect,
+            __spreadProps(__spreadValues({
+              label,
+              value: selectValue != null ? selectValue : multiple ? [] : "",
+              defaultValue,
+              multiple,
+              onChange: selectOnChange,
+              onBlur,
+              renderValue,
+              displayEmpty: true,
+              input: /* @__PURE__ */ jsx(StyledOutlinedInput, { label }),
+              disabled,
+              MenuProps: {
+                PaperProps: {
+                  style: {
+                    maxHeight,
+                    maxWidth
+                  }
+                }
+              },
+              inputRef
+            }, rest), {
+              children: menuItems
+            })
+          ),
+          helperText && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "error", sx: { mt: 1 }, children: helperText })
+        ]
+      }
+    )
+  ] });
+  if (isRHFModeRender) {
+    const rhfProps = rest;
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        name: rhfProps.name,
+        control: rhfProps.control,
+        rules: rhfProps.validation,
+        render: ({ field, fieldState: { error: error2 } }) => renderSelect(
+          field.value,
+          (e) => handleChangeInternal(e, field.onChange),
+          field.onBlur,
+          field.ref
+        )
+      }
+    );
+  } else {
+    return renderSelect(value, (e) => handleChangeInternal(e));
+  }
+}
+export {
+  Option as O,
+  Select as S
+};
+//# sourceMappingURL=Select-BcLkyHSE.js.map

package/Select-BcLkyHSE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select-BcLkyHSE.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["import React, { ReactElement, useMemo, useState, Children, isValidElement, useEffect, useRef } from 'react';\nimport {\n    FormControl,\n    InputLabel,\n    MenuItem,\n    Select as MuiSelect,\n    Chip,\n    Avatar,\n    Box,\n    Typography,\n    OutlinedInput,\n    TextField,\n    ListSubheader,\n    CircularProgress,\n    ListItemIcon,\n    SelectChangeEvent,\n} from '@mui/material';\nimport { styled } from '@mui/system';\nimport ClearIcon from '@mui/icons-material/Clear';\nimport CheckIcon from '@mui/icons-material/Check';\nimport { Controller, Control, RegisterOptions } from 'react-hook-form';\n\nexport interface SelectOption {\n    value: string | number;\n    label: string;\n    img?: string;\n    disabled?: boolean;\n    group?: string;\n    [key: string]: any;\n}\n\ntype RenderOptionItem = (item: SelectOption) => React.ReactNode;\ntype RenderChipLabel = (item: SelectOption) => React.ReactNode;\n\n// --- Definición de Props con Union Type ---\n\n// Props comunes para ambos modos\ninterface BaseSelectProps<TValue extends SelectOption['value'] = SelectOption['value']> {\n    label?: string;\n    options?: SelectOption[];\n    defaultValue?: TValue | TValue[];\n    size?: 'small' | 'medium';\n    multiple?: boolean;\n    filterable?: boolean;\n    placeholder?: string;\n    children?: ReactElement<{ children: RenderOptionItem }>;\n    maxHeight?: number | string;\n    maxWidth?: number | string;\n    maxChipsToShow?: number;\n    renderChipLabel?: RenderChipLabel;\n    chipVariant?: 'outlined' | 'filled';\n    loadOptions?: (inputValue: string) => Promise<SelectOption[]>;\n    loadingMessage?: React.ReactNode;\n    noOptionsMessage?: React.ReactNode;\n    debounceTimeout?: number;\n    disabled?: boolean;\n    error?: boolean;\n    helperText?: string;\n}\n\n// Props para el modo React Hook Form\ninterface RHFSelectProps<TValue extends SelectOption['value'] = SelectOption['value']> extends BaseSelectProps<TValue> {\n    name: string;\n    control: Control<any>;\n    validation?: RegisterOptions;\n    value?: TValue | TValue[];\n    onChange?: (val: TValue | TValue[]) => void;\n}\n\n// Props para el modo controlado estándar\ninterface StandardSelectProps<TValue extends SelectOption['value'] = SelectOption['value']> extends BaseSelectProps<TValue> {\n    name?: string;\n    control?: never;\n    validation?: never;\n    value: TValue | TValue[];\n    onChange: (val: TValue | TValue[]) => void;\n}\n\nexport type SelectProps<TValue extends SelectOption['value'] = SelectOption['value']> = RHFSelectProps<TValue> | StandardSelectProps<TValue>;\n\nexport interface OptionProps {\n    children: RenderOptionItem;\n}\n\nexport function Option(_props: OptionProps) {\n    return null;\n}\nOption.displayName = 'Option';\n\nconst StyledSelect = styled(MuiSelect)(({ theme }) => ({\n  '& .MuiInputBase-root': {\n    maxHeight: '4px',\n    padding: '8px 10px',\n    borderRadius: '10px',\n    display: 'flex',\n    alignItems: 'center',\n    fontSize: '14px',\n  },\n  '& .MuiSelect-select': {\n    padding: '0 !important',\n    height: '28px !important',\n    display: 'flex',\n    alignItems: 'center',\n    marginLeft: '8px'\n  },\n  '& .MuiOutlinedInput-notchedOutline': {\n    marginBottom: '-4px !important',\n    borderRadius: '10px',\n  },\n  '& .MuiSelect-icon': {\n    top: '50%',\n    transform: 'translateY(-50%)',\n  },\n  '& .MuiOutlinedInput-notchedOutline > legend':{\n    display: 'none',\n  },\n}));\n\nconst StyledLabel = styled(InputLabel)(({theme}) =>({\n    '&.MuiInputLabel-root': {\n        top: '50%',\n        transform: 'translate(14px, -50%)',\n    },\n    '&.MuiInputLabel-shrink': {\n        transform: 'translate(1px, -200%) scale(0.75)',\n        fontSize: '16px',\n        '> legend': {\n            display: 'none',\n        }\n    },\n    '&.MuiInputLabel-animated': {\n      '&.MuiInputLabel-shrink': {\n          display: 'block'\n      }\n    }\n}));\n\nconst StyledOutlinedInput = styled(OutlinedInput)(({ theme }) => ({\n    '& .MuiInputBase-root': {\n        maxHeight: '34px',\n        padding: '8px 10px',\n        borderRadius: '10px',\n        display: 'flex',\n        alignItems: 'center',\n        fontSize: '14px',\n        ' & > .MuiAvatar-img': {\n            width: '14px',\n            height: '14px',\n        }\n    },\n    '& .MuiInputBase-input': {\n        padding: '0 !important',\n        height: '18px',\n        display: 'flex',\n        alignItems: 'center',\n    },\n    '& .MuiOutlinedInput-notchedOutline': {\n        border: '0.7px solid',\n        borderColor: '#e0e0e0',\n    },\n}));\n\nexport function Select<TValue extends SelectOption['value'] = SelectOption['value']>(props: SelectProps<TValue>) {\n    const {\n        label,\n        options = [],\n        value,\n        onChange,\n        defaultValue,\n        size = 'medium',\n        multiple = false,\n        filterable = false,\n        placeholder,\n        children,\n        maxHeight = 300,\n        maxWidth,\n        maxChipsToShow = 3,\n        renderChipLabel,\n        chipVariant = 'outlined',\n        loadOptions,\n        loadingMessage = 'Cargando opciones...',\n        noOptionsMessage = 'No hay opciones',\n        debounceTimeout = 300,\n        disabled = false,\n        error = false,\n        helperText,\n        ...rest\n    } = props;\n\n    const isRHFMode = 'control' in rest && rest.control !== undefined;\n\n    const customRender: RenderOptionItem | null = useMemo(() => {\n        if (React.Children.count(children) === 1) {\n            const child = React.Children.only(children);\n            if (isValidElement(child) && (child.type as any)?.displayName === 'Option') {\n                return (child.props as OptionProps).children;\n            }\n        }\n        return null;\n    }, [children]);\n\n    const [search, setSearch] = useState('');\n    const [asyncOptions, setAsyncOptions] = useState<SelectOption[]>([]);\n    const [loading, setLoading] = useState(false);\n    const debounceTimerRef = useRef<number | null>(null);\n\n    const searchInputRef = useRef<HTMLInputElement>(null);\n\n    const isAsync = typeof loadOptions === 'function';\n    const currentOptions = isAsync ? asyncOptions : options;\n\n    useEffect(() => {\n        if (isAsync) {\n            if (debounceTimerRef.current) {\n                clearTimeout(debounceTimerRef.current);\n            }\n\n            if (search) {\n                setLoading(true);\n                debounceTimerRef.current = window.setTimeout(() => {\n                    loadOptions(search)\n                        .then(loadedOpts => {\n                            setAsyncOptions(loadedOpts);\n                        })\n                        .finally(() => {\n                            setLoading(false);\n                            if (searchInputRef.current) {\n                                searchInputRef.current.focus();\n                            }\n                        });\n                }, debounceTimeout);\n            } else {\n                setAsyncOptions([]);\n                setLoading(false);\n                if (searchInputRef.current) {\n                    searchInputRef.current.focus();\n                }\n            }\n        }\n    }, [search, isAsync, loadOptions, debounceTimeout]);\n\n    const filteredOptions = useMemo(() => {\n        if (isAsync) {\n            return currentOptions;\n        }\n        if (!filterable || !search) return currentOptions;\n        return currentOptions.filter(opt =>\n            opt.label.toLowerCase().includes(search.toLowerCase())\n        );\n    }, [search, filterable, currentOptions, isAsync]);\n\n    const groupedOptions = useMemo(() => {\n        const groups: Record<string, SelectOption[]> = {};\n        filteredOptions.forEach(opt => {\n            const group = opt.group || '__default';\n            if (!groups[group]) groups[group] = [];\n            groups[group].push(opt);\n        });\n        return groups;\n    }, [filteredOptions]);\n\n    const renderValue = (selected: any) => {\n        if (!selected || (Array.isArray(selected) && selected.length === 0)) {\n            return <Typography sx={{ color: 'text.disabled' }}>{placeholder || ''}</Typography>;\n        }\n\n        if (!multiple) {\n            const item = currentOptions.find((opt) => opt.value === selected);\n            return renderChipLabel && item ? renderChipLabel(item) : (item?.label ?? String(selected));\n        }\n\n        const selectedValuesArray = selected as TValue[];\n        const displayedChips = selectedValuesArray.slice(0, maxChipsToShow);\n        const hiddenChipsCount = selectedValuesArray.length - maxChipsToShow;\n\n        return (\n            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>\n                {displayedChips.map((val) => {\n                    const item = currentOptions.find((o) => o.value === val);\n                    if (!item) return null;\n\n                    const handleDelete = (chipValue: TValue) => {\n                        const newSelected = (value as TValue[]).filter(v => v !== chipValue);\n                        (onChange as (val: TValue | TValue[]) => void)?.(newSelected);\n                    };\n\n                    return (\n                        <Chip\n                            variant={chipVariant}\n                            color=\"primary\"\n                            key={val}\n                            label={renderChipLabel ? renderChipLabel(item) : item.label}\n                            avatar={item.img ?\n                                <Avatar\n                                    sx={\n                                        {\n                                            '& > .MuiAvatar-root, .MuiChip-avatar': {\n                                                backgroundColor: 'red',\n                                            }\n                                        }\n                                    }\n                                    src={item.img}\n                                /> : undefined}\n                            onDelete={() => handleDelete(val)}\n                            deleteIcon={<ClearIcon sx={{ fontSize: '12px !important' }} />}\n                            sx={\n                                {\n                                    height: '27px',\n                                    marginTop: '1px',\n                                }\n                            }\n                        />\n                    );\n                })}\n                {hiddenChipsCount > 0 && (\n                    <Chip\n                        sx={{\n                            height: '27px',\n                            marginTop: '0px',\n                        }}\n                        label={`+${hiddenChipsCount} más`} variant={chipVariant} />\n                )}\n            </Box>\n        );\n    };\n\n    const menuItems = useMemo(() => {\n        const items: React.ReactNode[] = [];\n\n        if (filterable || isAsync) {\n            items.push(\n                <ListSubheader key=\"search-header\" sx={{ px: 2, pt: 1, pb: 1, backgroundColor: 'background.paper', zIndex: 1, position: 'sticky', top: 0 }}>\n                    <TextField\n                        inputRef={searchInputRef}\n                        placeholder=\"Buscar...\"\n                        variant=\"standard\"\n                        size=\"small\"\n                        fullWidth\n                        value={search}\n                        onChange={(e) => setSearch(e.target.value)}\n                        inputProps={{ autoFocus: true }}\n                        onClick={(e) => e.stopPropagation()}\n                        onKeyDown={(e) => e.stopPropagation()}\n                    />\n                </ListSubheader>\n            );\n        }\n\n        if (loading) {\n            items.push(\n                <MenuItem key=\"loading-message\" disabled>\n                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n                        <CircularProgress size={20} />\n                        <Typography>{loadingMessage}</Typography>\n                    </Box>\n                </MenuItem>\n            );\n        } else if (Object.keys(groupedOptions).length === 0 || (Object.keys(groupedOptions).length === 1 && groupedOptions['__default'] && groupedOptions['__default'].length === 0)) {\n            items.push(\n                <MenuItem key=\"no-options-message\" disabled>\n                    <Typography>{noOptionsMessage}</Typography>\n                </MenuItem>\n            );\n        } else {\n            Object.entries(groupedOptions).forEach(([group, opts]) => {\n                if (group !== '__default') {\n                    items.push(\n                        <ListSubheader key={group} disableSticky>{group}</ListSubheader>\n                    );\n                }\n                opts.forEach((opt) => {\n                    const isSelected = multiple\n                        ? (value as TValue[] | undefined)?.includes(opt.value as TValue)\n                        : value === opt.value;\n\n                    items.push(\n                        <MenuItem key={opt.value} value={opt.value} disabled={opt.disabled} selected={isSelected}>\n                            <ListItemIcon sx={{ minWidth: 32 }}>\n                                {isSelected && (\n                                    <CheckIcon sx={{ color: 'green' }} />\n                                )}\n                            </ListItemIcon>\n                            {customRender ? customRender(opt) : opt.label}\n                        </MenuItem>\n                    );\n                });\n            });\n        }\n        return items;\n    }, [groupedOptions, customRender, filterable, isAsync, search, loading, loadingMessage, noOptionsMessage, multiple, value]);\n\n    const showLabel = label && !placeholder;\n\n    // Lógica para manejar el cambio de valor\n    const handleChangeInternal = (event: SelectChangeEvent<any>, rhfOnChange?: (...event: any[]) => void) => {\n        const newValue = event.target.value;\n        if (isRHFMode) {\n            rhfOnChange?.(newValue);\n        } else {\n            (onChange as (val: TValue | TValue[]) => void)?.(newValue);\n        }\n    };\n\n    // Renderizado condicional basado en el modo\n    const isRHFModeRender = 'control' in rest && rest.control !== undefined;\n\n    const renderSelect = (selectValue: any, selectOnChange: any, onBlur?: any, inputRef?: any) => (\n        <FormControl fullWidth size={size} error={error} disabled={disabled}>\n            {showLabel && <StyledLabel>{label}</StyledLabel>}\n            <Box\n                sx={{\n                    width: '100%',\n                    display: 'grid',\n                    marginBottom: '10px',\n                    marginTop: '10px'\n                }}>\n                <StyledSelect\n                    label={label}\n                    value={selectValue ?? (multiple ? [] : '')}\n                    defaultValue={defaultValue}\n                    multiple={multiple}\n                    onChange={selectOnChange}\n                    onBlur={onBlur}\n                    renderValue={renderValue}\n                    displayEmpty\n                    input={<StyledOutlinedInput label={label} />}\n                    disabled={disabled}\n                    MenuProps={{\n                        PaperProps: {\n                            style: {\n                                maxHeight: maxHeight,\n                                maxWidth: maxWidth,\n                            },\n                        },\n                    }}\n                    inputRef={inputRef}\n                    {...rest}\n                >\n                    {menuItems}\n                </StyledSelect>\n                {helperText && <Typography variant=\"caption\" color=\"error\" sx={{ mt: 1 }}>{helperText}</Typography>}\n            </Box>\n        </FormControl>\n    );\n\n    if (isRHFModeRender) {\n        const rhfProps = rest as RHFSelectProps<TValue>;\n        return (\n            <Controller\n                name={rhfProps.name}\n                control={rhfProps.control}\n                rules={rhfProps.validation}\n                render={({ field, fieldState: { error } }) => (\n                    renderSelect(\n                        field.value,\n                        (e: SelectChangeEvent<any>) => handleChangeInternal(e, field.onChange),\n                        field.onBlur,\n                        field.ref\n                    )\n                )}\n            />\n        );\n    } else {\n        return renderSelect(value, (e: SelectChangeEvent<any>) => handleChangeInternal(e));\n    }\n}\n\nexport default Select;"],"names":["MuiSelect","React","_a","error"],"mappings":"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"}

package/components/Avatar/Avatar.cjs

@@ -0,0 +1,126 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const material = require("@mui/material");
+const AccountCircleIcon = require("@mui/icons-material/AccountCircle");
+const React = require("react");
+const sizes = {
+  sm: {
+    avatar: { width: 35, height: 35, borderWidth: 3, marginTop: ".5rem" },
+    icon: { width: 42, height: 42, marginTop: ".5rem", fontSize: 42 },
+    badge: { width: 35, height: 35, borderWidth: 3, marginTop: ".5rem", fontSize: 16 }
+  },
+  xl: {
+    avatar: { width: 105, height: 105, borderWidth: 10, marginTop: "0" },
+    icon: { width: 126, height: 126, marginTop: "0", fontSize: 126 },
+    badge: { width: 105, height: 105, borderWidth: 10, marginTop: "0", fontSize: 64 }
+  }
+};
+const Avatar = ({
+  items,
+  type,
+  displayedAvatars = 4,
+  size = "sm",
+  trustUrls = false,
+  showText = true,
+  showTooltip = false
+}) => {
+  const [errorIndex, setErrorIndex] = React.useState(/* @__PURE__ */ new Set());
+  const handleImageError = (index) => {
+    setErrorIndex((prev) => new Set(prev).add(index));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "avatar-container", className: "flex items-center leading-2 h-full w-full", children: [
+    items.slice(0, displayedAvatars).map((item, i) => {
+      const commonStyle = {
+        zIndex: displayedAvatars - i,
+        marginLeft: i > 0 ? -22 : 0
+      };
+      const style = sizes[size];
+      const imgSrc = trustUrls ? item.imageUrl : item.imageUrl;
+      const showFallbackIcon = !item.imageUrl && !item.badge || errorIndex.has(i) && !item.badge;
+      const showBadge = item.badge && !item.imageUrl || item.badge && errorIndex.has(i);
+      const content = /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-testid": "avatar", style: commonStyle, children: [
+        item.imageUrl && !errorIndex.has(i) ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            "data-testid": "image",
+            alt: item.text || "User avatar",
+            src: imgSrc,
+            onError: () => handleImageError(i),
+            style: __spreadProps(__spreadValues({}, style.avatar), {
+              color: item.color || "#667688",
+              border: `${style.avatar.borderWidth}px solid white`,
+              borderRadius: "9999px",
+              marginTop: style.avatar.marginTop
+            })
+          }
+        ) : showFallbackIcon ? /* @__PURE__ */ jsxRuntime.jsx(
+          AccountCircleIcon,
+          {
+            "data-testid": "icon",
+            "aria-label": item.text,
+            sx: __spreadProps(__spreadValues({}, style.icon), {
+              fontSize: style.icon.fontSize,
+              marginTop: style.icon.marginTop,
+              borderRadius: "9999px",
+              backgroundColor: "#fff",
+              color: item.color || "#667688"
+            })
+          }
+        ) : null,
+        showBadge && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-testid": "badge",
+            "aria-label": item.text,
+            style: __spreadProps(__spreadValues({}, style.badge), {
+              display: "inline-block",
+              backgroundColor: item.backgroundColor || "#c8d5e9",
+              color: item.color || "#667688",
+              fontWeight: 700,
+              textAlign: "center",
+              borderRadius: "9999px",
+              border: `${style.badge.borderWidth}px solid white`,
+              lineHeight: style.badge.height,
+              fontSize: style.badge.fontSize,
+              marginTop: style.badge.marginTop,
+              marginBottom: style.badge.marginTop
+            }),
+            children: item.badge
+          }
+        )
+      ] }, i);
+      return showTooltip && item.text ? /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: item.text, children: content }, i) : content;
+    }),
+    showText && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-testid": "text", className: "ml-2 text-xs font-normal", children: [
+      type && items.length === 1 && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-testid": "type", children: [
+        type,
+        ": "
+      ] }),
+      items[0].text,
+      " ",
+      items.length > 2 && `+${items.length - 1}`
+    ] })
+  ] });
+};
+exports.Avatar = Avatar;
+//# sourceMappingURL=Avatar.cjs.map

package/components/Avatar/Avatar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.cjs","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { Avatar as MuiAvatar, Tooltip } from '@mui/material';\nimport AccountCircleIcon from '@mui/icons-material/AccountCircle';\nimport React, { useState } from 'react';\n\nexport interface AvatarItem {\n  text?: string;\n  imageUrl?: string;\n  badge?: string;\n  color?: string;\n  backgroundColor?: string;\n}\n\nexport interface AvatarProps {\n  type?: string;\n  items: AvatarItem[];\n  displayedAvatars?: number;\n  size?: 'sm' | 'xl';\n  trustUrls?: boolean;\n  showText?: boolean;\n  showTooltip?: boolean;\n}\n\nconst sizes = {\n  sm: {\n    avatar: { width: 35, height: 35, borderWidth: 3, marginTop: '.5rem' },\n    icon: { width: 42, height: 42, marginTop: '.5rem', fontSize: 42 },\n    badge: { width: 35, height: 35, borderWidth: 3, marginTop: '.5rem', fontSize: 16 },\n  },\n  xl: {\n    avatar: { width: 105, height: 105, borderWidth: 10, marginTop: '0' },\n    icon: { width: 126, height: 126, marginTop: '0', fontSize: 126 },\n    badge: { width: 105, height: 105, borderWidth: 10, marginTop: '0', fontSize: 64 },\n  },\n};\n\nexport const Avatar: React.FC<AvatarProps> = ({\n  items,\n  type,\n  displayedAvatars = 4,\n  size = 'sm',\n  trustUrls = false,\n  showText = true,\n  showTooltip = false,\n}) => {\n  const [errorIndex, setErrorIndex] = useState<Set<number>>(new Set());\n\n  const handleImageError = (index: number) => {\n    setErrorIndex((prev) => new Set(prev).add(index));\n  };\n\n  return (\n    <div data-testid=\"avatar-container\" className=\"flex items-center leading-2 h-full w-full\">\n      {items.slice(0, displayedAvatars).map((item, i) => {\n        const commonStyle = {\n          zIndex: displayedAvatars - i,\n          marginLeft: i > 0 ? -22 : 0,\n        };\n\n        const style = sizes[size];\n\n        const imgSrc = trustUrls ? item.imageUrl : item.imageUrl;\n\n        const showFallbackIcon = (!item.imageUrl && !item.badge) || (errorIndex.has(i) && !item.badge);\n        const showBadge = (item.badge && !item.imageUrl) || (item.badge && errorIndex.has(i));\n\n        const content = (\n          <span key={i} data-testid=\"avatar\" style={commonStyle}>\n            {item.imageUrl && !errorIndex.has(i) ? (\n              <img\n                data-testid=\"image\"\n                alt={item.text || 'User avatar'}\n                src={imgSrc}\n                onError={() => handleImageError(i)}\n                style={{\n                  ...style.avatar,\n                  color: item.color || '#667688',\n                  border: `${style.avatar.borderWidth}px solid white`,\n                  borderRadius: '9999px',\n                  marginTop: style.avatar.marginTop,\n                }}\n              />\n            ) : showFallbackIcon ? (\n              <AccountCircleIcon\n                data-testid=\"icon\"\n                aria-label={item.text}\n                sx={{\n                  ...style.icon,\n                  fontSize: style.icon.fontSize,\n                  marginTop: style.icon.marginTop,\n                  borderRadius: '9999px',\n                  backgroundColor: '#fff',\n                  color: item.color || '#667688',\n                }}\n              />\n            ) : null}\n\n            {showBadge && (\n              <span\n                data-testid=\"badge\"\n                aria-label={item.text}\n                style={{\n                  ...style.badge,\n                  display: 'inline-block',\n                  backgroundColor: item.backgroundColor || '#c8d5e9',\n                  color: item.color || '#667688',\n                  fontWeight: 700,\n                  textAlign: 'center',\n                  borderRadius: '9999px',\n                  border: `${style.badge.borderWidth}px solid white`,\n                  lineHeight: style.badge.height,\n                  fontSize: style.badge.fontSize,\n                  marginTop: style.badge.marginTop,\n                  marginBottom: style.badge.marginTop,\n                }}\n              >\n                {item.badge}\n              </span>\n            )}\n          </span>\n        );\n\n        return showTooltip && item.text ? (\n          <Tooltip key={i} title={item.text}>\n            {content}\n          </Tooltip>\n        ) : (\n          content\n        );\n      })}\n\n      {showText && (\n        <span data-testid=\"text\" className=\"ml-2 text-xs font-normal\">\n          {type && items.length === 1 && (\n            <span data-testid=\"type\">{type}: </span>\n          )}\n          {items[0].text} {items.length > 2 && `+${items.length - 1}`}\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default Avatar;"],"names":["useState","jsxs","jsx","Tooltip"],"mappings":"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"}

package/components/Avatar/Avatar.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+export interface AvatarItem {
+    text?: string;
+    imageUrl?: string;
+    badge?: string;
+    color?: string;
+    backgroundColor?: string;
+}
+export interface AvatarProps {
+    type?: string;
+    items: AvatarItem[];
+    displayedAvatars?: number;
+    size?: 'sm' | 'xl';
+    trustUrls?: boolean;
+    showText?: boolean;
+    showTooltip?: boolean;
+}
+export declare const Avatar: React.FC<AvatarProps>;
+export default Avatar;