automoby-kit 1.0.39 → 1.0.40

package/dist/cjs/Breadcrumb.js

@@ -1 +1 @@
-"use client";"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("./utils.js"),n=require("./contexts.js"),i=require("./chunks/chevron-left-Do__K6cA.js");require("./chunks/createLucideIcon-BqJVOzoK.js");const a=r.forwardRef(({items:r,className:a,isMobile:s},l)=>{const o=n.useMobile(),c=s??o;return e.jsx("nav",{ref:l,className:t("flex items-center",c?"gap-1 px-4 py-2.5":"gap-3 pr-1 pt-3 pb-4 pl-0",a),"aria-label":"Breadcrumb navigation",children:e.jsx("ol",{className:"flex items-center gap-inherit",children:r.map((n,a)=>{const s=a===r.length-1,l=!s&&!!n.onClick,o=`${n.label}-${a}`;return e.jsxs("li",{className:"flex items-center gap-inherit",children:[e.jsx("span",{className:t("whitespace-nowrap",c?"text-t":"text-s","text-neutral-main",s?"font-medium":void 0,l?"cursor-pointer hover:text-neutral-dark transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-sm":void 0),role:l?"button":void 0,tabIndex:l?0:void 0,"aria-current":s?"page":void 0,"aria-label":s?`Current page: ${n.label}`:void 0,onClick:l?e=>((e,t,n)=>{t!==r.length-1&&e.onClick&&(n.preventDefault(),e.onClick())})(n,a,e):void 0,onKeyDown:l?e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),n.onClick&&n.onClick())}:void 0,children:n.label}),!s&&e.jsx(i.ChevronLeft,{className:t("text-neutral-main flex-shrink-0",c?"w-2.5 h-2.5":"w-3 h-3"),"aria-hidden":"true"})]},o)})})})});a.displayName="Breadcrumb",exports.Breadcrumb=a;
+"use client";"use strict";var e=require("react/jsx-runtime"),r=require("react"),i=require("./utils.js"),n=require("./contexts.js"),t=require("./Typography.js"),a=require("./chunks/chevron-left-Do__K6cA.js");require("./chunks/createLucideIcon-BqJVOzoK.js");const s=r.forwardRef(({items:r,className:s,isMobile:l},o)=>{const c=n.useMobile(),u=l??c;return e.jsx("nav",{ref:o,className:i("flex items-center",u?"gap-1 px-4 py-2.5":"gap-3 pr-1 pt-3 pb-4 pl-0",s),"aria-label":"Breadcrumb navigation",children:e.jsx("ol",{className:"flex items-center gap-inherit",children:r.map((n,s)=>{const l=s===r.length-1,o=!l&&!!n.onClick,c=`${n.label}-${s}`,d=n.component??(!l&&n.href?"a":"span"),h=o&&!n.href;return e.jsxs("li",{className:"flex items-center gap-inherit",children:[e.jsx(d,{className:i("whitespace-nowrap text-neutral-main",o?"cursor-pointer hover:text-neutral-dark transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-sm":void 0),role:h?"button":void 0,tabIndex:h?0:void 0,"aria-current":l?"page":void 0,"aria-label":l?`Current page: ${n.label}`:void 0,title:n.title,href:l?void 0:n.href,onClick:o?e=>((e,i,n)=>{i!==r.length-1&&e.onClick&&(e.href||n.preventDefault(),e.onClick())})(n,s,e):void 0,onKeyDown:h?e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),n.onClick&&n.onClick())}:void 0,children:e.jsx(t.Typography,{variant:u?"body-t-medium":"body-s-medium",children:n.label})}),!l&&e.jsx(a.ChevronLeft,{className:i("text-neutral-main flex-shrink-0",u?"w-2.5 h-2.5":"w-3 h-3"),"aria-hidden":"true"})]},c)})})})});s.displayName="Breadcrumb",exports.Breadcrumb=s;

package/dist/esm/Breadcrumb.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import t from"react";import n from"./utils.js";import{useMobile as i}from"./contexts.js";import{C as a}from"./chunks/chevron-left-4HSuTes3.js";import"./chunks/createLucideIcon-DGp0SoUT.js";const o=t.forwardRef(({items:t,className:o,isMobile:l},s)=>{const c=i(),m=l??c;return e("nav",{ref:s,className:n("flex items-center",m?"gap-1 px-4 py-2.5":"gap-3 pr-1 pt-3 pb-4 pl-0",o),"aria-label":"Breadcrumb navigation",children:e("ol",{className:"flex items-center gap-inherit",children:t.map((i,o)=>{const l=o===t.length-1,s=!l&&!!i.onClick,c=`${i.label}-${o}`;return r("li",{className:"flex items-center gap-inherit",children:[e("span",{className:n("whitespace-nowrap",m?"text-t":"text-s","text-neutral-main",l?"font-medium":void 0,s?"cursor-pointer hover:text-neutral-dark transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-sm":void 0),role:s?"button":void 0,tabIndex:s?0:void 0,"aria-current":l?"page":void 0,"aria-label":l?`Current page: ${i.label}`:void 0,onClick:s?e=>((e,r,n)=>{r!==t.length-1&&e.onClick&&(n.preventDefault(),e.onClick())})(i,o,e):void 0,onKeyDown:s?e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),i.onClick&&i.onClick())}:void 0,children:i.label}),!l&&e(a,{className:n("text-neutral-main flex-shrink-0",m?"w-2.5 h-2.5":"w-3 h-3"),"aria-hidden":"true"})]},c)})})})});o.displayName="Breadcrumb";export{o as Breadcrumb};
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import t from"react";import i from"./utils.js";import{useMobile as n}from"./contexts.js";import{Typography as o}from"./Typography.js";import{C as a}from"./chunks/chevron-left-4HSuTes3.js";import"./chunks/createLucideIcon-DGp0SoUT.js";const l=t.forwardRef(({items:t,className:l,isMobile:s},c)=>{const m=n(),p=s??m;return e("nav",{ref:c,className:i("flex items-center",p?"gap-1 px-4 py-2.5":"gap-3 pr-1 pt-3 pb-4 pl-0",l),"aria-label":"Breadcrumb navigation",children:e("ol",{className:"flex items-center gap-inherit",children:t.map((n,l)=>{const s=l===t.length-1,c=!s&&!!n.onClick,m=`${n.label}-${l}`,u=n.component??(!s&&n.href?"a":"span"),d=c&&!n.href;return r("li",{className:"flex items-center gap-inherit",children:[e(u,{className:i("whitespace-nowrap text-neutral-main",c?"cursor-pointer hover:text-neutral-dark transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-sm":void 0),role:d?"button":void 0,tabIndex:d?0:void 0,"aria-current":s?"page":void 0,"aria-label":s?`Current page: ${n.label}`:void 0,title:n.title,href:s?void 0:n.href,onClick:c?e=>((e,r,i)=>{r!==t.length-1&&e.onClick&&(e.href||i.preventDefault(),e.onClick())})(n,l,e):void 0,onKeyDown:d?e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),n.onClick&&n.onClick())}:void 0,children:e(o,{variant:p?"body-t-medium":"body-s-medium",children:n.label})}),!s&&e(a,{className:i("text-neutral-main flex-shrink-0",p?"w-2.5 h-2.5":"w-3 h-3"),"aria-hidden":"true"})]},m)})})})});l.displayName="Breadcrumb";export{l as Breadcrumb};

package/dist/types/Breadcrumb.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import cn from './utils.js';
 import { useMobile } from './contexts.js';
+import { Typography } from './Typography.js';
 import { C as ChevronLeft } from './chevron-left-Ck6O99eF.js';
 import './createLucideIcon-D-q73LTT.js';
 
@@ -13,7 +14,10 @@ const Breadcrumb = React.forwardRef(({ items, className, isMobile }, ref) => {
         if (index === items.length - 1)
             return;
         if (item.onClick) {
-            e.preventDefault();
+            // If there is no href, we fully handle the click
+            if (!item.href) {
+                e.preventDefault();
+            }
             item.onClick();
         }
     };
@@ -25,11 +29,15 @@ const Breadcrumb = React.forwardRef(({ items, className, isMobile }, ref) => {
                 const isLast = index === items.length - 1;
                 const isClickable = !isLast && !!item.onClick;
                 const itemKey = `${item.label}-${index}`;
-                return (jsxs("li", { className: "flex items-center gap-inherit", children: [jsx("span", { className: cn('whitespace-nowrap', actualIsMobile ? 'text-t' : 'text-s', 'text-neutral-main', isLast ? 'font-medium' : undefined, isClickable
+                const ItemElement = item.component ?? (!isLast && item.href ? 'a' : 'span');
+                const isButtonLike = isClickable && !item.href;
+                return (jsxs("li", { className: "flex items-center gap-inherit", children: [jsx(ItemElement, { className: cn('whitespace-nowrap text-neutral-main', isClickable
                                 ? 'cursor-pointer hover:text-neutral-dark transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-sm'
-                                : undefined), role: isClickable ? 'button' : undefined, tabIndex: isClickable ? 0 : undefined, "aria-current": isLast ? 'page' : undefined, "aria-label": isLast ? `Current page: ${item.label}` : undefined, onClick: isClickable
+                                : undefined), 
+                            // Accessibility only for non-link button-like behavior
+                            role: isButtonLike ? 'button' : undefined, tabIndex: isButtonLike ? 0 : undefined, "aria-current": isLast ? 'page' : undefined, "aria-label": isLast ? `Current page: ${item.label}` : undefined, title: item.title, href: !isLast ? item.href : undefined, onClick: isClickable
                                 ? (e) => handleItemClick(item, index, e)
-                                : undefined, onKeyDown: isClickable
+                                : undefined, onKeyDown: isButtonLike
                                 ? (e) => {
                                     if (e.key === 'Enter' || e.key === ' ') {
                                         e.preventDefault();
@@ -38,7 +46,7 @@ const Breadcrumb = React.forwardRef(({ items, className, isMobile }, ref) => {
                                         }
                                     }
                                 }
-                                : undefined, children: item.label }), !isLast && (jsx(ChevronLeft, { className: cn('text-neutral-main flex-shrink-0', 
+                                : undefined, children: jsx(Typography, { variant: actualIsMobile ? 'body-t-medium' : 'body-s-medium', children: item.label }) }), !isLast && (jsx(ChevronLeft, { className: cn('text-neutral-main flex-shrink-0', 
                             // Responsive icon size
                             actualIsMobile ? 'w-2.5 h-2.5' : 'w-3 h-3'), "aria-hidden": "true" }))] }, itemKey));
             }) }) }));

package/dist/types/components/Breadcrumb/Breadcrumb.d.ts

@@ -2,6 +2,12 @@ import React from 'react';
 export interface BreadcrumbItem {
     label: string;
     onClick?: () => void;
+    /** Optional href for link-like items */
+    href?: string;
+    /** Optional title attribute passed to the rendered item component */
+    title?: string;
+    /** Optional custom component to render the item (e.g., Link) */
+    component?: React.ElementType;
 }
 export interface BreadcrumbProps {
     items: BreadcrumbItem[];

package/dist/types/components/Breadcrumb/Breadcrumb.stories.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 import { BreadcrumbProps } from './Breadcrumb';
 type StoryArgs = BreadcrumbProps;
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<BreadcrumbProps & import("react").RefAttributes<HTMLElement>>;
+    component: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;
     parameters: {
         docs: {
             description: {
@@ -36,9 +37,13 @@ declare const _default: {
     args: {
         items: ({
             label: string;
+            href: string;
+            title: string;
             onClick: () => void;
         } | {
             label: string;
+            href?: undefined;
+            title?: undefined;
             onClick?: undefined;
         })[];
         isMobile: boolean;
@@ -51,9 +56,18 @@ export declare const Default: {
     args: {
         items: ({
             label: string;
+            href: string;
+            title: string;
             onClick: () => void;
         } | {
             label: string;
+            onClick: () => void;
+            href?: undefined;
+            title?: undefined;
+        } | {
+            label: string;
+            href?: undefined;
+            title?: undefined;
             onClick?: undefined;
         })[];
     };
@@ -64,10 +78,12 @@ export declare const ShortBreadcrumb: {
     args: {
         items: ({
             label: string;
-            onClick: () => void;
+            href: string;
+            title: string;
         } | {
             label: string;
-            onClick?: undefined;
+            href?: undefined;
+            title?: undefined;
         })[];
     };
 };
@@ -77,10 +93,10 @@ export declare const LongBreadcrumb: {
     args: {
         items: ({
             label: string;
-            onClick: () => void;
+            href: string;
         } | {
             label: string;
-            onClick?: undefined;
+            href?: undefined;
         })[];
     };
 };
@@ -90,10 +106,19 @@ export declare const WithClickHandlers: {
     args: {
         items: ({
             label: string;
+            href: string;
+            onClick: () => void;
+            title?: undefined;
+        } | {
+            label: string;
+            href: string;
+            title: string;
             onClick: () => void;
         } | {
             label: string;
+            href?: undefined;
             onClick?: undefined;
+            title?: undefined;
         })[];
     };
 };
@@ -103,9 +128,11 @@ export declare const WithMixedNavigation: {
     args: {
         items: ({
             label: string;
+            href: string;
             onClick: () => void;
         } | {
             label: string;
+            href?: undefined;
             onClick?: undefined;
         })[];
     };
@@ -115,10 +142,19 @@ export declare const EnglishContent: {
     storyName: string;
     args: {
         items: ({
+            label: string;
+            href: string;
+            title: string;
+            onClick?: undefined;
+        } | {
             label: string;
             onClick: () => void;
+            href?: undefined;
+            title?: undefined;
         } | {
             label: string;
+            href?: undefined;
+            title?: undefined;
             onClick?: undefined;
         })[];
     };
@@ -130,10 +166,16 @@ export declare const DesktopView: {
         isMobile: boolean;
         items: ({
             label: string;
-            onClick: () => void;
+            href: string;
+            title: string;
         } | {
             label: string;
-            onClick?: undefined;
+            href: string;
+            title?: undefined;
+        } | {
+            label: string;
+            href?: undefined;
+            title?: undefined;
         })[];
     };
 };
@@ -144,10 +186,16 @@ export declare const MobileView: {
         isMobile: boolean;
         items: ({
             label: string;
-            onClick: () => void;
+            href: string;
+            title: string;
         } | {
             label: string;
-            onClick?: undefined;
+            href: string;
+            title?: undefined;
+        } | {
+            label: string;
+            href?: undefined;
+            title?: undefined;
         })[];
     };
 };
@@ -155,3 +203,20 @@ export declare const ResponsiveComparison: {
     (): import("react/jsx-runtime").JSX.Element;
     storyName: string;
 };
+export declare const WithCustomComponent: {
+    (args: StoryArgs): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+    args: {
+        items: ({
+            label: string;
+            href: string;
+            component: React.FC<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">>;
+            title: string;
+        } | {
+            label: string;
+            href?: undefined;
+            component?: undefined;
+            title?: undefined;
+        })[];
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "automoby-kit",
-  "version": "1.0.39",
+  "version": "1.0.40",
   "description": "A comprehensive React UI component library - created in war 2025",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",