@neoptocom/neopto-ui 1.4.2 → 1.4.4

package/CONSUMER_SETUP.md

@@ -133,4 +133,4 @@ document.documentElement.classList.toggle("dark");
 
 ## 📚 Full Documentation
 
-Visit the [Storybook documentation](https://neoptocom.github.io/neopto-ui/storybook-static) for interactive examples and API documentation.
+Visit the [Storybook documentation](https://neoptocom.github.io/neopto-ui) for interactive examples and API documentation.

package/README.md

@@ -1,4 +1,4 @@
-# Neo UI Demo
+# NeoPTO UI
 
 A modern React component library built with Tailwind CSS v4 and TypeScript. Features dark mode, design tokens, and comprehensive Storybook documentation.
 
@@ -195,7 +195,7 @@ The library uses a comprehensive design token system:
 
 ## 📚 Documentation
 
-Visit our [Storybook documentation](https://neoptocom.github.io/neopto-ui/storybook-static) for:
+Visit our [Storybook documentation](https://neoptocom.github.io/neopto-ui/) for:
 
 - Interactive component playground
 - Design system guidelines

package/dist/index.cjs

@@ -1391,6 +1391,60 @@ MessageBubble.displayName = "MessageBubble";
 function Separator({ className = "" }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full my-1.5 h-px bg-[var(--border)] ${className}` });
 }
+var Breadcrumb = ({
+  items,
+  showHomeIcon = false,
+  className = ""
+}) => {
+  if (!items || items.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex items-center flex-wrap", children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    const isFirst = index === 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center", children: [
+      item.href && !isLast ? /* @__PURE__ */ jsxRuntime.jsxs(
+        "a",
+        {
+          href: item.href,
+          onClick: (e) => {
+            if (item.onClick) {
+              e.preventDefault();
+              item.onClick();
+            }
+          },
+          className: "group flex items-center gap-1 cursor-pointer text-[var(--muted-fg)]",
+          children: [
+            isFirst && showHomeIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "home", size: "sm" }),
+            item.icon && !showHomeIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: item.icon, size: "sm" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Typo, { variant: "label-md", bold: "semibold", className: "group-hover:underline", children: item.label })
+          ]
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsxs(
+        "span",
+        {
+          className: `group flex items-center gap-1 ${isLast ? "text-[var(--info)]" : "text-[var(--muted-fg)]"} ${item.onClick && !isLast ? "cursor-pointer" : ""}`,
+          onClick: item.onClick,
+          role: item.onClick && !isLast ? "button" : void 0,
+          tabIndex: item.onClick && !isLast ? 0 : void 0,
+          onKeyDown: item.onClick && !isLast ? (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              item.onClick?.();
+            }
+          } : void 0,
+          "aria-current": isLast ? "page" : void 0,
+          children: [
+            isFirst && showHomeIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "home", size: "sm" }),
+            item.icon && !showHomeIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: item.icon, size: "sm" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Typo, { variant: "label-md", bold: isLast ? "bold" : "semibold", className: item.onClick && !isLast ? "group-hover:underline" : "", children: item.label })
+          ]
+        }
+      ),
+      !isLast && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--muted-fg)]", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron_right", size: "md" }) })
+    ] }, index);
+  }) }) });
+};
 
 exports.AgentButton = AgentButton_default;
 exports.AnimatedBgCircle = AnimatedBgCircle_default;
@@ -1400,6 +1454,7 @@ exports.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;
 exports.AvatarGroup = AvatarGroup;
 exports.BackgroundBlur = BackgroundBlur;
+exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
 exports.Card = Card;
 exports.Chip = Chip;

package/dist/index.d.cts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
+import React__default from 'react';
 
 declare const bgLight: string;
 declare const bgDark: string;
@@ -333,4 +334,38 @@ type SeparatorProps = {
 };
 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, Textarea, type TextareaProps, Typo, type TypoProps, type TypoVariant, type TypoWeight, index as assets };
+interface BreadcrumbItem {
+    /** Label to display */
+    label: string;
+    /** Optional href for navigation */
+    href?: string;
+    /** Optional icon name (Material Symbols) */
+    icon?: string;
+    /** Optional click handler */
+    onClick?: () => void;
+}
+interface BreadcrumbProps {
+    /** Array of breadcrumb items */
+    items: BreadcrumbItem[];
+    /** Whether to show home icon on first item */
+    showHomeIcon?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Breadcrumb navigation component
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb
+ *   items={[
+ *     { label: "Home", href: "/" },
+ *     { label: "Products", href: "/products" },
+ *     { label: "Category" }
+ *   ]}
+ * />
+ * ```
+ */
+declare const Breadcrumb: React__default.FC<BreadcrumbProps>;
+
+export { AgentButton, type AgentButtonProps, AnimatedBgCircle, AnimatedBgRectangle, AppBackground, type AppBackgroundProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BackgroundBlur, type BackgroundBlurProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, 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, Textarea, type TextareaProps, Typo, type TypoProps, type TypoVariant, type TypoWeight, index as assets };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
+import React__default from 'react';
 
 declare const bgLight: string;
 declare const bgDark: string;
@@ -333,4 +334,38 @@ type SeparatorProps = {
 };
 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, Textarea, type TextareaProps, Typo, type TypoProps, type TypoVariant, type TypoWeight, index as assets };
+interface BreadcrumbItem {
+    /** Label to display */
+    label: string;
+    /** Optional href for navigation */
+    href?: string;
+    /** Optional icon name (Material Symbols) */
+    icon?: string;
+    /** Optional click handler */
+    onClick?: () => void;
+}
+interface BreadcrumbProps {
+    /** Array of breadcrumb items */
+    items: BreadcrumbItem[];
+    /** Whether to show home icon on first item */
+    showHomeIcon?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Breadcrumb navigation component
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb
+ *   items={[
+ *     { label: "Home", href: "/" },
+ *     { label: "Products", href: "/products" },
+ *     { label: "Category" }
+ *   ]}
+ * />
+ * ```
+ */
+declare const Breadcrumb: React__default.FC<BreadcrumbProps>;
+
+export { AgentButton, type AgentButtonProps, AnimatedBgCircle, AnimatedBgRectangle, AppBackground, type AppBackgroundProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BackgroundBlur, type BackgroundBlurProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, 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, Textarea, type TextareaProps, Typo, type TypoProps, type TypoVariant, type TypoWeight, index as assets };

package/dist/index.js

@@ -1370,5 +1370,59 @@ MessageBubble.displayName = "MessageBubble";
 function Separator({ className = "" }) {
   return /* @__PURE__ */ jsx("div", { className: `w-full my-1.5 h-px bg-[var(--border)] ${className}` });
 }
+var Breadcrumb = ({
+  items,
+  showHomeIcon = false,
+  className = ""
+}) => {
+  if (!items || items.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ jsx("ol", { className: "flex items-center flex-wrap", children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    const isFirst = index === 0;
+    return /* @__PURE__ */ jsxs("li", { className: "flex items-center", children: [
+      item.href && !isLast ? /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: item.href,
+          onClick: (e) => {
+            if (item.onClick) {
+              e.preventDefault();
+              item.onClick();
+            }
+          },
+          className: "group flex items-center gap-1 cursor-pointer text-[var(--muted-fg)]",
+          children: [
+            isFirst && showHomeIcon && /* @__PURE__ */ jsx(Icon, { name: "home", size: "sm" }),
+            item.icon && !showHomeIcon && /* @__PURE__ */ jsx(Icon, { name: item.icon, size: "sm" }),
+            /* @__PURE__ */ jsx(Typo, { variant: "label-md", bold: "semibold", className: "group-hover:underline", children: item.label })
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: `group flex items-center gap-1 ${isLast ? "text-[var(--info)]" : "text-[var(--muted-fg)]"} ${item.onClick && !isLast ? "cursor-pointer" : ""}`,
+          onClick: item.onClick,
+          role: item.onClick && !isLast ? "button" : void 0,
+          tabIndex: item.onClick && !isLast ? 0 : void 0,
+          onKeyDown: item.onClick && !isLast ? (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              item.onClick?.();
+            }
+          } : void 0,
+          "aria-current": isLast ? "page" : void 0,
+          children: [
+            isFirst && showHomeIcon && /* @__PURE__ */ jsx(Icon, { name: "home", size: "sm" }),
+            item.icon && !showHomeIcon && /* @__PURE__ */ jsx(Icon, { name: item.icon, size: "sm" }),
+            /* @__PURE__ */ jsx(Typo, { variant: "label-md", bold: isLast ? "bold" : "semibold", className: item.onClick && !isLast ? "group-hover:underline" : "", children: item.label })
+          ]
+        }
+      ),
+      !isLast && /* @__PURE__ */ jsx("span", { className: "text-[var(--muted-fg)]", children: /* @__PURE__ */ jsx(Icon, { name: "chevron_right", size: "md" }) })
+    ] }, index);
+  }) }) });
+};
 
-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, Textarea, Typo, assets_exports as assets };
+export { AgentButton_default as AgentButton, AnimatedBgCircle_default as AnimatedBgCircle, AnimatedBgRectangle_default as AnimatedBgRectangle, AppBackground, Autocomplete, Avatar, AvatarGroup, BackgroundBlur, Breadcrumb, Button, Card, Chip, Counter, Icon, IconButton, Input, MessageBubble, Modal, Search, Separator, Skeleton, Textarea, Typo, assets_exports as assets };

package/dist/styles.css

@@ -93,7 +93,7 @@
   font-style: normal;
   font-weight: 100 700;
   src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v272/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjzaqkNCeE.woff2) format('woff2');
-  font-display: swap;
+  font-display: block;
 }
 
 .material-symbols-rounded {

package/package.json

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

@@ -0,0 +1,110 @@
+import React from "react";
+import Icon from "./Icon";
+import Typo from "./Typo";
+
+export interface BreadcrumbItem {
+  /** Label to display */
+  label: string;
+  /** Optional href for navigation */
+  href?: string;
+  /** Optional icon name (Material Symbols) */
+  icon?: string;
+  /** Optional click handler */
+  onClick?: () => void;
+}
+
+export interface BreadcrumbProps {
+  /** Array of breadcrumb items */
+  items: BreadcrumbItem[];
+  /** Whether to show home icon on first item */
+  showHomeIcon?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+/**
+ * Breadcrumb navigation component
+ * 
+ * @example
+ * ```tsx
+ * <Breadcrumb 
+ *   items={[
+ *     { label: "Home", href: "/" },
+ *     { label: "Products", href: "/products" },
+ *     { label: "Category" }
+ *   ]}
+ * />
+ * ```
+ */
+export const Breadcrumb: React.FC<BreadcrumbProps> = ({
+  items,
+  showHomeIcon = false,
+  className = "",
+}) => {
+  if (!items || items.length === 0) {
+    return null;
+  }
+
+  return (
+    <nav aria-label="Breadcrumb" className={className}>
+      <ol className="flex items-center flex-wrap">
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1;
+          const isFirst = index === 0;
+
+          return (
+            <li key={index} className="flex items-center">
+              {/* Breadcrumb Item */}
+              {item.href && !isLast ? (
+                <a
+                  href={item.href}
+                  onClick={(e) => {
+                    if (item.onClick) {
+                      e.preventDefault();
+                      item.onClick();
+                    }
+                  }}
+                  className="group flex items-center gap-1 cursor-pointer text-[var(--muted-fg)]"
+                >
+                  {isFirst && showHomeIcon && <Icon name="home" size="sm" />}
+                  {item.icon && !showHomeIcon && <Icon name={item.icon} size="sm" />}
+                  <Typo variant="label-md" bold="semibold" className="group-hover:underline">{item.label}</Typo>
+                </a>
+              ) : (
+                <span
+                  className={`group flex items-center gap-1 ${isLast ? "text-[var(--info)]" : "text-[var(--muted-fg)]"} ${item.onClick && !isLast ? "cursor-pointer" : ""}`}
+                  onClick={item.onClick}
+                  role={item.onClick && !isLast ? "button" : undefined}
+                  tabIndex={item.onClick && !isLast ? 0 : undefined}
+                  onKeyDown={
+                    item.onClick && !isLast
+                      ? (e) => {
+                          if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            item.onClick?.();
+                          }
+                        }
+                      : undefined
+                  }
+                  aria-current={isLast ? "page" : undefined}
+                >
+                  {isFirst && showHomeIcon && <Icon name="home" size="sm" />}
+                  {item.icon && !showHomeIcon && <Icon name={item.icon} size="sm" />}
+                  <Typo variant="label-md" bold={isLast ? "bold" : "semibold"} className={item.onClick && !isLast ? "group-hover:underline" : ""}>{item.label}</Typo>
+                </span>
+              )}
+
+              {/* Separator */}
+              {!isLast && (
+                <span className="text-[var(--muted-fg)]">
+                  <Icon name="chevron_right" size="md" />
+                </span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};
+

package/src/index.ts

@@ -22,6 +22,7 @@ export { default as Counter } from "./components/Counter";
 export * from "./components/Chat";
 export * from "./components/MessageBubble";
 export * from "./components/Separator";
+export { Breadcrumb } from "./components/Breadcrumb";
 
 // Types
 export type { AppBackgroundProps } from "./components/AppBackground";
@@ -43,4 +44,5 @@ 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 { SeparatorProps } from "./components/Separator";
+export type { SeparatorProps } from "./components/Separator";
+export type { BreadcrumbProps, BreadcrumbItem } from "./components/Breadcrumb";

package/src/stories/Breadcrumb.stories.tsx

@@ -0,0 +1,270 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Breadcrumb } from "../components/Breadcrumb";
+
+const meta: Meta<typeof Breadcrumb> = {
+  title: "Components/Breadcrumb",
+  component: Breadcrumb,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    items: {
+      description: "Array of breadcrumb items to display",
+      control: { type: "object" },
+    },
+    showHomeIcon: {
+      description: "Show home icon on first item",
+      control: { type: "boolean" },
+    },
+    className: {
+      description: "Additional CSS classes",
+      control: { type: "text" },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Breadcrumb>;
+
+// Basic Examples
+export const Default: Story = {
+  args: {
+    items: [
+      { label: "Home", href: "/" },
+      { label: "Products", href: "/products" },
+      { label: "Electronics", href: "/products/electronics" },
+      { label: "Laptops" },
+    ],
+  },
+};
+
+export const WithHomeIcon: Story = {
+  args: {
+    items: [
+      { label: "Home", href: "/" },
+      { label: "Products", href: "/products" },
+      { label: "Electronics" },
+    ],
+    showHomeIcon: true,
+  },
+};
+
+export const TwoLevels: Story = {
+  args: {
+    items: [
+      { label: "Home", href: "/" },
+      { label: "Current Page" },
+    ],
+  },
+};
+
+export const SingleItem: Story = {
+  args: {
+    items: [{ label: "Home" }],
+  },
+};
+
+
+// With Icons
+export const WithIcons: Story = {
+  args: {
+    items: [
+      { label: "Home", href: "/", icon: "home" },
+      { label: "Settings", href: "/settings", icon: "settings" },
+      { label: "Profile", icon: "person" },
+    ],
+  },
+};
+
+export const MixedIcons: Story = {
+  args: {
+    items: [
+      { label: "Dashboard", href: "/", icon: "dashboard" },
+      { label: "Projects", href: "/projects", icon: "folder" },
+      { label: "Documents", href: "/documents", icon: "description" },
+      { label: "Report.pdf" },
+    ],
+  },
+};
+
+// With Click Handlers
+export const WithClickHandlers: Story = {
+  args: {
+    items: [
+      {
+        label: "Home",
+        onClick: () => alert("Navigating to Home"),
+      },
+      {
+        label: "Products",
+        onClick: () => alert("Navigating to Products"),
+      },
+      {
+        label: "Category",
+        onClick: () => alert("Navigating to Category"),
+      },
+      { label: "Item" },
+    ],
+  },
+};
+
+// Interactive Component Navigation (no URL changes)
+export const ComponentNavigation = () => {
+  const sections = [
+    { id: "account", label: "Account", icon: "person" },
+    { id: "security", label: "Security", icon: "lock" },
+    { id: "notifications", label: "Notifications", icon: "notifications" },
+    { id: "billing", label: "Billing", icon: "payment" },
+  ];
+
+  const [activeSection, setActiveSection] = useState("account");
+
+  const sectionContent: Record<string, { title: string; description: string }> = {
+    account: {
+      title: "Account Settings",
+      description: "Manage your account information, profile details, and preferences.",
+    },
+    security: {
+      title: "Security Settings",
+      description: "Configure password, two-factor authentication, and security preferences.",
+    },
+    notifications: {
+      title: "Notification Preferences",
+      description: "Control how and when you receive notifications from our platform.",
+    },
+    billing: {
+      title: "Billing & Subscription",
+      description: "View invoices, update payment methods, and manage your subscription.",
+    },
+  };
+
+  const breadcrumbItems = [
+    {
+      label: "Settings",
+      icon: "settings",
+      onClick: () => setActiveSection("account"),
+    },
+    ...sections
+      .slice(0, sections.findIndex((s) => s.id === activeSection) + 1)
+      .map((section, index, arr) => ({
+        label: section.label,
+        icon: section.icon,
+        onClick: index < arr.length - 1 ? () => setActiveSection(section.id) : undefined,
+      })),
+  ];
+
+  return (
+    <div className="w-full max-w-4xl p-6 space-y-6">
+      {/* Breadcrumb Navigation */}
+      <Breadcrumb items={breadcrumbItems} />
+
+      {/* Content Area */}
+      <div className="border rounded-lg p-6 space-y-4">
+        <h2 className="text-2xl font-semibold">{sectionContent[activeSection].title}</h2>
+        <p className="text-gray-600">{sectionContent[activeSection].description}</p>
+
+        {/* Navigation Buttons */}
+        <div className="flex gap-2 pt-4">
+          {sections.map((section) => (
+            <button
+              key={section.id}
+              onClick={() => setActiveSection(section.id)}
+              className={`px-4 py-2 rounded transition ${
+                activeSection === section.id
+                  ? "bg-blue-500 text-white"
+                  : "bg-gray-100 hover:bg-gray-200"
+              }`}
+            >
+              {section.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Usage Example Code */}
+      <div className="bg-gray-50 p-4 rounded text-sm">
+        <p className="font-mono text-xs text-gray-600">
+          Current section: <strong>{activeSection}</strong>
+        </p>
+        <p className="text-xs text-gray-500 mt-2">
+          Click any breadcrumb item or button to navigate between sections without changing the URL.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+// Long Breadcrumb
+export const LongBreadcrumb: Story = {
+  args: {
+    items: [
+      { label: "Home", href: "/" },
+      { label: "Products", href: "/products" },
+      { label: "Electronics", href: "/products/electronics" },
+      { label: "Computers", href: "/products/electronics/computers" },
+      { label: "Laptops", href: "/products/electronics/computers/laptops" },
+      { label: "Gaming Laptops", href: "/products/electronics/computers/laptops/gaming" },
+      { label: "ASUS ROG" },
+    ],
+  },
+};
+
+// Navigation Patterns
+export const FileSystem: Story = {
+  args: {
+    items: [
+      { label: "Root", href: "/", icon: "folder" },
+      { label: "Documents", href: "/documents", icon: "folder" },
+      { label: "Projects", href: "/documents/projects", icon: "folder" },
+      { label: "2024", href: "/documents/projects/2024", icon: "folder" },
+      { label: "report.pdf", icon: "description" },
+    ],
+  },
+};
+
+export const AdminPanel: Story = {
+  args: {
+    items: [
+      { label: "Dashboard", href: "/", icon: "dashboard" },
+      { label: "Users", href: "/users", icon: "group" },
+      { label: "Edit User", icon: "edit" },
+    ],
+  },
+};
+
+export const ECommerce: Story = {
+  args: {
+    items: [
+      { label: "Home", href: "/" },
+      { label: "Electronics", href: "/electronics" },
+      { label: "Smartphones", href: "/electronics/smartphones" },
+      { label: "iPhone 15 Pro" },
+    ],
+    showHomeIcon: true,
+  },
+};
+
+// Edge Cases
+export const VeryLongLabels: Story = {
+  args: {
+    items: [
+      { label: "Home", href: "/" },
+      { label: "This is a very long breadcrumb label that might wrap", href: "/long" },
+      { label: "Another extremely long label for testing purposes" },
+    ],
+  },
+};
+
+export const WithCustomClassName: Story = {
+  args: {
+    items: [
+      { label: "Home", href: "/" },
+      { label: "Products", href: "/products" },
+      { label: "Category" },
+    ],
+    className: "text-blue-600",
+  },
+};
+

package/src/styles/library.css

@@ -16,7 +16,7 @@
   font-style: normal;
   font-weight: 100 700;
   src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v272/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjzaqkNCeE.woff2) format('woff2');
-  font-display: swap;
+  font-display: block;
 }
 
 .material-symbols-rounded {

package/src/styles/tailwind.css

@@ -19,7 +19,7 @@
   font-style: normal;
   font-weight: 100 700;
   src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v272/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjzaqkNCeE.woff2) format('woff2');
-  font-display: swap;
+  font-display: block;
 }
 
 .material-symbols-rounded {