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

package/dist/cjs/components/Tooltip.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var react = require('@floating-ui/react');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+var utils = require('./utils.js');
+var useFloatingLogic = require('../hooks/useFloatingLogic.js');
+
+const Tooltip = React.forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      text,
+      trigger = "hover",
+      placement = "top",
+      width,
+      height
+    } = props;
+    const arrowRef = React.useRef(null);
+    const {
+      isOpen,
+      triggerProps,
+      x,
+      y,
+      strategy,
+      refs,
+      context,
+      floatingStyles
+    } = useFloatingLogic.useFloatingLogic({ placement, arrowRef, trigger });
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, utils.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(react.FloatingArrow, { ref: arrowRef, context, fill: "black" })
+    ) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+  }
+);
+
+exports.Tooltip = Tooltip;
+exports.default = Tooltip;

package/dist/cjs/components/utils.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var date = require('@internationalized/date');
+var React = require('react');
 
 const getNameInitials = (name) => {
   const nameSplit = name.split(" ");
@@ -20,7 +21,11 @@ const dateToCalendarDate = (value) => {
 const calendarDateToDate = (value) => {
   return value.toDate(date.getLocalTimeZone());
 };
+function cloneWithProps(children, triggerProps) {
+  return React.cloneElement(/* @__PURE__ */ React.createElement("div", null, children), triggerProps);
+}
 
 exports.calendarDateToDate = calendarDateToDate;
+exports.cloneWithProps = cloneWithProps;
 exports.dateToCalendarDate = dateToCalendarDate;
 exports.getNameInitials = getNameInitials;

package/dist/cjs/hooks/useFloatingLogic.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var React = require('react');
+var react = require('@floating-ui/react');
+
+const useFloatingLogic = ({
+  placement,
+  trigger,
+  arrowRef
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const { x, y, strategy, refs, update, context, floatingStyles } = react.useFloating(
+    {
+      placement,
+      whileElementsMounted: react.autoUpdate,
+      middleware: [
+        react.offset(10),
+        react.flip({
+          flipAlignment: true,
+          fallbackPlacements: ["right", "bottom", "left", "top"]
+        }),
+        react.shift(),
+        ...arrowRef ? [react.arrow({ element: arrowRef })] : []
+      ]
+    }
+  );
+  React.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
+  };
+};
+
+exports.useFloatingLogic = useFloatingLogic;

package/dist/cjs/index.js

@@ -10,17 +10,25 @@ var Card = require('./components/Card.js');
 var DatePickerInput = require('./components/DatePickerInput.js');
 var DateRangePickerInput = require('./components/DateRangePickerInput.js');
 var DefaultSnack = require('./components/DefaultSnack.js');
+var Divider = require('./components/Divider.js');
 var Drawer = require('./components/Drawer.js');
 var GroupButton = require('./components/GroupButton.js');
 var Hint = require('./components/Hint.js');
-var Input = require('./components/Input.js');
+var index = require('./components/Input/index.js');
+var index$1 = require('./components/Menubar/index.js');
 var Modal = require('./components/Modal.js');
+var index$2 = require('./components/Popover/index.js');
 var ProgressBar = require('./components/ProgressBar.js');
+var RadioButton = require('./components/RadioButton.js');
 var RangeCalendar = require('./components/RangeCalendar.js');
-require('react');
-require('react-icons/ai');
-require('react-icons/io5');
-require('tailwind-merge');
+var index$3 = 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 Tooltip = require('./components/Tooltip.js');
 var useCalendar = require('./hooks/useCalendar.js');
 var useCalendarCell = require('./hooks/useCalendarCell.js');
 var useCalendarGrid = require('./hooks/useCalendarGrid.js');
@@ -29,13 +37,7 @@ 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 useFloatingLogic = require('./hooks/useFloatingLogic.js');
 var SnackbarSonner = require('./service/SnackbarSonner.js');
 
 
@@ -51,27 +53,18 @@ exports.Card = Card.Card;
 exports.DatePickerInput = DatePickerInput.DatePickerInput;
 exports.DateRangePickerInput = DateRangePickerInput.DateRangePickerInput;
 exports.DefaultSnack = DefaultSnack.DefaultSnack;
+exports.Divider = Divider.Divider;
 exports.Drawer = Drawer.Drawer;
 exports.GroupButton = GroupButton.GroupButton;
 exports.Hint = Hint.Hint;
-exports.Input = Input.Input;
-exports.InputBox = Input.InputBox;
-exports.InputFace = Input.InputFace;
-exports.InputLeft = Input.InputLeft;
-exports.InputRight = Input.InputRight;
-exports.InputRoot = Input.InputRoot;
+exports.Input = index.Input;
+exports.Menubar = index$1.Menubar;
 exports.Modal = Modal.Modal;
+exports.Popover = index$2.Popover;
 exports.ProgressBar = ProgressBar.ProgressBar;
+exports.RadioButton = RadioButton.RadioButton;
 exports.RangeCalendar = RangeCalendar.RangeCalendar;
-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.Select = index$3.Select;
 exports.Skeleton = Skeleton.Skeleton;
 exports.TCell = Table.TCell;
 exports.TFoot = Table.TFoot;
@@ -85,4 +78,14 @@ exports.Tag = Tag.Tag;
 exports.TextArea = TextArea.TextArea;
 exports.TimeFieldInput = TimeFieldInput.TimeFieldInput;
 exports.Toggle = Toggle.Toggle;
+exports.Tooltip = Tooltip.Tooltip;
+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.useFloatingLogic = useFloatingLogic.useFloatingLogic;
 exports.SnackbarSonner = SnackbarSonner.SnackbarSonner;

package/dist/cjs/provider/MenubarProvider.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var React = require('react');
+
+const MenubarContext = React.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 = React.useContext(MenubarContext);
+  if (!context) {
+    throw new Error("useSnackbar must be used within a SnackbarProvider");
+  }
+  return [context.show, context.setShow];
+};
+
+exports.MenubarProvider = MenubarProvider;
+exports.useMenubar = useMenubar;

package/dist/cjs/provider/SnackbarProvider.js

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

package/dist/cjs/service/SnackbarSonner.js

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

package/dist/cjs/styles/menubar.js

@@ -0,0 +1,70 @@
+'use strict';
+
+var tailwindVariants = require('tailwind-variants');
+
+const menubar = tailwindVariants.tv({
+  slots: {
+    header: "relative w-screen px-kilo py-deca flex flex-row justify-between bg-white z-[100]",
+    left: "flex items-center w-fit",
+    right: "flex items-center gap-x-deca",
+    dropdown: "w-full bg-white flex-1 shadow-default z-[100] px-[8vw] absolute"
+  },
+  variants: {
+    show: {
+      true: {
+        dropdown: "pt-kilo pb-mega",
+        false: "max-h-0"
+      }
+    }
+  }
+});
+const mostUsed = tailwindVariants.tv({
+  slots: {
+    container: "mb-kilo",
+    label: "font-bold mb-centi",
+    containerList: "gap-x-kilo flex flex-row"
+  }
+});
+const mostUsedItem = tailwindVariants.tv({
+  slots: {
+    container: "flex-1 py-mili",
+    title: "text-primary-medium font-bold",
+    category: "text-secondary-medium"
+  }
+});
+const item = tailwindVariants.tv({
+  slots: {
+    container: "flex flex-row gap-x-deca items-center",
+    text: "text-secondary-dark hover:text-primary-medium hover:cursor-pointer text-base",
+    icon: "text-primary-medium hover:cursor-pointer"
+  }
+});
+const category = tailwindVariants.tv({
+  slots: {
+    text: "mb-mili font-bold",
+    hr: "mb-mili",
+    container: "flex flex-col gap-y-mili"
+  }
+});
+const subItem = tailwindVariants.tv({
+  slots: {
+    container: "pl-deca text-sub border-l-[1px] border-primary-medium text-secondary-dark hover:text-primary-medium cursor-pointer"
+  }
+});
+const animate = tailwindVariants.tv({
+  base: "transition-all ease-in-out duration-250",
+  variants: {
+    show: {
+      true: "translate-y-0 opacity-1 visible",
+      false: "-translate-y-[120%] opacity-0 invisible max-h-0"
+    }
+  }
+});
+
+exports.animate = animate;
+exports.category = category;
+exports.item = item;
+exports.menubar = menubar;
+exports.mostUsed = mostUsed;
+exports.mostUsedItem = mostUsedItem;
+exports.subItem = subItem;

package/dist/esm/components/Calendar.js

@@ -3,6 +3,7 @@ import { useCalendar } from '../hooks/useCalendar.js';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
+import '@floating-ui/react';
 import { CalendarGrid } from './CalendarGrid.js';
 import { CalendarHeader } from './CalendarHeader.js';
 

package/dist/esm/components/CalendarCell.js

@@ -3,6 +3,7 @@ import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
 import { useCalendarCell } from '../hooks/useCalendarCell.js';
+import '@floating-ui/react';
 import { calendarCell } from '../styles/calendar-cell.js';
 import '../styles/groupButton.js';
 import '../styles/progressBar.js';

package/dist/esm/components/CalendarGrid.js

@@ -3,6 +3,7 @@ import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
 import { useCalendarGrid } from '../hooks/useCalendarGrid.js';
+import '@floating-ui/react';
 import { CalendarGridBodyRows } from './CalendarGridBodyRows.js';
 import { CalendarGridHeaderRow } from './CalendarGridHeaderRow.js';
 

package/dist/esm/components/DatePickerInput.js

@@ -4,6 +4,7 @@ import 'react-aria';
 import 'react-stately';
 import { dateToCalendarDate } from './utils.js';
 import { useDatePickerInput } from '../hooks/useDatePickerInput.js';
+import '@floating-ui/react';
 import { Calendar } from './Calendar.js';
 import { DateField } from './DateField.js';
 import { DatePickerInputBase } from './DatePickerInputBase.js';

package/dist/esm/components/DatePickerInputBase.js

@@ -1,7 +1,7 @@
 import { labelStyle, inputBox } from '@tecsinapse/cortex-core';
 import React from 'react';
 import { LiaCalendar } from 'react-icons/lia';
-import { Input } from './Input.js';
+import { Input } from './Input/index.js';
 
 const DatePickerInputBase = ({
   children,

package/dist/esm/components/DateRangePickerInput.js

@@ -4,6 +4,7 @@ import 'react-aria';
 import 'react-stately';
 import { dateToCalendarDate } from './utils.js';
 import { useDateRangePickerInput } from '../hooks/useDateRangePickerInput.js';
+import '@floating-ui/react';
 import { DateField } from './DateField.js';
 import { DatePickerInputBase } from './DatePickerInputBase.js';
 import { RangeCalendar } from './RangeCalendar.js';

package/dist/esm/components/Divider.js

@@ -0,0 +1,8 @@
+import { divider } from '@tecsinapse/cortex-core';
+import React from 'react';
+
+const Divider = ({ className, ...rest }) => {
+  return /* @__PURE__ */ React.createElement("hr", { ...rest, className: divider({ className }) });
+};
+
+export { Divider };

package/dist/esm/components/Input/Box.js

@@ -0,0 +1,30 @@
+import { inputBox, labelStyle } from '@tecsinapse/cortex-core';
+import clsx from 'clsx';
+import React from 'react';
+
+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",
+      {
+        id: id ?? name,
+        name,
+        placeholder: placeholder ?? " ",
+        className: clsx(inputBox(placeholder, label, className)),
+        ...rest,
+        ref,
+        "data-testid": "input-box"
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "label",
+      {
+        htmlFor: id ?? name,
+        className: labelStyle({ intent: variants?.intent, placeholder }),
+        "data-testid": "input-label"
+      },
+      label
+    ));
+  }
+);
+
+export { InputBox };

package/dist/esm/components/Input/Face.js

@@ -0,0 +1,28 @@
+import { input } from '@tecsinapse/cortex-core';
+import clsx from 'clsx';
+import React from 'react';
+
+const getValidChildren = (children) => {
+  return React.Children.toArray(children).filter(
+    (el) => React.isValidElement(el)
+  );
+};
+const InputFace = React.forwardRef(
+  ({ children, variants, className, ...rest }, ref) => {
+    const clones = getValidChildren(children).map((el) => {
+      return React.cloneElement(el, { ...el.props, variants });
+    });
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        "data-testid": "input-face",
+        ...rest,
+        className: clsx(input(variants), className),
+        ref
+      },
+      clones
+    );
+  }
+);
+
+export { InputFace };

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

@@ -0,0 +1,10 @@
+import clsx from 'clsx';
+import React from 'react';
+
+const InputLeft = React.forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    return /* @__PURE__ */ React.createElement("div", { className: clsx(className, "mr-2.5"), ...rest, ref }, children);
+  }
+);
+
+export { InputLeft };

package/dist/esm/components/Input/Mask.js

@@ -0,0 +1,49 @@
+import React, { createRef, useEffect } from 'react';
+import { useIMask } from 'react-imask';
+import { Input } from './index.js';
+
+const useIMaskLocal = (mask, inputProps, ref, unmaskedRef) => {
+  const { ref: iMaskRef, maskRef } = useIMask(mask, {
+    onAccept: () => {
+      if (unmaskedRef) unmaskedRef.current = maskRef.current.unmaskedValue;
+      return inputProps.onChange?.(maskRef.current);
+    },
+    ref: ref ? ref : createRef()
+  });
+  useEffect(() => {
+    if (inputProps.value === "") {
+      maskRef.current?.updateValue();
+    }
+  }, [maskRef, inputProps.value]);
+  return {
+    iMaskRef
+  };
+};
+const InputMaskExpression = React.forwardRef(({ mask, unmaskedRef, ...rest }, ref) => {
+  const { iMaskRef } = useIMaskLocal({ mask }, rest, ref, unmaskedRef);
+  return /* @__PURE__ */ React.createElement(Input.Root, { ...rest, ref: iMaskRef });
+});
+const InputMaskNumber = React.forwardRef(({ unmaskedRef, ...rest }, ref) => {
+  const mask = { mask: Number, scale: 2 };
+  const { iMaskRef } = useIMaskLocal(mask, rest, ref, unmaskedRef);
+  return /* @__PURE__ */ React.createElement(Input.Root, { ...rest, ref: iMaskRef });
+});
+const InputMaskCurrency = React.forwardRef(({ unmaskedRef, ...rest }, ref) => {
+  const mask = {
+    mask: "R$ num",
+    blocks: {
+      num: {
+        mask: Number,
+        scale: 2,
+        thousandsSeparator: ".",
+        padFractionalZeros: true,
+        radix: ",",
+        mapToRadix: ["."]
+      }
+    }
+  };
+  const { iMaskRef } = useIMaskLocal(mask, rest, ref, unmaskedRef);
+  return /* @__PURE__ */ React.createElement(Input.Root, { ...rest, ref: iMaskRef });
+});
+
+export { InputMaskCurrency, InputMaskExpression, InputMaskNumber };

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

@@ -0,0 +1,10 @@
+import clsx from 'clsx';
+import React from 'react';
+
+const InputRight = React.forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    return /* @__PURE__ */ React.createElement("div", { className: clsx(className, "ml-2.5"), ...rest, ref }, children);
+  }
+);
+
+export { InputRight };

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { InputBox } from './Box.js';
+import { InputFace } from './Face.js';
+
+const InputRoot = React.forwardRef(
+  ({ variants, className, ...rest }, ref) => {
+    return /* @__PURE__ */ React.createElement(InputFace, { variants, className }, /* @__PURE__ */ React.createElement(InputBox, { ...rest, ref }));
+  }
+);
+
+export { InputRoot };

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

@@ -0,0 +1,23 @@
+import React, { useState, useEffect } from 'react';
+import { IoSearchOutline } from 'react-icons/io5';
+import { Input } from './index.js';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import { useDebouncedState } from '../../hooks/useDebouncedState.js';
+import '@floating-ui/react';
+
+const InputSearch = React.forwardRef(
+  ({ bounceTimeout = 1e3, variants, className, onChange, ...rest }, ref) => {
+    const [bouncedTextEvent, setBouncedTextEvent] = useState();
+    const [searchInputEvent, setSearchInputEvent] = useDebouncedState(void 0, setBouncedTextEvent, bounceTimeout);
+    useEffect(() => {
+      if (onChange && searchInputEvent) {
+        onChange(searchInputEvent);
+      }
+    }, [bouncedTextEvent]);
+    return /* @__PURE__ */ React.createElement(Input.Face, { variants, className }, /* @__PURE__ */ React.createElement(Input.Left, null, /* @__PURE__ */ React.createElement(IoSearchOutline, { "data-testid": "icon-search-left" })), /* @__PURE__ */ React.createElement(Input.Box, { ...rest, ref, onChange: (e) => setSearchInputEvent(e) }));
+  }
+);
+
+export { InputSearch };