@neoptocom/neopto-ui 0.2.1 → 0.4.0

package/dist/index.cjs

@@ -116,7 +116,7 @@ function Modal({
   return reactDom.createPortal(overlay, container);
 }
 var styles = tailwindVariants.tv({
-  base: "text-[var(--fg)] -webkit-font-smoothing antialiased -moz-osx-font-smoothing grayscale",
+  base: "text-current",
   variants: {
     variant: {
       "display-lg": "text-5xl leading-tight",
@@ -326,6 +326,64 @@ function Icon({
     }
   );
 }
+var iconButtonStyles = tailwindVariants.tv({
+  base: [
+    "flex items-center justify-center rounded-full flex-shrink-0",
+    "transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+    "focus-visible:ring-cyan-500/40 disabled:cursor-not-allowed disabled:opacity-50"
+  ].join(" "),
+  variants: {
+    variant: {
+      ghost: "bg-transparent hover:bg-[var(--muted)] active:bg-[var(--muted)]",
+      primary: "bg-cyan-500 text-white hover:bg-cyan-400 active:bg-cyan-600",
+      secondary: "border border-[var(--border)] bg-[var(--surface)] hover:bg-[var(--muted)] active:bg-[var(--muted)]"
+    },
+    size: {
+      sm: "w-8 h-8",
+      md: "w-10 h-10",
+      lg: "w-12 h-12"
+    }
+  },
+  defaultVariants: {
+    variant: "ghost",
+    size: "md"
+  }
+});
+var IconButton = React2__namespace.forwardRef(
+  ({
+    variant,
+    size,
+    icon,
+    iconSize,
+    iconFill = 0,
+    iconClassName,
+    className,
+    ...props
+  }, ref) => {
+    const defaultIconSize = size === "sm" ? "sm" : size === "lg" ? "lg" : "md";
+    const effectiveIconSize = iconSize ?? defaultIconSize;
+    const defaultIconColorClass = variant === "primary" ? "text-white" : variant === "secondary" ? "text-[var(--fg)]" : "text-[var(--muted-fg)]";
+    const finalIconClassName = iconClassName ?? defaultIconColorClass;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        className: iconButtonStyles({ variant, size, className }),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Icon,
+          {
+            name: icon,
+            size: effectiveIconSize,
+            fill: iconFill,
+            className: finalIconClassName
+          }
+        )
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
 function Autocomplete({
   className = "",
   title,
@@ -478,27 +536,16 @@ function Autocomplete({
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
+                  IconButton,
                   {
-                    type: "button",
+                    icon: selectedOption && !open ? "close" : "expand_more",
                     onClick: selectedOption && !open ? handleClear : () => setOpen((s) => !s),
                     disabled,
                     "aria-label": selectedOption && !open ? "Clear" : open ? "Collapse" : "Expand",
-                    className: [
-                      "flex items-center justify-center rounded-full bg-transparent w-10 h-10",
-                      disabled ? "cursor-not-allowed" : "hover:bg-[var(--muted)]"
-                    ].join(" "),
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      Icon,
-                      {
-                        name: selectedOption && !open ? "close" : "expand_more",
-                        size: "md",
-                        className: [
-                          "transition-transform duration-300 text-[var(--muted-fg)]",
-                          open ? "rotate-180 text-[var(--color-brand)]" : ""
-                        ].join(" ")
-                      }
-                    )
+                    iconClassName: [
+                      "transition-transform duration-300 text-[var(--muted-fg)]",
+                      open ? "rotate-180 text-[var(--color-brand)]" : ""
+                    ].join(" ")
                   }
                 )
               ] }) })
@@ -556,6 +603,7 @@ function Search({
   disabled = false,
   maxHeight = 152,
   id,
+  children,
   ...props
 }) {
   const inputId = id ?? React2.useId();
@@ -563,6 +611,7 @@ function Search({
   const [searchQuery, setSearchQuery] = React2.useState("");
   const [open, setOpen] = React2.useState(false);
   const [activeIndex, setActiveIndex] = React2.useState(-1);
+  const [filtersExpanded, setFiltersExpanded] = React2.useState(false);
   const rootRef = React2.useRef(null);
   const listRef = React2.useRef(null);
   const searchTimeoutRef = React2.useRef(null);
@@ -572,7 +621,7 @@ function Search({
     }
     return options;
   }, [options]);
-  const anyOptionHasImage = React2.useMemo(
+  React2.useMemo(
     () => normalizedOptions.some((o) => !!o.image),
     [normalizedOptions]
   );
@@ -653,22 +702,37 @@ function Search({
       }
     };
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ref: rootRef,
       className: ["relative w-full", className].join(" "),
       ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: [
-              "w-full min-w-0 rounded-full border bg-[var(--surface)] transition-colors h-12",
-              "border-[var(--border)] focus-within:border-[var(--color-brand)]",
-              disabled ? "opacity-60 cursor-not-allowed" : ""
-            ].join(" "),
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex pl-5 pr-3 h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: [
+            "w-full min-w-0 border rounded-[24px] bg-[var(--surface)] transition-all",
+            "border-[var(--border)] focus-within:border-[var(--color-brand)]",
+            disabled ? "opacity-60 cursor-not-allowed" : "",
+            !filtersExpanded && "h-12"
+          ].join(" "),
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [
+            "flex flex-col w-full overflow-hidden transition-all",
+            filtersExpanded && children ? "h-auto pb-3" : "h-full"
+          ].join(" "), children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center h-12 px-2", children: [
+              children && /* @__PURE__ */ jsxRuntime.jsx(
+                IconButton,
+                {
+                  icon: "filter_list",
+                  onClick: () => setFiltersExpanded((prev) => !prev),
+                  disabled,
+                  "aria-label": filtersExpanded ? "Hide filters" : "Show filters",
+                  "aria-expanded": filtersExpanded,
+                  className: "mr-2"
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "input",
                 {
@@ -691,82 +755,35 @@ function Search({
                   onKeyDown,
                   onBlur: () => setTimeout(closeList, 150),
                   disabled,
+                  style: { fontFamily: "var(--font-display)", fontSize: "16px" },
                   className: [
-                    "w-full rounded-full border-0 outline-none bg-transparent",
-                    "text-sm text-[var(--fg)] placeholder:text-[var(--muted-fg)]",
-                    "pr-2"
+                    "w-full rounded-full border-0 outline-none bg-transparent h-12",
+                    "leading-tight text-[var(--fg)] placeholder:text-[var(--muted-fg)]",
+                    "px-2"
                   ].join(" "),
                   placeholder: "Pesquisar",
                   onClick: () => !disabled && setOpen(true)
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
+                IconButton,
                 {
-                  type: "button",
+                  icon: "search",
                   onClick: selectedOption && !open ? handleClear : () => setOpen((s) => !s),
                   disabled,
-                  "aria-label": selectedOption && !open ? "Clear" : open ? "Collapse" : "Expand",
-                  className: [
-                    "flex items-center justify-center rounded-full bg-transparent w-10 h-10",
-                    disabled ? "cursor-not-allowed" : "hover:bg-[var(--muted)]"
-                  ].join(" "),
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    Icon,
-                    {
-                      name: "search",
-                      size: "md",
-                      className: "text-[var(--muted-fg)]"
-                    }
-                  )
+                  "aria-label": selectedOption && !open ? "Clear" : open ? "Collapse" : "Expand"
                 }
               )
-            ] }) })
-          }
-        ),
-        open && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: [
-              "absolute z-20 mt-2 w-full overflow-y-auto rounded-lg border border-[var(--border)]",
-              "bg-[var(--surface)] text-[var(--fg)] shadow-md backdrop-blur-sm px-3 py-1.5"
-            ].join(" "),
-            style: { maxHeight },
-            children: normalizedOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("ul", { id: listboxId, role: "listbox", ref: listRef, children: normalizedOptions.map((option, index) => {
-              const active = index === activeIndex;
-              const selected = selectedOption != null && (typeof selectedOption === "string" ? selectedOption === option.label : selectedOption.label === option.label);
-              return /* @__PURE__ */ jsxRuntime.jsxs(
-                "li",
-                {
-                  role: "option",
-                  "aria-selected": selected,
-                  className: [
-                    "flex items-center justify-between px-4 py-2 text-sm cursor-pointer transition-colors",
-                    active ? "bg-[var(--muted)]" : "",
-                    index !== normalizedOptions.length - 1 ? "border-b border-[var(--border)]" : ""
-                  ].join(" "),
-                  onMouseEnter: () => setActiveIndex(index),
-                  onMouseDown: (e) => e.preventDefault(),
-                  onClick: () => handleSelect(option),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                      anyOptionHasImage && /* @__PURE__ */ jsxRuntime.jsx(Avatar, { name: option.label, src: option.image || void 0 }),
-                      /* @__PURE__ */ jsxRuntime.jsx(Typo, { variant: "label-lg", className: "font-normal text-[var(--fg)]", children: option.label })
-                    ] }),
-                    Array.isArray(option.group) && option.group.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(AvatarGroup, { children: option.group.map((member, i) => /* @__PURE__ */ jsxRuntime.jsx(Avatar, { name: member.name, src: member.image || void 0 }, i)) })
-                  ]
-                },
-                `${option.label}-${index}`
-              );
-            }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(Typo, { variant: "body-sm", className: "text-[var(--muted-fg)]", children: "No results found" }) })
-          }
-        )
-      ]
+            ] }),
+            children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full px-4.5 pb-3 pt-2", children })
+          ] }) })
+        }
+      )
     }
   );
 }
 var buttonStyles = tailwindVariants.tv({
-  base: "cursor-pointer inline-flex items-center justify-center gap-2 rounded-[var(--radius-2xl)] px-[18px] h-12 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-cyan-500/40 disabled:cursor-not-allowed disabled:opacity-50",
+  base: "cursor-pointer inline-flex items-center justify-center gap-2 rounded-[var(--radius-2xl)] px-[18px] h-12 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-cyan-500/40 disabled:cursor-not-allowed disabled:opacity-50",
   variants: {
     variant: {
       primary: "bg-cyan-500 text-white hover:bg-cyan-400 active:bg-cyan-600 disabled:bg-neutral-400",
@@ -774,9 +791,9 @@ var buttonStyles = tailwindVariants.tv({
       ghost: "bg-transparent text-cyan-500 hover:bg-cyan-50 active:bg-cyan-100 disabled:text-neutral-400"
     },
     size: {
-      sm: "h-9 px-3 text-sm",
-      md: "h-12 px-[18px] text-sm",
-      lg: "h-14 px-6 text-base"
+      sm: "h-9 px-3",
+      md: "h-12 px-[18px]",
+      lg: "h-14 px-6"
     },
     fullWidth: {
       true: "w-full"
@@ -789,14 +806,13 @@ var buttonStyles = tailwindVariants.tv({
 });
 var Button = React2__namespace.forwardRef(
   ({ variant, size, fullWidth, className, children, icon, ...props }, ref) => {
-    const content = icon ? /* @__PURE__ */ jsxRuntime.jsx(Typo, { variant: "body-lg", bold: "semibold", className: "text-base font-semibold", children: icon }) : children;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         ref,
         className: buttonStyles({ variant, size, fullWidth, className }),
         ...props,
-        children: content
+        children
       }
     );
   }
@@ -822,13 +838,249 @@ function Chip({
     /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
   ] });
 }
+function Counter({
+  value = 0,
+  onChange,
+  min = 0,
+  max = 99,
+  step = 1,
+  className = "",
+  ...props
+}) {
+  const [count, setCount] = React2__namespace.useState(value);
+  React2__namespace.useEffect(() => {
+    setCount(value);
+  }, [value]);
+  const handleIncrement = () => {
+    const newValue = Math.min(count + step, max);
+    setCount(newValue);
+    onChange?.(newValue);
+  };
+  const handleDecrement = () => {
+    const newValue = Math.max(count - step, min);
+    setCount(newValue);
+    onChange?.(newValue);
+  };
+  const base = "inline-flex w-fit items-center justify-center gap-2 whitespace-nowrap overflow-hidden rounded-full h-7.5 px-2 text-xs font-semibold bg-[var(--muted)] text-[var(--fg)]";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [base, className].join(" "), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-[1.5rem] text-center", children: count }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0 -my-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleIncrement,
+          disabled: count >= max,
+          className: "hover:opacity-70 disabled:opacity-30 disabled:cursor-not-allowed transition-opacity",
+          "aria-label": "Increment",
+          children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "keyboard_arrow_up", size: "sm" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleDecrement,
+          disabled: count <= min,
+          className: "hover:opacity-70 disabled:opacity-30 disabled:cursor-not-allowed transition-opacity",
+          "aria-label": "Decrement",
+          children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "keyboard_arrow_down", size: "sm" })
+        }
+      )
+    ] })
+  ] });
+}
+var AnimatedBgCircle = ({ colors, delay = 0 }) => {
+  const uniqueId = React2.useMemo(() => Math.random().toString(36).substr(2, 9), []);
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 64 64", fill: "none", className: "h-full transition-all duration-500 ease-in-out w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+          @keyframes colorCycle-${uniqueId} {
+            0% { fill: ${colors[0]}; }
+            25% { fill: ${colors[1]}; }
+            50% { fill: ${colors[2]}; }
+            75% { fill: ${colors[3]}; }
+            100% { fill: ${colors[0]}; }
+          }
+          @keyframes fadeIn-${uniqueId} {
+            0% { opacity: 0; }
+            100% { opacity: 1; } 
+          }
+          .animated-circle-${uniqueId} {
+            animation: 
+              fadeIn-${uniqueId} 1.5s ease-in-out 1.5s forwards,
+              colorCycle-${uniqueId} 4s infinite linear ${delay}s;
+            opacity: 0;
+            transition: all 0.5s ease-in-out;
+          }
+        ` }),
+    /* @__PURE__ */ jsxRuntime.jsx("g", { style: { mixBlendMode: "overlay" }, filter: "url(#filter0_f_241_319)", children: /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "32", rx: "20", cy: "32", ry: "20", className: `animated-circle-${uniqueId}` }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("filter", { id: "filter0_f_241_319", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+      /* @__PURE__ */ jsxRuntime.jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
+      /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { stdDeviation: "4", result: "effect1_foregroundBlur_241_319" })
+    ] }) })
+  ] });
+};
+var AnimatedBgCircle_default = AnimatedBgCircle;
+var AnimatedBgRectangle = ({ colors, delay = 0 }) => {
+  const uniqueId = React2.useMemo(() => Math.random().toString(36).substr(2, 9), []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      viewBox: "0 0 64 64",
+      fill: "none",
+      className: "h-full transition-all duration-500 ease-in-out w-full",
+      preserveAspectRatio: "none",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+          @keyframes colorCycle-${uniqueId} {
+            0% { fill: ${colors[0]}; }
+            25% { fill: ${colors[1]}; }
+            50% { fill: ${colors[2]}; }
+            75% { fill: ${colors[3]}; }
+            100% { fill: ${colors[0]}; }
+          }
+          @keyframes fadeIn-${uniqueId} {
+            0% { opacity: 0; }
+            100% { opacity: 1; }
+          }
+          .animated-circle-${uniqueId} {
+            animation: 
+              fadeIn-${uniqueId} 1.5s ease-in-out 1.5s forwards,
+              colorCycle-${uniqueId} 4s infinite linear ${delay}s;
+            opacity: 0;
+            transition: all 0.5s ease-in-out;
+          }
+        ` }),
+        /* @__PURE__ */ jsxRuntime.jsx("g", { style: { mixBlendMode: "overlay" }, filter: "url(#filter0_f_241_319)", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "10", y: "12", width: "44", height: "40", className: `animated-circle-${uniqueId}` }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("filter", { id: "filter0_f_241_319", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+          /* @__PURE__ */ jsxRuntime.jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
+          /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { stdDeviation: "4", result: "effect1_foregroundBlur_241_319" })
+        ] }) })
+      ]
+    }
+  );
+};
+var AnimatedBgRectangle_default = AnimatedBgRectangle;
+var ChatButton = ({
+  onOpenChat,
+  hasNotification = false,
+  notificationMessage = "",
+  logoSrc,
+  logoAlt = "Chat Agent",
+  animationColors = ["#7DADB9", "#3864F5", "#55468D", "#479A8D"]
+}) => {
+  const [showText, setShowText] = React2.useState(false);
+  const [delayedHasNotification, setDelayedHasNotification] = React2.useState(false);
+  const [isMounted, setIsMounted] = React2.useState(false);
+  React2.useEffect(() => {
+    const timer = setTimeout(() => setIsMounted(true), 250);
+    return () => clearTimeout(timer);
+  }, []);
+  React2.useEffect(() => {
+    if (hasNotification) {
+      const textTimer = setTimeout(() => setShowText(true), 500);
+      setDelayedHasNotification(true);
+      return () => clearTimeout(textTimer);
+    } else {
+      const textHideTimer = setTimeout(() => setShowText(false), 250);
+      const backgroundTimer = setTimeout(
+        () => setDelayedHasNotification(false),
+        350
+      );
+      return () => {
+        clearTimeout(textHideTimer);
+        clearTimeout(backgroundTimer);
+      };
+    }
+  }, [hasNotification]);
+  const circleAnimations = [
+    { delay: 0, style: "left-0 top-0" },
+    { delay: 0.75, style: "right-0 top-0" },
+    { delay: 1, style: "bottom-0 left-0" },
+    { delay: 0.25, style: "bottom-0 right-0" }
+  ];
+  const rectAnimations = [
+    { delay: 0, style: "left-0 top-0" },
+    { delay: 0.75, style: "right-0 top-0" },
+    { delay: 1, style: "bottom-0 left-0" },
+    { delay: 0.25, style: "bottom-0 right-0" }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `flex justify-end items-center fixed bottom-3 right-8 z-40 h-24 transition-all duration-600 ease-in-out ${delayedHasNotification ? "w-[432px]" : "w-24"} ${isMounted ? "opacity-100" : "opacity-0"}`,
+      children: [
+        circleAnimations.map((circle, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `absolute ${circle.style} h-20 min-w-20 transition-all duration-600 ease-in-out w-20 overflow-visible flex justify-between`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              AnimatedBgCircle_default,
+              {
+                colors: animationColors,
+                delay: circle.delay,
+                stretch: delayedHasNotification
+              }
+            )
+          },
+          `circle-${index}`
+        )),
+        rectAnimations.map((rect, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `absolute ${rect.style} h-20 transition-all duration-600 ease-in-out ${delayedHasNotification ? "w-[324px] opacity-100 px-0" : "w-20 px-10 opacity-0"} overflow-visible flex justify-between`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedBgRectangle_default, { colors: animationColors, delay: rect.delay })
+          },
+          `rect-${index}`
+        )),
+        isMounted && /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: onOpenChat,
+            className: `flex flex-row-reverse items-center gap-1.5 fixed p-3 rounded-full shadow-md cursor-pointer h-16 mr-4 transition-all duration-600 ease-in-out border-2 border-[var(--border)] ${delayedHasNotification ? "w-[400px]" : "w-16"}`,
+            style: {
+              background: "var(--chat-button-gradient)"
+            },
+            "aria-label": hasNotification ? notificationMessage : "Open chat",
+            children: [
+              logoSrc && /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: logoSrc,
+                  alt: logoAlt,
+                  className: "w-10 h-10 object-contain"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Typo,
+                {
+                  variant: "label-lg",
+                  className: `pl-2 w-80 line-clamp-2 overflow-hidden text-ellipsis text-left transition-opacity duration-300 ${showText ? "opacity-100" : "opacity-0"}`,
+                  children: notificationMessage
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var ChatButton_default = ChatButton;
 
+exports.AnimatedBgCircle = AnimatedBgCircle_default;
+exports.AnimatedBgRectangle = AnimatedBgRectangle_default;
 exports.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;
 exports.AvatarGroup = AvatarGroup;
 exports.Button = Button;
+exports.ChatButton = ChatButton_default;
 exports.Chip = Chip;
+exports.Counter = Counter;
 exports.Icon = Icon;
+exports.IconButton = IconButton;
 exports.Input = Input;
 exports.Modal = Modal;
 exports.Search = Search;