lecom-ui 5.0.11 → 5.0.13

package/dist/plugin.cjs

@@ -0,0 +1,298 @@
+const plugin = require('tailwindcss/plugin');
+
+module.exports = plugin(
+  ({ addBase }) => {
+    addBase({
+      ':root': {
+        '--blue-brand': '230 55% 33%',
+        '--green-brand': '154 38% 56%',
+        '--pink-brand': '332, 71%, 63%',
+        '--background': '0 0% 100%',
+        '--foreground': '222.2 84% 4.9%',
+        '--card': '0 0% 100%',
+        '--card-foreground': '222.2 84% 4.9%',
+        '--popover': '0 0% 100%',
+        '--popover-foreground': '222.2 84% 4.9%',
+        '--primary': '221.2 83.2% 53.3%',
+        '--primary-foreground': '210 40% 98%',
+        '--secondary': '210 40% 96.1%',
+        '--secondary-foreground': '222.2 47.4% 11.2%',
+        '--muted': '210 40% 96.1%',
+        '--muted-foreground': '215.4 16.3% 46.9%',
+        '--accent': '210 40% 96.1%',
+        '--accent-foreground': '222.2 47.4% 11.2%',
+        '--destructive': '0 84.2% 60.2%',
+        '--destructive-foreground': '210 40% 98%',
+        '--border': '214.3 31.8% 91.4%',
+        '--input': '214.3 31.8% 91.4%',
+        '--ring': '221.2 83.2% 53.3%',
+        '--radius': '0.5rem',
+        '--default': '0 0% 30%',
+        '--magenta': '314.79 74.22% 44.12%',
+        '--red': '355.21 83.19% 44.31%',
+        '--red-light': '0, 100%, 85%, 1',
+        '--red-dark': '0, 99%, 64%, 1',
+        '--volcano': '12.96 88.44% 44.12%',
+        '--orange': '29.12 92.73% 43.14%',
+        '--gold': '37.86 94.5% 42.75%',
+        '--lime': '78.97 94.57% 36.08%',
+        '--green': '102.21 84.8% 33.53%',
+        '--green-light': '101, 100%, 92%, 1',
+        '--green-dark': '101, 49%, 64%, 1',
+        '--cyan': '182.03 90.24% 32.16%',
+        '--yellow-light': '49, 100%, 88%, 1',
+        '--yellow-dark': '50, 93%, 49%, 1',
+        '--blue': '217.21 92.04% 44.31%',
+        '--blue-light': '209, 100%, 92%, 1',
+        '--blue-dark': '215 100% 54%',
+        '--dodgerblue': '216, 57%, 51%, 0.2',
+        '--electricblue': '216, 57%, 51%, 0.3',
+        '--letterblue': '215 100% 40%',
+        '--geekblue': '219.94 74.22% 44.12%',
+        '--purple': '262.82 71% 39.22%',
+        '--transparency-light': '0, 0%, 0%, 0.1',
+        '--transparency-dark': '0, 0%, 100%, 0.2',
+        '--gray-05': '0, 0%, 0%, 0.0588',
+        '--gray-12': '0, 0%, 0%, 0.12',
+        '--gray-29': '0, 0%, 29%, 1',
+        '--gray-48': '0, 0%, 48%, 1',
+        '--gray-50': '0, 0%, 50%, 1',
+        '--gray-60': '0, 0%, 0%, 0.6',
+        '--gray-79': '0, 0%, 79%, 1',
+        '--gray-96': '0, 0%, 96%, 1',
+        '--gray-98': '0, 0%, 98%, 1',
+      },
+      '.dark': {
+        '--blue-brand': '230 55% 33%',
+        '--green-brand': '154 38% 56%',
+        '--pink-brand': '332, 71%, 63%',
+        '--background': '222.2 84% 4.9%',
+        '--foreground': '210 40% 98%',
+        '--card': '222.2 84% 4.9%',
+        '--card-foreground': '210 40% 98%',
+        '--popover': '222.2 84% 4.9%',
+        '--popover-foreground': '210 40% 98%',
+        '--primary': '217.2 91.2% 59.8%',
+        '--primary-foreground': '222.2 47.4% 11.2%',
+        '--secondary': '217.2 32.6% 17.5%',
+        '--secondary-foreground': '210 40% 98%',
+        '--muted': '217.2 32.6% 17.5%',
+        '--muted-foreground': '215 20.2% 65.1%',
+        '--accent': '217.2 32.6% 17.5%',
+        '--accent-foreground': '210 40% 98%',
+        '--destructive': '0 62.8% 30.6%',
+        '--destructive-foreground': '210 40% 98%',
+        '--border': '217.2 32.6% 17.5%',
+        '--input': '217.2 32.6% 17.5%',
+        '--ring': '224.3 76.3% 48%',
+      },
+      '.scrollbar-thin': {
+        'scrollbar-width': 'thin',
+      },
+      '.scrollbar-thin::-webkit-scrollbar': {
+        width: '8px',
+        height: '8px',
+      },
+      '.scrollbar-thin::-webkit-scrollbar-thumb': {
+        'background-color': 'rgba(0, 0, 0, 0.5)',
+        'border-radius': '10px',
+      },
+    });
+  },
+  {
+    theme: {
+      container: {
+        center: true,
+        padding: '2rem',
+        screens: {
+          '2xl': '1400px',
+        },
+      },
+      extend: {
+        fontFamily: {
+          roboto: ['Roboto', 'sans-serif'],
+          montserrat: ['Montserrat', 'sans-serif'],
+        },
+        colors: {
+          brand: {
+            blue: 'hsl(var(--blue-brand))',
+            green: 'hsl(var(--green-brand))',
+            pink: 'hsl(var(--pink-brand))',
+          },
+          border: 'hsl(var(--border))',
+          input: 'hsl(var(--input))',
+          ring: 'hsl(var(--ring))',
+          background: 'hsl(var(--background))',
+          foreground: 'hsl(var(--foreground))',
+          primary: {
+            DEFAULT: 'hsl(var(--primary))',
+            foreground: 'hsl(var(--primary-foreground))',
+          },
+          secondary: {
+            DEFAULT: 'hsl(var(--secondary))',
+            foreground: 'hsl(var(--secondary-foreground))',
+          },
+          destructive: {
+            DEFAULT: 'hsl(var(--destructive))',
+            foreground: 'hsl(var(--destructive-foreground))',
+          },
+          muted: {
+            DEFAULT: 'hsl(var(--muted))',
+            foreground: 'hsl(var(--muted-foreground))',
+          },
+          accent: {
+            DEFAULT: 'hsl(var(--accent))',
+            foreground: 'hsl(var(--accent-foreground))',
+          },
+          popover: {
+            DEFAULT: 'hsl(var(--popover))',
+            foreground: 'hsl(var(--popover-foreground))',
+          },
+          card: {
+            DEFAULT: 'hsl(var(--card))',
+            foreground: 'hsl(var(--card-foreground))',
+          },
+          default: {
+            DEFAULT: 'hsl(var(--default))',
+          },
+          magenta: {
+            DEFAULT: 'hsl(var(--magenta))',
+          },
+          red: {
+            DEFAULT: 'hsl(var(--red))',
+            light: 'hsl(var(--red-light))',
+            dark: 'hsl(var(--red-dark))',
+          },
+          volcano: {
+            DEFAULT: 'hsl(var(--volcano))',
+          },
+          orange: {
+            DEFAULT: 'hsl(var(--orange))',
+          },
+          gold: {
+            DEFAULT: 'hsl(var(--gold))',
+          },
+          lime: {
+            DEFAULT: 'hsl(var(--lime))',
+          },
+          green: {
+            DEFAULT: 'hsl(var(--green))',
+            light: 'hsl(var(--green-light))',
+            dark: 'hsl(var(--green-dark))',
+          },
+          cyan: {
+            DEFAULT: 'hsl(var(--cyan))',
+          },
+          yellow: {
+            light: 'hsla(var(--yellow-light))',
+            dark: 'hsla(var(--yellow-dark))',
+          },
+          blue: {
+            DEFAULT: 'hsl(var(--blue))',
+            light: 'hsla(var(--blue-light))',
+            dark: 'hsla(var(--blue-dark))',
+            hover: 'hsla(var(--blue-hover))',
+          },
+          geekblue: {
+            DEFAULT: 'hsl(var(--geekblue))',
+          },
+          dodgerblue: {
+            DEFAULT: 'hsla(var(--dodgerblue))',
+          },
+          electricblue: {
+            DEFAULT: 'hsla(var(--electricblue))',
+          },
+          letterblue: {
+            DEFAULT: 'hsla(var(--letterblue))',
+          },
+          purple: {
+            DEFAULT: 'hsl(var(--purple))',
+          },
+          transparency: {
+            light: 'hsla(var(--transparency-light))',
+            dark: 'hsla(var(--transparency-dark))',
+          },
+          gray: {
+            scale05: 'hsla(var(--gray-05))',
+            scale12: 'hsla(var(--gray-12))',
+            scale29: 'hsla(var(--gray-29))',
+            scale48: 'hsla(var(--gray-48))',
+            scale50: 'hsla(var(--gray-50))',
+            scale60: 'hsla(var(--gray-60))',
+            scale79: 'hsla(var(--gray-79))',
+            scale96: 'hsla(var(--gray-96))',
+            scale98: 'hsla(var(--gray-98))',
+          },
+        },
+        borderRadius: {
+          lg: 'var(--radius)',
+          md: 'calc(var(--radius) - 2px)',
+          sm: 'calc(var(--radius) - 4px)',
+        },
+        keyframes: {
+          'accordion-down': {
+            from: { height: '0' },
+            to: { height: 'var(--radix-accordion-content-height)' },
+          },
+          'accordion-up': {
+            from: { height: 'var(--radix-accordion-content-height)' },
+            to: { height: '0' },
+          },
+          slide: {
+            '0%': {
+              transform: 'translateX(-100%)',
+            },
+            '100%': {
+              transform: 'translateX(100%)',
+            },
+          },
+          loading: {
+            '0%': {
+              transform: 'translateX(0)',
+              opacity: 0.5,
+            },
+            '50%': {
+              transform: 'translateX(50%)',
+              opacity: 0.1,
+            },
+            '100%': {
+              transform: 'translateX(100%)',
+              opacity: 0.5,
+            },
+          },
+          slideDownAndFade: {
+            from: { opacity: "0", transform: "translateY(-2px)" },
+            to: { opacity: "1", transform: "translateY(0)" },
+          },
+          slideLeftAndFade: {
+            from: { opacity: "0", transform: "translateX(2px)" },
+            to: { opacity: "1", transform: "translateX(0)" },
+          },
+          slideUpAndFade: {
+            from: { opacity: "0", transform: "translateY(2px)" },
+            to: { opacity: "1", transform: "translateY(0)" },
+          },
+          slideRightAndFade: {
+            from: { opacity: "0", transform: "translateX(-2px)" },
+            to: { opacity: "1", transform: "translateX(0)" },
+          },
+        },
+        animation: {
+          'accordion-down': 'accordion-down 0.2s ease-out',
+          'accordion-up': 'accordion-up 0.2s ease-out',
+          slide: 'slide 1s linear infinite',
+          loading: 'loading 1.5s infinite',
+          slideDownAndFade: "slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+  				slideLeftAndFade: "slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+				  slideUpAndFade: "slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+				  slideRightAndFade: "slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        },
+        boxShadow: {
+          brand: {
+            blue: '0 0 2px #1890ff33',
+          },
+        },
+      },
+    },
+  }
+);

package/dist/popover.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cn } from './lib/utils.js';
+
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

package/dist/radio-group.js

@@ -0,0 +1,74 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { CheckIcon } from '@radix-ui/react-icons';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { cn } from './lib/utils.js';
+
+const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Root,
+    {
+      className: cn("grid gap-2", className),
+      ...props,
+      ref
+    }
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+const RadioGroupItem = React.forwardRef(
+  ({
+    className,
+    variantChecked = "check",
+    disabled,
+    onClick,
+    pulse = false,
+    ...props
+  }, ref) => {
+    const [animate, setAnimate] = React.useState(false);
+    const handleClick = (event) => {
+      if (pulse) {
+        requestAnimationFrame(() => {
+          setAnimate(true);
+        });
+      }
+      if (onClick) {
+        onClick(event);
+      }
+    };
+    React.useEffect(() => {
+      if (animate) {
+        const timeout = setTimeout(() => {
+          setAnimate(false);
+        }, 300);
+        return () => clearTimeout(timeout);
+      }
+    }, [animate]);
+    return /* @__PURE__ */ jsx(
+      RadioGroupPrimitive.Item,
+      {
+        ref,
+        className: cn(
+          "relative aspect-square h-4 w-4 rounded-full border text-primary border-gray-scale79 shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          animate && "pulse",
+          !disabled && "hover:border-primary data-[state=checked]:border-primary",
+          className
+        ),
+        disabled,
+        onClick: handleClick,
+        ...props,
+        children: variantChecked === "fill" ? /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute h-4 w-4 rounded-full",
+              disabled ? "bg-gray-scale79 border-white border-[3px]" : "bg-white border-primary border-[5px]"
+            )
+          }
+        ) }) : /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(CheckIcon, { className: "h-3.5 w-3.5 fill-primary" }) })
+      }
+    );
+  }
+);
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };

package/dist/range-picker.js

@@ -0,0 +1,99 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { parse, isValid, format } from 'date-fns';
+import { ptBR } from 'date-fns/locale';
+import { Calendar } from 'lucide-react';
+import { cn } from './lib/utils.js';
+import { Calendar as Calendar$1 } from './calendar.js';
+import { Input } from './input.js';
+import { Popover, PopoverTrigger, PopoverContent } from './popover.js';
+
+function RangePicker({
+  selected,
+  onSelect,
+  format: format$1 = "dd/MM/yyyy",
+  placeholder = "",
+  className = "",
+  ...props
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const handleInputChange = (e) => {
+    setInputValue(e.currentTarget.value);
+    const range = (e.currentTarget.value || "").split(" - ");
+    const from = range[0];
+    const to = range[1];
+    const date = {
+      from: parse(from, format$1, /* @__PURE__ */ new Date()),
+      to: parse(to, format$1, /* @__PURE__ */ new Date())
+    };
+    if (isValid(date.from) && isValid(date.to) && typeof onSelect === "function") ;
+  };
+  const handleSelect = (range) => {
+    if (range?.from && range.to) {
+      setInputValue(
+        `${format(range.from, format$1)} - ${format(range.to, format$1)}`
+      );
+      setIsOpen(false);
+    } else {
+      setInputValue("");
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      open: isOpen,
+      onOpenChange: (open) => {
+        setIsOpen(open);
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          PopoverTrigger,
+          {
+            onClick: (e) => {
+              if (isOpen) {
+                e.preventDefault();
+              }
+            },
+            children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(Calendar, { className: "w-4 h-4 absolute right-[10px] top-[10px]" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  placeholder,
+                  value: inputValue,
+                  onChange: handleInputChange,
+                  className: cn("pr-8", className)
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PopoverContent,
+          {
+            className: "w-auto p-0",
+            align: "start",
+            onOpenAutoFocus: (e) => {
+              e.preventDefault();
+            },
+            children: /* @__PURE__ */ jsx(
+              Calendar$1,
+              {
+                mode: "range",
+                locale: ptBR,
+                selected,
+                onSelect: handleSelect,
+                numberOfMonths: 2,
+                ...props
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+RangePicker.displayName = "RangePicker";
+
+export { RangePicker };

package/dist/scroll-area.js

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { cn } from './lib/utils.js';
+
+const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  ScrollAreaPrimitive.Root,
+  {
+    ref,
+    className: cn("relative overflow-hidden", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ jsx(ScrollBar, {}),
+      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+    ]
+  }
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+  ScrollAreaPrimitive.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    className: cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+  }
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

package/dist/search-bar.js

@@ -0,0 +1,151 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect } from 'react';
+import { X, Loader, Search } from 'lucide-react';
+import { useDebounce } from './hook/useDebounce.js';
+import { cn } from './lib/utils.js';
+import { Input } from './input.js';
+
+const variantButtonClasses = {
+  "rounded-right": "border-r rounded-l",
+  "rounded-left": "border-l rounded-r"
+};
+const SearchBar = forwardRef((props, ref) => {
+  const {
+    onKeyPressSearch,
+    onChangeSearch,
+    className,
+    variant = "default",
+    size = "default",
+    pressButton = false,
+    disabled = false,
+    side = "right",
+    placeholder,
+    classNameIcon,
+    iconFill = "#7A7A7A",
+    defaultValue = "",
+    allowClear = false,
+    loading = false,
+    addonAfter,
+    addonBefore,
+    ...restProps
+  } = props;
+  const [query, setQuery] = useState(defaultValue);
+  const debouncedValue = useDebounce(query, query.length > 0 ? 600 : 0);
+  useEffect(() => {
+    setQuery(defaultValue);
+  }, [defaultValue]);
+  useEffect(() => {
+    if (onChangeSearch && (debouncedValue.length >= 3 || debouncedValue.length === 0)) {
+      const event = {
+        target: { value: debouncedValue }
+      };
+      onChangeSearch(event);
+    }
+  }, [debouncedValue, onChangeSearch]);
+  const handleSearchChange = (e) => {
+    const { value } = e.target;
+    setQuery(value);
+    if (onKeyPressSearch) {
+      onKeyPressSearch(value.trim().toLowerCase());
+    }
+  };
+  const handleKeyPress = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      if (onKeyPressSearch) {
+        onKeyPressSearch(query.trim().toLowerCase());
+      }
+    }
+  };
+  const handleSearch = () => {
+    if (onKeyPressSearch) {
+      onKeyPressSearch(query.trim().toLowerCase());
+    }
+  };
+  const clearSearch = () => {
+    setQuery("");
+    if (onChangeSearch) {
+      const event = { target: { value: "" } };
+      onChangeSearch(event);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex items-center w-full border border-gray-300 rounded-lg`,
+      children: [
+        addonBefore && /* @__PURE__ */ jsx("div", { className: "flex items-center px-2 ", children: addonBefore }),
+        /* @__PURE__ */ jsxs("div", { className: `relative flex-grow`, children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              ...restProps,
+              ref,
+              type: "text",
+              placeholder,
+              value: query,
+              onChange: handleSearchChange,
+              onKeyDown: handleKeyPress,
+              variant,
+              size,
+              disabled: disabled || loading,
+              className: cn(
+                `text-[#262626] placeholder:text-[#C5C0BF] focus:border-transparent focus:shadow-brand-blue`,
+                {
+                  "pl-14 pr-10": side === "left" && pressButton,
+                  "pl-12 pr-10": side === "left" && !pressButton,
+                  "pr-16": side === "right" && !pressButton,
+                  "pr-20": side === "right" && pressButton
+                },
+                className
+              )
+            }
+          ),
+          allowClear && query.length > 0 && !loading && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "absolute flex items-center justify-center top-1/2 transform -translate-y-1/2 h-full",
+                {
+                  "right-10": side === "right" && !pressButton,
+                  "right-14": side === "right" && pressButton,
+                  "right-4": side === "left"
+                }
+              ),
+              onClick: clearSearch,
+              style: { zIndex: 2 },
+              children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                `absolute flex items-center justify-center top-1/2 transform -translate-y-1/2 h-full px-3 ${pressButton && `${side === "left" ? variantButtonClasses["rounded-right"] : variantButtonClasses["rounded-left"]}`}`,
+                {
+                  "left-0": side === "left",
+                  "right-0": side === "right" && !loading,
+                  "cursor-pointer": pressButton,
+                  "cursor-default": !pressButton
+                },
+                pressButton && classNameIcon
+              ),
+              children: loading ? /* @__PURE__ */ jsx(Loader, { className: "animate-spin h-5 w-5" }) : typeof pressButton !== "boolean" ? /* @__PURE__ */ jsx("span", { className: "truncate", style: { maxWidth: "15ch" }, children: pressButton }) : /* @__PURE__ */ jsx(
+                Search,
+                {
+                  onClick: handleSearch,
+                  style: { color: pressButton && iconFill ? iconFill : void 0 },
+                  className: "h-5 w-5 text-gray-scale48"
+                }
+              )
+            }
+          )
+        ] }),
+        addonAfter && /* @__PURE__ */ jsx("div", { className: "flex items-center px-2", children: addonAfter })
+      ]
+    }
+  );
+});
+SearchBar.displayName = "SearchBar";
+
+export { SearchBar };