@neoptocom/neopto-ui 0.12.0 → 0.12.1

package/dist/index.cjs

@@ -151,7 +151,7 @@ function Card({
   children,
   className = "",
   style,
-  showDecorations = true,
+  showDecorations = false,
   ...props
 }) {
   const mergedStyle = {
@@ -1312,6 +1312,9 @@ var MessageBubble = React2__namespace.forwardRef(
   }
 );
 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;
@@ -1331,6 +1334,7 @@ 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;
@@ -309,4 +309,9 @@ type MessageBubbleProps = {
 };
 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 };
+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;
@@ -309,4 +309,9 @@ type MessageBubbleProps = {
 };
 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 };
+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 = {
@@ -1291,5 +1291,8 @@ var MessageBubble = React2.forwardRef(
   }
 );
 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, MessageBubble, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neoptocom/neopto-ui",
-  "version": "0.12.0",
+  "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/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/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/index.ts

@@ -20,6 +20,7 @@ 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";
@@ -39,4 +40,5 @@ 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 { MessageBubbleProps } from "./components/MessageBubble";
+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/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>
+  ),
+};
+