4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T2ed4,"use client"; import * as React from "react"; import { Select as SelectPrimitive } from "@base-ui/react/select"; import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"; import { Button, buttonVariants } from "@/registry/optics/button"; import { cn } from "@/registry/optics/lib/utils"; import { Badge } from "@/registry/optics/badge"; import { Checkbox } from "@/registry/optics/checkbox"; // Contexto para compartir el estado de selección entre todos los items const MultiSelectContext = React.createContext({ values: {}, setValue: () => {}, onValuesChange: () => {}, itemCount: 0, colors: {}, registerColor: () => {}, }); function Select({ onValuesChange = undefined, onOpenChange = undefined, ...props }) { const [values, setValues] = React.useState({}); const [colors, setColors] = React.useState({}); const [open, setOpen] = React.useState(false); const registeredItemsRef = React.useRef(new Set()); // Función para registrar un item const registerItem = React.useCallback((value) => { if (value && !registeredItemsRef.current.has(value)) { registeredItemsRef.current.add(value); setValues((prev) => { if (!(value in prev)) { return { ...prev, [value]: false }; } return prev; }); } }, []); // Función para registrar el color de un item const registerColor = React.useCallback((value, color) => { if (value) { setColors((prev) => ({ ...prev, [value]: color })); } }, []); // Función para actualizar un valor const setValue = React.useCallback( (value, checked) => { setValues((prev) => { const newValues = { ...prev, [value]: checked }; // Llamar al callback con el array de valores if (onValuesChange) { const valuesArray = Object.entries(newValues).map(([key, val]) => ({ value: key, checked: val, })); onValuesChange(valuesArray); } return newValues; }); }, [onValuesChange], ); const handleOpenChange = React.useCallback( (newOpen) => { setOpen(newOpen); if (onOpenChange) { onOpenChange(newOpen); } }, [onOpenChange], ); const contextValue = React.useMemo( () => ({ values, setValue, registerItem, itemCount: registeredItemsRef.current.size, colors, registerColor, }), [values, setValue, registerItem, colors, registerColor], ); return ( ); } function SelectGroup({ ...props } = {}) { return ; } function SelectValue({ ...props } = {}) { return ; } function SelectTrigger({ className = "", size = "default", children = null, variant = undefined, ...props }) { const { values, colors, itemCount } = React.useContext(MultiSelectContext); // Obtener los items seleccionados con sus colores const selectedItems = React.useMemo(() => { return Object.entries(values) .filter(([_, checked]) => checked) .map(([value, _]) => ({ value, color: colors[value] || "bg-gray-200", })); }, [values, colors]); const selectedCount = selectedItems.length; const totalCount = itemCount; return (

{selectedCount > 0 && (

{selectedItems.map((item, index) => ( ))}

)} {children}

{totalCount > 0 && ( {selectedCount}/{totalCount} )} } /> ); } function SelectContent({ className = "", children = null, side = "bottom", ...props }) { return ( {children} ); } function SelectLabel({ className = "", ...props }) { return ( ); } function SelectItem({ className = "", children = null, value, color = undefined, ...props }) { const { values, setValue, registerItem, registerColor } = React.useContext(MultiSelectContext); const [isHoveringCheckbox, setIsHoveringCheckbox] = React.useState(false); const [isHoveringText, setIsHoveringText] = React.useState(false); // Registrar el item cuando se monta React.useEffect(() => { if (value) { registerItem(value); } }, [value, registerItem]); // Registrar el color cuando se monta o cambia React.useEffect(() => { if (value && color) { registerColor(value, color); } }, [value, color, registerColor]); const checked = value ? (values[value] ?? false) : false; // Calcular estados const allChecked = Object.values(values).every((v) => v === true); const someChecked = Object.values(values).some((v) => v === true); const noneChecked = !someChecked; // Determinar qué texto mostrar según los comentarios const getActionText = () => { if (checked && isHoveringCheckbox) return "Uncheck"; if (noneChecked && (isHoveringCheckbox || isHoveringText)) return "Check"; if (someChecked && !checked && isHoveringCheckbox) return "Check"; if (!checked && someChecked && isHoveringText) return "Only"; if (checked && allChecked && isHoveringText) return "Only"; if (checked && someChecked && !allChecked && isHoveringText) return "Check All"; return ""; }; const handleCheckboxClick = (e) => { e.stopPropagation(); e.preventDefault(); if (value) { setValue(value, !checked); } }; const handleTextClick = (e) => { e.stopPropagation(); e.preventDefault(); if (!value) return; if (checked && someChecked && !allChecked && isHoveringText) { Object.keys(values).forEach((key) => { setValue(key, true); }); } else if ( isHoveringText && ((!checked && someChecked) || (checked && allChecked)) ) { Object.keys(values).forEach((key) => { setValue(key, key === value); }); } else { setValue(value, true); } }; return (

setIsHoveringCheckbox(true)} onMouseLeave={() => setIsHoveringCheckbox(false)} >

setIsHoveringText(true)} onMouseLeave={() => setIsHoveringText(false)} {...props} >

{children}

{getActionText()}

); } function SelectSeparator({ className, ...props }) { return ( ); } function SelectScrollUpButton({ className, ...props }) { return ( ); } function SelectScrollDownButton({ className, ...props }) { return ( ); } Select.displayName = "MultiSelect"; SelectContent.displayName = "MultiSelectContent"; SelectGroup.displayName = "MultiSelectGroup"; SelectItem.displayName = "MultiSelectItem"; SelectLabel.displayName = "MultiSelectLabel"; SelectScrollDownButton.displayName = "MultiSelectScrollDownButton"; SelectScrollUpButton.displayName = "MultiSelectScrollUpButton"; SelectSeparator.displayName = "MultiSelectSeparator"; SelectTrigger.displayName = "MultiSelectTrigger"; SelectValue.displayName = "MultiSelectValue"; export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, }; 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L4e",null,{"namespace":"@optics","registryDependencies":["https://optics.agusmayol.com.ar/r/button.json","https://optics.agusmayol.com.ar/r/badge.json","https://optics.agusmayol.com.ar/r/checkbox.json","https://optics.agusmayol.com.ar/r/utils.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/optics/multi-select.jsx","content":"$50","type":"registry:component","target":"components/optics/multi-select.jsx"}],"className":"h-[70svh] min-h-80"}]]}]