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

package/Select-BcLkyHSE.js

@@ -1,412 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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/Select/Select.definitions.d.ts

@@ -1,14 +0,0 @@
-export declare const SimpleSelectDefinition = "\nimport React, { useState } from 'react';\nimport { Select } from './Select'; // Asumiendo que Select.tsx est\u00E1 en el mismo directorio\nimport { Box, Typography } from '@mui/material';\n\nconst basicOptions = [\n    { value: '10', label: '10' },\n    { value: '25', label: '25' },\n    { value: '50', label: '50' },\n    { value: '100', label: '100' },\n];\n\nexport const SimpleSelectExample = () => {\n    const [value, setValue] = useState<string>('25');\n    return (\n        <Box sx={{ width: 200 }}>\n            <Select\n                label=\"Registros por p\u00E1gina\"\n                options={basicOptions}\n                value={value}\n                onChange={(val) => setValue(val as string)}\n                maxWidth={150}\n            />\n            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>\n        </Box>\n    );\n};\n";
-export declare const MultiSelectDefinition = "\nimport React, { useState } from 'react';\nimport { Select } from './Select'; // Asumiendo que Select.tsx est\u00E1 en el mismo directorio\nimport { Box, Typography } from '@mui/material';\n\nexport const MultiSelectExample = () => {\n    const [value, setValue] = useState<string[]>([]);\n    return (\n        <Box sx={{ width: 400 }}>\n            <Select\n                label=\"Seleccionar estados\"\n                multiple\n                maxChipsToShow={2}\n                options={[\n                    { value: 'pending', label: 'Pendiente' },\n                    { value: 'approved', label: 'Aprobado' },\n                    { value: 'rejected', label: 'Rechazado' },\n                    { value: 'canceled', label: 'Cancelado' },\n                    { value: 'completed', label: 'Completado' },\n                    { value: 'invoiced', label: 'Facturado' },\n                ]}\n                value={value}\n                onChange={(val) => setValue(val as string[])}\n            />\n            <Typography sx={{ mt: 2 }}>Valor seleccionado: {JSON.stringify(value)}</Typography>\n        </Box>\n    );\n};\n";
-export declare const WithPlaceholderDefinition = "\nimport React, { useState } from 'react';\nimport { Select } from './Select'; // Asumiendo que Select.tsx est\u00E1 en el mismo directorio\nimport { Box, Typography } from '@mui/material';\n\nconst basicOptions = [\n    { value: '10', label: '10' },\n    { value: '25', label: '25' },\n    { value: '50', label: '50' },\n    { value: '100', label: '100' },\n];\n\nexport const WithPlaceholderExample = () => {\n    const [value, setValue] = useState('');\n    return (\n        <Box sx={{ width: 300 }}>\n            <Select\n                label=\"Seleccione una opci\u00F3n\"\n                options={basicOptions}\n                value={value}\n                onChange={(val) => setValue(val as string)}\n                placeholder=\"Ninguna opci\u00F3n seleccionada\"\n            />\n            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value || 'Ninguno'}</Typography>\n        </Box>\n    );\n};\n";
-export declare const WithFilterDefinition = "\nimport React, { useState } from 'react';\nimport { Select } from './Select'; // Asumiendo que Select.tsx est\u00E1 en el mismo directorio\nimport { Box, Typography } from '@mui/material';\n\nconst groupedOptions = [\n    { value: 'gt', label: 'Guatemala', group: 'Centroam\u00E9rica' },\n    { value: 'sv', label: 'El Salvador', group: 'Centroam\u00E9rica' },\n    { value: 'mx', label: 'M\u00E9xico', group: 'Norteam\u00E9rica' },\n    { value: 'us', label: 'EE.UU.', group: 'Norteam\u00E9rica' },\n];\n\nexport const WithFilterExample = () => {\n    const [value, setValue] = useState('');\n    return (\n        <Box sx={{ width: 300 }}>\n            <Select\n                label=\"Buscar pa\u00EDs\"\n                filterable\n                options={groupedOptions}\n                value={value}\n                onChange={(val) => setValue(val as string)}\n            />\n            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>\n        </Box>\n    );\n};\n";
-export declare const WithGroupDefinition = "\nimport React, { useState } from 'react';\nimport { Select } from './Select'; // Asumiendo que Select.tsx est\u00E1 en el mismo directorio\nimport { Box, Typography } from '@mui/material';\n\nconst groupedOptions = [\n    { value: 'gt', label: 'Guatemala', group: 'Centroam\u00E9rica' },\n    { value: 'sv', label: 'El Salvador', group: 'Centroam\u00E9rica' },\n    { value: 'mx', label: 'M\u00E9xico', group: 'Norteam\u00E9rica' },\n    { value: 'us', label: 'EE.UU.', group: 'Norteam\u00E9rica' },\n];\n\nexport const WithGroupExample = () => {\n    const [value, setValue] = useState('');\n    return (\n        <Box sx={{ width: 300 }}>\n            <Select\n                label=\"Pa\u00EDs por regi\u00F3n\"\n                options={groupedOptions}\n                value={value}\n                onChange={(val) => setValue(val as string)}\n            />\n            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>\n        </Box>\n    );\n};\n";
-export declare const CustomRenderWithAvatarDefinition = "\nimport React, { useState } from 'react';\nimport { Select, Option } from './Select'; // Asumiendo que Select.tsx est\u00E1 en el mismo directorio\nimport { Avatar, Box, Typography } from '@mui/material';\n\nconst userOptions = [\n    { value: 'admin', label: 'Administrador', img: 'https://placehold.co/40x40?text=A' },\n    { value: 'user', label: 'Usuario', img: 'https://placehold.co/40x40?text=U' },\n];\n\nexport const CustomRenderWithAvatarExample = () => {\n    const [value, setValue] = useState<string[]>([]);\n    return (\n        <Box sx={{ width: 300 }}>\n            <Select\n                options={userOptions}\n                multiple\n                value={value}\n                onChange={(val) => setValue(val as string[])}\n                label=\"Usuarios\"\n                placeholder=\"Selecciona usuarios\"\n            >\n                <Option>\n                    {({ img, label }) => (\n                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n                            <Avatar src={img} sx={{ width: 24, height: 24 }} />\n                            <Typography variant=\"body2\">{label}</Typography>\n                        </Box>\n                    )}\n                </Option>\n            </Select>\n            <Typography sx={{ mt: 2 }}>Valor seleccionado: {JSON.stringify(value)}</Typography>\n        </Box>\n    );\n};\n";
-export declare const MultiSelectCustomChipRenderDefinition = "\nimport React, { useState } from 'react';\nimport { Select } from './Select'; // Asumiendo que Select.tsx est\u00E1 en el mismo directorio\nimport { Box, Typography, Chip } from '@mui/material';\n\nconst transactionStatuses = [\n    { value: 'PENDING', label: 'Pendiente' },\n    { value: 'REJECTED', label: 'Rechazado' },\n    { value: 'CANCELED', label: 'Cancelado' },\n    { value: 'REFUNDED', label: 'Reembolsado' },\n    { value: 'COMPLETED', label: 'Completado' },\n    { value: 'EXPIRED', label: 'Expirado' },\n];\n\nexport const MultiSelectCustomChipRenderExample = () => {\n    const [value, setValue] = useState<string[]>(['pending', 'approved', 'rejected', 'canceled']);\n    return (\n        <Box sx={{ width: 400 }}>\n            <Select\n                label=\"Estados de Transacci\u00F3n\"\n                multiple\n                maxChipsToShow={3}\n                options={transactionStatuses}\n                value={value}\n                onChange={(val) => setValue(val as string[])}\n                placeholder=\"Selecciona estados\"\n                renderChipLabel={(item) => (\n                  <Typography variant=\"caption\" sx={{ fontWeight: 'bold' }}>\n                    {item.label.charAt(0).toUpperCase()}\n                  </Typography>\n                )}\n            />\n            <Typography sx={{ mt: 2 }}>Valor seleccionado: {JSON.stringify(value)}</Typography>\n        </Box>\n    );\n};\n";
-export declare const MultiSelectCustomChipRenderFullLabelDefinition = "\nimport React, { useState } from 'react';\nimport { Select } from './Select'; // Asumiendo que Select.tsx est\u00E1 en el mismo directorio\nimport { Avatar, Box, Typography } from '@mui/material';\n\nconst groupedOptions = [\n    { value: 'gt', label: 'Guatemala', group: 'Centroam\u00E9rica' },\n    { value: 'sv', label: 'El Salvador', group: 'Centroam\u00E9rica' },\n    { value: 'mx', label: 'M\u00E9xico', group: 'Norteam\u00E9rica' },\n    { value: 'us', label: 'EE.UU.', group: 'Norteam\u00E9rica' },\n    { value: 'ca', label: 'Canad\u00E1', group: 'Norteam\u00E9rica' },\n    { value: 'br', label: 'Brasil', group: 'Sudam\u00E9rica' },\n    { value: 'ar', label: 'Argentina', group: 'Sudam\u00E9rica' },\n];\n\nexport const MultiSelectCustomChipRenderFullLabelExample = () => {\n    const [value, setValue] = useState<string[]>(['gt', 'mx', 'us', 'ca', 'br']);\n    return (\n        <Box sx={{ width: 400 }}>\n            <Select\n                label=\"Pa\u00EDses seleccionados\"\n                multiple\n                maxChipsToShow={3}\n                options={groupedOptions}\n                value={value}\n                onChange={(val) => setValue(val as string[])}\n                placeholder=\"Selecciona pa\u00EDses\"\n                renderChipLabel={(item) => (\n                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n                        {item.img && <Avatar src={item.img} sx={{ width: 18, height: 18 }} />}\n                        <Typography variant=\"caption\" sx={{ fontWeight: 'medium' }}>\n                            {item.label}\n                        </Typography>\n                    </Box>\n                )}\n            />\n            <Typography sx={{ mt: 2 }}>Valor seleccionado: {JSON.stringify(value)}</Typography>\n        </Box>\n    );\n};\n";
-export declare const ConstrainedHeightDefinition = "\nimport React, { useState } from 'react';\nimport { Select } from './Select'; // Asumiendo que Select.tsx est\u00E1 en el mismo directorio\nimport { Box, Typography } from '@mui/material';\n\nconst optionsWithManyItems = [\n  { value: 'gt', label: 'Guatemala' }, { value: 'sv', label: 'El Salvador' },\n  { value: 'mx', label: 'M\u00E9xico' }, { value: 'us', label: 'EE.UU.' },\n  { value: 'ca', label: 'Canad\u00E1' }, { value: 'br', label: 'Brasil' },\n  { value: 'ar', label: 'Argentina' }, { value: 'cl', label: 'Chile' },\n  { value: 'co', label: 'Colombia' }, { value: 'pe', label: 'Per\u00FA' },\n  { value: 'ec', label: 'Ecuador' }, { value: 've', label: 'Venezuela' },\n  { value: 'py', label: 'Paraguay' }, { value: 'uy', label: 'Uruguay' },\n  { value: 'bo', label: 'Bolivia' }, { value: 'cr', label: 'Costa Rica' },\n  { value: 'pa', label: 'Panam\u00E1' }, { value: 'hn', label: 'Honduras' },\n  { value: 'ni', label: 'Nicaragua' }, { value: 'do', label: 'Rep. Dominicana' },\n  { value: 'cu', label: 'Cuba' }, { value: 'pr', label: 'Puerto Rico' },\n  { value: 'es', label: 'Espa\u00F1a' }, { value: 'fr', label: 'Francia' },\n  { value: 'de', label: 'Alemania' }, { value: 'it', label: 'Italia' },\n];\n\nexport const ConstrainedHeightExample = () => {\n    const [value, setValue] = useState('');\n    return (\n        <Box sx={{ width: 300 }}>\n            <Select\n                label=\"Opciones (Altura Limitada)\"\n                options={optionsWithManyItems}\n                value={value}\n                onChange={(val) => setValue(val as string)}\n                maxHeight={150}\n            />\n            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>\n        </Box>\n    );\n};\n";
-export declare const ConstrainedWidthDefinition = "\nimport React, { useState } from 'react';\nimport { Select } from './Select'; // Asumiendo que Select.tsx est\u00E1 en el mismo directorio\nimport { Box, Typography } from '@mui/material';\n\nconst basicOptions = [\n    { value: '10', label: '10' },\n    { value: '25', label: '25' },\n];\nconst groupedOptions = [\n    { value: 'gt', label: 'Guatemala', group: 'Centroam\u00E9rica' },\n    { value: 'sv', label: 'El Salvador', group: 'Centroam\u00E9rica' },\n];\n\nexport const ConstrainedWidthExample = () => {\n    const [value, setValue] = useState('');\n    return (\n        <Box sx={{ width: 200 }}>\n            <Select\n                label=\"Opciones (Ancho Limitado)\"\n                options={basicOptions.concat(groupedOptions)}\n                value={value}\n                onChange={(val) => setValue(val as string)}\n                maxWidth={100}\n            />\n            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>\n        </Box>\n    );\n};\n";
-export declare const AllFeaturesCombinedDefinition = "\nimport React, { useState } from 'react';\nimport { Select, Option } from './Select'; // Asumiendo que Select.tsx est\u00E1 en el mismo directorio\nimport { Avatar, Box, Typography, Chip } from '@mui/material';\n\nconst allOptions = [\n    { value: 'gt', label: 'Guatemala', group: 'Centroam\u00E9rica' },\n    { value: 'admin', label: 'Administrador', img: 'https://placehold.co/40x40?text=A' },\n    { value: 'PENDING', label: 'Pendiente' },\n    { value: 'ca', label: 'Canad\u00E1', group: 'Norteam\u00E9rica' },\n    { value: 'user', label: 'Usuario', img: 'https://placehold.co/40x40?text=U' },\n    { value: 'COMPLETED', label: 'Completado' },\n];\n\nexport const AllFeaturesCombinedExample = () => {\n    const [value, setValue] = useState<string[]>(['gt', 'admin', 'PENDING', 'ca', 'user', 'COMPLETED']);\n    return (\n        <Box sx={{ width: 500 }}>\n            <Select\n                label=\"Selecci\u00F3n Completa\"\n                multiple\n                filterable\n                maxChipsToShow={3}\n                maxHeight={250}\n                maxWidth=\"400px\"\n                options={allOptions}\n                value={value}\n                onChange={(val) => setValue(val as string[])}\n                placeholder=\"Busca y selecciona todo tipo de elementos\"\n                renderChipLabel={(item) => (\n                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n                        {item.img && <Avatar src={item.img} sx={{ width: 16, height: 16 }} />}\n                        <Typography variant=\"caption\" sx={{ fontWeight: 'bold' }}>\n                            {item.label.length > 10 ? item.label.substring(0, 7) + '...' : item.label}\n                        </Typography>\n                    </Box>\n                )}\n            >\n                <Option>\n                    {(item) => (\n                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, my: 0.5 }}>\n                            {item.img && <Avatar src={item.img} sx={{ width: 28, height: 28 }} />}\n                            <Box>\n                                <Typography variant=\"body2\" fontWeight=\"medium\">{item.label}</Typography>\n                                {item.group && (\n                                    <Typography variant=\"caption\" color=\"text.secondary\">\n                                        Grupo: {item.group}\n                                    </Typography>\n                                )}\n                                {item.disabled && <Chip label=\"No disponible\" size=\"small\" color=\"warning\" sx={{ ml: 1 }} />}\n                            </Box>\n                        </Box>\n                    )}\n                </Option>\n            </Select>\n            <Typography sx={{ mt: 2 }}>Valor seleccionado: {JSON.stringify(value)}</Typography>\n        </Box>\n    );\n};\n";
-export declare const EmptyOptionsDefinition = "\nimport React, { useState } from 'react';\nimport { Select } from './Select'; // Asumiendo que Select.tsx est\u00E1 en el mismo directorio\nimport { Box, Typography } from '@mui/material';\n\nexport const EmptyOptionsExample = () => {\n    const [value, setValue] = useState(null);\n    return (\n        <Box sx={{ width: 300 }}>\n            <Select\n                label=\"Seleccionar (Vac\u00EDo)\"\n                options={[]}\n                value={value}\n                onChange={setValue}\n                placeholder=\"No hay opciones disponibles\"\n            />\n            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value || 'Ninguno'}</Typography>\n        </Box>\n    );\n};\n";
-export declare const SelectWithManyOptionsDefinition = "\nimport React, { useState } from 'react';\nimport { Select } from './Select'; // Asumiendo que Select.tsx est\u00E1 en el mismo directorio\nimport { Box, Typography } from '@mui/material';\n\nconst manyOptions = Array.from({ length: 50 }, (_, i) => ({\n    value: `option-${i}`,\n    label: `Opci\u00F3n ${i + 1}`,\n    group: i < 25 ? 'Grupo A' : 'Grupo B',\n}));\n\nexport const SelectWithManyOptionsExample = () => {\n    const [value, setValue] = useState('');\n    return (\n        <Box sx={{ width: 300 }}>\n            <Select\n                label=\"Muchas Opciones\"\n                options={manyOptions}\n                value={value}\n                onChange={(val) => setValue(val as string)}\n                filterable\n                maxHeight={200}\n            />\n            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>\n        </Box>\n    );\n};\n";
-export declare const AsyncSelectDefinition = "\nimport React, { useState } from 'react';\nimport { Select } from './Select';\nimport { Box, Typography } from '@mui/material';\n\nconst mockAsyncOptions = [\n    { value: 'apple', label: 'Apple' },\n    { value: 'banana', label: 'Banana' },\n    { value: 'orange', label: 'Orange' },\n    { value: 'grape', label: 'Grape' },\n    { value: 'strawberry', label: 'Strawberry' },\n    { value: 'blueberry', label: 'Blueberry' },\n    { value: 'pineapple', label: 'Pineapple' },\n];\n\n// Simulate an API call\nconst simulatedLoadOptions = (inputValue: string): Promise<any[]> => {\n    return new Promise((resolve) => {\n        setTimeout(() => {\n            const filtered = mockAsyncOptions.filter(option =>\n                option.label.toLowerCase().includes(inputValue.toLowerCase())\n            );\n            resolve(filtered);\n        }, 800); // Simulate network delay\n    });\n};\n\nexport const AsyncSelectExample = () => {\n    const [value, setValue] = useState('');\n    return (\n        <Box sx={{ width: 300 }}>\n            <Select\n                label=\"Buscar Frutas\"\n                loadOptions={simulatedLoadOptions}\n                value={value}\n                onChange={(val) => setValue(val as string)}\n                placeholder=\"Escribe para buscar...\"\n                loadingMessage=\"Buscando frutas...\"\n                noOptionsMessage=\"No se encontraron frutas.\"\n            />\n            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>\n        </Box>\n    );\n};\n";