@neoptocom/neopto-ui 1.3.1 → 1.4.1

package/dist/index.cjs

@@ -1255,7 +1255,8 @@ var AgentButton = ({
   notificationMessage = "",
   logoSrc,
   logoAlt = "Agent",
-  animationColors = ["#7DADB9", "#3864F5", "#55468D", "#479A8D"]
+  animationColors = ["#7DADB9", "#3864F5", "#55468D", "#479A8D"],
+  disabled = false
 }) => {
   const [showText, setShowText] = React3.useState(false);
   const [delayedHasNotification, setDelayedHasNotification] = React3.useState(false);
@@ -1296,12 +1297,18 @@ var AgentButton = ({
   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"}`,
+      className: `flex justify-end items-center fixed bottom-3 right-8 z-40 h-24 transition-all duration-1000 ease-in-out ${delayedHasNotification ? "w-[432px]" : "w-24"} ${isMounted ? "opacity-100" : "opacity-0"}`,
+      style: {
+        filter: disabled ? "grayscale(100%)" : "grayscale(0%)",
+        opacity: disabled ? 0.3 : 1,
+        transition: "filter 1s ease-in-out, opacity 1s ease-in-out"
+      },
       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`,
+            className: `absolute ${circle.style} h-20 min-w-20 w-20 overflow-visible flex justify-between transition-opacity duration-1000 ease-in-out`,
+            style: { opacity: disabled ? 0 : 1 },
             children: /* @__PURE__ */ jsxRuntime.jsx(
               AnimatedBgCircle_default,
               {
@@ -1316,7 +1323,11 @@ var AgentButton = ({
         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`,
+            className: `absolute ${rect.style} h-20 transition-all ease-in-out ${delayedHasNotification ? "w-[324px] px-0" : "w-20 px-10"} overflow-visible flex justify-between`,
+            style: {
+              opacity: disabled ? 0 : delayedHasNotification ? 1 : 0,
+              transitionDuration: "1s"
+            },
             children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedBgRectangle_default, { colors: animationColors, delay: rect.delay })
           },
           `rect-${index}`
@@ -1325,7 +1336,8 @@ var AgentButton = ({
           "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"}`,
+            disabled,
+            className: `flex flex-row-reverse items-center gap-1.5 fixed p-3 rounded-full shadow-md h-16 mr-4 transition-all duration-600 ease-in-out border-2 border-[var(--border)] ${delayedHasNotification ? "w-[400px]" : "w-16"} ${disabled ? "cursor-default" : "cursor-pointer"}`,
             style: {
               background: "var(--chat-button-gradient)"
             },

package/dist/index.d.cts

@@ -298,8 +298,10 @@ interface AgentButtonProps {
     logoAlt?: string;
     /** Custom animation colors */
     animationColors?: string[];
+    /** Whether the button is disabled (greyscale, no animations) */
+    disabled?: boolean;
 }
-declare const AgentButton: ({ onOpenChat, hasNotification, notificationMessage, logoSrc, logoAlt, animationColors, }: AgentButtonProps) => react_jsx_runtime.JSX.Element;
+declare const AgentButton: ({ onOpenChat, hasNotification, notificationMessage, logoSrc, logoAlt, animationColors, disabled, }: AgentButtonProps) => react_jsx_runtime.JSX.Element;
 
 interface AnimatedBgCircleProps {
     colors: string[];

package/dist/index.d.ts

@@ -298,8 +298,10 @@ interface AgentButtonProps {
     logoAlt?: string;
     /** Custom animation colors */
     animationColors?: string[];
+    /** Whether the button is disabled (greyscale, no animations) */
+    disabled?: boolean;
 }
-declare const AgentButton: ({ onOpenChat, hasNotification, notificationMessage, logoSrc, logoAlt, animationColors, }: AgentButtonProps) => react_jsx_runtime.JSX.Element;
+declare const AgentButton: ({ onOpenChat, hasNotification, notificationMessage, logoSrc, logoAlt, animationColors, disabled, }: AgentButtonProps) => react_jsx_runtime.JSX.Element;
 
 interface AnimatedBgCircleProps {
     colors: string[];

package/dist/index.js

@@ -1234,7 +1234,8 @@ var AgentButton = ({
   notificationMessage = "",
   logoSrc,
   logoAlt = "Agent",
-  animationColors = ["#7DADB9", "#3864F5", "#55468D", "#479A8D"]
+  animationColors = ["#7DADB9", "#3864F5", "#55468D", "#479A8D"],
+  disabled = false
 }) => {
   const [showText, setShowText] = useState(false);
   const [delayedHasNotification, setDelayedHasNotification] = useState(false);
@@ -1275,12 +1276,18 @@ var AgentButton = ({
   return /* @__PURE__ */ 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"}`,
+      className: `flex justify-end items-center fixed bottom-3 right-8 z-40 h-24 transition-all duration-1000 ease-in-out ${delayedHasNotification ? "w-[432px]" : "w-24"} ${isMounted ? "opacity-100" : "opacity-0"}`,
+      style: {
+        filter: disabled ? "grayscale(100%)" : "grayscale(0%)",
+        opacity: disabled ? 0.3 : 1,
+        transition: "filter 1s ease-in-out, opacity 1s ease-in-out"
+      },
       children: [
         circleAnimations.map((circle, index) => /* @__PURE__ */ 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`,
+            className: `absolute ${circle.style} h-20 min-w-20 w-20 overflow-visible flex justify-between transition-opacity duration-1000 ease-in-out`,
+            style: { opacity: disabled ? 0 : 1 },
             children: /* @__PURE__ */ jsx(
               AnimatedBgCircle_default,
               {
@@ -1295,7 +1302,11 @@ var AgentButton = ({
         rectAnimations.map((rect, index) => /* @__PURE__ */ 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`,
+            className: `absolute ${rect.style} h-20 transition-all ease-in-out ${delayedHasNotification ? "w-[324px] px-0" : "w-20 px-10"} overflow-visible flex justify-between`,
+            style: {
+              opacity: disabled ? 0 : delayedHasNotification ? 1 : 0,
+              transitionDuration: "1s"
+            },
             children: /* @__PURE__ */ jsx(AnimatedBgRectangle_default, { colors: animationColors, delay: rect.delay })
           },
           `rect-${index}`
@@ -1304,7 +1315,8 @@ var AgentButton = ({
           "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"}`,
+            disabled,
+            className: `flex flex-row-reverse items-center gap-1.5 fixed p-3 rounded-full shadow-md h-16 mr-4 transition-all duration-600 ease-in-out border-2 border-[var(--border)] ${delayedHasNotification ? "w-[400px]" : "w-16"} ${disabled ? "cursor-default" : "cursor-pointer"}`,
             style: {
               background: "var(--chat-button-gradient)"
             },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neoptocom/neopto-ui",
-  "version": "1.3.1",
+  "version": "1.4.1",
   "private": false,
   "description": "A modern React component library built with Tailwind CSS v4 and TypeScript. Features dark mode, design tokens, and comprehensive Storybook documentation. Requires Tailwind v4+.",
   "keywords": [

package/src/components/Chat/AgentButton.tsx

@@ -16,6 +16,8 @@ export interface AgentButtonProps {
   logoAlt?: string;
   /** Custom animation colors */
   animationColors?: string[];
+  /** Whether the button is disabled (greyscale, no animations) */
+  disabled?: boolean;
 }
 
 const AgentButton = ({
@@ -25,6 +27,7 @@ const AgentButton = ({
   logoSrc,
   logoAlt = "Agent",
   animationColors = ["#7DADB9", "#3864F5", "#55468D", "#479A8D"],
+  disabled = false,
 }: AgentButtonProps) => {
   const [showText, setShowText] = useState(false);
   const [delayedHasNotification, setDelayedHasNotification] = useState(false);
@@ -68,14 +71,20 @@ const AgentButton = ({
 
   return (
     <div
-      className={`flex justify-end items-center fixed bottom-3 right-8 z-40 h-24 transition-all duration-600 ease-in-out ${
+      className={`flex justify-end items-center fixed bottom-3 right-8 z-40 h-24 transition-all duration-1000 ease-in-out ${
         delayedHasNotification ? "w-[432px]" : "w-24"
       } ${isMounted ? "opacity-100" : "opacity-0"}`}
+      style={{
+        filter: disabled ? "grayscale(100%)" : "grayscale(0%)",
+        opacity: disabled ? 0.3 : 1,
+        transition: "filter 1s ease-in-out, opacity 1s ease-in-out",
+      }}
     >
       {circleAnimations.map((circle, index) => (
         <div
           key={`circle-${index}`}
-          className={`absolute ${circle.style} h-20 min-w-20 transition-all duration-600 ease-in-out w-20 overflow-visible flex justify-between`}
+          className={`absolute ${circle.style} h-20 min-w-20 w-20 overflow-visible flex justify-between transition-opacity duration-1000 ease-in-out`}
+          style={{ opacity: disabled ? 0 : 1 }}
         >
           <AnimatedBgCircle
             colors={animationColors}
@@ -87,11 +96,15 @@ const AgentButton = ({
       {rectAnimations.map((rect, index) => (
         <div
           key={`rect-${index}`}
-          className={`absolute ${rect.style} h-20 transition-all duration-600 ease-in-out ${
+          className={`absolute ${rect.style} h-20 transition-all ease-in-out ${
             delayedHasNotification
-              ? "w-[324px] opacity-100 px-0"
-              : "w-20 px-10 opacity-0"
+              ? "w-[324px] px-0"
+              : "w-20 px-10"
           } overflow-visible flex justify-between`}
+          style={{
+            opacity: disabled ? 0 : delayedHasNotification ? 1 : 0,
+            transitionDuration: "1s",
+          }}
         >
           <AnimatedBgRectangle colors={animationColors} delay={rect.delay} />
         </div>
@@ -99,9 +112,10 @@ const AgentButton = ({
       {isMounted && (
         <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)] ${
+          disabled={disabled}
+          className={`flex flex-row-reverse items-center gap-1.5 fixed p-3 rounded-full shadow-md h-16 mr-4 transition-all duration-600 ease-in-out border-2 border-[var(--border)] ${
             delayedHasNotification ? "w-[400px]" : "w-16"
-          }`}
+          } ${disabled ? "cursor-default" : "cursor-pointer"}`}
           style={{
             background: "var(--chat-button-gradient)",
           }}

package/src/stories/AgentButton.stories.tsx

@@ -92,3 +92,79 @@ export const AutoToggleNotification: Story = {
   },
 };
 
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    hasNotification: true,
+    notificationMessage: "This button is disabled (greyscale, no animations)",
+  },
+};
+
+export const DisabledWhenChatOpen: Story = {
+  render: (args) => {
+    const [chatOpen, setChatOpen] = React.useState(false);
+
+    return (
+      <>
+        <AgentButton
+          {...args}
+          disabled={chatOpen}
+          hasNotification={!chatOpen}
+          notificationMessage="Click to open chat (button will become disabled)"
+          onOpenChat={() => {
+            setChatOpen(true);
+            console.log("Chat opened!");
+          }}
+        />
+        {chatOpen && (
+          <div className="fixed bottom-24 right-8 bg-[var(--surface)] border border-[var(--border)] rounded-lg p-4 shadow-lg z-50 max-w-md">
+            <Typo variant="body-md" className="text-[var(--fg)]">
+              Chat is open! Notice the button is now disabled (greyscale with no animations).
+            </Typo>
+            <button
+              onClick={() => setChatOpen(false)}
+              className="mt-2 px-3 py-1 bg-[var(--color-brand)] text-white rounded-full"
+            >
+              <Typo variant="label-sm">Close Chat</Typo>
+            </button>
+          </div>
+        )}
+      </>
+    );
+  },
+};
+
+export const DisabledTransition: Story = {
+  render: (args) => {
+    const [disabled, setDisabled] = React.useState(false);
+
+    React.useEffect(() => {
+      const interval = setInterval(() => {
+        setDisabled((prev) => !prev);
+      }, 4000);
+
+      return () => clearInterval(interval);
+    }, []);
+
+    return (
+      <>
+        <AgentButton
+          {...args}
+          disabled={disabled}
+          hasNotification={!disabled}
+          notificationMessage="Watch the smooth 1-second transition!"
+          onOpenChat={() => console.log("Chat opened!")}
+        />
+        <div className="fixed top-8 left-8 bg-[var(--surface)] border border-[var(--border)] rounded-lg p-4 shadow-lg">
+          <Typo variant="body-md" className="text-[var(--fg)]">
+            State: <strong>{disabled ? "Disabled" : "Enabled"}</strong>
+          </Typo>
+          <Typo variant="label-sm" className="text-[var(--muted-fg)] mt-1">
+            Toggles every 4 seconds
+          </Typo>
+        </div>
+      </>
+    );
+  },
+};
+