@tecsinapse/cortex-react 1.3.0-beta.3 → 1.3.0-beta.31

package/dist/esm/components/Menubar/Item.js

@@ -0,0 +1,20 @@
+import React__default, { useState } from 'react';
+import { item } from '../../styles/menubar.js';
+import IconControlSubItem from './IconControlSubItem.js';
+import ItemLink from './ItemLink.js';
+
+const { container, text } = item();
+const Item = ({
+  children,
+  subItems,
+  renderSubItems,
+  className,
+  href,
+  ...rest
+}) => {
+  const [showSubItem, setShowSubItem] = useState(false);
+  const hasSubItems = (subItems ?? []).length > 0;
+  return /* @__PURE__ */ React__default.createElement(ItemLink, { href }, /* @__PURE__ */ React__default.createElement("div", { "data-testid": "item-menubar", ...rest, className: container() }, /* @__PURE__ */ React__default.createElement("div", { className: text({ className }) }, children), hasSubItems ? /* @__PURE__ */ React__default.createElement(IconControlSubItem, { show: showSubItem, setShow: setShowSubItem }) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null)), showSubItem ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, subItems?.map((subItem) => renderSubItems?.(subItem))) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null));
+};
+
+export { Item as default };

package/dist/esm/components/Menubar/ItemLink.js

@@ -0,0 +1,16 @@
+import React__default from 'react';
+
+const ItemLink = ({ href, children, classNameAnchor }) => {
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, href ? /* @__PURE__ */ React__default.createElement(
+    "a",
+    {
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: classNameAnchor
+    },
+    children
+  ) : children);
+};
+
+export { ItemLink as default };

package/dist/esm/components/Menubar/Left.js

@@ -0,0 +1,9 @@
+import React__default from 'react';
+import { menubar } from '../../styles/menubar.js';
+
+const { left } = menubar();
+const Left = ({ children, ...rest }) => {
+  return /* @__PURE__ */ React__default.createElement("div", { className: left(), "data-testid": "header-left-menubar", ...rest }, children);
+};
+
+export { Left as default };

package/dist/esm/components/Menubar/MostUsed.js

@@ -0,0 +1,9 @@
+import React__default from 'react';
+import { mostUsed } from '../../styles/menubar.js';
+
+const { container, label: labelClass, containerList } = mostUsed();
+const MostUsed = ({ label, children, ...rest }) => {
+  return /* @__PURE__ */ React__default.createElement("div", { className: container(), "data-testid": "most-used-menubar", ...rest }, /* @__PURE__ */ React__default.createElement("p", { className: labelClass() }, label), /* @__PURE__ */ React__default.createElement("div", { className: containerList() }, children));
+};
+
+export { MostUsed as default };

package/dist/esm/components/Menubar/MostUsedItem.js

@@ -0,0 +1,29 @@
+import React__default from 'react';
+import { mostUsedItem } from '../../styles/menubar.js';
+import { Card } from '../Card.js';
+import ItemLink from './ItemLink.js';
+
+const {
+  title: titleClass,
+  category: categoryClass,
+  container
+} = mostUsedItem();
+const MostUsedItem = ({
+  title,
+  category,
+  href,
+  ...rest
+}) => {
+  return /* @__PURE__ */ React__default.createElement(ItemLink, { href, classNameAnchor: "w-full" }, /* @__PURE__ */ React__default.createElement(
+    Card,
+    {
+      ...rest,
+      "data-testid": "most-used-item-menubar",
+      className: container()
+    },
+    /* @__PURE__ */ React__default.createElement("p", { className: titleClass() }, title),
+    /* @__PURE__ */ React__default.createElement("p", { className: categoryClass() }, category)
+  ));
+};
+
+export { MostUsedItem as default };

package/dist/esm/components/Menubar/MostUsedList.js

@@ -0,0 +1,65 @@
+import React__default, { Fragment } from 'react';
+import 'clsx';
+import '@internationalized/date';
+import '../Badge.js';
+import 'react-icons/md';
+import '../Card.js';
+import '../Button.js';
+import 'react-aria';
+import 'react-stately';
+import '@floating-ui/react';
+import '../Calendar/CalendarCell.js';
+import '@tecsinapse/cortex-core';
+import 'react-icons/fa';
+import 'react-icons/lia';
+import '../Input/Box.js';
+import '../Input/Face.js';
+import '../Input/Left.js';
+import '../Input/Mask.js';
+import '../Input/Right.js';
+import '../Input/Root.js';
+import '../Input/Search.js';
+import '../Popover/Context.js';
+import '../GroupButton.js';
+import '../Hint.js';
+import { Menubar } from './index.js';
+import '../Modal.js';
+import '../../styles/calendar-cell.js';
+import '../../styles/groupButton.js';
+import '../../styles/progressBar.js';
+import '../RadioButton.js';
+import '../Select/GroupedOptions.js';
+import '../Select/context.js';
+import '../Select/MultiGroupedOptions.js';
+import '../Select/MultiOptions.js';
+import '../Select/Options.js';
+import '../Select/Trigger.js';
+import '../Snackbar/BaseSnackbar.js';
+import 'react-icons/io';
+import '../Tag.js';
+import '../TextArea/Box.js';
+import '../TextArea/Face.js';
+import '../TextArea/Left.js';
+import '../TextArea/Right.js';
+import '../TextArea/Root.js';
+import '../Toggle.js';
+import '../Tooltip.js';
+
+const MostUsedList = ({ mostUsed }) => {
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, (mostUsed ?? []).map((item, index) => {
+    const { title, category, ...rest } = item;
+    if (index > 3)
+      return /* @__PURE__ */ React__default.createElement(Fragment, { key: `${title}-${category}` });
+    return /* @__PURE__ */ React__default.createElement(
+      Menubar.MostUsedItem,
+      {
+        key: `${title}-${category}`,
+        title,
+        category,
+        ...rest
+      }
+    );
+  }));
+};
+
+export { MostUsedList as default };

package/dist/esm/components/Menubar/Right.js

@@ -0,0 +1,9 @@
+import React__default from 'react';
+import { menubar } from '../../styles/menubar.js';
+
+const { right } = menubar();
+const Right = ({ children, ...rest }) => {
+  return /* @__PURE__ */ React__default.createElement("div", { className: right(), "data-testid": "header-right-menubar", ...rest }, children);
+};
+
+export { Right as default };

package/dist/esm/components/Menubar/Root.js

@@ -0,0 +1,9 @@
+import React__default from 'react';
+import { MenubarProvider } from '../../provider/MenubarProvider.js';
+import '../../provider/SnackbarProvider.js';
+
+const Root = ({ children, ...rest }) => {
+  return /* @__PURE__ */ React__default.createElement(MenubarProvider, null, /* @__PURE__ */ React__default.createElement("div", { ...rest }, children));
+};
+
+export { Root as default };

package/dist/esm/components/Menubar/Search.js

@@ -0,0 +1,19 @@
+import React__default from 'react';
+import { Input } from '../Input/index.js';
+import clsx from 'clsx';
+import { animate } from '../../styles/menubar.js';
+import { useMenubar } from '../../provider/MenubarProvider.js';
+import '../../provider/SnackbarProvider.js';
+
+const Search = (props) => {
+  const [show] = useMenubar();
+  return /* @__PURE__ */ React__default.createElement(
+    Input.Search,
+    {
+      ...props,
+      className: clsx("mr-tera flex-1", animate({ show }))
+    }
+  );
+};
+
+export { Search as default };

package/dist/esm/components/Menubar/SubItem.js

@@ -0,0 +1,18 @@
+import React__default from 'react';
+import { subItem } from '../../styles/menubar.js';
+import ItemLink from './ItemLink.js';
+
+const { container } = subItem();
+const SubItem = ({ children, href, className, ...rest }) => {
+  return /* @__PURE__ */ React__default.createElement(ItemLink, { href }, /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      ...rest,
+      "data-testid": "sub-item-menubar",
+      className: container({ className })
+    },
+    children
+  ));
+};
+
+export { SubItem as default };

package/dist/esm/components/Menubar/index.js

@@ -0,0 +1,31 @@
+import Root from './Root.js';
+import Left from './Left.js';
+import Search from './Search.js';
+import Right from './Right.js';
+import Dropdown from './Dropdown.js';
+import MostUsed from './MostUsed.js';
+import MostUsedItem from './MostUsedItem.js';
+import Header from './Header.js';
+import Category from './Category.js';
+import Item from './Item.js';
+import Categories from './Categories.js';
+import SubItem from './SubItem.js';
+import DropdownRoot from './DropdownRoot.js';
+
+const Menubar = {
+  Root,
+  Header,
+  HeaderLeft: Left,
+  Search,
+  HeaderRight: Right,
+  Dropdown,
+  MostUsed,
+  MostUsedItem,
+  Category,
+  Categories,
+  Item,
+  SubItem,
+  DropdownRoot
+};
+
+export { Menubar };

package/dist/esm/components/Modal.js

@@ -1,16 +1,16 @@
-import React, { forwardRef } from 'react';
 import { overlay, modal } from '@tecsinapse/cortex-core';
+import React__default, { forwardRef } from 'react';
 
 const Modal = forwardRef((props, ref) => {
   const { open, onClose, children, className } = props;
-  return /* @__PURE__ */ React.createElement("div", { ref, ...props }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { ref, ...props }, /* @__PURE__ */ React__default.createElement(
     "div",
     {
       "data-testid": "overlay",
       className: overlay({ show: open }),
       onClick: onClose
     }
-  ), /* @__PURE__ */ React.createElement("dialog", { "data-testid": "modal", className: modal({ open, className }) }, children));
+  ), /* @__PURE__ */ React__default.createElement("dialog", { "data-testid": "modal", className: modal({ open, className }) }, children));
 });
 
 export { Modal };

package/dist/esm/components/Popover/Content.js

@@ -0,0 +1,29 @@
+import clsx from 'clsx';
+import React__default from 'react';
+import { usePopoverContext } from './Context.js';
+
+const PopoverContent = ({
+  children,
+  className
+}) => {
+  const { isOpen, x, y, strategy, floatingStyles, refs } = usePopoverContext();
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, isOpen ? /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      ref: refs.setFloating,
+      className: clsx(
+        "border border-gray-200 bg-black p-[0px] rounded-md shadow-lg z-popover",
+        className
+      ),
+      style: {
+        position: strategy,
+        top: y ?? 0,
+        left: x ?? 0,
+        ...floatingStyles
+      }
+    },
+    children
+  ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null));
+};
+
+export { PopoverContent };

package/dist/esm/components/Popover/Context.js

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+const Context = createContext(void 0);
+const usePopoverContext = () => {
+  const context = useContext(Context);
+  if (!context) {
+    throw new Error("usePopoverContext must be used within a PopoverProvider");
+  }
+  return context;
+};
+
+export { Context, usePopoverContext };

package/dist/esm/components/Popover/Provider.js

@@ -0,0 +1,17 @@
+import React__default from 'react';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import { useFloatingLogic } from '../../hooks/useFloatingLogic.js';
+import { Context } from './Context.js';
+
+const PopoverProvider = ({
+  children,
+  placement,
+  trigger
+}) => {
+  const floatingLogic = useFloatingLogic({ placement, trigger });
+  return /* @__PURE__ */ React__default.createElement(Context.Provider, { value: { ...floatingLogic } }, children);
+};
+
+export { PopoverProvider };

package/dist/esm/components/Popover/Root.js

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import { Popover } from './index.js';
+
+const PopoverRoot = ({
+  children,
+  placement,
+  trigger
+}) => {
+  return /* @__PURE__ */ React__default.createElement(Popover.Provider, { placement, trigger }, children);
+};
+
+export { PopoverRoot };

package/dist/esm/components/Popover/Trigger.js

@@ -0,0 +1,9 @@
+import { cloneWithProps } from '../utils.js';
+import { usePopoverContext } from './Context.js';
+
+const PopoverTrigger = ({ children }) => {
+  const { triggerProps } = usePopoverContext();
+  return cloneWithProps(children, triggerProps);
+};
+
+export { PopoverTrigger };

package/dist/esm/components/Popover/index.js

@@ -0,0 +1,13 @@
+import { PopoverRoot } from './Root.js';
+import { PopoverTrigger } from './Trigger.js';
+import { PopoverContent } from './Content.js';
+import { PopoverProvider } from './Provider.js';
+
+const Popover = {
+  Root: PopoverRoot,
+  Trigger: PopoverTrigger,
+  Content: PopoverContent,
+  Provider: PopoverProvider
+};
+
+export { Popover };

package/dist/esm/components/ProgressBar.js

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useState, useEffect, useCallback } from 'react';
+import React__default, { useState, useEffect, useCallback } from 'react';
 import '../styles/calendar-cell.js';
 import '../styles/groupButton.js';
 import { progressBarFilled } from '../styles/progressBar.js';
@@ -37,12 +37,12 @@ const ProgressBar = ({
   const segments = Math.max(1, _segments);
   const lengthSeg = 100 / Math.max(segments);
   const items = [...Array(segments).keys()];
-  return /* @__PURE__ */ React.createElement("div", { className: "flex gap-x-nano flex-row" }, items.map((_, index) => {
+  return /* @__PURE__ */ React__default.createElement("div", { className: "flex gap-x-nano flex-row" }, items.map((_, index) => {
     const max = lengthSeg * (index + 1);
     const min = lengthSeg * index;
     const minmax = (totalProgress - min) / (max - min);
     const width = (minmax > 1 ? 1 : minmax < 0 ? 0 : minmax) * 100;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(
       "div",
       {
         "data-testid": "progress-bar",
@@ -51,7 +51,7 @@ const ProgressBar = ({
           "h-[0.5rem] bg-secondary-light flex flex-1 first:rounded-l-pill last:rounded-r-pill"
         )
       },
-      /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React__default.createElement(
         "div",
         {
           "data-testid": "div-segment-filled",

package/dist/esm/components/RadioButton.js

@@ -0,0 +1,20 @@
+import { radioButtonStyles } from '@tecsinapse/cortex-core';
+import React__default, { forwardRef } from 'react';
+
+const { container, input, label: labelStyle } = radioButtonStyles();
+const RadioButton = forwardRef(
+  ({ label, reversed, id, ...rest }, ref) => {
+    return /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: container({ reversed }),
+        ref,
+        "data-testid": "radio-button-container"
+      },
+      /* @__PURE__ */ React__default.createElement("input", { id, type: "radio", className: input(), ...rest }),
+      label ? /* @__PURE__ */ React__default.createElement("label", { htmlFor: id, className: labelStyle() }, label) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null)
+    );
+  }
+);
+
+export { RadioButton };

package/dist/esm/components/Select/Content.js

@@ -0,0 +1,19 @@
+import React__default, { useRef } from 'react';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import '@floating-ui/react';
+import { useOutsideClickListener } from '../../hooks/useOutsideClickListener.js';
+import { usePopoverContext } from '../Popover/Context.js';
+
+const Content = ({ children }) => {
+  const { setIsOpen } = usePopoverContext();
+  const ref = useRef(null);
+  useOutsideClickListener({
+    ref,
+    onClickOutside: () => setIsOpen(false)
+  });
+  return /* @__PURE__ */ React__default.createElement("div", { className: "w-full relative bg-white", ref }, children);
+};
+
+export { Content };

package/dist/esm/components/Select/GroupedOptions.js

@@ -1,25 +1,35 @@
 import { selectVariants } from '@tecsinapse/cortex-core';
-import React, { useContext, useCallback } from 'react';
+import React__default, { useContext, useCallback } from 'react';
 import { Select } from './index.js';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import '@floating-ui/react';
+import { useSelectGroupedOptions } from '../../hooks/useSelectGroupedOptions.js';
+import { usePopoverContext } from '../Popover/Context.js';
+import { SkeletonOptions } from './SkeletonOptions.js';
 import { SelectContext } from './context.js';
 
-const { groupedTitle, containerGrouped } = selectVariants();
+const { groupedTitle, list } = selectVariants();
 const SelectGroupedOptions = ({
   onSelect,
   groupedLabelExtractor,
   options
 }) => {
-  const { setOpen, keyExtractor } = useContext(SelectContext);
+  const { keyExtractor } = useContext(SelectContext);
+  const { setIsOpen } = usePopoverContext();
+  const { options: _options, isLoading } = useSelectGroupedOptions({ options });
   const handleSelect = useCallback(
     (option) => {
       onSelect(option);
-      setOpen?.(false);
+      setIsOpen?.(false);
     },
     [onSelect]
   );
-  return /* @__PURE__ */ React.createElement("ul", { role: "select", className: containerGrouped() }, [...options ?? []].map(([key, value]) => /* @__PURE__ */ React.createElement("div", { key }, /* @__PURE__ */ React.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value.map((option) => /* @__PURE__ */ React.createElement(
+  return isLoading ? /* @__PURE__ */ React__default.createElement(SkeletonOptions, null) : /* @__PURE__ */ React__default.createElement("ul", { role: "select", className: list() }, [..._options ?? []].map(([key, value]) => /* @__PURE__ */ React__default.createElement("div", { key }, /* @__PURE__ */ React__default.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value.map((option) => /* @__PURE__ */ React__default.createElement(
     Select.Option,
     {
+      grouped: true,
       option,
       key: keyExtractor(option),
       onSelectOption: handleSelect

package/dist/esm/components/Select/MultiCheckAllOptions.js

@@ -0,0 +1,45 @@
+import { option, checkbox } from '@tecsinapse/cortex-core';
+import React__default, { useContext, useMemo, useCallback } from 'react';
+import { SelectContext, SelectMultiOptionsContext } from './context.js';
+
+const SelectMultiCheckAllOptions = ({
+  checkAllLabel = "Select all"
+}) => {
+  const { keyExtractor, value: currentValue = [] } = useContext(SelectContext);
+  const { options, onSelect } = useContext(SelectMultiOptionsContext);
+  const isChecked = useMemo(
+    () => (options ?? []).filter(
+      (it) => currentValue.find((value) => keyExtractor(value) === keyExtractor(it))
+    ).length == (options ?? []).length,
+    [keyExtractor, currentValue, options]
+  );
+  const checkAll = useCallback(() => {
+    {
+      let updateSelected = [...currentValue];
+      if (!isChecked) {
+        updateSelected = [
+          .../* @__PURE__ */ new Set([...updateSelected, ...options ?? []])
+        ];
+      } else {
+        const optionKeys = new Set(
+          options?.map((option2) => keyExtractor(option2))
+        );
+        updateSelected = updateSelected.filter(
+          (item) => !optionKeys.has(keyExtractor(item))
+        );
+      }
+      onSelect(updateSelected);
+    }
+  }, [options, onSelect]);
+  return options?.length ? /* @__PURE__ */ React__default.createElement("div", { className: option(), onClick: checkAll }, /* @__PURE__ */ React__default.createElement(
+    "input",
+    {
+      type: "checkbox",
+      className: checkbox(),
+      onChange: () => void 0,
+      checked: isChecked
+    }
+  ), /* @__PURE__ */ React__default.createElement("span", null, checkAllLabel)) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
+};
+
+export { SelectMultiCheckAllOptions };

package/dist/esm/components/Select/MultiGroupedOptions.js

@@ -0,0 +1,49 @@
+import { selectVariants } from '@tecsinapse/cortex-core';
+import React__default, { useContext, useMemo } from 'react';
+import { Select } from './index.js';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import '@floating-ui/react';
+import { useSelectGroupedOptions } from '../../hooks/useSelectGroupedOptions.js';
+import { SkeletonOptions } from './SkeletonOptions.js';
+import { SelectContext, SelectMultiOptionsContext } from './context.js';
+import { handleSelectMulti } from './utils.js';
+
+const { groupedTitle, list } = selectVariants();
+const SelectMultiGroupedOptions = ({
+  onSelect,
+  groupedLabelExtractor,
+  options,
+  children
+}) => {
+  const { value: currentValue = [], keyExtractor } = useContext(SelectContext);
+  const { options: _options, isLoading } = useSelectGroupedOptions({ options });
+  const flattenMap = useMemo(
+    () => _options ? Array.from(_options?.values()).flatMap((value) => value) : [],
+    [options]
+  );
+  return /* @__PURE__ */ React__default.createElement(
+    SelectMultiOptionsContext.Provider,
+    {
+      value: { onSelect, options: flattenMap }
+    },
+    children,
+    isLoading ? /* @__PURE__ */ React__default.createElement(SkeletonOptions, null) : /* @__PURE__ */ React__default.createElement("ul", { role: "select", className: list() }, [..._options ?? []].map(([key, value]) => /* @__PURE__ */ React__default.createElement("div", { key }, /* @__PURE__ */ React__default.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value.map((option) => /* @__PURE__ */ React__default.createElement(
+      Select.MultiOption,
+      {
+        grouped: true,
+        option,
+        key: keyExtractor(option),
+        onSelectOption: (option2) => handleSelectMulti(
+          option2,
+          currentValue,
+          onSelect,
+          keyExtractor
+        )
+      }
+    )))))
+  );
+};
+
+export { SelectMultiGroupedOptions };

package/dist/esm/components/Select/MultiOption.js

@@ -0,0 +1,41 @@
+import { option, checkbox } from '@tecsinapse/cortex-core';
+import React__default, { useContext, useRef, useMemo, useCallback } from 'react';
+import { SelectContext } from './context.js';
+
+const SelectMultiOption = ({
+  onSelectOption,
+  option: option$1,
+  grouped = false
+}) => {
+  const { keyExtractor, labelExtractor, value } = useContext(SelectContext);
+  const inputRef = useRef(null);
+  const isChecked = useMemo(
+    () => value?.length > 0 && value.find((it) => keyExtractor(it) === keyExtractor(option$1)) !== void 0,
+    [value, option$1]
+  );
+  const onClickOption = useCallback(() => {
+    onSelectOption(option$1);
+    inputRef.current?.click();
+  }, [onSelectOption, inputRef]);
+  return /* @__PURE__ */ React__default.createElement(
+    "li",
+    {
+      onClick: onClickOption,
+      className: option({ grouped }),
+      role: "option"
+    },
+    /* @__PURE__ */ React__default.createElement(
+      "input",
+      {
+        type: "checkbox",
+        checked: isChecked,
+        className: checkbox({ className: "pointer-events-none" }),
+        onChange: () => false,
+        ref: inputRef
+      }
+    ),
+    labelExtractor(option$1)
+  );
+};
+
+export { SelectMultiOption };

package/dist/esm/components/Select/MultiOptions.js

@@ -0,0 +1,31 @@
+import { selectVariants } from '@tecsinapse/cortex-core';
+import React__default, { useContext } from 'react';
+import { Select } from './index.js';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import '@floating-ui/react';
+import { useSelectOptions } from '../../hooks/useSelectOptions.js';
+import { SkeletonOptions } from './SkeletonOptions.js';
+import { SelectContext, SelectMultiOptionsContext } from './context.js';
+import { handleSelectMulti } from './utils.js';
+
+const { list } = selectVariants();
+const SelectMultiOptions = ({
+  onSelect,
+  options,
+  children
+}) => {
+  const { keyExtractor, value: currentValue = [] } = useContext(SelectContext);
+  const { options: _options, isLoading } = useSelectOptions({ options });
+  return /* @__PURE__ */ React__default.createElement(SelectMultiOptionsContext.Provider, { value: { onSelect, options: _options } }, isLoading ? /* @__PURE__ */ React__default.createElement(SkeletonOptions, null) : /* @__PURE__ */ React__default.createElement("ul", { role: "select", className: list() }, children, _options?.map((option) => /* @__PURE__ */ React__default.createElement(
+    Select.MultiOption,
+    {
+      option,
+      key: keyExtractor(option),
+      onSelectOption: (option2) => handleSelectMulti(option2, currentValue, onSelect, keyExtractor)
+    }
+  ))));
+};
+
+export { SelectMultiOptions };