automoby-kit 1.0.38 → 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"),a=require("./contexts.js"),n=require("./chunks/chevron-left-Do__K6cA.js");require("./chunks/createLucideIcon-BqJVOzoK.js");const i=r.forwardRef(({items:r,className:i,isMobile:s},l)=>{const c=a.useMobile(),o=s??c;return e.jsx("nav",{ref:l,className:t("flex items-center",o?"gap-1 px-4 py-2.5":"gap-3 pr-1 pt-3 pb-4 pl-0",i),"aria-label":"Breadcrumb navigation",children:e.jsx("ol",{className:"flex items-center gap-inherit",children:r.map((a,i)=>{const s=i===r.length-1,l=!s&&(a.href||a.onClick),c=`${a.label}-${i}`;return e.jsxs("li",{className:"flex items-center gap-inherit",children:[l?e.jsx("a",{href:a.href||"#",className:t("whitespace-nowrap border-0 bg-transparent p-0 no-underline",o?"text-t":"text-s","text-neutral-main","cursor-pointer hover:text-neutral-dark transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-sm"),onClick:e=>((e,t,a)=>{t!==r.length-1&&e.onClick&&(a.preventDefault(),e.onClick())})(a,i,e),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),a.onClick&&a.onClick())},"aria-label":`Go to ${a.label}`,children:a.label}):e.jsx("span",{className:t("whitespace-nowrap",o?"text-t":"text-s","text-neutral-main","font-medium"),"aria-current":s?"page":void 0,"aria-label":s?`Current page: ${a.label}`:void 0,children:a.label}),!s&&e.jsx(n.ChevronLeft,{className:t("text-neutral-main flex-shrink-0",o?"w-2.5 h-2.5":"w-3 h-3"),"aria-hidden":"true"})]},c)})})})});i.displayName="Breadcrumb",exports.Breadcrumb=i;
+"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 a from"./utils.js";import{useMobile as n}from"./contexts.js";import{C as i}from"./chunks/chevron-left-4HSuTes3.js";import"./chunks/createLucideIcon-DGp0SoUT.js";const l=t.forwardRef(({items:t,className:l,isMobile:o},s)=>{const c=n(),m=o??c;return e("nav",{ref:s,className:a("flex items-center",m?"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 o=l===t.length-1,s=!o&&(n.href||n.onClick),c=`${n.label}-${l}`;return r("li",{className:"flex items-center gap-inherit",children:[s?e("a",{href:n.href||"#",className:a("whitespace-nowrap border-0 bg-transparent p-0 no-underline",m?"text-t":"text-s","text-neutral-main","cursor-pointer hover:text-neutral-dark transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-sm"),onClick:e=>((e,r,a)=>{r!==t.length-1&&e.onClick&&(a.preventDefault(),e.onClick())})(n,l,e),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),n.onClick&&n.onClick())},"aria-label":`Go to ${n.label}`,children:n.label}):e("span",{className:a("whitespace-nowrap",m?"text-t":"text-s","text-neutral-main","font-medium"),"aria-current":o?"page":void 0,"aria-label":o?`Current page: ${n.label}`:void 0,children:n.label}),!o&&e(i,{className:a("text-neutral-main flex-shrink-0",m?"w-2.5 h-2.5":"w-3 h-3"),"aria-hidden":"true"})]},c)})})})});l.displayName="Breadcrumb";export{l 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,10 +14,12 @@ 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();
         }
-        // If item has href, let the anchor tag handle navigation naturally
     };
     return (jsx("nav", { ref: ref, className: cn(
         // Base layout - rely on page RTL direction; no manual row-reverse
@@ -24,32 +27,26 @@ const Breadcrumb = React.forwardRef(({ items, className, isMobile }, ref) => {
         // Responsive gap and padding based on mobile state
         actualIsMobile ? 'gap-1 px-4 py-2.5' : 'gap-3 pr-1 pt-3 pb-4 pl-0', className), "aria-label": "Breadcrumb navigation", children: jsx("ol", { className: "flex items-center gap-inherit", children: items.map((item, index) => {
                 const isLast = index === items.length - 1;
-                const isClickable = !isLast && (item.href || item.onClick);
+                const isClickable = !isLast && !!item.onClick;
                 const itemKey = `${item.label}-${index}`;
-                return (jsxs("li", { className: "flex items-center gap-inherit", children: [isClickable ? (jsx("a", { href: item.href || '#', className: cn(
-                            // Base styles
-                            'whitespace-nowrap border-0 bg-transparent p-0 no-underline', 
-                            // Responsive font size based on mobile state
-                            actualIsMobile ? 'text-t' : 'text-s', 
-                            // Color
-                            'text-neutral-main', 
-                            // Cursor and hover effects for clickable items
-                            'cursor-pointer hover:text-neutral-dark transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-sm'), onClick: (e) => handleItemClick(item, index, e), onKeyDown: (e) => {
-                                if (e.key === 'Enter' || e.key === ' ') {
-                                    e.preventDefault();
-                                    if (item.onClick) {
-                                        item.onClick();
+                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), 
+                            // 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: isButtonLike
+                                ? (e) => {
+                                    if (e.key === 'Enter' || e.key === ' ') {
+                                        e.preventDefault();
+                                        if (item.onClick) {
+                                            item.onClick();
+                                        }
                                     }
                                 }
-                            }, "aria-label": `Go to ${item.label}`, children: item.label })) : (jsx("span", { className: cn(
-                            // Base styles
-                            'whitespace-nowrap', 
-                            // Responsive font size based on mobile state
-                            actualIsMobile ? 'text-t' : 'text-s', 
-                            // Color
-                            'text-neutral-main', 
-                            // Different styles for current page (last item)
-                            'font-medium'), "aria-current": isLast ? 'page' : undefined, "aria-label": isLast ? `Current page: ${item.label}` : 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

@@ -1,8 +1,13 @@
 import React from 'react';
 export interface BreadcrumbItem {
     label: string;
-    href?: 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: {
@@ -37,10 +38,12 @@ declare const _default: {
         items: ({
             label: string;
             href: string;
+            title: string;
             onClick: () => void;
         } | {
             label: string;
             href?: undefined;
+            title?: undefined;
             onClick?: undefined;
         })[];
         isMobile: boolean;
@@ -54,10 +57,17 @@ export declare const Default: {
         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;
         })[];
     };
@@ -69,11 +79,11 @@ export declare const ShortBreadcrumb: {
         items: ({
             label: string;
             href: string;
-            onClick: () => void;
+            title: string;
         } | {
             label: string;
             href?: undefined;
-            onClick?: undefined;
+            title?: undefined;
         })[];
     };
 };
@@ -84,11 +94,9 @@ export declare const LongBreadcrumb: {
         items: ({
             label: string;
             href: string;
-            onClick: () => void;
         } | {
             label: string;
             href?: undefined;
-            onClick?: undefined;
         })[];
     };
 };
@@ -98,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;
         })[];
     };
 };
@@ -110,14 +127,6 @@ export declare const WithMixedNavigation: {
     storyName: string;
     args: {
         items: ({
-            label: string;
-            href: string;
-            onClick?: undefined;
-        } | {
-            label: string;
-            onClick: () => void;
-            href?: undefined;
-        } | {
             label: string;
             href: string;
             onClick: () => void;
@@ -135,10 +144,17 @@ export declare const EnglishContent: {
         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;
         })[];
     };
@@ -150,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;
         })[];
     };
 };
@@ -164,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;
         })[];
     };
 };
@@ -175,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.38",
+  "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",