@tecsinapse/cortex-react 1.3.0-beta.1 → 1.3.0-beta.2

package/dist/cjs/components/Input.js

@@ -9,7 +9,7 @@ const getValidChildren = (children) => {
     (el) => React.isValidElement(el)
   );
 };
-const Box = React.forwardRef(
+const InputBox = React.forwardRef(
   ({ id, name, variants, label, placeholder, className, ...rest }, ref) => {
     return /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col" }, /* @__PURE__ */ React.createElement(
       "input",
@@ -33,7 +33,7 @@ const Box = React.forwardRef(
     ));
   }
 );
-const Face = React.forwardRef(
+const InputFace = React.forwardRef(
   ({ children, variants, className, ...rest }, ref) => {
     const clones = getValidChildren(children).map((el) => {
       return React.cloneElement(el, { ...el.props, variants });
@@ -50,32 +50,32 @@ const Face = React.forwardRef(
     );
   }
 );
-const Root = React.forwardRef(
+const InputRoot = React.forwardRef(
   ({ variants, className, ...rest }, ref) => {
-    return /* @__PURE__ */ React.createElement(Face, { variants, className }, /* @__PURE__ */ React.createElement(Box, { ...rest, ref }));
+    return /* @__PURE__ */ React.createElement(InputFace, { variants, className }, /* @__PURE__ */ React.createElement(InputBox, { ...rest, ref }));
   }
 );
-const Left = React.forwardRef(
+const InputLeft = React.forwardRef(
   ({ children, className, ...rest }, ref) => {
     return /* @__PURE__ */ React.createElement("div", { className: clsx.clsx(className, "mr-2.5"), ...rest, ref }, children);
   }
 );
-const Right = React.forwardRef(
+const InputRight = React.forwardRef(
   ({ children, className, ...rest }, ref) => {
     return /* @__PURE__ */ React.createElement("div", { className: clsx.clsx(className, "ml-2.5"), ...rest, ref }, children);
   }
 );
 const Input = {
-  Root,
-  Face,
-  Box,
-  Left,
-  Right
+  Root: InputRoot,
+  Face: InputFace,
+  Box: InputBox,
+  Left: InputLeft,
+  Right: InputRight
 };
 
-exports.Box = Box;
-exports.Face = Face;
 exports.Input = Input;
-exports.Left = Left;
-exports.Right = Right;
-exports.Root = Root;
+exports.InputBox = InputBox;
+exports.InputFace = InputFace;
+exports.InputLeft = InputLeft;
+exports.InputRight = InputRight;
+exports.InputRoot = InputRoot;

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

@@ -0,0 +1,32 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var index = require('./index.js');
+var context = require('./context.js');
+
+const { groupedTitle, containerGrouped } = cortexCore.selectVariants();
+const SelectGroupedOptions = ({
+  onSelect,
+  groupedLabelExtractor,
+  options
+}) => {
+  const { setOpen, keyExtractor } = React.useContext(context.SelectContext);
+  const handleSelect = React.useCallback(
+    (option) => {
+      onSelect(option);
+      setOpen?.(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(
+    index.Select.Option,
+    {
+      option,
+      key: keyExtractor(option),
+      onSelectOption: handleSelect
+    }
+  )))));
+};
+
+exports.SelectGroupedOptions = SelectGroupedOptions;

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

@@ -0,0 +1,25 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var context = require('./context.js');
+
+const SelectOption = ({
+  onSelectOption,
+  option
+}) => {
+  const { keyExtractor, labelExtractor, value } = React.useContext(context.SelectContext);
+  return /* @__PURE__ */ React.createElement(
+    "li",
+    {
+      onClick: () => onSelectOption(option),
+      className: cortexCore.option({
+        selected: value && keyExtractor(value) === keyExtractor(option)
+      }),
+      role: "option"
+    },
+    labelExtractor(option)
+  );
+};
+
+exports.SelectOption = SelectOption;

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

@@ -0,0 +1,29 @@
+'use strict';
+
+var React = require('react');
+var index = require('./index.js');
+var context = require('./context.js');
+
+const SelectOptions = ({
+  onSelect,
+  options
+}) => {
+  const { setOpen, keyExtractor } = React.useContext(context.SelectContext);
+  const handleSelect = React.useCallback(
+    (option) => {
+      onSelect(option);
+      setOpen?.(false);
+    },
+    [onSelect]
+  );
+  return /* @__PURE__ */ React.createElement("ul", { role: "select" }, (options ?? []).map((option) => /* @__PURE__ */ React.createElement(
+    index.Select.Option,
+    {
+      option,
+      key: keyExtractor(option),
+      onSelectOption: handleSelect
+    }
+  )));
+};
+
+exports.SelectOptions = SelectOptions;

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

@@ -0,0 +1,13 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var context = require('./context.js');
+
+const { dropdown } = cortexCore.selectVariants();
+const SelectPopover = ({ children }) => {
+  const { open } = React.useContext(context.SelectContext);
+  return /* @__PURE__ */ React.createElement("div", { className: dropdown({ open }), "data-testid": "select-popover" }, children);
+};
+
+exports.SelectPopover = SelectPopover;

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

@@ -0,0 +1,31 @@
+'use strict';
+
+var React = require('react');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+var useOutsideClickListener = require('../../hooks/useOutsideClickListener.js');
+var context = require('./context.js');
+
+const SelectRoot = ({
+  children,
+  value,
+  keyExtractor,
+  labelExtractor
+}) => {
+  const [open, setOpen] = React.useState(false);
+  const ref = React.useRef(null);
+  useOutsideClickListener.useOutsideClickListener({
+    ref,
+    onClickOutside: () => setOpen?.(false)
+  });
+  return /* @__PURE__ */ React.createElement(
+    context.SelectContext.Provider,
+    {
+      value: { value, open, setOpen, keyExtractor, labelExtractor }
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, children)
+  );
+};
+
+exports.SelectRoot = SelectRoot;

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

@@ -0,0 +1,28 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var io5 = require('react-icons/io5');
+var context = require('./context.js');
+
+const { button } = cortexCore.selectVariants();
+const SelectTrigger = ({ label, disabled }) => {
+  const { value, setOpen, labelExtractor, open } = React.useContext(context.SelectContext);
+  const placeholder = React.useMemo(
+    () => value ? labelExtractor(value) : label,
+    [label, value]
+  );
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: button({ disabled }),
+      onClick: () => setOpen?.(!open),
+      disabled,
+      role: "button"
+    },
+    /* @__PURE__ */ React.createElement("span", { "data-testid": "select-placeholder" }, placeholder),
+    /* @__PURE__ */ React.createElement(io5.IoChevronDownOutline, null)
+  );
+};
+
+exports.SelectTrigger = SelectTrigger;

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

@@ -0,0 +1,10 @@
+'use strict';
+
+var React = require('react');
+
+const SelectContext = React.createContext({
+  keyExtractor: () => "",
+  labelExtractor: () => ""
+});
+
+exports.SelectContext = SelectContext;

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

@@ -0,0 +1,19 @@
+'use strict';
+
+var GroupedOptions = require('./GroupedOptions.js');
+var Option = require('./Option.js');
+var Options = require('./Options.js');
+var Popover = require('./Popover.js');
+var Root = require('./Root.js');
+var Trigger = require('./Trigger.js');
+
+const Select = {
+  Root: Root.SelectRoot,
+  Trigger: Trigger.SelectTrigger,
+  Popover: Popover.SelectPopover,
+  Options: Options.SelectOptions,
+  GroupedOptions: GroupedOptions.SelectGroupedOptions,
+  Option: Option.SelectOption
+};
+
+exports.Select = Select;

package/dist/cjs/hooks/useOutsideClickListener.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var React = require('react');
+
+const useOutsideClickListener = ({
+  ref,
+  onClickOutside
+}) => {
+  const handleClickOutside = React.useCallback((event) => {
+    if (ref.current && !ref.current.contains(event.target)) {
+      onClickOutside?.();
+    }
+  }, []);
+  React.useEffect(() => {
+    document.addEventListener("click", handleClickOutside, true);
+    return () => {
+      document.removeEventListener("click", handleClickOutside, true);
+    };
+  }, [handleClickOutside]);
+};
+
+exports.useOutsideClickListener = useOutsideClickListener;

package/dist/cjs/index.js

@@ -17,20 +17,25 @@ var Input = require('./components/Input.js');
 var Modal = require('./components/Modal.js');
 var ProgressBar = require('./components/ProgressBar.js');
 var RangeCalendar = require('./components/RangeCalendar.js');
-var Select = require('./components/Select.js');
-var Skeleton = require('./components/Skeleton.js');
-var Table = require('./components/Table.js');
-var Tag = require('./components/Tag.js');
-var TextArea = require('./components/TextArea.js');
-var TimeFieldInput = require('./components/TimeFieldInput.js');
-var Toggle = require('./components/Toggle.js');
+require('react');
+require('react-icons/ai');
+require('react-icons/io5');
+require('tailwind-merge');
 var useCalendar = require('./hooks/useCalendar.js');
 var useCalendarCell = require('./hooks/useCalendarCell.js');
 var useCalendarGrid = require('./hooks/useCalendarGrid.js');
 var useDatePickerInput = require('./hooks/useDatePickerInput.js');
 var useDateRangePickerInput = require('./hooks/useDateRangePickerInput.js');
 var useDebouncedState = require('./hooks/useDebouncedState.js');
+var useOutsideClickListener = require('./hooks/useOutsideClickListener.js');
 var useRangeCalendar = require('./hooks/useRangeCalendar.js');
+var index = require('./components/Select/index.js');
+var Skeleton = require('./components/Skeleton.js');
+var Table = require('./components/Table.js');
+var Tag = require('./components/Tag.js');
+var TextArea = require('./components/TextArea.js');
+var TimeFieldInput = require('./components/TimeFieldInput.js');
+var Toggle = require('./components/Toggle.js');
 var SnackbarSonner = require('./service/SnackbarSonner.js');
 
 
@@ -49,16 +54,24 @@ exports.DefaultSnack = DefaultSnack.DefaultSnack;
 exports.Drawer = Drawer.Drawer;
 exports.GroupButton = GroupButton.GroupButton;
 exports.Hint = Hint.Hint;
-exports.Box = Input.Box;
-exports.Face = Input.Face;
 exports.Input = Input.Input;
-exports.Left = Input.Left;
-exports.Right = Input.Right;
-exports.Root = Input.Root;
+exports.InputBox = Input.InputBox;
+exports.InputFace = Input.InputFace;
+exports.InputLeft = Input.InputLeft;
+exports.InputRight = Input.InputRight;
+exports.InputRoot = Input.InputRoot;
 exports.Modal = Modal.Modal;
 exports.ProgressBar = ProgressBar.ProgressBar;
 exports.RangeCalendar = RangeCalendar.RangeCalendar;
-exports.Select = Select.Select;
+exports.useCalendar = useCalendar.useCalendar;
+exports.useCalendarCell = useCalendarCell.useCalendarCell;
+exports.useCalendarGrid = useCalendarGrid.useCalendarGrid;
+exports.useDatePickerInput = useDatePickerInput.useDatePickerInput;
+exports.useDateRangePickerInput = useDateRangePickerInput.useDateRangePickerInput;
+exports.useDebouncedState = useDebouncedState.useDebouncedState;
+exports.useOutsideClickListener = useOutsideClickListener.useOutsideClickListener;
+exports.useRangeCalendar = useRangeCalendar.useRangeCalendar;
+exports.Select = index.Select;
 exports.Skeleton = Skeleton.Skeleton;
 exports.TCell = Table.TCell;
 exports.TFoot = Table.TFoot;
@@ -72,11 +85,4 @@ exports.Tag = Tag.Tag;
 exports.TextArea = TextArea.TextArea;
 exports.TimeFieldInput = TimeFieldInput.TimeFieldInput;
 exports.Toggle = Toggle.Toggle;
-exports.useCalendar = useCalendar.useCalendar;
-exports.useCalendarCell = useCalendarCell.useCalendarCell;
-exports.useCalendarGrid = useCalendarGrid.useCalendarGrid;
-exports.useDatePickerInput = useDatePickerInput.useDatePickerInput;
-exports.useDateRangePickerInput = useDateRangePickerInput.useDateRangePickerInput;
-exports.useDebouncedState = useDebouncedState.useDebouncedState;
-exports.useRangeCalendar = useRangeCalendar.useRangeCalendar;
 exports.SnackbarSonner = SnackbarSonner.SnackbarSonner;

package/dist/cjs/service/SnackbarSonner.js

@@ -23,7 +23,13 @@ require('../components/Modal.js');
 require('../styles/calendar-cell.js');
 require('../styles/groupButton.js');
 require('../styles/progressBar.js');
-require('../components/Select.js');
+require('react-icons/ai');
+require('react-icons/io5');
+require('tailwind-merge');
+require('../components/Select/GroupedOptions.js');
+require('../components/Select/context.js');
+require('../components/Select/Popover.js');
+require('../components/Select/Trigger.js');
 require('../components/Tag.js');
 require('../components/TextArea.js');
 require('../components/Toggle.js');

package/dist/esm/components/Input.js

@@ -7,7 +7,7 @@ const getValidChildren = (children) => {
     (el) => React.isValidElement(el)
   );
 };
-const Box = React.forwardRef(
+const InputBox = React.forwardRef(
   ({ id, name, variants, label, placeholder, className, ...rest }, ref) => {
     return /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col" }, /* @__PURE__ */ React.createElement(
       "input",
@@ -31,7 +31,7 @@ const Box = React.forwardRef(
     ));
   }
 );
-const Face = React.forwardRef(
+const InputFace = React.forwardRef(
   ({ children, variants, className, ...rest }, ref) => {
     const clones = getValidChildren(children).map((el) => {
       return React.cloneElement(el, { ...el.props, variants });
@@ -48,27 +48,27 @@ const Face = React.forwardRef(
     );
   }
 );
-const Root = React.forwardRef(
+const InputRoot = React.forwardRef(
   ({ variants, className, ...rest }, ref) => {
-    return /* @__PURE__ */ React.createElement(Face, { variants, className }, /* @__PURE__ */ React.createElement(Box, { ...rest, ref }));
+    return /* @__PURE__ */ React.createElement(InputFace, { variants, className }, /* @__PURE__ */ React.createElement(InputBox, { ...rest, ref }));
   }
 );
-const Left = React.forwardRef(
+const InputLeft = React.forwardRef(
   ({ children, className, ...rest }, ref) => {
     return /* @__PURE__ */ React.createElement("div", { className: clsx(className, "mr-2.5"), ...rest, ref }, children);
   }
 );
-const Right = React.forwardRef(
+const InputRight = React.forwardRef(
   ({ children, className, ...rest }, ref) => {
     return /* @__PURE__ */ React.createElement("div", { className: clsx(className, "ml-2.5"), ...rest, ref }, children);
   }
 );
 const Input = {
-  Root,
-  Face,
-  Box,
-  Left,
-  Right
+  Root: InputRoot,
+  Face: InputFace,
+  Box: InputBox,
+  Left: InputLeft,
+  Right: InputRight
 };
 
-export { Box, Face, Input, Left, Right, Root };
+export { Input, InputBox, InputFace, InputLeft, InputRight, InputRoot };

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

@@ -0,0 +1,30 @@
+import { selectVariants } from '@tecsinapse/cortex-core';
+import React, { useContext, useCallback } from 'react';
+import { Select } from './index.js';
+import { SelectContext } from './context.js';
+
+const { groupedTitle, containerGrouped } = selectVariants();
+const SelectGroupedOptions = ({
+  onSelect,
+  groupedLabelExtractor,
+  options
+}) => {
+  const { setOpen, keyExtractor } = useContext(SelectContext);
+  const handleSelect = useCallback(
+    (option) => {
+      onSelect(option);
+      setOpen?.(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(
+    Select.Option,
+    {
+      option,
+      key: keyExtractor(option),
+      onSelectOption: handleSelect
+    }
+  )))));
+};
+
+export { SelectGroupedOptions };

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

@@ -0,0 +1,23 @@
+import { option } from '@tecsinapse/cortex-core';
+import React, { useContext } from 'react';
+import { SelectContext } from './context.js';
+
+const SelectOption = ({
+  onSelectOption,
+  option: option$1
+}) => {
+  const { keyExtractor, labelExtractor, value } = useContext(SelectContext);
+  return /* @__PURE__ */ React.createElement(
+    "li",
+    {
+      onClick: () => onSelectOption(option$1),
+      className: option({
+        selected: value && keyExtractor(value) === keyExtractor(option$1)
+      }),
+      role: "option"
+    },
+    labelExtractor(option$1)
+  );
+};
+
+export { SelectOption };

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

@@ -0,0 +1,27 @@
+import React, { useContext, useCallback } from 'react';
+import { Select } from './index.js';
+import { SelectContext } from './context.js';
+
+const SelectOptions = ({
+  onSelect,
+  options
+}) => {
+  const { setOpen, keyExtractor } = useContext(SelectContext);
+  const handleSelect = useCallback(
+    (option) => {
+      onSelect(option);
+      setOpen?.(false);
+    },
+    [onSelect]
+  );
+  return /* @__PURE__ */ React.createElement("ul", { role: "select" }, (options ?? []).map((option) => /* @__PURE__ */ React.createElement(
+    Select.Option,
+    {
+      option,
+      key: keyExtractor(option),
+      onSelectOption: handleSelect
+    }
+  )));
+};
+
+export { SelectOptions };

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

@@ -0,0 +1,11 @@
+import { selectVariants } from '@tecsinapse/cortex-core';
+import React, { useContext } from 'react';
+import { SelectContext } from './context.js';
+
+const { dropdown } = selectVariants();
+const SelectPopover = ({ children }) => {
+  const { open } = useContext(SelectContext);
+  return /* @__PURE__ */ React.createElement("div", { className: dropdown({ open }), "data-testid": "select-popover" }, children);
+};
+
+export { SelectPopover };

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

@@ -0,0 +1,29 @@
+import React, { useState, useRef } from 'react';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import { useOutsideClickListener } from '../../hooks/useOutsideClickListener.js';
+import { SelectContext } from './context.js';
+
+const SelectRoot = ({
+  children,
+  value,
+  keyExtractor,
+  labelExtractor
+}) => {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  useOutsideClickListener({
+    ref,
+    onClickOutside: () => setOpen?.(false)
+  });
+  return /* @__PURE__ */ React.createElement(
+    SelectContext.Provider,
+    {
+      value: { value, open, setOpen, keyExtractor, labelExtractor }
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, children)
+  );
+};
+
+export { SelectRoot };

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

@@ -0,0 +1,26 @@
+import { selectVariants } from '@tecsinapse/cortex-core';
+import React, { useContext, useMemo } from 'react';
+import { IoChevronDownOutline } from 'react-icons/io5';
+import { SelectContext } from './context.js';
+
+const { button } = selectVariants();
+const SelectTrigger = ({ label, disabled }) => {
+  const { value, setOpen, labelExtractor, open } = useContext(SelectContext);
+  const placeholder = useMemo(
+    () => value ? labelExtractor(value) : label,
+    [label, value]
+  );
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: button({ disabled }),
+      onClick: () => setOpen?.(!open),
+      disabled,
+      role: "button"
+    },
+    /* @__PURE__ */ React.createElement("span", { "data-testid": "select-placeholder" }, placeholder),
+    /* @__PURE__ */ React.createElement(IoChevronDownOutline, null)
+  );
+};
+
+export { SelectTrigger };

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

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+const SelectContext = createContext({
+  keyExtractor: () => "",
+  labelExtractor: () => ""
+});
+
+export { SelectContext };

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

@@ -0,0 +1,17 @@
+import { SelectGroupedOptions } from './GroupedOptions.js';
+import { SelectOption } from './Option.js';
+import { SelectOptions } from './Options.js';
+import { SelectPopover } from './Popover.js';
+import { SelectRoot } from './Root.js';
+import { SelectTrigger } from './Trigger.js';
+
+const Select = {
+  Root: SelectRoot,
+  Trigger: SelectTrigger,
+  Popover: SelectPopover,
+  Options: SelectOptions,
+  GroupedOptions: SelectGroupedOptions,
+  Option: SelectOption
+};
+
+export { Select };

package/dist/esm/hooks/useOutsideClickListener.js

@@ -0,0 +1,20 @@
+import { useCallback, useEffect } from 'react';
+
+const useOutsideClickListener = ({
+  ref,
+  onClickOutside
+}) => {
+  const handleClickOutside = useCallback((event) => {
+    if (ref.current && !ref.current.contains(event.target)) {
+      onClickOutside?.();
+    }
+  }, []);
+  useEffect(() => {
+    document.addEventListener("click", handleClickOutside, true);
+    return () => {
+      document.removeEventListener("click", handleClickOutside, true);
+    };
+  }, [handleClickOutside]);
+};
+
+export { useOutsideClickListener };

package/dist/esm/index.js

@@ -11,22 +11,27 @@ export { DefaultSnack } from './components/DefaultSnack.js';
 export { Drawer } from './components/Drawer.js';
 export { GroupButton } from './components/GroupButton.js';
 export { Hint } from './components/Hint.js';
-export { Box, Face, Input, Left, Right, Root } from './components/Input.js';
+export { Input, InputBox, InputFace, InputLeft, InputRight, InputRoot } from './components/Input.js';
 export { Modal } from './components/Modal.js';
 export { ProgressBar } from './components/ProgressBar.js';
 export { RangeCalendar } from './components/RangeCalendar.js';
-export { Select } from './components/Select.js';
-export { Skeleton } from './components/Skeleton.js';
-export { TCell, TFoot, THead, THeadCell, TRow, TRowHeader, Table, Td } from './components/Table.js';
-export { Tag } from './components/Tag.js';
-export { TextArea } from './components/TextArea.js';
-export { TimeFieldInput } from './components/TimeFieldInput.js';
-export { Toggle } from './components/Toggle.js';
+import 'react';
+import 'react-icons/ai';
+import 'react-icons/io5';
+import 'tailwind-merge';
 export { useCalendar } from './hooks/useCalendar.js';
 export { useCalendarCell } from './hooks/useCalendarCell.js';
 export { useCalendarGrid } from './hooks/useCalendarGrid.js';
 export { useDatePickerInput } from './hooks/useDatePickerInput.js';
 export { useDateRangePickerInput } from './hooks/useDateRangePickerInput.js';
 export { useDebouncedState } from './hooks/useDebouncedState.js';
+export { useOutsideClickListener } from './hooks/useOutsideClickListener.js';
 export { useRangeCalendar } from './hooks/useRangeCalendar.js';
+export { Select } from './components/Select/index.js';
+export { Skeleton } from './components/Skeleton.js';
+export { TCell, TFoot, THead, THeadCell, TRow, TRowHeader, Table, Td } from './components/Table.js';
+export { Tag } from './components/Tag.js';
+export { TextArea } from './components/TextArea.js';
+export { TimeFieldInput } from './components/TimeFieldInput.js';
+export { Toggle } from './components/Toggle.js';
 export { SnackbarSonner } from './service/SnackbarSonner.js';

package/dist/esm/service/SnackbarSonner.js

@@ -21,7 +21,13 @@ import '../components/Modal.js';
 import '../styles/calendar-cell.js';
 import '../styles/groupButton.js';
 import '../styles/progressBar.js';
-import '../components/Select.js';
+import 'react-icons/ai';
+import 'react-icons/io5';
+import 'tailwind-merge';
+import '../components/Select/GroupedOptions.js';
+import '../components/Select/context.js';
+import '../components/Select/Popover.js';
+import '../components/Select/Trigger.js';
 import '../components/Tag.js';
 import '../components/TextArea.js';
 import '../components/Toggle.js';

package/dist/types/components/Input.d.ts

@@ -6,15 +6,15 @@ export interface InputPropsBase {
 }
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, InputPropsBase {
 }
-export declare const Box: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const InputBox: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 type DivBaseProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const Face: React.ForwardRefExoticComponent<DivBaseProps & Pick<InputPropsBase, "variants"> & React.RefAttributes<HTMLDivElement>>;
-export declare const Root: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
-export declare const Left: React.ForwardRefExoticComponent<DivBaseProps & {
+export declare const InputFace: React.ForwardRefExoticComponent<DivBaseProps & Pick<InputPropsBase, "variants"> & React.RefAttributes<HTMLDivElement>>;
+export declare const InputRoot: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const InputLeft: React.ForwardRefExoticComponent<DivBaseProps & {
     children: React.ReactNode;
     className?: string | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
-export declare const Right: React.ForwardRefExoticComponent<DivBaseProps & {
+export declare const InputRight: React.ForwardRefExoticComponent<DivBaseProps & {
     children: React.ReactNode;
     className?: string | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/SearchInput.d.ts

@@ -1,4 +1,5 @@
-interface SearchInputProps {
+import { HTMLAttributes } from 'react';
+interface SearchInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'onChange'> {
     label?: string;
     placeholder?: string;
     isSubmitting?: boolean;
@@ -6,5 +7,5 @@ interface SearchInputProps {
     onClick?: (value: string) => void;
     BOUNCE_TIMEOUT?: number;
 }
-declare const SearchInput: ({ label, placeholder, isSubmitting, onChange, onClick, BOUNCE_TIMEOUT, }: SearchInputProps) => JSX.Element;
+declare const SearchInput: ({ label, placeholder, isSubmitting, onChange, onClick, BOUNCE_TIMEOUT, className, ...rest }: SearchInputProps) => JSX.Element;
 export default SearchInput;

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

@@ -0,0 +1,6 @@
+export interface SelectGroupedOptionsProps<T> {
+    onSelect: (value: T) => void;
+    options?: Map<string, T[]>;
+    groupedLabelExtractor: (value: string) => string;
+}
+export declare const SelectGroupedOptions: <T>({ onSelect, groupedLabelExtractor, options, }: SelectGroupedOptionsProps<T>) => JSX.Element;

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

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

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

@@ -0,0 +1,5 @@
+export interface SelectOptionsProps<T> {
+    options?: T[];
+    onSelect: (value: T) => void;
+}
+export declare const SelectOptions: <T>({ onSelect, options, }: SelectOptionsProps<T>) => JSX.Element;

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

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export interface SelectPopoverProps {
+    children: ReactNode;
+}
+export declare const SelectPopover: ({ children }: SelectPopoverProps) => JSX.Element;

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

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export interface SelectRootProps<T> {
+    children: ReactNode;
+    value?: T;
+    keyExtractor: (value: T) => string;
+    labelExtractor: (value: T) => string;
+}
+export declare const SelectRoot: <T>({ children, value, keyExtractor, labelExtractor, }: SelectRootProps<T>) => JSX.Element;

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

@@ -0,0 +1,5 @@
+export interface SelectTriggerProps {
+    label: string;
+    disabled?: boolean;
+}
+export declare const SelectTrigger: ({ label, disabled }: SelectTriggerProps) => JSX.Element;

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

@@ -0,0 +1,10 @@
+import { Dispatch, SetStateAction } from 'react';
+interface SelectContextProps<T> {
+    value?: T;
+    open?: boolean;
+    setOpen?: Dispatch<SetStateAction<boolean>>;
+    keyExtractor: (value: T) => string;
+    labelExtractor: (value: T) => string;
+}
+export declare const SelectContext: import("react").Context<SelectContextProps<any>>;
+export {};

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

@@ -0,0 +1,8 @@
+export declare const Select: {
+    Root: <T>({ children, value, keyExtractor, labelExtractor, }: import("./Root").SelectRootProps<T>) => JSX.Element;
+    Trigger: ({ label, disabled }: import("./Trigger").SelectTriggerProps) => JSX.Element;
+    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;
+};

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

@@ -15,7 +15,8 @@ export * from './Input';
 export * from './Modal';
 export * from './ProgressBar';
 export * from './RangeCalendar';
-export { default as Select } from './Select';
+export * from './SearchInput';
+export * from './Select';
 export * from './Skeleton';
 export * from './Table';
 export * from './Tag';

package/dist/types/hooks/index.d.ts

@@ -4,4 +4,5 @@ export * from './useCalendarGrid';
 export * from './useDatePickerInput';
 export * from './useDateRangePickerInput';
 export * from './useDebouncedState';
+export * from './useOutsideClickListener';
 export * from './useRangeCalendar';

package/dist/types/hooks/useOutsideClickListener.d.ts

@@ -0,0 +1,7 @@
+import { MutableRefObject } from 'react';
+interface useOutsideClickListenerProps {
+    ref: MutableRefObject<any>;
+    onClickOutside?: () => void;
+}
+export declare const useOutsideClickListener: ({ ref, onClickOutside, }: useOutsideClickListenerProps) => void;
+export {};

package/dist/types/tests/useOutsideClickListener.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.3.0-beta.1",
+  "version": "1.3.0-beta.2",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -18,12 +18,14 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@tecsinapse/cortex-core": "0.2.2-beta.2",
+    "@internationalized/date": "*",
+    "@tecsinapse/cortex-core": "0.3.0-beta.0",
     "clsx": "*",
     "react-aria": "^3.33.1",
     "react-icons": "^5.2.1",
     "react-stately": "^3.31.1",
-    "sonner": "^1.5.0"
+    "sonner": "^1.5.0",
+    "tailwind-merge": "*"
   },
   "repository": {
     "type": "git",
@@ -39,5 +41,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "db686bfbca61f00d03a355fbb00cfa88646b68ed"
+  "gitHead": "cc8903eb4c3ec693fa6dbd384bfc407f39e144ae"
 }

package/dist/cjs/components/SearchInput.js

@@ -1,83 +0,0 @@
-'use strict';
-
-var React = require('react');
-require('clsx');
-require('@internationalized/date');
-require('./Badge.js');
-require('./BaseSnackbar.js');
-require('react-icons/md');
-require('./Card.js');
-var Button = require('./Button.js');
-require('react-aria');
-require('react-stately');
-var useDebouncedState = require('../hooks/useDebouncedState.js');
-require('./CalendarCell.js');
-require('@tecsinapse/cortex-core');
-require('react-icons/fa');
-require('react-icons/lia');
-var Input = require('./Input.js');
-require('react-icons/io');
-require('./GroupButton.js');
-require('./Hint.js');
-require('./Modal.js');
-require('../styles/calendar-cell.js');
-require('../styles/groupButton.js');
-require('../styles/progressBar.js');
-require('./Select.js');
-require('./Tag.js');
-require('./TextArea.js');
-require('./Toggle.js');
-var ai = require('react-icons/ai');
-var io5 = require('react-icons/io5');
-
-const inputFace = "bg-white w-full";
-const inputLeft = "flex items-center";
-const SearchInput = ({
-  label,
-  placeholder,
-  isSubmitting = false,
-  onChange,
-  onClick,
-  BOUNCE_TIMEOUT = 1e3
-}) => {
-  const [bouncedText, setBouncedText] = React.useState("");
-  const [searchInput, setSearchInput] = useDebouncedState.useDebouncedState(
-    "",
-    setBouncedText,
-    BOUNCE_TIMEOUT
-  );
-  React.useEffect(() => {
-    if (onChange) {
-      onChange(bouncedText);
-    }
-  }, [bouncedText]);
-  const handleEnterKey = (e) => {
-    if (e.key === "Enter" && onClick && searchInput) {
-      onClick(searchInput);
-    }
-  };
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-row w-full space-x-mili" }, /* @__PURE__ */ React.createElement(Input.Input.Face, { variants: { className: inputFace } }, !onClick && /* @__PURE__ */ React.createElement(Input.Input.Left, { className: inputLeft }, /* @__PURE__ */ React.createElement(io5.IoSearchOutline, { "data-testid": "icon-search-left" })), /* @__PURE__ */ React.createElement(
-    Input.Input.Box,
-    {
-      placeholder,
-      label,
-      onChange: (e) => setSearchInput(e.target.value),
-      onKeyDown: handleEnterKey,
-      disabled: isSubmitting
-    }
-  )), onClick && /* @__PURE__ */ React.createElement(
-    Button.Button,
-    {
-      variants: {
-        intent: "primary",
-        size: "square",
-        className: "h-11"
-      },
-      onClick: () => onClick(searchInput),
-      disabled: !searchInput || isSubmitting
-    },
-    isSubmitting ? /* @__PURE__ */ React.createElement("div", { className: "animate-spin" }, /* @__PURE__ */ React.createElement(ai.AiOutlineLoading, { "data-testid": "icon-loading" })) : /* @__PURE__ */ React.createElement(io5.IoSearchOutline, { "data-testid": "icon-search-button" })
-  ));
-};
-
-module.exports = SearchInput;

package/dist/cjs/components/Select.js

@@ -1,101 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var cortexCore = require('@tecsinapse/cortex-core');
-var React = require('react');
-var io = require('react-icons/io');
-var io5 = require('react-icons/io5');
-var Hint = require('./Hint.js');
-var SearchInput = require('./SearchInput.js');
-
-const { button, dropdown, groupedTitle, containerGrouped, hintBody } = cortexCore.selectVariants();
-const Select = (props) => {
-  const {
-    label,
-    keyExtractor,
-    labelExtractor,
-    options,
-    value,
-    onSelect,
-    onSearch,
-    disabled,
-    grouped,
-    groupedLabelExtractor,
-    hint,
-    placeholderSearchInput,
-    variant = "default"
-  } = props;
-  const [open, setOpen] = React.useState(false);
-  const placeholder = React.useMemo(
-    () => value ? labelExtractor(value) : label,
-    [label, labelExtractor, value]
-  );
-  const ref = React.useRef(null);
-  const handleClickOutside = React.useCallback((event) => {
-    if (ref.current && !ref.current.contains(event.target)) {
-      setOpen(false);
-    }
-  }, []);
-  const handleSelect = React.useCallback(
-    (option) => {
-      onSelect(option);
-      setOpen(false);
-    },
-    [onSelect]
-  );
-  React.useEffect(() => {
-    document.addEventListener("click", handleClickOutside, true);
-    return () => {
-      document.removeEventListener("click", handleClickOutside, true);
-    };
-  }, [handleClickOutside]);
-  const Option = ({ option }) => /* @__PURE__ */ React.createElement(
-    "li",
-    {
-      onClick: () => handleSelect(option),
-      className: cortexCore.option(),
-      role: "option"
-    },
-    labelExtractor(option)
-  );
-  const GroupedOptions = ({ options: options2 }) => /* @__PURE__ */ React.createElement(React.Fragment, null, [...options2 ?? []].map(([key, value2]) => /* @__PURE__ */ React.createElement("div", { key, className: containerGrouped() }, /* @__PURE__ */ React.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value2.map((option) => /* @__PURE__ */ React.createElement(Option, { option, key: keyExtractor(option) })))));
-  const DefaultOptions = ({ options: options2 }) => /* @__PURE__ */ React.createElement(React.Fragment, null, (options2 ?? []).map((option) => /* @__PURE__ */ React.createElement(Option, { option, key: keyExtractor(option) })));
-  return /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      className: button({ disabled, intent: variant }),
-      onClick: () => setOpen((prevState) => !prevState),
-      disabled
-    },
-    /* @__PURE__ */ React.createElement("span", { "data-testid": "select-placeholder" }, placeholder),
-    /* @__PURE__ */ React.createElement(io5.IoChevronDownOutline, null)
-  ), /* @__PURE__ */ React.createElement(
-    "ul",
-    {
-      role: "select",
-      className: dropdown({
-        open
-      })
-    },
-    onSearch ? /* @__PURE__ */ React.createElement("div", { className: "m-mili" }, /* @__PURE__ */ React.createElement(
-      SearchInput,
-      {
-        placeholder: placeholderSearchInput,
-        onChange: onSearch
-      }
-    )) : /* @__PURE__ */ React.createElement(React.Fragment, null),
-    grouped ? /* @__PURE__ */ React.createElement(GroupedOptions, { options }) : /* @__PURE__ */ React.createElement(DefaultOptions, { options })
-  ), hint && /* @__PURE__ */ React.createElement(
-    Hint.Hint,
-    {
-      variants: {
-        intent: variant
-      }
-    },
-    /* @__PURE__ */ React.createElement("div", { className: hintBody() }, variant === "error" ? /* @__PURE__ */ React.createElement(io.IoIosCloseCircleOutline, { "data-testid": "select-hint-error-icon" }) : /* @__PURE__ */ React.createElement(React.Fragment, null), /* @__PURE__ */ React.createElement("span", null, hint))
-  ));
-};
-
-exports.Select = Select;
-exports.default = Select;

package/dist/esm/components/SearchInput.js

@@ -1,81 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import 'clsx';
-import '@internationalized/date';
-import './Badge.js';
-import './BaseSnackbar.js';
-import 'react-icons/md';
-import './Card.js';
-import { Button } from './Button.js';
-import 'react-aria';
-import 'react-stately';
-import { useDebouncedState } from '../hooks/useDebouncedState.js';
-import './CalendarCell.js';
-import '@tecsinapse/cortex-core';
-import 'react-icons/fa';
-import 'react-icons/lia';
-import { Input } from './Input.js';
-import 'react-icons/io';
-import './GroupButton.js';
-import './Hint.js';
-import './Modal.js';
-import '../styles/calendar-cell.js';
-import '../styles/groupButton.js';
-import '../styles/progressBar.js';
-import './Select.js';
-import './Tag.js';
-import './TextArea.js';
-import './Toggle.js';
-import { AiOutlineLoading } from 'react-icons/ai';
-import { IoSearchOutline } from 'react-icons/io5';
-
-const inputFace = "bg-white w-full";
-const inputLeft = "flex items-center";
-const SearchInput = ({
-  label,
-  placeholder,
-  isSubmitting = false,
-  onChange,
-  onClick,
-  BOUNCE_TIMEOUT = 1e3
-}) => {
-  const [bouncedText, setBouncedText] = useState("");
-  const [searchInput, setSearchInput] = useDebouncedState(
-    "",
-    setBouncedText,
-    BOUNCE_TIMEOUT
-  );
-  useEffect(() => {
-    if (onChange) {
-      onChange(bouncedText);
-    }
-  }, [bouncedText]);
-  const handleEnterKey = (e) => {
-    if (e.key === "Enter" && onClick && searchInput) {
-      onClick(searchInput);
-    }
-  };
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-row w-full space-x-mili" }, /* @__PURE__ */ React.createElement(Input.Face, { variants: { className: inputFace } }, !onClick && /* @__PURE__ */ React.createElement(Input.Left, { className: inputLeft }, /* @__PURE__ */ React.createElement(IoSearchOutline, { "data-testid": "icon-search-left" })), /* @__PURE__ */ React.createElement(
-    Input.Box,
-    {
-      placeholder,
-      label,
-      onChange: (e) => setSearchInput(e.target.value),
-      onKeyDown: handleEnterKey,
-      disabled: isSubmitting
-    }
-  )), onClick && /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variants: {
-        intent: "primary",
-        size: "square",
-        className: "h-11"
-      },
-      onClick: () => onClick(searchInput),
-      disabled: !searchInput || isSubmitting
-    },
-    isSubmitting ? /* @__PURE__ */ React.createElement("div", { className: "animate-spin" }, /* @__PURE__ */ React.createElement(AiOutlineLoading, { "data-testid": "icon-loading" })) : /* @__PURE__ */ React.createElement(IoSearchOutline, { "data-testid": "icon-search-button" })
-  ));
-};
-
-export { SearchInput as default };

package/dist/esm/components/Select.js

@@ -1,96 +0,0 @@
-import { selectVariants, option } from '@tecsinapse/cortex-core';
-import React, { useState, useMemo, useRef, useCallback, useEffect } from 'react';
-import { IoIosCloseCircleOutline } from 'react-icons/io';
-import { IoChevronDownOutline } from 'react-icons/io5';
-import { Hint } from './Hint.js';
-import SearchInput from './SearchInput.js';
-
-const { button, dropdown, groupedTitle, containerGrouped, hintBody } = selectVariants();
-const Select = (props) => {
-  const {
-    label,
-    keyExtractor,
-    labelExtractor,
-    options,
-    value,
-    onSelect,
-    onSearch,
-    disabled,
-    grouped,
-    groupedLabelExtractor,
-    hint,
-    placeholderSearchInput,
-    variant = "default"
-  } = props;
-  const [open, setOpen] = useState(false);
-  const placeholder = useMemo(
-    () => value ? labelExtractor(value) : label,
-    [label, labelExtractor, value]
-  );
-  const ref = useRef(null);
-  const handleClickOutside = useCallback((event) => {
-    if (ref.current && !ref.current.contains(event.target)) {
-      setOpen(false);
-    }
-  }, []);
-  const handleSelect = useCallback(
-    (option) => {
-      onSelect(option);
-      setOpen(false);
-    },
-    [onSelect]
-  );
-  useEffect(() => {
-    document.addEventListener("click", handleClickOutside, true);
-    return () => {
-      document.removeEventListener("click", handleClickOutside, true);
-    };
-  }, [handleClickOutside]);
-  const Option = ({ option: option$1 }) => /* @__PURE__ */ React.createElement(
-    "li",
-    {
-      onClick: () => handleSelect(option$1),
-      className: option(),
-      role: "option"
-    },
-    labelExtractor(option$1)
-  );
-  const GroupedOptions = ({ options: options2 }) => /* @__PURE__ */ React.createElement(React.Fragment, null, [...options2 ?? []].map(([key, value2]) => /* @__PURE__ */ React.createElement("div", { key, className: containerGrouped() }, /* @__PURE__ */ React.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value2.map((option) => /* @__PURE__ */ React.createElement(Option, { option, key: keyExtractor(option) })))));
-  const DefaultOptions = ({ options: options2 }) => /* @__PURE__ */ React.createElement(React.Fragment, null, (options2 ?? []).map((option) => /* @__PURE__ */ React.createElement(Option, { option, key: keyExtractor(option) })));
-  return /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      className: button({ disabled, intent: variant }),
-      onClick: () => setOpen((prevState) => !prevState),
-      disabled
-    },
-    /* @__PURE__ */ React.createElement("span", { "data-testid": "select-placeholder" }, placeholder),
-    /* @__PURE__ */ React.createElement(IoChevronDownOutline, null)
-  ), /* @__PURE__ */ React.createElement(
-    "ul",
-    {
-      role: "select",
-      className: dropdown({
-        open
-      })
-    },
-    onSearch ? /* @__PURE__ */ React.createElement("div", { className: "m-mili" }, /* @__PURE__ */ React.createElement(
-      SearchInput,
-      {
-        placeholder: placeholderSearchInput,
-        onChange: onSearch
-      }
-    )) : /* @__PURE__ */ React.createElement(React.Fragment, null),
-    grouped ? /* @__PURE__ */ React.createElement(GroupedOptions, { options }) : /* @__PURE__ */ React.createElement(DefaultOptions, { options })
-  ), hint && /* @__PURE__ */ React.createElement(
-    Hint,
-    {
-      variants: {
-        intent: variant
-      }
-    },
-    /* @__PURE__ */ React.createElement("div", { className: hintBody() }, variant === "error" ? /* @__PURE__ */ React.createElement(IoIosCloseCircleOutline, { "data-testid": "select-hint-error-icon" }) : /* @__PURE__ */ React.createElement(React.Fragment, null), /* @__PURE__ */ React.createElement("span", null, hint))
-  ));
-};
-
-export { Select, Select as default };

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

@@ -1,27 +0,0 @@
-interface CommonProps<T> {
-    label: string;
-    value: T | undefined;
-    onSelect: (value: T) => void;
-    keyExtractor: (value: T) => string;
-    labelExtractor: (value: T) => string;
-    onSearch?: (search: string) => void;
-    disabled?: boolean;
-    grouped?: boolean;
-    variant?: 'error' | 'default';
-    hint?: string;
-    placeholderSearchInput?: string;
-}
-interface GroupedProps<T> {
-    options?: Map<string, T[]>;
-    groupedLabelExtractor: (value: string) => string;
-    grouped: true;
-}
-interface DefaultProps<T> {
-    options?: T[];
-    groupedLabelExtractor?: never;
-    grouped?: never;
-}
-type ConditionalProps<T> = GroupedProps<T> | DefaultProps<T>;
-type SelectProps<T> = CommonProps<T> & ConditionalProps<T>;
-export declare const Select: <T>(props: SelectProps<T>) => JSX.Element;
-export default Select;