@neoptocom/neopto-ui 0.11.0 → 0.12.0

package/dist/index.cjs

@@ -230,20 +230,23 @@ function Card({
   );
 }
 var Input = React2__namespace.forwardRef(
-  ({ className, disabled, ...props }, ref) => {
+  ({ className, disabled, variant = "default", ...props }, ref) => {
+    const isBorderless = variant === "borderless";
     return /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
         ref,
         disabled,
         className: [
-          "w-full h-12 px-4 rounded-full border bg-transparent outline-none transition-colors",
+          "w-full h-12 px-4 rounded-full bg-transparent outline-none transition-colors",
           "text-sm placeholder:text-[var(--muted-fg)]",
-          disabled ? "border-[#3F424F] text-[#3F424F] cursor-not-allowed" : [
+          !isBorderless && "border",
+          disabled ? "text-[#3F424F] cursor-not-allowed" + (isBorderless ? "" : " border-[#3F424F]") : [
             "text-[var(--muted-fg)]",
-            "border-[var(--muted-fg)]",
-            "hover:border-[var(--border)]",
-            "focus:border-[var(--color-brand)] focus:text-[var(--fg)]"
+            isBorderless ? "" : "border-[var(--muted-fg)]",
+            isBorderless ? "" : "hover:border-[var(--border)]",
+            "focus:text-[var(--fg)]",
+            isBorderless ? "" : "focus:border-[var(--color-brand)]"
           ].join(" "),
           className
         ].join(" "),
@@ -343,7 +346,6 @@ var typoStyles = {
   "button": { fontSize: "16px", lineHeight: "24px", letterSpacing: "0" }
 };
 function getTypoClasses(weight = "normal", muted, className) {
-  const base = "text-current";
   const weights = {
     normal: "font-normal",
     medium: "font-medium",
@@ -351,7 +353,6 @@ function getTypoClasses(weight = "normal", muted, className) {
     bold: "font-bold"
   };
   return [
-    base,
     weights[weight],
     muted ? "text-[var(--muted-fg)]" : "",
     className
@@ -988,7 +989,7 @@ function Search({
   );
 }
 function getButtonClasses(variant = "primary", size = "md", fullWidth, className) {
-  const base = "cursor-pointer inline-flex items-center justify-center gap-2 rounded-[var(--radius-2xl)] 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";
+  const base = "cursor-pointer inline-flex items-center justify-center gap-2 rounded-[1.875rem] 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";
   const variants = {
     primary: "bg-cyan-500 text-white hover:bg-cyan-400 active:bg-cyan-600 disabled:bg-neutral-400",
     secondary: "border border-cyan-500 text-cyan-500 bg-transparent hover:bg-cyan-50 active:bg-cyan-100 disabled:border-neutral-400 disabled:text-neutral-400",
@@ -1290,6 +1291,27 @@ var AgentButton = ({
   );
 };
 var AgentButton_default = AgentButton;
+var MessageBubble = React2__namespace.forwardRef(
+  ({ direction, color, children, className, ...props }, ref) => {
+    const borderRadiusClass = direction === "left" ? "[border-radius:16px_16px_16px_2px]" : direction === "right" ? "[border-radius:16px_16px_2px_16px]" : "rounded-2xl";
+    const backgroundColor = color || "var(--muted)";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: [
+          "px-4 py-2 inline-block",
+          borderRadiusClass,
+          className
+        ].filter(Boolean).join(" "),
+        style: { backgroundColor },
+        ...props,
+        children
+      }
+    );
+  }
+);
+MessageBubble.displayName = "MessageBubble";
 
 exports.AgentButton = AgentButton_default;
 exports.AnimatedBgCircle = AnimatedBgCircle_default;
@@ -1306,6 +1328,7 @@ exports.Counter = Counter;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.Input = Input;
+exports.MessageBubble = MessageBubble;
 exports.Modal = Modal;
 exports.Search = Search;
 exports.Skeleton = Skeleton;

package/dist/index.d.cts

@@ -50,8 +50,14 @@ type CardProps = React.HTMLAttributes<HTMLDivElement> & {
 };
 declare function Card({ children, className, style, showDecorations, ...props }: CardProps): react_jsx_runtime.JSX.Element;
 
-type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
-declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
+    /** Input visual variant */
+    variant?: "default" | "borderless";
+};
+declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
+    /** Input visual variant */
+    variant?: "default" | "borderless";
+} & React.RefAttributes<HTMLInputElement>>;
 
 type ModalProps = {
     /** Whether the modal is open */
@@ -291,4 +297,16 @@ interface AnimatedBgRectangleProps {
 }
 declare const AnimatedBgRectangle: ({ colors, delay }: AnimatedBgRectangleProps) => react_jsx_runtime.JSX.Element;
 
-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 };
+type MessageBubbleProps = {
+    /** Direction of the message bubble, affects border radius */
+    direction?: "left" | "right";
+    /** Custom background color (CSS color value) */
+    color?: string;
+    /** Content to display inside the bubble */
+    children: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+};
+declare const MessageBubble: React.ForwardRefExoticComponent<MessageBubbleProps & React.RefAttributes<HTMLDivElement>>;
+
+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, MessageBubble, type MessageBubbleProps, 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

@@ -50,8 +50,14 @@ type CardProps = React.HTMLAttributes<HTMLDivElement> & {
 };
 declare function Card({ children, className, style, showDecorations, ...props }: CardProps): react_jsx_runtime.JSX.Element;
 
-type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
-declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
+    /** Input visual variant */
+    variant?: "default" | "borderless";
+};
+declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
+    /** Input visual variant */
+    variant?: "default" | "borderless";
+} & React.RefAttributes<HTMLInputElement>>;
 
 type ModalProps = {
     /** Whether the modal is open */
@@ -291,4 +297,16 @@ interface AnimatedBgRectangleProps {
 }
 declare const AnimatedBgRectangle: ({ colors, delay }: AnimatedBgRectangleProps) => react_jsx_runtime.JSX.Element;
 
-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 };
+type MessageBubbleProps = {
+    /** Direction of the message bubble, affects border radius */
+    direction?: "left" | "right";
+    /** Custom background color (CSS color value) */
+    color?: string;
+    /** Content to display inside the bubble */
+    children: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+};
+declare const MessageBubble: React.ForwardRefExoticComponent<MessageBubbleProps & React.RefAttributes<HTMLDivElement>>;
+
+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, MessageBubble, type MessageBubbleProps, 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

@@ -209,20 +209,23 @@ function Card({
   );
 }
 var Input = React2.forwardRef(
-  ({ className, disabled, ...props }, ref) => {
+  ({ className, disabled, variant = "default", ...props }, ref) => {
+    const isBorderless = variant === "borderless";
     return /* @__PURE__ */ jsx(
       "input",
       {
         ref,
         disabled,
         className: [
-          "w-full h-12 px-4 rounded-full border bg-transparent outline-none transition-colors",
+          "w-full h-12 px-4 rounded-full bg-transparent outline-none transition-colors",
           "text-sm placeholder:text-[var(--muted-fg)]",
-          disabled ? "border-[#3F424F] text-[#3F424F] cursor-not-allowed" : [
+          !isBorderless && "border",
+          disabled ? "text-[#3F424F] cursor-not-allowed" + (isBorderless ? "" : " border-[#3F424F]") : [
             "text-[var(--muted-fg)]",
-            "border-[var(--muted-fg)]",
-            "hover:border-[var(--border)]",
-            "focus:border-[var(--color-brand)] focus:text-[var(--fg)]"
+            isBorderless ? "" : "border-[var(--muted-fg)]",
+            isBorderless ? "" : "hover:border-[var(--border)]",
+            "focus:text-[var(--fg)]",
+            isBorderless ? "" : "focus:border-[var(--color-brand)]"
           ].join(" "),
           className
         ].join(" "),
@@ -322,7 +325,6 @@ var typoStyles = {
   "button": { fontSize: "16px", lineHeight: "24px", letterSpacing: "0" }
 };
 function getTypoClasses(weight = "normal", muted, className) {
-  const base = "text-current";
   const weights = {
     normal: "font-normal",
     medium: "font-medium",
@@ -330,7 +332,6 @@ function getTypoClasses(weight = "normal", muted, className) {
     bold: "font-bold"
   };
   return [
-    base,
     weights[weight],
     muted ? "text-[var(--muted-fg)]" : "",
     className
@@ -967,7 +968,7 @@ function Search({
   );
 }
 function getButtonClasses(variant = "primary", size = "md", fullWidth, className) {
-  const base = "cursor-pointer inline-flex items-center justify-center gap-2 rounded-[var(--radius-2xl)] 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";
+  const base = "cursor-pointer inline-flex items-center justify-center gap-2 rounded-[1.875rem] 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";
   const variants = {
     primary: "bg-cyan-500 text-white hover:bg-cyan-400 active:bg-cyan-600 disabled:bg-neutral-400",
     secondary: "border border-cyan-500 text-cyan-500 bg-transparent hover:bg-cyan-50 active:bg-cyan-100 disabled:border-neutral-400 disabled:text-neutral-400",
@@ -1269,5 +1270,26 @@ var AgentButton = ({
   );
 };
 var AgentButton_default = AgentButton;
+var MessageBubble = React2.forwardRef(
+  ({ direction, color, children, className, ...props }, ref) => {
+    const borderRadiusClass = direction === "left" ? "[border-radius:16px_16px_16px_2px]" : direction === "right" ? "[border-radius:16px_16px_2px_16px]" : "rounded-2xl";
+    const backgroundColor = color || "var(--muted)";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: [
+          "px-4 py-2 inline-block",
+          borderRadiusClass,
+          className
+        ].filter(Boolean).join(" "),
+        style: { backgroundColor },
+        ...props,
+        children
+      }
+    );
+  }
+);
+MessageBubble.displayName = "MessageBubble";
 
-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 };
+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, MessageBubble, Modal, Search, Skeleton, Typo, assets_exports as assets };

package/dist/styles.css

@@ -25,7 +25,6 @@
   --radius-md: 0.375rem;
   --radius-lg: 0.5rem;
   --radius-xl: 0.75rem;
-  --radius-2xl: 1.875rem;
   --bg: #F3F4F6;
   --surface: #FFFFFF;
   --fg: #242832;
@@ -47,7 +46,6 @@
   --radius-md: 0.375rem;
   --radius-lg: 0.5rem;
   --radius-xl: 0.75rem;
-  --radius-2xl: 1.875rem;
   --bg: #F3F4F6;
   --surface: #FFFFFF;
   --fg: #242832;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neoptocom/neopto-ui",
-  "version": "0.11.0",
+  "version": "0.12.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/Button.tsx

@@ -18,7 +18,7 @@ function getButtonClasses(
     className?: string
 ): string {
     const base = 
-        "cursor-pointer inline-flex items-center justify-center gap-2 rounded-[var(--radius-2xl)] transition-colors " +
+        "cursor-pointer inline-flex items-center justify-center gap-2 rounded-[1.875rem] 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";
 

package/src/components/Input.tsx

@@ -1,23 +1,30 @@
 import * as React from "react";
 
-export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
+export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
+  /** Input visual variant */
+  variant?: "default" | "borderless";
+};
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, disabled, ...props }, ref) => {
+  ({ className, disabled, variant = "default", ...props }, ref) => {
+    const isBorderless = variant === "borderless";
+    
     return (
       <input
         ref={ref}
         disabled={disabled}
         className={[
-          "w-full h-12 px-4 rounded-full border bg-transparent outline-none transition-colors",
+          "w-full h-12 px-4 rounded-full bg-transparent outline-none transition-colors",
           "text-sm placeholder:text-[var(--muted-fg)]",
+          !isBorderless && "border",
           disabled
-            ? "border-[#3F424F] text-[#3F424F] cursor-not-allowed"
+            ? "text-[#3F424F] cursor-not-allowed" + (isBorderless ? "" : " border-[#3F424F]")
             : [
                 "text-[var(--muted-fg)]",
-                "border-[var(--muted-fg)]",
-                "hover:border-[var(--border)]",
-                "focus:border-[var(--color-brand)] focus:text-[var(--fg)]"
+                isBorderless ? "" : "border-[var(--muted-fg)]",
+                isBorderless ? "" : "hover:border-[var(--border)]",
+                "focus:text-[var(--fg)]",
+                isBorderless ? "" : "focus:border-[var(--color-brand)]"
               ].join(" "),
           className
         ].join(" ")}

package/src/components/MessageBubble.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+
+export type MessageBubbleProps = {
+  /** Direction of the message bubble, affects border radius */
+  direction?: "left" | "right";
+  /** Custom background color (CSS color value) */
+  color?: string;
+  /** Content to display inside the bubble */
+  children: React.ReactNode;
+  /** Additional CSS classes */
+  className?: string;
+};
+
+export const MessageBubble = React.forwardRef<HTMLDivElement, MessageBubbleProps>(
+  ({ direction, color, children, className, ...props }, ref) => {
+    const borderRadiusClass = 
+      direction === "left" 
+        ? "[border-radius:16px_16px_16px_2px]" 
+        : direction === "right"
+        ? "[border-radius:16px_16px_2px_16px]"
+        : "rounded-2xl";
+
+    const backgroundColor = color || "var(--muted)";
+
+    return (
+      <div
+        ref={ref}
+        className={[
+          "px-4 py-2 inline-block",
+          borderRadiusClass,
+          className
+        ].filter(Boolean).join(" ")}
+        style={{ backgroundColor }}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+MessageBubble.displayName = "MessageBubble";
+

package/src/components/Typo.tsx

@@ -41,8 +41,6 @@ function getTypoClasses(
   muted?: boolean,
   className?: string
 ): string {
-  const base = "text-current";
-
   const weights: Record<TypoWeight, string> = {
     normal: "font-normal",
     medium: "font-medium",
@@ -51,7 +49,6 @@ function getTypoClasses(
   };
 
   return [
-    base,
     weights[weight],
     muted ? "text-[var(--muted-fg)]" : "",
     className

package/src/index.ts

@@ -19,6 +19,7 @@ export { default as Icon } from "./components/Icon";
 export { default as Chip } from "./components/Chip";
 export { default as Counter } from "./components/Counter";
 export * from "./components/Chat";
+export * from "./components/MessageBubble";
 
 // Types
 export type { AppBackgroundProps } from "./components/AppBackground";
@@ -37,4 +38,5 @@ 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 { AgentButtonProps } from "./components/Chat";
+export type { AgentButtonProps } from "./components/Chat";
+export type { MessageBubbleProps } from "./components/MessageBubble";

package/src/stories/Input.stories.tsx

@@ -36,3 +36,14 @@ export const Types: Story = {
     </div>
   )
 };
+
+export const Borderless: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-96">
+      <Input variant="borderless" placeholder="Borderless input" type="text" />
+      <Input variant="borderless" placeholder="Borderless email" type="email" />
+      <Input variant="borderless" placeholder="Borderless search..." />
+      <Input variant="borderless" placeholder="Disabled borderless" disabled />
+    </div>
+  )
+};

package/src/stories/MessageBubble.stories.tsx

@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MessageBubble } from "../components/MessageBubble";
+import Typo from "../components/Typo";
+
+const meta: Meta<typeof MessageBubble> = {
+  title: "Components/MessageBubble",
+  component: MessageBubble
+};
+export default meta;
+type Story = StoryObj<typeof MessageBubble>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 max-w-md p-4">
+      <MessageBubble>
+        <Typo variant="title-sm">Hello! This is a default message bubble with no direction.</Typo>
+      </MessageBubble>
+    </div>
+  )
+};
+
+export const Directions: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 max-w-md p-4">
+      <div className="flex justify-start">
+        <MessageBubble direction="left">
+          <Typo variant="title-sm">This is a left-aligned message bubble.</Typo>
+        </MessageBubble>
+      </div>
+      <div className="flex justify-end">
+        <MessageBubble direction="right">
+          <Typo variant="title-sm">This is a right-aligned message bubble.</Typo>
+        </MessageBubble>
+      </div>
+      <div className="flex justify-start">
+        <MessageBubble direction="left">
+          <Typo variant="title-sm">Messages from the left typically have the small radius on bottom-left corner.</Typo>
+        </MessageBubble>
+      </div>
+      <div className="flex justify-end">
+        <MessageBubble direction="right">
+          <Typo variant="title-sm">Messages from the right have the small radius on bottom-right corner.</Typo>
+        </MessageBubble>
+      </div>
+    </div>
+  )
+};
+
+export const CustomColors: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 max-w-md p-4">
+      <div className="flex justify-start">
+        <MessageBubble direction="left" color="#E3F2FD">
+          <Typo variant="title-sm" className="text-[#1565C0]">Light blue message</Typo>
+        </MessageBubble>
+      </div>
+      <div className="flex justify-end">
+        <MessageBubble direction="right" color="#1976D2">
+          <Typo variant="title-sm" className="text-white">Blue message with white text</Typo>
+        </MessageBubble>
+      </div>
+      <div className="flex justify-start">
+        <MessageBubble direction="left" color="#F3E5F5">
+          <Typo variant="title-sm" className="text-[#7B1FA2]">Purple tinted message</Typo>
+        </MessageBubble>
+      </div>
+      <div className="flex justify-end">
+        <MessageBubble direction="right" color="#E8F5E9">
+          <Typo variant="title-sm" className="text-[#2E7D32]">Green message</Typo>
+        </MessageBubble>
+      </div>
+    </div>
+  )
+};
+
+export const ChatConversation: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3 max-w-2xl p-4">
+      <div className="flex justify-start">
+        <MessageBubble direction="left" color="#F5F5F5">
+          <Typo variant="title-sm" className="text-[#333]">Hey! How can I help you today?</Typo>
+        </MessageBubble>
+      </div>
+      <div className="flex justify-end">
+        <MessageBubble direction="right" color="var(--color-brand)">
+          <Typo variant="title-sm" className="text-white">I need help with my account settings.</Typo>
+        </MessageBubble>
+      </div>
+      <div className="flex justify-start">
+        <MessageBubble direction="left" color="#F5F5F5">
+          <Typo variant="title-sm" className="text-[#333]">
+            Sure! I can help you with that. What specific setting would you like to change?
+          </Typo>
+        </MessageBubble>
+      </div>
+      <div className="flex justify-end">
+        <MessageBubble direction="right" color="var(--color-brand)">
+          <Typo variant="title-sm" className="text-white">I want to update my email address.</Typo>
+        </MessageBubble>
+      </div>
+      <div className="flex justify-start">
+        <MessageBubble direction="left" color="#F5F5F5">
+          <Typo variant="title-sm" className="text-[#333]">
+            No problem! You can update your email in Account Settings → Profile → Email.
+          </Typo>
+        </MessageBubble>
+      </div>
+    </div>
+  )
+};
+
+export const LongMessages: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 max-w-2xl p-4">
+      <div className="flex justify-start">
+        <MessageBubble direction="left">
+          <Typo variant="title-sm" className="text-[#333]">
+            This is a longer message to demonstrate how the bubble handles multiple lines of text. 
+            The border radius should remain consistent regardless of the content length. 
+            The bubble will grow to accommodate the text while maintaining its shape.
+          </Typo>
+        </MessageBubble>
+      </div>
+      <div className="flex justify-end">
+        <MessageBubble direction="right" color="var(--color-brand)">
+          <Typo variant="title-sm" className="text-white">
+            Great! The bubble handles long text really well. It maintains the proper border 
+            radius and looks clean even with multiple lines of content.
+          </Typo>
+        </MessageBubble>
+      </div>
+    </div>
+  )
+};
+

package/src/stories/Modal.stories.tsx

@@ -74,11 +74,11 @@ export const CustomStyling: Story = {
         This modal has custom styling with a larger max-width and more padding.
       </Typo>
       <div className="mt-6 grid grid-cols-2 gap-4">
-        <div className="p-4 bg-[var(--muted)] rounded-2xl">
+        <div className="p-4 bg-[var(--muted)] [border-radius:1.875rem]">
           <Typo variant="label-lg" bold="semibold">Feature 1</Typo>
           <Typo variant="body-sm" className="mt-2">Description here</Typo>
         </div>
-        <div className="p-4 bg-[var(--muted)] rounded-2xl">
+        <div className="p-4 bg-[var(--muted)] [border-radius:1.875rem]">
           <Typo variant="label-lg" bold="semibold">Feature 2</Typo>
           <Typo variant="body-sm" className="mt-2">Description here</Typo>
         </div>

package/src/styles/library.css

@@ -1,4 +1,8 @@
 /* Build-only CSS for publishing the lib (no Preflight/reset) */
+
+/* Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap');
+
 @import "tailwindcss/utilities";
 @import "./tokens.css";
 

package/src/styles/tailwind.css

@@ -1,3 +1,6 @@
+/* Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap');
+
 /* Tailwind v4+ core */
 @import "tailwindcss";
 

package/src/styles/tokens.css

@@ -9,7 +9,6 @@
   --radius-md: 0.375rem;
   --radius-lg: 0.5rem;
   --radius-xl: 0.75rem;
-  --radius-2xl: 1.875rem;
   --bg: #F3F4F6;
   --surface: #FFFFFF;
   --fg: #242832;
@@ -31,7 +30,6 @@
   --radius-md: 0.375rem;
   --radius-lg: 0.5rem;
   --radius-xl: 0.75rem;
-  --radius-2xl: 1.875rem;
   --bg: #F3F4F6;
   --surface: #FFFFFF;
   --fg: #242832;