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

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

@@ -0,0 +1,42 @@
+import { selectVariants } from '@tecsinapse/cortex-core';
+import React, { useContext, useMemo } from 'react';
+import { Select } from './index.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 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,
+    {
+      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

@@ -0,0 +1,41 @@
+import { option, checkbox } from '@tecsinapse/cortex-core';
+import React, { 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.createElement(
+    "li",
+    {
+      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

@@ -0,0 +1,24 @@
+import { selectVariants } from '@tecsinapse/cortex-core';
+import React, { useContext } from 'react';
+import { Select } from './index.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);
+  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, 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,20 +1,24 @@
+import { selectVariants } from '@tecsinapse/cortex-core';
 import React, { useContext, useCallback } from 'react';
 import { Select } from './index.js';
+import { usePopoverContext } from '../Popover/Context.js';
 import { SelectContext } from './context.js';
 
+const { list } = selectVariants();
 const SelectOptions = ({
   onSelect,
   options
 }) => {
-  const { setOpen, keyExtractor } = useContext(SelectContext);
+  const { keyExtractor } = useContext(SelectContext);
+  const { setIsOpen } = usePopoverContext();
   const handleSelect = useCallback(
     (option) => {
       onSelect(option);
-      setOpen?.(false);
+      setIsOpen?.(false);
     },
     [onSelect]
   );
-  return /* @__PURE__ */ React.createElement("ul", { role: "select" }, (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

@@ -1,11 +1,8 @@
-import { selectVariants } from '@tecsinapse/cortex-core';
-import React, { useContext } from 'react';
-import { SelectContext } from './context.js';
+import React from 'react';
+import { Popover } from '../Popover/index.js';
 
-const { dropdown } = selectVariants();
 const SelectPopover = ({ children }) => {
-  const { open } = useContext(SelectContext);
-  return /* @__PURE__ */ React.createElement("div", { className: dropdown({ open }), "data-testid": "select-popover" }, 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,8 +1,6 @@
-import React, { useState, useRef } from 'react';
-import '@internationalized/date';
-import 'react-aria';
-import 'react-stately';
-import { useOutsideClickListener } from '../../hooks/useOutsideClickListener.js';
+import React from 'react';
+import { Popover } from '../Popover/index.js';
+import { Content } from './Content.js';
 import { SelectContext } from './context.js';
 
 const SelectRoot = ({
@@ -11,19 +9,7 @@ const SelectRoot = ({
   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)
-  );
+  return /* @__PURE__ */ React.createElement(Popover.Provider, null, /* @__PURE__ */ React.createElement(Popover.Root, { placement: "bottom", trigger: "click" }, /* @__PURE__ */ React.createElement(SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React.createElement(Content, null, children))));
 };
 
 export { SelectRoot };

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

@@ -1,26 +1,28 @@
 import { selectVariants } from '@tecsinapse/cortex-core';
 import React, { useContext, useMemo } from 'react';
 import { IoChevronDownOutline } from 'react-icons/io5';
+import { Popover } from '../Popover/index.js';
 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(
+  const { value, labelExtractor } = useContext(SelectContext);
+  const placeholder = useMemo(() => {
+    if (value?.length === 0 || !value) return label;
+    if (value?.length === 1) return labelExtractor(value[0]);
+    if (value?.length > 1) return `${value.length} items selected`;
+    return labelExtractor(value);
+  }, [label, value]);
+  return /* @__PURE__ */ React.createElement(Popover.Trigger, null, /* @__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

@@ -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,8 @@
 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';
 import { SelectOption } from './Option.js';
 import { SelectOptions } from './Options.js';
 import { SelectPopover } from './Popover.js';
@@ -11,7 +15,11 @@ const Select = {
   Popover: SelectPopover,
   Options: SelectOptions,
   GroupedOptions: SelectGroupedOptions,
-  Option: SelectOption
+  Option: SelectOption,
+  MultiOptions: SelectMultiOptions,
+  MultiGroupedOptions: SelectMultiGroupedOptions,
+  MultiOption: SelectMultiOption,
+  MultiCheckAllOptions: SelectMultiCheckAllOptions
 };
 
 export { Select };

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

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

package/dist/esm/components/TimeFieldInput.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input } from './Input.js';
+import { Input } from './Input/index.js';
 import { labelStyle, inputBox } from '@tecsinapse/cortex-core';
 import TimeField from './TimeField.js';
 

package/dist/esm/components/Tooltip.js

@@ -0,0 +1,50 @@
+import React, { forwardRef, useRef } from 'react';
+import { FloatingArrow } from '@floating-ui/react';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import { cloneWithProps } from './utils.js';
+import { useFloatingLogic } from '../hooks/useFloatingLogic.js';
+
+const Tooltip = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      text,
+      trigger = "hover",
+      placement = "top",
+      width,
+      height
+    } = props;
+    const arrowRef = useRef(null);
+    const {
+      isOpen,
+      triggerProps,
+      x,
+      y,
+      strategy,
+      refs,
+      context,
+      floatingStyles
+    } = useFloatingLogic({ placement, arrowRef, trigger });
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, cloneWithProps(children, triggerProps), isOpen ? /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: ref || refs.setFloating,
+        className: "bg-black text-white p-2 rounded z-50 shadow-md text-justify",
+        style: {
+          position: strategy,
+          top: y ?? 0,
+          left: x ?? 0,
+          width,
+          height,
+          ...floatingStyles
+        }
+      },
+      text,
+      /* @__PURE__ */ React.createElement(FloatingArrow, { ref: arrowRef, context, fill: "black" })
+    ) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+  }
+);
+
+export { Tooltip, Tooltip as default };

package/dist/esm/components/utils.js

@@ -1,4 +1,5 @@
 import { CalendarDate, getLocalTimeZone } from '@internationalized/date';
+import React from 'react';
 
 const getNameInitials = (name) => {
   const nameSplit = name.split(" ");
@@ -18,5 +19,8 @@ const dateToCalendarDate = (value) => {
 const calendarDateToDate = (value) => {
   return value.toDate(getLocalTimeZone());
 };
+function cloneWithProps(children, triggerProps) {
+  return React.cloneElement(/* @__PURE__ */ React.createElement("div", null, children), triggerProps);
+}
 
-export { calendarDateToDate, dateToCalendarDate, getNameInitials };
+export { calendarDateToDate, cloneWithProps, dateToCalendarDate, getNameInitials };

package/dist/esm/hooks/useFloatingLogic.js

@@ -0,0 +1,51 @@
+import { useState, useEffect } from 'react';
+import { useFloating, autoUpdate, offset, flip, shift, arrow } from '@floating-ui/react';
+
+const useFloatingLogic = ({
+  placement,
+  trigger,
+  arrowRef
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { x, y, strategy, refs, update, context, floatingStyles } = useFloating(
+    {
+      placement,
+      whileElementsMounted: autoUpdate,
+      middleware: [
+        offset(10),
+        flip({
+          flipAlignment: true,
+          fallbackPlacements: ["right", "bottom", "left", "top"]
+        }),
+        shift(),
+        ...arrowRef ? [arrow({ element: arrowRef })] : []
+      ]
+    }
+  );
+  useEffect(() => {
+    if (isOpen) update();
+  }, [isOpen, update]);
+  const triggerProps = {
+    ref: refs.setReference,
+    ...trigger === "hover" && {
+      onMouseEnter: () => setIsOpen(true),
+      onMouseLeave: () => setIsOpen(false)
+    },
+    ...trigger === "click" && {
+      onClick: () => setIsOpen((prev) => !prev)
+    }
+  };
+  return {
+    isOpen,
+    setIsOpen,
+    x,
+    y,
+    strategy,
+    refs,
+    context,
+    floatingStyles,
+    triggerProps
+  };
+};
+
+export { useFloatingLogic };

package/dist/esm/index.js

@@ -8,17 +8,25 @@ export { Card } from './components/Card.js';
 export { DatePickerInput } from './components/DatePickerInput.js';
 export { DateRangePickerInput } from './components/DateRangePickerInput.js';
 export { DefaultSnack } from './components/DefaultSnack.js';
+export { Divider } from './components/Divider.js';
 export { Drawer } from './components/Drawer.js';
 export { GroupButton } from './components/GroupButton.js';
 export { Hint } from './components/Hint.js';
-export { Input, InputBox, InputFace, InputLeft, InputRight, InputRoot } from './components/Input.js';
+export { Input } from './components/Input/index.js';
+export { Menubar } from './components/Menubar/index.js';
 export { Modal } from './components/Modal.js';
+export { Popover } from './components/Popover/index.js';
 export { ProgressBar } from './components/ProgressBar.js';
+export { RadioButton } from './components/RadioButton.js';
 export { RangeCalendar } from './components/RangeCalendar.js';
-import 'react';
-import 'react-icons/ai';
-import 'react-icons/io5';
-import 'tailwind-merge';
+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 { Tooltip } from './components/Tooltip.js';
 export { useCalendar } from './hooks/useCalendar.js';
 export { useCalendarCell } from './hooks/useCalendarCell.js';
 export { useCalendarGrid } from './hooks/useCalendarGrid.js';
@@ -27,11 +35,5 @@ 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 { useFloatingLogic } from './hooks/useFloatingLogic.js';
 export { SnackbarSonner } from './service/SnackbarSonner.js';

package/dist/esm/provider/MenubarProvider.js

@@ -0,0 +1,19 @@
+import React, { createContext, useContext } from 'react';
+
+const MenubarContext = createContext({
+  show: false,
+  setShow: () => void 0
+});
+const MenubarProvider = ({ children }) => {
+  const [show, setShow] = React.useState(false);
+  return /* @__PURE__ */ React.createElement(MenubarContext.Provider, { value: { show, setShow } }, children);
+};
+const useMenubar = () => {
+  const context = useContext(MenubarContext);
+  if (!context) {
+    throw new Error("useSnackbar must be used within a SnackbarProvider");
+  }
+  return [context.show, context.setShow];
+};
+
+export { MenubarProvider, useMenubar };

package/dist/esm/provider/SnackbarProvider.js

@@ -0,0 +1,54 @@
+import { createContext } from 'react';
+import 'sonner';
+import 'clsx';
+import '@internationalized/date';
+import '../components/Badge.js';
+import '../components/BaseSnackbar.js';
+import 'react-icons/md';
+import '../components/Card.js';
+import '../components/Button.js';
+import 'react-aria';
+import 'react-stately';
+import '@floating-ui/react';
+import '../components/CalendarCell.js';
+import '@tecsinapse/cortex-core';
+import 'react-icons/fa';
+import 'react-icons/lia';
+import '../components/Input/Box.js';
+import '../components/Input/Face.js';
+import '../components/Input/Left.js';
+import '../components/Input/Mask.js';
+import '../components/Input/Right.js';
+import '../components/Input/Root.js';
+import '../components/Input/Search.js';
+import 'react-icons/io';
+import '../components/GroupButton.js';
+import '../components/Hint.js';
+import './MenubarProvider.js';
+import '../components/Menubar/Left.js';
+import '../styles/menubar.js';
+import '../components/Menubar/Right.js';
+import '../components/Menubar/Dropdown.js';
+import '../components/Menubar/MostUsed.js';
+import '../components/Menubar/MostUsedItem.js';
+import '../components/Menubar/Header.js';
+import '../components/Menubar/Item.js';
+import '../components/Menubar/SubItem.js';
+import '../components/Modal.js';
+import '../components/Popover/Context.js';
+import '../styles/calendar-cell.js';
+import '../styles/groupButton.js';
+import '../styles/progressBar.js';
+import '../components/RadioButton.js';
+import '../components/Select/GroupedOptions.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';
+import '../components/Toggle.js';
+import '../components/Tooltip.js';
+
+createContext(null);

package/dist/esm/service/SnackbarSonner.js

@@ -9,28 +9,48 @@ import '../components/Card.js';
 import '../components/Button.js';
 import 'react-aria';
 import 'react-stately';
+import '@floating-ui/react';
 import '../components/CalendarCell.js';
 import '@tecsinapse/cortex-core';
 import 'react-icons/fa';
 import 'react-icons/lia';
-import '../components/Input.js';
+import '../components/Input/Box.js';
+import '../components/Input/Face.js';
+import '../components/Input/Left.js';
+import '../components/Input/Mask.js';
+import '../components/Input/Right.js';
+import '../components/Input/Root.js';
+import '../components/Input/Search.js';
 import { DefaultSnack } from '../components/DefaultSnack.js';
 import '../components/GroupButton.js';
 import '../components/Hint.js';
+import '../provider/MenubarProvider.js';
+import '../provider/SnackbarProvider.js';
+import '../components/Menubar/Left.js';
+import '../styles/menubar.js';
+import '../components/Menubar/Right.js';
+import '../components/Menubar/Dropdown.js';
+import '../components/Menubar/MostUsed.js';
+import '../components/Menubar/MostUsedItem.js';
+import '../components/Menubar/Header.js';
+import '../components/Menubar/Item.js';
+import '../components/Menubar/SubItem.js';
 import '../components/Modal.js';
+import '../components/Popover/Context.js';
 import '../styles/calendar-cell.js';
 import '../styles/groupButton.js';
 import '../styles/progressBar.js';
-import 'react-icons/ai';
-import 'react-icons/io5';
-import 'tailwind-merge';
+import '../components/RadioButton.js';
 import '../components/Select/GroupedOptions.js';
 import '../components/Select/context.js';
-import '../components/Select/Popover.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';
 import '../components/Toggle.js';
+import '../components/Tooltip.js';
 
 class SnackbarSonner {
   custom(Component, options) {