@neoptocom/neopto-ui 1.4.3 → 1.5.0

package/dist/index.cjs

@@ -265,28 +265,81 @@ function Card({
   );
 }
 var Input = React3__namespace.forwardRef(
-  ({ className, disabled, variant = "default", ...props }, ref) => {
-    const isInline = variant === "inline";
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
+  ({
+    className,
+    disabled,
+    variant = "default",
+    label,
+    fieldsetProps,
+    legendProps,
+    error = false,
+    ...props
+  }, ref) => {
+    const isInlineVariant = variant === "inline";
+    const shouldUseInlineStyles = isInlineVariant || Boolean(label);
+    const isError = error && !disabled;
+    const inputClasses = [
+      "w-full bg-transparent outline-none transition-colors",
+      shouldUseInlineStyles ? "h-9" : "h-12 px-4 rounded-full",
+      "font-['Poppins'] text-sm placeholder:text-[var(--muted-fg)]"
+    ];
+    if (!shouldUseInlineStyles) {
+      inputClasses.push("border");
+    }
+    if (disabled) {
+      inputClasses.push("text-[#3F424F]", "cursor-not-allowed");
+      if (!shouldUseInlineStyles) {
+        inputClasses.push("border-[#3F424F]");
+      }
+    } else {
+      inputClasses.push("text-[var(--muted-fg)]", "focus:text-[var(--fg)]");
+      if (!shouldUseInlineStyles) {
+        inputClasses.push(
+          isError ? "border-[var(--destructive)]" : "border-[var(--muted-fg)]",
+          isError ? "hover:border-[var(--destructive)]" : "hover:border-[var(--border)]",
+          isError ? "focus:border-[var(--destructive)]" : "focus:border-[var(--color-brand)]"
+        );
+      }
+    }
+    if (className) {
+      inputClasses.push(className);
+    }
+    const inputClassName = inputClasses.join(" ");
+    const inputElement = /* @__PURE__ */ jsxRuntime.jsx("input", { ref, disabled, className: inputClassName, ...props });
+    if (!label) {
+      return inputElement;
+    }
+    const { className: fieldsetClassNameProp = "", ...restFieldsetProps } = fieldsetProps ?? {};
+    const { className: legendClassNameProp = "", ...restLegendProps } = legendProps ?? {};
+    const fieldsetClassName = [
+      "w-full min-w-0 rounded-full border bg-[var(--surface)] transition-colors h-14",
+      isError ? "border-[var(--destructive)]" : "border-[var(--border)]",
+      isError ? "focus-within:border-[var(--destructive)]" : "focus-within:border-[var(--color-brand)]",
+      disabled ? "opacity-60 cursor-not-allowed" : "",
+      fieldsetClassNameProp
+    ].filter(Boolean).join(" ");
+    const legendColorClass = disabled ? "text-[var(--muted-fg)]" : isError ? "text-[var(--destructive)]" : "text-[var(--muted-fg)]";
+    const legendClassNameCombined = [
+      "ml-4 px-1 text-sm leading-none relative font-normal select-none",
+      legendColorClass,
+      legendClassNameProp
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "fieldset",
       {
-        ref,
-        disabled,
-        className: [
-          "w-full bg-transparent outline-none transition-colors",
-          isInline ? "" : "h-12 px-4 rounded-full",
-          "font-['Poppins'] text-sm placeholder:text-[var(--muted-fg)]",
-          !isInline && "border",
-          disabled ? "text-[#3F424F] cursor-not-allowed" + (isInline ? "" : " border-[#3F424F]") : [
-            "text-[var(--muted-fg)]",
-            isInline ? "" : "border-[var(--muted-fg)]",
-            isInline ? "" : "hover:border-[var(--border)]",
-            "focus:text-[var(--fg)]",
-            isInline ? "" : "focus:border-[var(--color-brand)]"
-          ].join(" "),
-          className
-        ].join(" "),
-        ...props
+        ...restFieldsetProps,
+        className: fieldsetClassName,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "legend",
+            {
+              ...restLegendProps,
+              className: legendClassNameCombined,
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex pl-5 pr-3 pb-1 h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full", children: inputElement }) })
+        ]
       }
     );
   }
@@ -1391,6 +1444,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 +1507,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;
@@ -58,13 +59,29 @@ type CardProps = React.HTMLAttributes<HTMLDivElement> & {
 };
 declare function Card({ children, className, style, showDecorations, variant, elevated, lightImage, darkImage, ...props }: CardProps): react_jsx_runtime.JSX.Element;
 
-type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
+type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
     /** Input visual variant */
     variant?: "default" | "inline";
+    /** Optional floating label (renders a fieldset wrapper when provided) */
+    label?: string;
+    /** Additional props for the surrounding fieldset when label is set */
+    fieldsetProps?: React.FieldsetHTMLAttributes<HTMLFieldSetElement>;
+    /** Additional props for the legend when label is set */
+    legendProps?: React.HTMLAttributes<HTMLLegendElement>;
+    /** Flag to visually mark the input as errored */
+    error?: boolean;
 };
 declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
     /** Input visual variant */
     variant?: "default" | "inline";
+    /** Optional floating label (renders a fieldset wrapper when provided) */
+    label?: string;
+    /** Additional props for the surrounding fieldset when label is set */
+    fieldsetProps?: React.FieldsetHTMLAttributes<HTMLFieldSetElement>;
+    /** Additional props for the legend when label is set */
+    legendProps?: React.HTMLAttributes<HTMLLegendElement>;
+    /** Flag to visually mark the input as errored */
+    error?: boolean;
 } & React.RefAttributes<HTMLInputElement>>;
 
 type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> & {
@@ -333,4 +350,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;
@@ -58,13 +59,29 @@ type CardProps = React.HTMLAttributes<HTMLDivElement> & {
 };
 declare function Card({ children, className, style, showDecorations, variant, elevated, lightImage, darkImage, ...props }: CardProps): react_jsx_runtime.JSX.Element;
 
-type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
+type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
     /** Input visual variant */
     variant?: "default" | "inline";
+    /** Optional floating label (renders a fieldset wrapper when provided) */
+    label?: string;
+    /** Additional props for the surrounding fieldset when label is set */
+    fieldsetProps?: React.FieldsetHTMLAttributes<HTMLFieldSetElement>;
+    /** Additional props for the legend when label is set */
+    legendProps?: React.HTMLAttributes<HTMLLegendElement>;
+    /** Flag to visually mark the input as errored */
+    error?: boolean;
 };
 declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
     /** Input visual variant */
     variant?: "default" | "inline";
+    /** Optional floating label (renders a fieldset wrapper when provided) */
+    label?: string;
+    /** Additional props for the surrounding fieldset when label is set */
+    fieldsetProps?: React.FieldsetHTMLAttributes<HTMLFieldSetElement>;
+    /** Additional props for the legend when label is set */
+    legendProps?: React.HTMLAttributes<HTMLLegendElement>;
+    /** Flag to visually mark the input as errored */
+    error?: boolean;
 } & React.RefAttributes<HTMLInputElement>>;
 
 type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> & {
@@ -333,4 +350,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

@@ -244,28 +244,81 @@ function Card({
   );
 }
 var Input = React3.forwardRef(
-  ({ className, disabled, variant = "default", ...props }, ref) => {
-    const isInline = variant === "inline";
-    return /* @__PURE__ */ jsx(
-      "input",
+  ({
+    className,
+    disabled,
+    variant = "default",
+    label,
+    fieldsetProps,
+    legendProps,
+    error = false,
+    ...props
+  }, ref) => {
+    const isInlineVariant = variant === "inline";
+    const shouldUseInlineStyles = isInlineVariant || Boolean(label);
+    const isError = error && !disabled;
+    const inputClasses = [
+      "w-full bg-transparent outline-none transition-colors",
+      shouldUseInlineStyles ? "h-9" : "h-12 px-4 rounded-full",
+      "font-['Poppins'] text-sm placeholder:text-[var(--muted-fg)]"
+    ];
+    if (!shouldUseInlineStyles) {
+      inputClasses.push("border");
+    }
+    if (disabled) {
+      inputClasses.push("text-[#3F424F]", "cursor-not-allowed");
+      if (!shouldUseInlineStyles) {
+        inputClasses.push("border-[#3F424F]");
+      }
+    } else {
+      inputClasses.push("text-[var(--muted-fg)]", "focus:text-[var(--fg)]");
+      if (!shouldUseInlineStyles) {
+        inputClasses.push(
+          isError ? "border-[var(--destructive)]" : "border-[var(--muted-fg)]",
+          isError ? "hover:border-[var(--destructive)]" : "hover:border-[var(--border)]",
+          isError ? "focus:border-[var(--destructive)]" : "focus:border-[var(--color-brand)]"
+        );
+      }
+    }
+    if (className) {
+      inputClasses.push(className);
+    }
+    const inputClassName = inputClasses.join(" ");
+    const inputElement = /* @__PURE__ */ jsx("input", { ref, disabled, className: inputClassName, ...props });
+    if (!label) {
+      return inputElement;
+    }
+    const { className: fieldsetClassNameProp = "", ...restFieldsetProps } = fieldsetProps ?? {};
+    const { className: legendClassNameProp = "", ...restLegendProps } = legendProps ?? {};
+    const fieldsetClassName = [
+      "w-full min-w-0 rounded-full border bg-[var(--surface)] transition-colors h-14",
+      isError ? "border-[var(--destructive)]" : "border-[var(--border)]",
+      isError ? "focus-within:border-[var(--destructive)]" : "focus-within:border-[var(--color-brand)]",
+      disabled ? "opacity-60 cursor-not-allowed" : "",
+      fieldsetClassNameProp
+    ].filter(Boolean).join(" ");
+    const legendColorClass = disabled ? "text-[var(--muted-fg)]" : isError ? "text-[var(--destructive)]" : "text-[var(--muted-fg)]";
+    const legendClassNameCombined = [
+      "ml-4 px-1 text-sm leading-none relative font-normal select-none",
+      legendColorClass,
+      legendClassNameProp
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs(
+      "fieldset",
       {
-        ref,
-        disabled,
-        className: [
-          "w-full bg-transparent outline-none transition-colors",
-          isInline ? "" : "h-12 px-4 rounded-full",
-          "font-['Poppins'] text-sm placeholder:text-[var(--muted-fg)]",
-          !isInline && "border",
-          disabled ? "text-[#3F424F] cursor-not-allowed" + (isInline ? "" : " border-[#3F424F]") : [
-            "text-[var(--muted-fg)]",
-            isInline ? "" : "border-[var(--muted-fg)]",
-            isInline ? "" : "hover:border-[var(--border)]",
-            "focus:text-[var(--fg)]",
-            isInline ? "" : "focus:border-[var(--color-brand)]"
-          ].join(" "),
-          className
-        ].join(" "),
-        ...props
+        ...restFieldsetProps,
+        className: fieldsetClassName,
+        children: [
+          /* @__PURE__ */ jsx(
+            "legend",
+            {
+              ...restLegendProps,
+              className: legendClassNameCombined,
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "relative flex pl-5 pr-3 pb-1 h-full", children: /* @__PURE__ */ jsx("div", { className: "flex w-full", children: inputElement }) })
+        ]
       }
     );
   }
@@ -1370,5 +1423,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neoptocom/neopto-ui",
-  "version": "1.4.3",
+  "version": "1.5.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": [
@@ -49,6 +49,7 @@
     "typecheck": "tsc --noEmit",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
+    "storybook:docs": "storybook build --docs --output-dir storybook-static && cp storybook-static/index.json storybook-static/docs.json",
     "prepublishOnly": "npm run build && npm run typecheck",
     "changeset": "changeset",
     "version-packages": "changeset version",
@@ -58,9 +59,9 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "dependencies": {},
   "devDependencies": {
     "@changesets/cli": "^2.27.8",
+    "@joshwooding/vite-plugin-react-docgen-typescript": "^0.6.2",
     "@storybook/addon-actions": "^8.1.0",
     "@storybook/addon-essentials": "^8.1.0",
     "@storybook/addon-interactions": "^8.1.0",

package/src/components/Breadcrumb.docs.mdx

@@ -0,0 +1,60 @@
+import { Meta, Canvas, Story, ArgsTable } from "@storybook/blocks";
+import { Breadcrumb } from "./Breadcrumb";
+import * as BreadcrumbStories from "./Breadcrumb.stories";
+
+<Meta of={BreadcrumbStories} />
+
+# Breadcrumb
+
+The `Breadcrumb` component displays the current location within a hierarchy and optional navigation
+links for parent levels. It supports icons, external links, and click handlers for in-app routing.
+
+## When to use
+
+- Help users understand where they are in a nested content structure.
+- Offer a quick path back to previous sections without duplicating navigation in headers or sidebars.
+- Pair with routed or client-side navigation; items accept either `href` or `onClick`.
+
+## Basic usage
+
+```tsx
+import { Breadcrumb } from "@neoptocom/neopto-ui";
+
+const items = [
+  { label: "Home", href: "/" },
+  { label: "Docs", href: "/docs" },
+  { label: "Components" }
+];
+
+<Breadcrumb items={items} showHomeIcon />;
+```
+
+<Canvas>
+  <Story of={BreadcrumbStories.Playground} />
+</Canvas>
+
+<ArgsTable of={BreadcrumbStories.Playground} />
+
+## Design guidance
+
+- Keep labels short; truncate or abbreviate long section names where possible.
+- Provide icons sparingly to reinforce key contexts (e.g., folders vs. people).
+- Use `showHomeIcon` to reinforce a “home” entry without duplicating the label.
+- Avoid mixing `href` and `onClick` handlers on the same item.
+
+## Composing with state
+
+Combine breadcrumb click handlers with your router or state machine to switch views without a full
+page load. The interactive example demonstrates an in-app documents flow.
+
+<Canvas>
+  <Story of={BreadcrumbStories.InteractiveNavigation} />
+</Canvas>
+
+## Accessibility
+
+- Breadcrumbs are wrapped in a `<nav aria-label="Breadcrumb">` for screen readers.
+- The final item receives `aria-current="page"` automatically.
+- Clickable items expose keyboard handlers, so always keep labels descriptive.
+
+

package/src/components/Breadcrumb.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Breadcrumb, type BreadcrumbItem } from "./Breadcrumb";
+
+const meta: Meta<typeof Breadcrumb> = {
+  title: "Components/Breadcrumb",
+  component: Breadcrumb,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered"
+  },
+  args: {
+    items: [
+      { label: "Home", href: "/" },
+      { label: "Library", href: "/library" },
+      { label: "Data" }
+    ] satisfies BreadcrumbItem[]
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof Breadcrumb>;
+
+export const Playground: Story = {};
+
+export const WithIcons: Story = {
+  args: {
+    items: [
+      { label: "Dashboard", href: "/", icon: "dashboard" },
+      { label: "Projects", href: "/projects", icon: "folder" },
+      { label: "Neptune Launch", icon: "rocket_launch" }
+    ]
+  }
+};
+
+export const WithHomeIcon: Story = {
+  args: {
+    showHomeIcon: true
+  }
+};
+
+export const InteractiveNavigation: Story = {
+  render: (args) => {
+    const sections: BreadcrumbItem[] = [
+      { label: "Getting Started", href: "/docs/getting-started" },
+      { label: "Guides", href: "/docs/guides" },
+      { label: "Auth", icon: "lock" }
+    ];
+
+    const [activeSection, setActiveSection] = useState(sections[sections.length - 1]);
+
+    return (
+      <div className="flex flex-col gap-6 w-full max-w-3xl">
+        <Breadcrumb
+          {...args}
+          items={[
+            { label: "Docs", href: "/docs", icon: "menu_book" },
+            ...sections.map((section, index) => ({
+              ...section,
+              onClick: () => setActiveSection(section),
+              href: index === sections.length - 1 ? undefined : section.href
+            }))
+          ]}
+        />
+
+        <section className="rounded-lg border border-[var(--border)] bg-[var(--surface)] p-6 space-y-2">
+          <h2 className="text-xl font-semibold">{activeSection.label}</h2>
+          <p className="text-sm text-[var(--muted-fg)]">
+            Showcase how breadcrumbs can drive in-app navigation without reloading the page by
+            combining click handlers with your own state management.
+          </p>
+        </section>
+      </div>
+    );
+  }
+};
+
+