@neoptocom/neopto-ui 0.11.1 → 0.12.1

package/dist/index.cjs

@@ -151,7 +151,7 @@ function Card({
   children,
   className = "",
   style,
-  showDecorations = true,
+  showDecorations = false,
   ...props
 }) {
   const mergedStyle = {
@@ -346,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",
@@ -354,7 +353,6 @@ function getTypoClasses(weight = "normal", muted, className) {
     bold: "font-bold"
   };
   return [
-    base,
     weights[weight],
     muted ? "text-[var(--muted-fg)]" : "",
     className
@@ -991,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",
@@ -1293,6 +1291,30 @@ 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";
+function Separator({ className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full my-1.5 h-px bg-[var(--border)] ${className}` });
+}
 
 exports.AgentButton = AgentButton_default;
 exports.AnimatedBgCircle = AnimatedBgCircle_default;
@@ -1309,8 +1331,10 @@ exports.Counter = Counter;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.Input = Input;
+exports.MessageBubble = MessageBubble;
 exports.Modal = Modal;
 exports.Search = Search;
+exports.Separator = Separator;
 exports.Skeleton = Skeleton;
 exports.Typo = Typo;
 exports.assets = assets_exports;

package/dist/index.d.cts

@@ -45,7 +45,7 @@ type CardProps = React.HTMLAttributes<HTMLDivElement> & {
     children: React.ReactNode;
     /** Additional CSS classes */
     className?: string;
-    /** Show decorative elements (default: true) */
+    /** Show decorative elements (default: false) */
     showDecorations?: boolean;
 };
 declare function Card({ children, className, style, showDecorations, ...props }: CardProps): react_jsx_runtime.JSX.Element;
@@ -297,4 +297,21 @@ 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>>;
+
+type SeparatorProps = {
+    className?: string;
+};
+declare function Separator({ className }: SeparatorProps): 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, MessageBubble, type MessageBubbleProps, Modal, type ModalProps, Search, type SearchOption, type SearchProps, Separator, type SeparatorProps, Skeleton, type SkeletonProps, Typo, type TypoProps, type TypoVariant, type TypoWeight, index as assets };

package/dist/index.d.ts

@@ -45,7 +45,7 @@ type CardProps = React.HTMLAttributes<HTMLDivElement> & {
     children: React.ReactNode;
     /** Additional CSS classes */
     className?: string;
-    /** Show decorative elements (default: true) */
+    /** Show decorative elements (default: false) */
     showDecorations?: boolean;
 };
 declare function Card({ children, className, style, showDecorations, ...props }: CardProps): react_jsx_runtime.JSX.Element;
@@ -297,4 +297,21 @@ 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>>;
+
+type SeparatorProps = {
+    className?: string;
+};
+declare function Separator({ className }: SeparatorProps): 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, MessageBubble, type MessageBubbleProps, Modal, type ModalProps, Search, type SearchOption, type SearchProps, Separator, type SeparatorProps, Skeleton, type SkeletonProps, Typo, type TypoProps, type TypoVariant, type TypoWeight, index as assets };

package/dist/index.js

@@ -130,7 +130,7 @@ function Card({
   children,
   className = "",
   style,
-  showDecorations = true,
+  showDecorations = false,
   ...props
 }) {
   const mergedStyle = {
@@ -325,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",
@@ -333,7 +332,6 @@ function getTypoClasses(weight = "normal", muted, className) {
     bold: "font-bold"
   };
   return [
-    base,
     weights[weight],
     muted ? "text-[var(--muted-fg)]" : "",
     className
@@ -970,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",
@@ -1272,5 +1270,29 @@ 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";
+function Separator({ className = "" }) {
+  return /* @__PURE__ */ jsx("div", { className: `w-full my-1.5 h-px bg-[var(--border)] ${className}` });
+}
 
-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, Separator, 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.1",
+  "version": "0.12.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/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/Card.tsx

@@ -5,7 +5,7 @@ export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
   children: React.ReactNode;
   /** Additional CSS classes */
   className?: string;
-  /** Show decorative elements (default: true) */
+  /** Show decorative elements (default: false) */
   showDecorations?: boolean;
 };
 
@@ -13,7 +13,7 @@ export function Card({
   children,
   className = "",
   style,
-  showDecorations = true,
+  showDecorations = false,
   ...props
 }: CardProps) {
   // Merge user styles with card styles

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/Separator.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+
+export type SeparatorProps = {
+  className?: string;
+};
+
+export function Separator({ className = "" }: SeparatorProps) {
+  return (
+    <div className={`w-full my-1.5 h-px bg-[var(--border)] ${className}`} />
+  );
+}
+

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,8 @@ 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";
+export * from "./components/Separator";
 
 // Types
 export type { AppBackgroundProps } from "./components/AppBackground";
@@ -37,4 +39,6 @@ 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";
+export type { SeparatorProps } from "./components/Separator";

package/src/stories/Card.stories.tsx

@@ -0,0 +1,233 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Card } from "../components/Card";
+import Typo from "../components/Typo";
+import { Button } from "../components/Button";
+
+const meta: Meta<typeof Card> = {
+  title: "Components/Card",
+  component: Card,
+  parameters: {
+    layout: "padded",
+  },
+};
+export default meta;
+type Story = StoryObj<typeof Card>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="max-w-md">
+      <Card>
+        <Typo variant="headline-sm" bold="semibold">Default Card</Typo>
+        <Typo variant="body-md" className="mt-2">
+          This is a default card with glassmorphic styling.
+        </Typo>
+      </Card>
+    </div>
+  ),
+};
+
+export const WithDecorations: Story = {
+  render: () => (
+    <div className="max-w-md">
+      <Card showDecorations={true}>
+        <Typo variant="headline-sm" bold="semibold">Card With Decorations</Typo>
+        <Typo variant="body-md" className="mt-2">
+          This card has the decorative SVG gradient borders enabled.
+        </Typo>
+      </Card>
+    </div>
+  ),
+};
+
+export const CustomPadding: Story = {
+  render: () => (
+    <div className="max-w-md space-y-4">
+      <Card className="p-8">
+        <Typo variant="label-lg" bold="semibold">Large Padding (p-8)</Typo>
+        <Typo variant="body-sm" className="mt-1">More breathing room inside the card.</Typo>
+      </Card>
+      <Card className="p-4">
+        <Typo variant="label-lg" bold="semibold">Small Padding (p-4)</Typo>
+        <Typo variant="body-sm" className="mt-1">Compact card layout.</Typo>
+      </Card>
+      <Card className="p-0">
+        <div className="p-6 border-b border-[var(--border)]">
+          <Typo variant="label-lg" bold="semibold">No Default Padding (p-0)</Typo>
+        </div>
+        <div className="p-6">
+          <Typo variant="body-sm">Custom padding applied to inner elements.</Typo>
+        </div>
+      </Card>
+    </div>
+  ),
+};
+
+export const WithContent: Story = {
+  render: () => (
+    <div className="max-w-md">
+      <Card>
+        <Typo variant="title-lg" bold="semibold">Product Feature</Typo>
+        <Typo variant="body-md" className="mt-3">
+          This card showcases how rich content looks with the glassmorphic background.
+        </Typo>
+        <div className="mt-4 space-y-2">
+          <div className="flex items-start gap-2">
+            <span className="text-[var(--success)]">✓</span>
+            <Typo variant="body-sm">Fast performance</Typo>
+          </div>
+          <div className="flex items-start gap-2">
+            <span className="text-[var(--success)]">✓</span>
+            <Typo variant="body-sm">Easy to customize</Typo>
+          </div>
+          <div className="flex items-start gap-2">
+            <span className="text-[var(--success)]">✓</span>
+            <Typo variant="body-sm">Beautiful design</Typo>
+          </div>
+        </div>
+        <div className="mt-6">
+          <Button variant="primary">Learn More</Button>
+        </div>
+      </Card>
+    </div>
+  ),
+};
+
+export const MultipleCards: Story = {
+  render: () => (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      <Card>
+        <Typo variant="title-md" bold="semibold">Analytics</Typo>
+        <Typo variant="display-md" bold="bold" className="mt-4">1,234</Typo>
+        <Typo variant="body-sm" className="mt-1 text-[var(--muted-fg)]">Total Users</Typo>
+      </Card>
+      <Card>
+        <Typo variant="title-md" bold="semibold">Revenue</Typo>
+        <Typo variant="display-md" bold="bold" className="mt-4">$45.2K</Typo>
+        <Typo variant="body-sm" className="mt-1 text-[var(--muted-fg)]">This Month</Typo>
+      </Card>
+      <Card>
+        <Typo variant="title-md" bold="semibold">Growth</Typo>
+        <Typo variant="display-md" bold="bold" className="mt-4">+24%</Typo>
+        <Typo variant="body-sm" className="mt-1 text-[var(--muted-fg)]">vs Last Month</Typo>
+      </Card>
+    </div>
+  ),
+};
+
+export const LargeCard: Story = {
+  render: () => (
+    <div className="max-w-3xl">
+      <Card className="p-8">
+        <div className="flex items-start justify-between">
+          <div>
+            <Typo variant="headline-md" bold="semibold">Welcome to NeoPTO UI</Typo>
+            <Typo variant="body-lg" className="mt-2 text-[var(--muted-fg)]">
+              A modern React component library
+            </Typo>
+          </div>
+          <Button variant="primary">Get Started</Button>
+        </div>
+        <div className="mt-6 grid grid-cols-2 gap-6">
+          <div>
+            <Typo variant="label-lg" bold="semibold" className="text-[var(--color-brand)]">
+              Modern Design
+            </Typo>
+            <Typo variant="body-md" className="mt-2">
+              Built with the latest design trends and best practices for creating beautiful user interfaces.
+            </Typo>
+          </div>
+          <div>
+            <Typo variant="label-lg" bold="semibold" className="text-[var(--color-brand)]">
+              Developer Friendly
+            </Typo>
+            <Typo variant="body-md" className="mt-2">
+              Fully typed with TypeScript and documented with Storybook for the best developer experience.
+            </Typo>
+          </div>
+        </div>
+      </Card>
+    </div>
+  ),
+};
+
+export const CardList: Story = {
+  render: () => (
+    <div className="max-w-2xl space-y-3">
+      {[1, 2, 3, 4].map((item) => (
+        <Card key={item} className="p-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              <div className="w-12 h-12 rounded-full bg-[var(--muted)] flex items-center justify-center">
+                <Typo variant="title-md" bold="semibold">{item}</Typo>
+              </div>
+              <div>
+                <Typo variant="title-sm" bold="semibold">List Item {item}</Typo>
+                <Typo variant="body-sm" className="text-[var(--muted-fg)]">
+                  Description for item {item}
+                </Typo>
+              </div>
+            </div>
+            <Button variant="ghost" size="sm">View</Button>
+          </div>
+        </Card>
+      ))}
+    </div>
+  ),
+};
+
+export const NestedContent: Story = {
+  render: () => (
+    <div className="max-w-2xl">
+      <Card>
+        <Typo variant="headline-sm" bold="semibold">Project Dashboard</Typo>
+        <div className="mt-4 space-y-3">
+          <Card className="p-4 bg-[var(--muted)]">
+            <Typo variant="title-sm" bold="medium">In Progress</Typo>
+            <Typo variant="body-sm" className="mt-1 text-[var(--muted-fg)]">3 tasks remaining</Typo>
+          </Card>
+          <Card className="p-4 bg-[var(--muted)]">
+            <Typo variant="title-sm" bold="medium">Completed</Typo>
+            <Typo variant="body-sm" className="mt-1 text-[var(--muted-fg)]">15 tasks done</Typo>
+          </Card>
+        </div>
+      </Card>
+    </div>
+  ),
+};
+
+export const FormCard: Story = {
+  render: () => (
+    <div className="max-w-md">
+      <Card>
+        <Typo variant="headline-sm" bold="semibold">Sign In</Typo>
+        <Typo variant="body-sm" className="mt-1 text-[var(--muted-fg)]">
+          Enter your credentials to continue
+        </Typo>
+        <form className="mt-6 space-y-4">
+          <div>
+            <label className="block mb-2">
+              <Typo variant="label-md" bold="medium">Email</Typo>
+            </label>
+            <input
+              type="email"
+              placeholder="you@example.com"
+              className="w-full px-4 py-3 rounded-2xl bg-[var(--muted)] border-none outline-none focus:ring-2 focus:ring-[var(--color-brand)]"
+            />
+          </div>
+          <div>
+            <label className="block mb-2">
+              <Typo variant="label-md" bold="medium">Password</Typo>
+            </label>
+            <input
+              type="password"
+              placeholder="••••••••"
+              className="w-full px-4 py-3 rounded-2xl bg-[var(--muted)] border-none outline-none focus:ring-2 focus:ring-[var(--color-brand)]"
+            />
+          </div>
+          <Button variant="primary" className="w-full">Sign In</Button>
+        </form>
+      </Card>
+    </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/stories/Separator.stories.tsx

@@ -0,0 +1,197 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Separator } from "../components/Separator";
+import Typo from "../components/Typo";
+import { Card } from "../components/Card";
+
+const meta: Meta<typeof Separator> = {
+  title: "Components/Separator",
+  component: Separator,
+};
+export default meta;
+type Story = StoryObj<typeof Separator>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="max-w-md">
+      <Typo variant="body-md">Content above separator</Typo>
+      <Separator />
+      <Typo variant="body-md">Content below separator</Typo>
+    </div>
+  ),
+};
+
+export const InCard: Story = {
+  render: () => (
+    <div className="max-w-md">
+      <Card>
+        <Typo variant="title-md" bold="semibold">Card Title</Typo>
+        <Typo variant="body-sm" className="mt-2 text-[var(--muted-fg)]">
+          Some description text goes here
+        </Typo>
+        <Separator />
+        <Typo variant="body-md">
+          Additional content after the separator
+        </Typo>
+      </Card>
+    </div>
+  ),
+};
+
+export const CustomSpacing: Story = {
+  render: () => (
+    <div className="max-w-md space-y-8">
+      <div>
+        <Typo variant="label-lg" bold="semibold">No Margin</Typo>
+        <Separator className="my-0" />
+        <Typo variant="body-sm">Text immediately after</Typo>
+      </div>
+      
+      <div>
+        <Typo variant="label-lg" bold="semibold">Large Margin (my-4)</Typo>
+        <Separator className="my-4" />
+        <Typo variant="body-sm">More space around separator</Typo>
+      </div>
+      
+      <div>
+        <Typo variant="label-lg" bold="semibold">Extra Large Margin (my-8)</Typo>
+        <Separator className="my-8" />
+        <Typo variant="body-sm">Even more space</Typo>
+      </div>
+    </div>
+  ),
+};
+
+export const DifferentColors: Story = {
+  render: () => (
+    <div className="max-w-md space-y-6">
+      <div>
+        <Typo variant="label-lg" bold="semibold">Default Border Color</Typo>
+        <Separator />
+      </div>
+      
+      <div>
+        <Typo variant="label-lg" bold="semibold">Brand Color</Typo>
+        <Separator className="bg-[var(--color-brand)]" />
+      </div>
+      
+      <div>
+        <Typo variant="label-lg" bold="semibold">Success Color</Typo>
+        <Separator className="bg-[var(--success)]" />
+      </div>
+      
+      <div>
+        <Typo variant="label-lg" bold="semibold">Muted Foreground</Typo>
+        <Separator className="bg-[var(--muted-fg)]" />
+      </div>
+    </div>
+  ),
+};
+
+export const DifferentThickness: Story = {
+  render: () => (
+    <div className="max-w-md space-y-6">
+      <div>
+        <Typo variant="label-lg" bold="semibold">Default (1px)</Typo>
+        <Separator />
+      </div>
+      
+      <div>
+        <Typo variant="label-lg" bold="semibold">2px Thick</Typo>
+        <Separator className="h-0.5" />
+      </div>
+      
+      <div>
+        <Typo variant="label-lg" bold="semibold">4px Thick</Typo>
+        <Separator className="h-1" />
+      </div>
+      
+      <div>
+        <Typo variant="label-lg" bold="semibold">8px Thick</Typo>
+        <Separator className="h-2" />
+      </div>
+    </div>
+  ),
+};
+
+export const InList: Story = {
+  render: () => (
+    <div className="max-w-md">
+      <Card>
+        <Typo variant="title-md" bold="semibold">Menu Items</Typo>
+        <Separator className="my-3" />
+        
+        <div className="space-y-3">
+          <Typo variant="body-md">Home</Typo>
+          <Separator />
+          <Typo variant="body-md">About</Typo>
+          <Separator />
+          <Typo variant="body-md">Services</Typo>
+          <Separator />
+          <Typo variant="body-md">Contact</Typo>
+        </div>
+      </Card>
+    </div>
+  ),
+};
+
+export const VerticalSections: Story = {
+  render: () => (
+    <div className="max-w-2xl">
+      <Card>
+        <Typo variant="headline-sm" bold="semibold">Article Title</Typo>
+        <Typo variant="body-sm" className="mt-1 text-[var(--muted-fg)]">
+          Published on October 28, 2025
+        </Typo>
+        
+        <Separator className="my-6" />
+        
+        <Typo variant="body-md">
+          This is the introduction paragraph of the article. It provides context and sets up what the reader can expect.
+        </Typo>
+        
+        <Separator className="my-6" />
+        
+        <Typo variant="title-md" bold="semibold">Section 1</Typo>
+        <Typo variant="body-md" className="mt-2">
+          Content for the first section goes here with relevant information.
+        </Typo>
+        
+        <Separator className="my-6" />
+        
+        <Typo variant="title-md" bold="semibold">Section 2</Typo>
+        <Typo variant="body-md" className="mt-2">
+          Content for the second section with more details.
+        </Typo>
+      </Card>
+    </div>
+  ),
+};
+
+export const WithWidth: Story = {
+  render: () => (
+    <div className="max-w-md space-y-6">
+      <div>
+        <Typo variant="label-lg" bold="semibold">Full Width (default)</Typo>
+        <Separator />
+      </div>
+      
+      <div>
+        <Typo variant="label-lg" bold="semibold">50% Width</Typo>
+        <Separator className="w-1/2" />
+      </div>
+      
+      <div>
+        <Typo variant="label-lg" bold="semibold">25% Width</Typo>
+        <Separator className="w-1/4" />
+      </div>
+      
+      <div>
+        <Typo variant="label-lg" bold="semibold">Centered 50%</Typo>
+        <div className="flex justify-center">
+          <Separator className="w-1/2" />
+        </div>
+      </div>
+    </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;