@neoptocom/neopto-ui 0.10.0 → 0.11.0

package/dist/index.cjs

@@ -1184,12 +1184,12 @@ var AnimatedBgRectangle = ({ colors, delay = 0 }) => {
   );
 };
 var AnimatedBgRectangle_default = AnimatedBgRectangle;
-var ChatButton = ({
+var AgentButton = ({
   onOpenChat,
   hasNotification = false,
   notificationMessage = "",
   logoSrc,
-  logoAlt = "Chat Agent",
+  logoAlt = "Agent",
   animationColors = ["#7DADB9", "#3864F5", "#55468D", "#479A8D"]
 }) => {
   const [showText, setShowText] = React2.useState(false);
@@ -1289,8 +1289,9 @@ var ChatButton = ({
     }
   );
 };
-var ChatButton_default = ChatButton;
+var AgentButton_default = AgentButton;
 
+exports.AgentButton = AgentButton_default;
 exports.AnimatedBgCircle = AnimatedBgCircle_default;
 exports.AnimatedBgRectangle = AnimatedBgRectangle_default;
 exports.AppBackground = AppBackground;
@@ -1300,7 +1301,6 @@ exports.AvatarGroup = AvatarGroup;
 exports.BackgroundBlur = BackgroundBlur;
 exports.Button = Button;
 exports.Card = Card;
-exports.ChatButton = ChatButton_default;
 exports.Chip = Chip;
 exports.Counter = Counter;
 exports.Icon = Icon;

package/dist/index.d.cts

@@ -262,21 +262,21 @@ type CounterProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
 };
 declare function Counter({ value, onChange, min, max, step, className, ...props }: CounterProps): react_jsx_runtime.JSX.Element;
 
-interface ChatButtonProps {
-    /** Callback when chat button is clicked */
+interface AgentButtonProps {
+    /** Callback when agent button is clicked */
     onOpenChat: () => void;
     /** Whether there's a new notification */
     hasNotification?: boolean;
     /** The notification message to display */
     notificationMessage?: string;
-    /** Logo source for the chat agent */
+    /** Logo source for the agent */
     logoSrc?: string;
     /** Alt text for the logo */
     logoAlt?: string;
     /** Custom animation colors */
     animationColors?: string[];
 }
-declare const ChatButton: ({ onOpenChat, hasNotification, notificationMessage, logoSrc, logoAlt, animationColors, }: ChatButtonProps) => react_jsx_runtime.JSX.Element;
+declare const AgentButton: ({ onOpenChat, hasNotification, notificationMessage, logoSrc, logoAlt, animationColors, }: AgentButtonProps) => react_jsx_runtime.JSX.Element;
 
 interface AnimatedBgCircleProps {
     colors: string[];
@@ -291,4 +291,4 @@ interface AnimatedBgRectangleProps {
 }
 declare const AnimatedBgRectangle: ({ colors, delay }: AnimatedBgRectangleProps) => react_jsx_runtime.JSX.Element;
 
-export { AnimatedBgCircle, AnimatedBgRectangle, AppBackground, type AppBackgroundProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BackgroundBlur, type BackgroundBlurProps, Button, type ButtonProps, Card, type CardProps, ChatButton, type ChatButtonProps, Chip, type ChipProps, Counter, type CounterProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, Modal, type ModalProps, Search, type SearchOption, type SearchProps, Skeleton, type SkeletonProps, Typo, type TypoProps, type TypoVariant, type TypoWeight, index as assets };
+export { AgentButton, type AgentButtonProps, AnimatedBgCircle, AnimatedBgRectangle, AppBackground, type AppBackgroundProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BackgroundBlur, type BackgroundBlurProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Counter, type CounterProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, Modal, type ModalProps, Search, type SearchOption, type SearchProps, Skeleton, type SkeletonProps, Typo, type TypoProps, type TypoVariant, type TypoWeight, index as assets };

package/dist/index.d.ts

@@ -262,21 +262,21 @@ type CounterProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
 };
 declare function Counter({ value, onChange, min, max, step, className, ...props }: CounterProps): react_jsx_runtime.JSX.Element;
 
-interface ChatButtonProps {
-    /** Callback when chat button is clicked */
+interface AgentButtonProps {
+    /** Callback when agent button is clicked */
     onOpenChat: () => void;
     /** Whether there's a new notification */
     hasNotification?: boolean;
     /** The notification message to display */
     notificationMessage?: string;
-    /** Logo source for the chat agent */
+    /** Logo source for the agent */
     logoSrc?: string;
     /** Alt text for the logo */
     logoAlt?: string;
     /** Custom animation colors */
     animationColors?: string[];
 }
-declare const ChatButton: ({ onOpenChat, hasNotification, notificationMessage, logoSrc, logoAlt, animationColors, }: ChatButtonProps) => react_jsx_runtime.JSX.Element;
+declare const AgentButton: ({ onOpenChat, hasNotification, notificationMessage, logoSrc, logoAlt, animationColors, }: AgentButtonProps) => react_jsx_runtime.JSX.Element;
 
 interface AnimatedBgCircleProps {
     colors: string[];
@@ -291,4 +291,4 @@ interface AnimatedBgRectangleProps {
 }
 declare const AnimatedBgRectangle: ({ colors, delay }: AnimatedBgRectangleProps) => react_jsx_runtime.JSX.Element;
 
-export { AnimatedBgCircle, AnimatedBgRectangle, AppBackground, type AppBackgroundProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BackgroundBlur, type BackgroundBlurProps, Button, type ButtonProps, Card, type CardProps, ChatButton, type ChatButtonProps, Chip, type ChipProps, Counter, type CounterProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, Modal, type ModalProps, Search, type SearchOption, type SearchProps, Skeleton, type SkeletonProps, Typo, type TypoProps, type TypoVariant, type TypoWeight, index as assets };
+export { AgentButton, type AgentButtonProps, AnimatedBgCircle, AnimatedBgRectangle, AppBackground, type AppBackgroundProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BackgroundBlur, type BackgroundBlurProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Counter, type CounterProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, Modal, type ModalProps, Search, type SearchOption, type SearchProps, Skeleton, type SkeletonProps, Typo, type TypoProps, type TypoVariant, type TypoWeight, index as assets };

package/dist/index.js

@@ -1163,12 +1163,12 @@ var AnimatedBgRectangle = ({ colors, delay = 0 }) => {
   );
 };
 var AnimatedBgRectangle_default = AnimatedBgRectangle;
-var ChatButton = ({
+var AgentButton = ({
   onOpenChat,
   hasNotification = false,
   notificationMessage = "",
   logoSrc,
-  logoAlt = "Chat Agent",
+  logoAlt = "Agent",
   animationColors = ["#7DADB9", "#3864F5", "#55468D", "#479A8D"]
 }) => {
   const [showText, setShowText] = useState(false);
@@ -1268,6 +1268,6 @@ var ChatButton = ({
     }
   );
 };
-var ChatButton_default = ChatButton;
+var AgentButton_default = AgentButton;
 
-export { AnimatedBgCircle_default as AnimatedBgCircle, AnimatedBgRectangle_default as AnimatedBgRectangle, AppBackground, Autocomplete, Avatar, AvatarGroup, BackgroundBlur, Button, Card, ChatButton_default as ChatButton, Chip, Counter, Icon, IconButton, Input, Modal, Search, Skeleton, Typo, assets_exports as assets };
+export { AgentButton_default as AgentButton, AnimatedBgCircle_default as AnimatedBgCircle, AnimatedBgRectangle_default as AnimatedBgRectangle, AppBackground, Autocomplete, Avatar, AvatarGroup, BackgroundBlur, Button, Card, Chip, Counter, Icon, IconButton, Input, Modal, Search, Skeleton, Typo, assets_exports as assets };

package/dist/styles.css

@@ -111,3 +111,65 @@
   -webkit-font-smoothing: antialiased;
   color: inherit;
 }
+
+/* Unified Scrollbar Styles */
+:root {
+  --scrollbar-width: 6px;
+  --scrollbar-thumb: #797980;
+  --scrollbar-thumb-hover: #9C9C9C;
+  --scrollbar-track: transparent;
+}
+
+.dark {
+  --scrollbar-thumb: #4b4d59;
+  --scrollbar-thumb-hover: #797980;
+}
+
+/* Default scrollbar - applies to most scrollable containers */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
+
+*::-webkit-scrollbar {
+  width: var(--scrollbar-width);
+  height: var(--scrollbar-width);
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+  border-radius: 1rem;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 1rem;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+  background-clip: padding-box;
+}
+
+/* Scrollbar width variants */
+.scrollbar-thin::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.scrollbar-medium::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+/* Hide scrollbar utility */
+.hide-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neoptocom/neopto-ui",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "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/{ChatButton.tsx → AgentButton.tsx}

@@ -3,14 +3,14 @@ import AnimatedBgCircle from "./AnimatedBgCircle";
 import AnimatedBgRectangle from "./AnimatedBgRectangle";
 import Typo from "../Typo";
 
-export interface ChatButtonProps {
-  /** Callback when chat button is clicked */
+export interface AgentButtonProps {
+  /** Callback when agent button is clicked */
   onOpenChat: () => void;
   /** Whether there's a new notification */
   hasNotification?: boolean;
   /** The notification message to display */
   notificationMessage?: string;
-  /** Logo source for the chat agent */
+  /** Logo source for the agent */
   logoSrc?: string;
   /** Alt text for the logo */
   logoAlt?: string;
@@ -18,14 +18,14 @@ export interface ChatButtonProps {
   animationColors?: string[];
 }
 
-const ChatButton = ({
+const AgentButton = ({
   onOpenChat,
   hasNotification = false,
   notificationMessage = "",
   logoSrc,
-  logoAlt = "Chat Agent",
+  logoAlt = "Agent",
   animationColors = ["#7DADB9", "#3864F5", "#55468D", "#479A8D"],
-}: ChatButtonProps) => {
+}: AgentButtonProps) => {
   const [showText, setShowText] = useState(false);
   const [delayedHasNotification, setDelayedHasNotification] = useState(false);
   const [isMounted, setIsMounted] = useState(false);
@@ -128,5 +128,5 @@ const ChatButton = ({
   );
 };
 
-export default ChatButton;
+export default AgentButton;
 

package/src/components/Chat/index.ts

@@ -1,5 +1,5 @@
-export { default as ChatButton } from "./ChatButton";
-export type { ChatButtonProps } from "./ChatButton";
+export { default as AgentButton } from "./AgentButton";
+export type { AgentButtonProps } from "./AgentButton";
 export { default as AnimatedBgCircle } from "./AnimatedBgCircle";
 export { default as AnimatedBgRectangle } from "./AnimatedBgRectangle";
 

package/src/index.ts

@@ -37,4 +37,4 @@ export type { IconButtonProps } from "./components/IconButton";
 export type { IconProps } from "./components/Icon";
 export type { ChipProps } from "./components/Chip";
 export type { CounterProps } from "./components/Counter";
-export type { ChatButtonProps } from "./components/Chat";
+export type { AgentButtonProps } from "./components/Chat";

package/src/stories/{ChatButton.stories.tsx → AgentButton.stories.tsx}

@@ -1,13 +1,13 @@
 import * as React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { ChatButton } from "../components/Chat";
+import { AgentButton } from "../components/Chat";
 import Typo from "../components/Typo";
 import agentLogoDark from "../assets/agent-neopto-dark.svg";
 import agentLogoLight from "../assets/agent-neopto.svg";
 
-const meta: Meta<typeof ChatButton> = {
-  title: "Components/ChatButton",
-  component: ChatButton,
+const meta: Meta<typeof AgentButton> = {
+  title: "Components/AgentButton",
+  component: AgentButton,
   args: {
     hasNotification: false,
     notificationMessage: "Hello! How can I help you today?",
@@ -28,7 +28,7 @@ const meta: Meta<typeof ChatButton> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof ChatButton>;
+type Story = StoryObj<typeof AgentButton>;
 
 export const Playground: Story = {
   render: (args) => {
@@ -36,7 +36,7 @@ export const Playground: Story = {
 
     return (
       <>
-        <ChatButton
+        <AgentButton
           {...args}
           onOpenChat={() => {
             setChatOpen(true);
@@ -79,7 +79,7 @@ export const AutoToggleNotification: Story = {
     }, []);
 
     return (
-      <ChatButton
+      <AgentButton
         {...args}
         hasNotification={hasNotification}
         notificationMessage="This notification toggles every 5 seconds!"