@tecsinapse/cortex-react 1.3.0-beta.16 → 1.3.0-beta.18

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

@@ -32,8 +32,10 @@ require('../../styles/calendar-cell.js');
 require('../../styles/groupButton.js');
 require('../../styles/progressBar.js');
 require('../Select/GroupedOptions.js');
-require('../Select/MultiGroupedOptions.js');
 require('../Select/context.js');
+require('../Select/MultiGroupedOptions.js');
+require('../Select/MultiOptions.js');
+require('../Select/Options.js');
 require('../Select/Trigger.js');
 require('../Tag.js');
 require('../TextArea.js');

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var React = require('react');
 var clsx = require('clsx');
+var React = require('react');
 var Context = require('./Context.js');
 
 const PopoverContent = ({
@@ -14,7 +14,7 @@ const PopoverContent = ({
     {
       ref: refs.setFloating,
       className: clsx(
-        "border border-gray-200 bg-black  p-4 rounded-md shadow-lg z-50",
+        "border border-gray-200 bg-black p-[0px] rounded-md shadow-lg z-50",
         className
       ),
       style: {

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

@@ -18,4 +18,4 @@ const Content = ({ children }) => {
   return /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, children);
 };
 
-module.exports = Content;
+exports.Content = Content;

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

@@ -3,10 +3,10 @@
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
 var index = require('./index.js');
-var context = require('./context.js');
 var Context = require('../Popover/Context.js');
+var context = require('./context.js');
 
-const { groupedTitle, containerGrouped } = cortexCore.selectVariants();
+const { groupedTitle, list } = cortexCore.selectVariants();
 const SelectGroupedOptions = ({
   onSelect,
   groupedLabelExtractor,
@@ -21,9 +21,10 @@ const SelectGroupedOptions = ({
     },
     [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 /* @__PURE__ */ React.createElement("ul", { role: "select", className: list() }, [...options ?? []].map(([key, value]) => /* @__PURE__ */ React.createElement("div", { key }, /* @__PURE__ */ React.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value.map((option) => /* @__PURE__ */ React.createElement(
     index.Select.Option,
     {
+      grouped: true,
       option,
       key: keyExtractor(option),
       onSelectOption: handleSelect

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

@@ -0,0 +1,47 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var context = require('./context.js');
+
+const SelectMultiCheckAllOptions = ({
+  checkAllLabel = "Select all"
+}) => {
+  const { keyExtractor, value: currentValue = [] } = React.useContext(context.SelectContext);
+  const { options, onSelect } = React.useContext(context.SelectMultiOptionsContext);
+  const isChecked = React.useMemo(
+    () => (options ?? []).filter(
+      (it) => currentValue.find((value) => keyExtractor(value) === keyExtractor(it))
+    ).length == (options ?? []).length,
+    [keyExtractor, currentValue, options]
+  );
+  const checkAll = React.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.createElement("div", { className: cortexCore.option(), onClick: checkAll }, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: "checkbox",
+      className: cortexCore.checkbox(),
+      onChange: checkAll,
+      checked: isChecked
+    }
+  ), /* @__PURE__ */ React.createElement("span", null, checkAllLabel)) : /* @__PURE__ */ React.createElement(React.Fragment, null);
+};
+
+exports.SelectMultiCheckAllOptions = SelectMultiCheckAllOptions;

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

@@ -6,21 +6,39 @@ var index = require('./index.js');
 var context = require('./context.js');
 var utils = require('./utils.js');
 
-const { groupedTitle, containerGrouped } = cortexCore.selectVariants();
+const { groupedTitle, list } = cortexCore.selectVariants();
 const SelectMultiGroupedOptions = ({
   onSelect,
   groupedLabelExtractor,
-  options
+  options,
+  children
 }) => {
-  const { value: currentValue, keyExtractor } = React.useContext(context.SelectContext);
-  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(
-    index.Select.MultiOption,
+  const { value: currentValue = [], keyExtractor } = React.useContext(context.SelectContext);
+  const flattenMap = React.useMemo(
+    () => options ? Array.from(options?.values()).flatMap((value) => value) : [],
+    [options]
+  );
+  return /* @__PURE__ */ React.createElement("ul", { role: "select", className: list() }, /* @__PURE__ */ React.createElement(
+    context.SelectMultiOptionsContext.Provider,
     {
-      option,
-      key: keyExtractor(option),
-      onSelectOption: (option2) => utils.handleSelectMulti(option2, currentValue, onSelect)
-    }
-  )))));
+      value: { onSelect, options: flattenMap }
+    },
+    children,
+    [...options ?? []].map(([key, value]) => /* @__PURE__ */ React.createElement("div", { key }, /* @__PURE__ */ React.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value.map((option) => /* @__PURE__ */ React.createElement(
+      index.Select.MultiOption,
+      {
+        grouped: true,
+        option,
+        key: keyExtractor(option),
+        onSelectOption: (option2) => utils.handleSelectMulti(
+          option2,
+          currentValue,
+          onSelect,
+          keyExtractor
+        )
+      }
+    ))))
+  ));
 };
 
 exports.SelectMultiGroupedOptions = SelectMultiGroupedOptions;

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

@@ -6,7 +6,8 @@ var context = require('./context.js');
 
 const SelectMultiOption = ({
   onSelectOption,
-  option
+  option,
+  grouped = false
 }) => {
   const { keyExtractor, labelExtractor, value } = React.useContext(context.SelectContext);
   const inputRef = React.useRef(null);
@@ -18,15 +19,25 @@ const SelectMultiOption = ({
     onSelectOption(option);
     inputRef.current?.click();
   }, [onSelectOption, inputRef]);
-  return /* @__PURE__ */ React.createElement("li", { onClick: onClickOption, className: cortexCore.option(), role: "option" }, /* @__PURE__ */ React.createElement(
-    "input",
+  return /* @__PURE__ */ React.createElement(
+    "li",
     {
-      type: "checkbox",
-      checked: isChecked,
-      className: cortexCore.checkbox({ className: "pointer-events-none" }),
-      ref: inputRef
-    }
-  ), labelExtractor(option));
+      onClick: onClickOption,
+      className: cortexCore.option({ grouped }),
+      role: "option"
+    },
+    /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        type: "checkbox",
+        checked: isChecked,
+        className: cortexCore.checkbox({ className: "pointer-events-none" }),
+        onChange: () => false,
+        ref: inputRef
+      }
+    ),
+    labelExtractor(option)
+  );
 };
 
 exports.SelectMultiOption = SelectMultiOption;

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

@@ -1,23 +1,26 @@
 'use strict';
 
+var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
 var index = require('./index.js');
 var context = require('./context.js');
 var utils = require('./utils.js');
 
+const { list } = cortexCore.selectVariants();
 const SelectMultiOptions = ({
   onSelect,
-  options
+  options,
+  children
 }) => {
-  const { keyExtractor, value: currentValue } = React.useContext(context.SelectContext);
-  return /* @__PURE__ */ React.createElement("ul", { role: "select", className: "list-none" }, (options ?? []).map((option) => /* @__PURE__ */ React.createElement(
+  const { keyExtractor, value: currentValue = [] } = React.useContext(context.SelectContext);
+  return /* @__PURE__ */ React.createElement(context.SelectMultiOptionsContext.Provider, { value: { onSelect, options } }, /* @__PURE__ */ React.createElement("ul", { role: "select", className: list() }, children, (options ?? []).map((option) => /* @__PURE__ */ React.createElement(
     index.Select.MultiOption,
     {
       option,
       key: keyExtractor(option),
-      onSelectOption: (option2) => utils.handleSelectMulti(option2, currentValue, onSelect)
+      onSelectOption: (option2) => utils.handleSelectMulti(option2, currentValue, onSelect, keyExtractor)
     }
-  )));
+  ))));
 };
 
 exports.SelectMultiOptions = SelectMultiOptions;

package/dist/cjs/components/Select/Option.js

@@ -6,7 +6,8 @@ var context = require('./context.js');
 
 const SelectOption = ({
   onSelectOption,
-  option
+  option,
+  grouped = false
 }) => {
   const { keyExtractor, labelExtractor, value } = React.useContext(context.SelectContext);
   return /* @__PURE__ */ React.createElement(
@@ -14,7 +15,8 @@ const SelectOption = ({
     {
       onClick: () => onSelectOption(option),
       className: cortexCore.option({
-        selected: value && keyExtractor(value) === keyExtractor(option)
+        selected: value && keyExtractor(value) === keyExtractor(option),
+        grouped
       }),
       role: "option"
     },

package/dist/cjs/components/Select/Options.js

@@ -1,10 +1,12 @@
 'use strict';
 
+var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
-var context = require('./context.js');
 var index = require('./index.js');
 var Context = require('../Popover/Context.js');
+var context = require('./context.js');
 
+const { list } = cortexCore.selectVariants();
 const SelectOptions = ({
   onSelect,
   options
@@ -18,7 +20,7 @@ const SelectOptions = ({
     },
     [onSelect]
   );
-  return /* @__PURE__ */ React.createElement("ul", { role: "select", className: "list-none" }, (options ?? []).map((option) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("ul", { role: "select", className: list() }, (options ?? []).map((option) => /* @__PURE__ */ React.createElement(
     index.Select.Option,
     {
       option,

package/dist/cjs/components/Select/Popover.js

@@ -4,7 +4,7 @@ var React = require('react');
 var index = require('../Popover/index.js');
 
 const SelectPopover = ({ children }) => {
-  return /* @__PURE__ */ React.createElement(index.Popover.Content, { className: "bg-white max-h-[30vh] w-full overflow-y-scroll gap-y-mili flex flex-col" }, children);
+  return /* @__PURE__ */ React.createElement(index.Popover.Content, { className: "bg-white max-h-[30vh] w-full overflow-y-scroll gap-y-mili flex flex-col p-0" }, children);
 };
 
 exports.SelectPopover = SelectPopover;

package/dist/cjs/components/Select/Root.js

@@ -11,7 +11,7 @@ const SelectRoot = ({
   keyExtractor,
   labelExtractor
 }) => {
-  return /* @__PURE__ */ React.createElement(index.Popover.Provider, null, /* @__PURE__ */ React.createElement(index.Popover.Root, { placement: "bottom", trigger: "click" }, /* @__PURE__ */ React.createElement(context.SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React.createElement(Content, null, children))));
+  return /* @__PURE__ */ React.createElement(index.Popover.Provider, null, /* @__PURE__ */ React.createElement(index.Popover.Root, { placement: "bottom", trigger: "click" }, /* @__PURE__ */ React.createElement(context.SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React.createElement(Content.Content, null, children))));
 };
 
 exports.SelectRoot = SelectRoot;

package/dist/cjs/components/Select/context.js

@@ -6,5 +6,9 @@ const SelectContext = React.createContext({
   keyExtractor: () => "",
   labelExtractor: () => ""
 });
+const SelectMultiOptionsContext = React.createContext({
+  onSelect: () => ""
+});
 
 exports.SelectContext = SelectContext;
+exports.SelectMultiOptionsContext = SelectMultiOptionsContext;

package/dist/cjs/components/Select/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var GroupedOptions = require('./GroupedOptions.js');
+var MultiCheckAllOptions = require('./MultiCheckAllOptions.js');
 var MultiGroupedOptions = require('./MultiGroupedOptions.js');
 var MultiOption = require('./MultiOption.js');
 var MultiOptions = require('./MultiOptions.js');
@@ -19,7 +20,8 @@ const Select = {
   Option: Option.SelectOption,
   MultiOptions: MultiOptions.SelectMultiOptions,
   MultiGroupedOptions: MultiGroupedOptions.SelectMultiGroupedOptions,
-  MultiOption: MultiOption.SelectMultiOption
+  MultiOption: MultiOption.SelectMultiOption,
+  MultiCheckAllOptions: MultiCheckAllOptions.SelectMultiCheckAllOptions
 };
 
 exports.Select = Select;

package/dist/cjs/components/Select/utils.js

@@ -1,8 +1,10 @@
 'use strict';
 
-const handleSelectMulti = (option, value, onSelect) => {
+const handleSelectMulti = (option, value, onSelect, keyExtractor) => {
   const current = Array.from(value ?? []);
-  const indexOf = current.indexOf(option);
+  const indexOf = current.findIndex(
+    (it) => keyExtractor(it) === keyExtractor(option)
+  );
   if (indexOf === -1) {
     current.push(option);
   } else {

package/dist/cjs/provider/SnackbarProvider.js

@@ -42,8 +42,10 @@ require('../styles/calendar-cell.js');
 require('../styles/groupButton.js');
 require('../styles/progressBar.js');
 require('../components/Select/GroupedOptions.js');
-require('../components/Select/MultiGroupedOptions.js');
 require('../components/Select/context.js');
+require('../components/Select/MultiGroupedOptions.js');
+require('../components/Select/MultiOptions.js');
+require('../components/Select/Options.js');
 require('../components/Select/Trigger.js');
 require('../components/Tag.js');
 require('../components/TextArea.js');

package/dist/cjs/service/SnackbarSonner.js

@@ -43,8 +43,10 @@ require('../styles/calendar-cell.js');
 require('../styles/groupButton.js');
 require('../styles/progressBar.js');
 require('../components/Select/GroupedOptions.js');
-require('../components/Select/MultiGroupedOptions.js');
 require('../components/Select/context.js');
+require('../components/Select/MultiGroupedOptions.js');
+require('../components/Select/MultiOptions.js');
+require('../components/Select/Options.js');
 require('../components/Select/Trigger.js');
 require('../components/Tag.js');
 require('../components/TextArea.js');

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

@@ -30,8 +30,10 @@ import '../../styles/calendar-cell.js';
 import '../../styles/groupButton.js';
 import '../../styles/progressBar.js';
 import '../Select/GroupedOptions.js';
-import '../Select/MultiGroupedOptions.js';
 import '../Select/context.js';
+import '../Select/MultiGroupedOptions.js';
+import '../Select/MultiOptions.js';
+import '../Select/Options.js';
 import '../Select/Trigger.js';
 import '../Tag.js';
 import '../TextArea.js';

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

@@ -1,5 +1,5 @@
-import React from 'react';
 import clsx from 'clsx';
+import React from 'react';
 import { usePopoverContext } from './Context.js';
 
 const PopoverContent = ({
@@ -12,7 +12,7 @@ const PopoverContent = ({
     {
       ref: refs.setFloating,
       className: clsx(
-        "border border-gray-200 bg-black  p-4 rounded-md shadow-lg z-50",
+        "border border-gray-200 bg-black p-[0px] rounded-md shadow-lg z-50",
         className
       ),
       style: {

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

@@ -16,4 +16,4 @@ const Content = ({ children }) => {
   return /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, children);
 };
 
-export { Content as default };
+export { Content };

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

@@ -1,10 +1,10 @@
 import { selectVariants } from '@tecsinapse/cortex-core';
 import React, { useContext, useCallback } from 'react';
 import { Select } from './index.js';
-import { SelectContext } from './context.js';
 import { usePopoverContext } from '../Popover/Context.js';
+import { SelectContext } from './context.js';
 
-const { groupedTitle, containerGrouped } = selectVariants();
+const { groupedTitle, list } = selectVariants();
 const SelectGroupedOptions = ({
   onSelect,
   groupedLabelExtractor,
@@ -19,9 +19,10 @@ const SelectGroupedOptions = ({
     },
     [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 /* @__PURE__ */ React.createElement("ul", { role: "select", className: list() }, [...options ?? []].map(([key, value]) => /* @__PURE__ */ React.createElement("div", { key }, /* @__PURE__ */ React.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value.map((option) => /* @__PURE__ */ React.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, { 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.createElement("div", { className: option(), onClick: checkAll }, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: "checkbox",
+      className: checkbox(),
+      onChange: checkAll,
+      checked: isChecked
+    }
+  ), /* @__PURE__ */ React.createElement("span", null, checkAllLabel)) : /* @__PURE__ */ React.createElement(React.Fragment, null);
+};
+
+export { SelectMultiCheckAllOptions };

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

@@ -1,24 +1,42 @@
 import { selectVariants } from '@tecsinapse/cortex-core';
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { Select } from './index.js';
-import { SelectContext } from './context.js';
+import { SelectContext, SelectMultiOptionsContext } from './context.js';
 import { handleSelectMulti } from './utils.js';
 
-const { groupedTitle, containerGrouped } = selectVariants();
+const { groupedTitle, list } = selectVariants();
 const SelectMultiGroupedOptions = ({
   onSelect,
   groupedLabelExtractor,
-  options
+  options,
+  children
 }) => {
-  const { value: currentValue, keyExtractor } = useContext(SelectContext);
-  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(
-    Select.MultiOption,
+  const { value: currentValue = [], keyExtractor } = useContext(SelectContext);
+  const flattenMap = useMemo(
+    () => options ? Array.from(options?.values()).flatMap((value) => value) : [],
+    [options]
+  );
+  return /* @__PURE__ */ React.createElement("ul", { role: "select", className: list() }, /* @__PURE__ */ React.createElement(
+    SelectMultiOptionsContext.Provider,
     {
-      option,
-      key: keyExtractor(option),
-      onSelectOption: (option2) => handleSelectMulti(option2, currentValue, onSelect)
-    }
-  )))));
+      value: { onSelect, options: flattenMap }
+    },
+    children,
+    [...options ?? []].map(([key, value]) => /* @__PURE__ */ React.createElement("div", { key }, /* @__PURE__ */ React.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value.map((option) => /* @__PURE__ */ React.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

@@ -4,7 +4,8 @@ import { SelectContext } from './context.js';
 
 const SelectMultiOption = ({
   onSelectOption,
-  option: option$1
+  option: option$1,
+  grouped = false
 }) => {
   const { keyExtractor, labelExtractor, value } = useContext(SelectContext);
   const inputRef = useRef(null);
@@ -16,15 +17,25 @@ const SelectMultiOption = ({
     onSelectOption(option$1);
     inputRef.current?.click();
   }, [onSelectOption, inputRef]);
-  return /* @__PURE__ */ React.createElement("li", { onClick: onClickOption, className: option(), role: "option" }, /* @__PURE__ */ React.createElement(
-    "input",
+  return /* @__PURE__ */ React.createElement(
+    "li",
     {
-      type: "checkbox",
-      checked: isChecked,
-      className: checkbox({ className: "pointer-events-none" }),
-      ref: inputRef
-    }
-  ), labelExtractor(option$1));
+      onClick: onClickOption,
+      className: option({ grouped }),
+      role: "option"
+    },
+    /* @__PURE__ */ React.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

@@ -1,21 +1,24 @@
+import { selectVariants } from '@tecsinapse/cortex-core';
 import React, { useContext } from 'react';
 import { Select } from './index.js';
-import { SelectContext } from './context.js';
+import { SelectContext, SelectMultiOptionsContext } from './context.js';
 import { handleSelectMulti } from './utils.js';
 
+const { list } = selectVariants();
 const SelectMultiOptions = ({
   onSelect,
-  options
+  options,
+  children
 }) => {
-  const { keyExtractor, value: currentValue } = useContext(SelectContext);
-  return /* @__PURE__ */ React.createElement("ul", { role: "select", className: "list-none" }, (options ?? []).map((option) => /* @__PURE__ */ React.createElement(
+  const { keyExtractor, value: currentValue = [] } = useContext(SelectContext);
+  return /* @__PURE__ */ React.createElement(SelectMultiOptionsContext.Provider, { value: { onSelect, options } }, /* @__PURE__ */ React.createElement("ul", { role: "select", className: list() }, children, (options ?? []).map((option) => /* @__PURE__ */ React.createElement(
     Select.MultiOption,
     {
       option,
       key: keyExtractor(option),
-      onSelectOption: (option2) => handleSelectMulti(option2, currentValue, onSelect)
+      onSelectOption: (option2) => handleSelectMulti(option2, currentValue, onSelect, keyExtractor)
     }
-  )));
+  ))));
 };
 
 export { SelectMultiOptions };

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

@@ -4,7 +4,8 @@ import { SelectContext } from './context.js';
 
 const SelectOption = ({
   onSelectOption,
-  option: option$1
+  option: option$1,
+  grouped = false
 }) => {
   const { keyExtractor, labelExtractor, value } = useContext(SelectContext);
   return /* @__PURE__ */ React.createElement(
@@ -12,7 +13,8 @@ const SelectOption = ({
     {
       onClick: () => onSelectOption(option$1),
       className: option({
-        selected: value && keyExtractor(value) === keyExtractor(option$1)
+        selected: value && keyExtractor(value) === keyExtractor(option$1),
+        grouped
       }),
       role: "option"
     },

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

@@ -1,8 +1,10 @@
+import { selectVariants } from '@tecsinapse/cortex-core';
 import React, { useContext, useCallback } from 'react';
-import { SelectContext } from './context.js';
 import { Select } from './index.js';
 import { usePopoverContext } from '../Popover/Context.js';
+import { SelectContext } from './context.js';
 
+const { list } = selectVariants();
 const SelectOptions = ({
   onSelect,
   options
@@ -16,7 +18,7 @@ const SelectOptions = ({
     },
     [onSelect]
   );
-  return /* @__PURE__ */ React.createElement("ul", { role: "select", className: "list-none" }, (options ?? []).map((option) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("ul", { role: "select", className: list() }, (options ?? []).map((option) => /* @__PURE__ */ React.createElement(
     Select.Option,
     {
       option,

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Popover } from '../Popover/index.js';
 
 const SelectPopover = ({ children }) => {
-  return /* @__PURE__ */ React.createElement(Popover.Content, { className: "bg-white max-h-[30vh] w-full overflow-y-scroll gap-y-mili flex flex-col" }, children);
+  return /* @__PURE__ */ React.createElement(Popover.Content, { className: "bg-white max-h-[30vh] w-full overflow-y-scroll gap-y-mili flex flex-col p-0" }, children);
 };
 
 export { SelectPopover };

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Popover } from '../Popover/index.js';
-import Content from './Content.js';
+import { Content } from './Content.js';
 import { SelectContext } from './context.js';
 
 const SelectRoot = ({

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

@@ -4,5 +4,8 @@ const SelectContext = createContext({
   keyExtractor: () => "",
   labelExtractor: () => ""
 });
+const SelectMultiOptionsContext = createContext({
+  onSelect: () => ""
+});
 
-export { SelectContext };
+export { SelectContext, SelectMultiOptionsContext };

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

@@ -1,4 +1,5 @@
 import { SelectGroupedOptions } from './GroupedOptions.js';
+import { SelectMultiCheckAllOptions } from './MultiCheckAllOptions.js';
 import { SelectMultiGroupedOptions } from './MultiGroupedOptions.js';
 import { SelectMultiOption } from './MultiOption.js';
 import { SelectMultiOptions } from './MultiOptions.js';
@@ -17,7 +18,8 @@ const Select = {
   Option: SelectOption,
   MultiOptions: SelectMultiOptions,
   MultiGroupedOptions: SelectMultiGroupedOptions,
-  MultiOption: SelectMultiOption
+  MultiOption: SelectMultiOption,
+  MultiCheckAllOptions: SelectMultiCheckAllOptions
 };
 
 export { Select };

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

@@ -1,6 +1,8 @@
-const handleSelectMulti = (option, value, onSelect) => {
+const handleSelectMulti = (option, value, onSelect, keyExtractor) => {
   const current = Array.from(value ?? []);
-  const indexOf = current.indexOf(option);
+  const indexOf = current.findIndex(
+    (it) => keyExtractor(it) === keyExtractor(option)
+  );
   if (indexOf === -1) {
     current.push(option);
   } else {

package/dist/esm/provider/SnackbarProvider.js

@@ -40,8 +40,10 @@ import '../styles/calendar-cell.js';
 import '../styles/groupButton.js';
 import '../styles/progressBar.js';
 import '../components/Select/GroupedOptions.js';
-import '../components/Select/MultiGroupedOptions.js';
 import '../components/Select/context.js';
+import '../components/Select/MultiGroupedOptions.js';
+import '../components/Select/MultiOptions.js';
+import '../components/Select/Options.js';
 import '../components/Select/Trigger.js';
 import '../components/Tag.js';
 import '../components/TextArea.js';

package/dist/esm/service/SnackbarSonner.js

@@ -41,8 +41,10 @@ import '../styles/calendar-cell.js';
 import '../styles/groupButton.js';
 import '../styles/progressBar.js';
 import '../components/Select/GroupedOptions.js';
-import '../components/Select/MultiGroupedOptions.js';
 import '../components/Select/context.js';
+import '../components/Select/MultiGroupedOptions.js';
+import '../components/Select/MultiOptions.js';
+import '../components/Select/Options.js';
 import '../components/Select/Trigger.js';
 import '../components/Tag.js';
 import '../components/TextArea.js';

package/dist/types/components/Select/Content.d.ts

@@ -2,5 +2,5 @@ import { ReactNode } from 'react';
 interface ContentProps {
     children: ReactNode;
 }
-declare const Content: ({ children }: ContentProps) => JSX.Element;
-export default Content;
+export declare const Content: ({ children }: ContentProps) => JSX.Element;
+export {};

package/dist/types/components/Select/MultiCheckAllOptions.d.ts

@@ -0,0 +1,4 @@
+export interface SelectMultiCheckAllOptionsProps {
+    checkAllLabel?: string;
+}
+export declare const SelectMultiCheckAllOptions: <T>({ checkAllLabel, }: SelectMultiCheckAllOptionsProps) => JSX.Element;

package/dist/types/components/Select/MultiGroupedOptions.d.ts

@@ -1,6 +1,8 @@
+import React from 'react';
 export interface SelectMultiGroupedOptionsProps<T> {
     onSelect: (value: T[]) => void;
     options?: Map<string, T[]>;
     groupedLabelExtractor: (value: string) => string;
+    children?: React.ReactNode;
 }
-export declare const SelectMultiGroupedOptions: <T>({ onSelect, groupedLabelExtractor, options, }: SelectMultiGroupedOptionsProps<T>) => JSX.Element;
+export declare const SelectMultiGroupedOptions: <T>({ onSelect, groupedLabelExtractor, options, children, }: SelectMultiGroupedOptionsProps<T>) => JSX.Element;

package/dist/types/components/Select/MultiOption.d.ts

@@ -1,5 +1,6 @@
 export interface SelectMultiOptionProps<T> {
     option: T;
     onSelectOption: (option: T) => void;
+    grouped?: boolean;
 }
-export declare const SelectMultiOption: <T>({ onSelectOption, option, }: SelectMultiOptionProps<T>) => JSX.Element;
+export declare const SelectMultiOption: <T>({ onSelectOption, option, grouped, }: SelectMultiOptionProps<T>) => JSX.Element;

package/dist/types/components/Select/MultiOptions.d.ts

@@ -1,5 +1,7 @@
+import React from 'react';
 export interface SelectMultiOptionsProps<T> {
     options?: T[];
     onSelect: (value: T[]) => void;
+    children?: React.ReactNode;
 }
-export declare const SelectMultiOptions: <T>({ onSelect, options, }: SelectMultiOptionsProps<T>) => JSX.Element;
+export declare const SelectMultiOptions: <T>({ onSelect, options, children, }: SelectMultiOptionsProps<T>) => JSX.Element;

package/dist/types/components/Select/Option.d.ts

@@ -1,5 +1,6 @@
 export interface SelectOptionProps<T> {
     option: T;
     onSelectOption: (option: T) => void;
+    grouped?: boolean;
 }
-export declare const SelectOption: <T>({ onSelectOption, option, }: SelectOptionProps<T>) => JSX.Element;
+export declare const SelectOption: <T>({ onSelectOption, option, grouped, }: SelectOptionProps<T>) => JSX.Element;

package/dist/types/components/Select/context.d.ts

@@ -4,4 +4,9 @@ interface SelectContextProps<T> {
     labelExtractor: (value: T) => string;
 }
 export declare const SelectContext: import("react").Context<SelectContextProps<any>>;
+interface SelectMultiOptionsContextProps<T> {
+    options?: T[];
+    onSelect: (value: T[]) => void;
+}
+export declare const SelectMultiOptionsContext: import("react").Context<SelectMultiOptionsContextProps<any>>;
 export {};

package/dist/types/components/Select/index.d.ts

@@ -4,8 +4,9 @@ export declare const Select: {
     Popover: ({ children }: import("./Popover").SelectPopoverProps) => JSX.Element;
     Options: <T_1>({ onSelect, options, }: import("./Options").SelectOptionsProps<T_1>) => JSX.Element;
     GroupedOptions: <T_2>({ onSelect, groupedLabelExtractor, options, }: import("./GroupedOptions").SelectGroupedOptionsProps<T_2>) => JSX.Element;
-    Option: <T_3>({ onSelectOption, option, }: import("./Option").SelectOptionProps<T_3>) => JSX.Element;
-    MultiOptions: <T_4>({ onSelect, options, }: import("./MultiOptions").SelectMultiOptionsProps<T_4>) => JSX.Element;
-    MultiGroupedOptions: <T_5>({ onSelect, groupedLabelExtractor, options, }: import("./MultiGroupedOptions").SelectMultiGroupedOptionsProps<T_5>) => JSX.Element;
-    MultiOption: <T_6>({ onSelectOption, option, }: import("./MultiOption").SelectMultiOptionProps<T_6>) => JSX.Element;
+    Option: <T_3>({ onSelectOption, option, grouped, }: import("./Option").SelectOptionProps<T_3>) => JSX.Element;
+    MultiOptions: <T_4>({ onSelect, options, children, }: import("./MultiOptions").SelectMultiOptionsProps<T_4>) => JSX.Element;
+    MultiGroupedOptions: <T_5>({ onSelect, groupedLabelExtractor, options, children, }: import("./MultiGroupedOptions").SelectMultiGroupedOptionsProps<T_5>) => JSX.Element;
+    MultiOption: <T_6>({ onSelectOption, option, grouped, }: import("./MultiOption").SelectMultiOptionProps<T_6>) => JSX.Element;
+    MultiCheckAllOptions: <T_7>({ checkAllLabel, }: import("./MultiCheckAllOptions").SelectMultiCheckAllOptionsProps) => JSX.Element;
 };

package/dist/types/components/Select/utils.d.ts

@@ -1 +1 @@
-export declare const handleSelectMulti: <T>(option: T, value: T[], onSelect: (value: T[]) => void) => void;
+export declare const handleSelectMulti: <T>(option: T, value: T[], onSelect: (value: T[]) => void, keyExtractor: (value: T) => string) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.3.0-beta.16",
+  "version": "1.3.0-beta.18",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.18",
     "@internationalized/date": "*",
-    "@tecsinapse/cortex-core": "0.3.0-beta.8",
+    "@tecsinapse/cortex-core": "0.3.0-beta.10",
     "clsx": "*",
     "react-aria": "^3.33.1",
     "react-icons": "^5.2.1",
@@ -43,5 +43,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "61cbf81c03570640266b11e0330e7da91344006b"
+  "gitHead": "77df5fcf8a51f5f7163663ef33a4961829823940"
 }