automoby-kit 1.0.69 → 1.0.71

package/README.md

@@ -1,312 +1,312 @@
-# Automoby Kit
-
-A comprehensive React UI component library built with TypeScript and Tailwind CSS - created in war 2025.
-
-![npm version](https://img.shields.io/badge/version-1.0.64-blue.svg)
-![TypeScript](https://img.shields.io/badge/TypeScript-5.8.3-blue)
-![React](https://img.shields.io/badge/React-19.1.0-blue)
-
-## ✨ Features
-
-- 🎨 **15+ Production-Ready Components** - Comprehensive UI library for modern React applications
-- 📱 **Mobile-First Design** - Built-in mobile detection and responsive behavior
-- 🎯 **TypeScript Native** - Full type safety with complete TypeScript definitions
-- 🌳 **Tree-Shakeable** - Import only what you need for optimal bundle size
-- 🎨 **Tailwind CSS** - Styled with Tailwind for easy customization
-- ♿ **Accessible** - ARIA-compliant components following best practices
-- 🚀 **Modern React 19** - Built for the latest React features
-
-## 🚀 Installation
-
-```bash
-npm install automoby-kit
-```
-
-### Peer Dependencies
-
-Make sure you have these installed:
-
-```bash
-npm install react react-dom clsx lucide-react tailwindcss ua-parser-js
-```
-
-## 📦 Usage
-
-### Import All Components
-
-```typescript
-import { 
-  Button, 
-  Typography, 
-  Input, 
-  Tabs,
-  Dialog,
-  Select
-} from 'automoby-kit';
-
-function App() {
-  return (
-    <div>
-      <Typography variant="h1">Welcome to Automoby Kit</Typography>
-      <Button variant="primary" size="lg">
-        Click me!
-      </Button>
-      <Input placeholder="Enter text..." />
-    </div>
-  );
-}
-```
-
-### Import Individual Components (Tree-Shaking)
-
-For better bundle optimization, import components individually:
-
-```typescript
-import { Button } from 'automoby-kit/Button';
-import { Typography } from 'automoby-kit/Typography';
-import { Input } from 'automoby-kit/Input';
-
-function App() {
-  return (
-    <div>
-      <Typography variant="h1">Optimized Bundle</Typography>
-      <Button variant="primary">Click me!</Button>
-      <Input placeholder="Type here..." />
-    </div>
-  );
-}
-```
-
-## 🧩 Available Components
-
-### Form Components
-- **Input** - Advanced input fields with label, error states, and various types
-- **Select** - Dropdown select with keyboard navigation and accessibility
-- **RadioGroup** - Radio button groups with customizable options
-
-### Navigation Components
-- **Breadcrumb** - Navigation breadcrumbs for showing page hierarchy
-- **Menu** - Context menus and dropdowns with nested support
-- **Tabs** - Tabbed interfaces for organizing content
-- **Pagination** - Page navigation with mobile and desktop variants
-
-### Display Components
-- **Typography** - Text rendering with various heading and body styles
-- **Button** - Interactive buttons with multiple variants and sizes
-- **Chips** - Tag-like elements for categories or filters
-- **Divider** - Visual separators for content sections
-- **Accordion** - Collapsible content sections
-
-### Overlay Components
-- **Dialog** - Modal dialogs with customizable content and actions
-- **Drawer** - Slide-out panels from any direction
-- **Backdrop** - Overlay backgrounds for modals
-
-## 🏗️ TypeScript Support
-
-All components come with full TypeScript support and exported types:
-
-```typescript
-import { 
-  ButtonProps, 
-  ButtonVariant, 
-  ButtonSize,
-  TypographyProps,
-  TypographyVariant,
-  InputProps,
-  DialogProps,
-  SelectProps,
-  SelectOption
-} from 'automoby-kit';
-
-// Use types in your components
-const MyButton: React.FC<ButtonProps> = (props) => {
-  return <Button {...props} />;
-};
-
-// Define variants with type safety
-const variant: ButtonVariant = 'primary';
-const size: ButtonSize = 'lg';
-```
-
-## 📱 Mobile Context
-
-The library includes a mobile detection context for responsive behavior:
-
-```typescript
-import { MobileProvider, useMobile } from 'automoby-kit';
-
-function App() {
-  return (
-    <MobileProvider userAgent={navigator.userAgent}>
-      <MyComponent />
-    </MobileProvider>
-  );
-}
-
-function MyComponent() {
-  const isMobile = useMobile();
-  
-  return (
-    <div>
-      {isMobile ? (
-        <p>Mobile View</p>
-      ) : (
-        <p>Desktop View</p>
-      )}
-    </div>
-  );
-}
-```
-
-## 🎨 Component Examples
-
-### Dialog
-
-```typescript
-import { Dialog, DialogButton } from 'automoby-kit';
-import { useState } from 'react';
-
-function MyDialog() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <Dialog
-      isOpen={isOpen}
-      onClose={() => setIsOpen(false)}
-      title="Confirm Action"
-      content={<p>Are you sure you want to proceed?</p>}
-      buttons={
-        <>
-          <DialogButton variant="primary" onClick={() => setIsOpen(false)}>
-            Confirm
-          </DialogButton>
-          <DialogButton variant="secondary" onClick={() => setIsOpen(false)}>
-            Cancel
-          </DialogButton>
-        </>
-      }
-    />
-  );
-}
-```
-
-### Select
-
-```typescript
-import { Select } from 'automoby-kit';
-
-function MySelect() {
-  const options = [
-    { value: '1', label: 'Option 1' },
-    { value: '2', label: 'Option 2' },
-    { value: '3', label: 'Option 3' },
-  ];
-
-  return (
-    <Select
-      label="Choose an option"
-      placeholder="Select..."
-      options={options}
-      onChange={(value) => console.log('Selected:', value)}
-    />
-  );
-}
-```
-
-### Pagination
-
-```typescript
-import { Pagination } from 'automoby-kit';
-
-function MyPagination() {
-  return (
-    <Pagination
-      currentPage={1}
-      totalPages={10}
-      onPageChange={(page) => console.log('Page:', page)}
-    />
-  );
-}
-```
-
-## 🎯 Available Exports
-
-### Components
-`Button`, `Typography`, `Input`, `Tabs`, `Drawer`, `Backdrop`, `Breadcrumb`, `Pagination`, `Accordion`, `Divider`, `RadioGroup`, `Chips`, `Menu`, `Dialog`, `DialogButton`, `Select`
-
-### Context Providers
-`MobileProvider`, `useMobile`
-
-### Utilities
-`cn` (classname utility from `automoby-kit/utils`)
-
-### Types
-All component props and variants are exported for TypeScript users.
-
-## 🛠️ Peer Dependencies
-
-```json
-{
-  "react": "^19.1.0",
-  "react-dom": "^19.1.0",
-  "clsx": "^2.1.1",
-  "lucide-react": "^0.522.0",
-  "tailwindcss": "^4.1.10",
-  "typescript": "^5.8.3",
-  "ua-parser-js": "^2.0.4"
-}
-```
-
-## 📦 Bundle Formats
-
-This package ships with multiple bundle formats:
-
-- **ESM** - `dist/esm` - ES Modules for modern bundlers
-- **CommonJS** - `dist/cjs` - CommonJS for Node.js compatibility
-- **TypeScript Definitions** - `dist/types` - Complete type definitions
-
-## 🔧 Configuration
-
-If you're using Next.js 13+, add 'use client' directive when needed (automatically handled in pre-built bundles):
-
-```typescript
-'use client';
-
-import { Button } from 'automoby-kit';
-```
-
-## 🌟 Why Automoby Kit?
-
-- **Battle-Tested** - Built during production demands
-- **Developer Experience** - Intuitive API with excellent TypeScript support
-- **Performance** - Optimized bundle size with tree-shaking support
-- **Modern Stack** - Built with latest React 19 and TypeScript 5.8
-- **Accessible** - WCAG compliant components
-- **Customizable** - Easy to theme with Tailwind CSS
-
-## 🆘 Support
-
-If you encounter any issues:
-
-1. Check the [GitHub issues](https://github.com/yourusername/automoby-kit/issues)
-2. Submit a detailed issue report
-3. Provide a minimal reproduction example
-
-## 👥 Authors
-
-- **Ghazal Kordi** - Co-creator
-- **Alireza Mirzaee** - Co-creator
-
-## 📄 License
-
-ISC
-
-## 🔄 Version History
-
-- **1.0.64** - Current stable release
-- **1.0.0** - Initial release
-
----
-
+# Automoby Kit
+
+A comprehensive React UI component library built with TypeScript and Tailwind CSS - created in war 2025.
+
+![npm version](https://img.shields.io/badge/version-1.0.64-blue.svg)
+![TypeScript](https://img.shields.io/badge/TypeScript-5.8.3-blue)
+![React](https://img.shields.io/badge/React-19.1.0-blue)
+
+## ✨ Features
+
+- 🎨 **15+ Production-Ready Components** - Comprehensive UI library for modern React applications
+- 📱 **Mobile-First Design** - Built-in mobile detection and responsive behavior
+- 🎯 **TypeScript Native** - Full type safety with complete TypeScript definitions
+- 🌳 **Tree-Shakeable** - Import only what you need for optimal bundle size
+- 🎨 **Tailwind CSS** - Styled with Tailwind for easy customization
+- ♿ **Accessible** - ARIA-compliant components following best practices
+- 🚀 **Modern React 19** - Built for the latest React features
+
+## 🚀 Installation
+
+```bash
+npm install automoby-kit
+```
+
+### Peer Dependencies
+
+Make sure you have these installed:
+
+```bash
+npm install react react-dom clsx lucide-react tailwindcss ua-parser-js
+```
+
+## 📦 Usage
+
+### Import All Components
+
+```typescript
+import { 
+  Button, 
+  Typography, 
+  Input, 
+  Tabs,
+  Dialog,
+  Select
+} from 'automoby-kit';
+
+function App() {
+  return (
+    <div>
+      <Typography variant="h1">Welcome to Automoby Kit</Typography>
+      <Button variant="primary" size="lg">
+        Click me!
+      </Button>
+      <Input placeholder="Enter text..." />
+    </div>
+  );
+}
+```
+
+### Import Individual Components (Tree-Shaking)
+
+For better bundle optimization, import components individually:
+
+```typescript
+import { Button } from 'automoby-kit/Button';
+import { Typography } from 'automoby-kit/Typography';
+import { Input } from 'automoby-kit/Input';
+
+function App() {
+  return (
+    <div>
+      <Typography variant="h1">Optimized Bundle</Typography>
+      <Button variant="primary">Click me!</Button>
+      <Input placeholder="Type here..." />
+    </div>
+  );
+}
+```
+
+## 🧩 Available Components
+
+### Form Components
+- **Input** - Advanced input fields with label, error states, and various types
+- **Select** - Dropdown select with keyboard navigation and accessibility
+- **RadioGroup** - Radio button groups with customizable options
+
+### Navigation Components
+- **Breadcrumb** - Navigation breadcrumbs for showing page hierarchy
+- **Menu** - Context menus and dropdowns with nested support
+- **Tabs** - Tabbed interfaces for organizing content
+- **Pagination** - Page navigation with mobile and desktop variants
+
+### Display Components
+- **Typography** - Text rendering with various heading and body styles
+- **Button** - Interactive buttons with multiple variants and sizes
+- **Chips** - Tag-like elements for categories or filters
+- **Divider** - Visual separators for content sections
+- **Accordion** - Collapsible content sections
+
+### Overlay Components
+- **Dialog** - Modal dialogs with customizable content and actions
+- **Drawer** - Slide-out panels from any direction
+- **Backdrop** - Overlay backgrounds for modals
+
+## 🏗️ TypeScript Support
+
+All components come with full TypeScript support and exported types:
+
+```typescript
+import { 
+  ButtonProps, 
+  ButtonVariant, 
+  ButtonSize,
+  TypographyProps,
+  TypographyVariant,
+  InputProps,
+  DialogProps,
+  SelectProps,
+  SelectOption
+} from 'automoby-kit';
+
+// Use types in your components
+const MyButton: React.FC<ButtonProps> = (props) => {
+  return <Button {...props} />;
+};
+
+// Define variants with type safety
+const variant: ButtonVariant = 'primary';
+const size: ButtonSize = 'lg';
+```
+
+## 📱 Mobile Context
+
+The library includes a mobile detection context for responsive behavior:
+
+```typescript
+import { MobileProvider, useMobile } from 'automoby-kit';
+
+function App() {
+  return (
+    <MobileProvider userAgent={navigator.userAgent}>
+      <MyComponent />
+    </MobileProvider>
+  );
+}
+
+function MyComponent() {
+  const isMobile = useMobile();
+  
+  return (
+    <div>
+      {isMobile ? (
+        <p>Mobile View</p>
+      ) : (
+        <p>Desktop View</p>
+      )}
+    </div>
+  );
+}
+```
+
+## 🎨 Component Examples
+
+### Dialog
+
+```typescript
+import { Dialog, DialogButton } from 'automoby-kit';
+import { useState } from 'react';
+
+function MyDialog() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Dialog
+      isOpen={isOpen}
+      onClose={() => setIsOpen(false)}
+      title="Confirm Action"
+      content={<p>Are you sure you want to proceed?</p>}
+      buttons={
+        <>
+          <DialogButton variant="primary" onClick={() => setIsOpen(false)}>
+            Confirm
+          </DialogButton>
+          <DialogButton variant="secondary" onClick={() => setIsOpen(false)}>
+            Cancel
+          </DialogButton>
+        </>
+      }
+    />
+  );
+}
+```
+
+### Select
+
+```typescript
+import { Select } from 'automoby-kit';
+
+function MySelect() {
+  const options = [
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' },
+  ];
+
+  return (
+    <Select
+      label="Choose an option"
+      placeholder="Select..."
+      options={options}
+      onChange={(value) => console.log('Selected:', value)}
+    />
+  );
+}
+```
+
+### Pagination
+
+```typescript
+import { Pagination } from 'automoby-kit';
+
+function MyPagination() {
+  return (
+    <Pagination
+      currentPage={1}
+      totalPages={10}
+      onPageChange={(page) => console.log('Page:', page)}
+    />
+  );
+}
+```
+
+## 🎯 Available Exports
+
+### Components
+`Button`, `Typography`, `Input`, `Tabs`, `Drawer`, `Backdrop`, `Breadcrumb`, `Pagination`, `Accordion`, `Divider`, `RadioGroup`, `Chips`, `Menu`, `Dialog`, `DialogButton`, `Select`
+
+### Context Providers
+`MobileProvider`, `useMobile`
+
+### Utilities
+`cn` (classname utility from `automoby-kit/utils`)
+
+### Types
+All component props and variants are exported for TypeScript users.
+
+## 🛠️ Peer Dependencies
+
+```json
+{
+  "react": "^19.1.0",
+  "react-dom": "^19.1.0",
+  "clsx": "^2.1.1",
+  "lucide-react": "^0.522.0",
+  "tailwindcss": "^4.1.10",
+  "typescript": "^5.8.3",
+  "ua-parser-js": "^2.0.4"
+}
+```
+
+## 📦 Bundle Formats
+
+This package ships with multiple bundle formats:
+
+- **ESM** - `dist/esm` - ES Modules for modern bundlers
+- **CommonJS** - `dist/cjs` - CommonJS for Node.js compatibility
+- **TypeScript Definitions** - `dist/types` - Complete type definitions
+
+## 🔧 Configuration
+
+If you're using Next.js 13+, add 'use client' directive when needed (automatically handled in pre-built bundles):
+
+```typescript
+'use client';
+
+import { Button } from 'automoby-kit';
+```
+
+## 🌟 Why Automoby Kit?
+
+- **Battle-Tested** - Built during production demands
+- **Developer Experience** - Intuitive API with excellent TypeScript support
+- **Performance** - Optimized bundle size with tree-shaking support
+- **Modern Stack** - Built with latest React 19 and TypeScript 5.8
+- **Accessible** - WCAG compliant components
+- **Customizable** - Easy to theme with Tailwind CSS
+
+## 🆘 Support
+
+If you encounter any issues:
+
+1. Check the [GitHub issues](https://github.com/yourusername/automoby-kit/issues)
+2. Submit a detailed issue report
+3. Provide a minimal reproduction example
+
+## 👥 Authors
+
+- **Ghazal Kordi** - Co-creator
+- **Alireza Mirzaee** - Co-creator
+
+## 📄 License
+
+ISC
+
+## 🔄 Version History
+
+- **1.0.64** - Current stable release
+- **1.0.0** - Initial release
+
+---
+
 Built with ❤️ in 2025 

package/dist/cjs/Breadcrumb.js

@@ -1 +1 @@
-"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;
+"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,allowLastItemAsLink:o=!1},c)=>{const u=n.useMobile(),d=l??u;return e.jsx("nav",{ref:c,className:i("flex items-center",d?"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,c=(o||!l)&&!!n.onClick,u=`${n.label}-${s}`,h=n.component??(!o&&l||!n.href?"span":"a"),p=c&&!n.href;return e.jsxs("li",{className:"flex items-center gap-inherit",children:[e.jsx(h,{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:p?"button":void 0,tabIndex:p?0:void 0,"aria-current":l&&!o?"page":void 0,"aria-label":l&&!o?`Current page: ${n.label}`:void 0,title:n.title,href:o||!l?n.href:void 0,onClick:c?e=>((e,i,n)=>{(i!==r.length-1||o)&&e.onClick&&(e.href||n.preventDefault(),e.onClick())})(n,s,e):void 0,onKeyDown:p?e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),n.onClick&&n.onClick())}:void 0,children:e.jsx(t.Typography,{variant:d?"body-t-medium":"body-s-medium",children:n.label})}),!l&&e.jsx(a.ChevronLeft,{className:i("text-neutral-main flex-shrink-0",d?"w-2.5 h-2.5":"w-3 h-3"),"aria-hidden":"true"})]},u)})})})});s.displayName="Breadcrumb",exports.Breadcrumb=s;

package/dist/cjs/Drawer.js

@@ -1 +1 @@
-"use client";"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("react-dom"),l=require("./utils.js"),n=require("./contexts.js");const o=t.forwardRef(({children:o,direction:a="bottom",fullScreen:u=!1,isOpen:s=!1,onClose:i,className:d,isMobile:c,keepMounted:f,...b},m)=>{const[h,w]=t.useState(!1),x=n.useMobile(),p=c??x,y=t.useRef(null),v=t.useRef(null);t.useEffect(()=>{w(!0)},[]),t.useEffect(()=>{const handleEscape=e=>{"Escape"===e.key&&s&&i&&i()};return s&&(document.addEventListener("keydown",handleEscape),document.body.style.overflow="hidden"),()=>{document.removeEventListener("keydown",handleEscape),document.body.style.overflow="auto"}},[s,i]);const g=l("fixed inset-0 z-[10000000001] transition-all duration-300",{"bg-neutral-darker/50 backdrop-blur-sm":s,"bg-transparent pointer-events-none":!s,"hidden invisible absolute inset-0":f&&!h}),k=l("fixed bg-white shadow-2xl transition-all duration-300 ease-out overflow-auto",(()=>{switch(a){case"top":return"top-0 left-0 right-0";case"bottom":default:return"bottom-0 left-0 right-0";case"left":return"top-0 left-0 bottom-0";case"right":return"top-0 right-0 bottom-0"}})(),(()=>{const e="top"===a||"bottom"===a;return u?"w-full h-full":e?"w-full max-h-[90vh]":"h-full max-w-[90vw]"})(),(()=>{if(!s)switch(a){case"top":return"-translate-y-full";case"bottom":default:return"translate-y-full";case"left":return"-translate-x-full";case"right":return"translate-x-full"}return"translate-x-0 translate-y-0"})(),{"rounded-t-2xl":"bottom"===a&&!u,"rounded-b-2xl":"top"===a&&!u,"rounded-r-2xl":"left"===a&&!u,"rounded-l-2xl":"right"===a&&!u,"p-6":!p,"p-4":p},d),E=e.jsx("div",{ref:y,className:g,onClick:e=>{!u&&i&&y.current&&e.target===y.current&&i()},onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||!u&&i&&y.current&&e.target===y.current&&i()},tabIndex:-1,role:"button","aria-label":"Close drawer","aria-hidden":!s,children:e.jsx("div",{ref:m||v,className:k,role:"dialog","aria-modal":"true","aria-label":"Drawer",...b,children:o})});return f||h?f&&!h?E:s?r.createPortal(E,document.body):null:null});o.displayName="Drawer",exports.Drawer=o;
+"use client";"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("react-dom"),n=require("./utils.js"),l=require("./contexts.js");const o=t.forwardRef(({children:o,direction:a="bottom",fullScreen:u=!1,isOpen:s=!1,onClose:i,className:d,isMobile:c,keepMounted:f,zIndex:b,...m},h)=>{const[w,x]=t.useState(!1),p=l.useMobile(),y=c??p,v=t.useRef(null),g=t.useRef(null);t.useEffect(()=>{x(!0)},[]),t.useEffect(()=>{const handleEscape=e=>{"Escape"===e.key&&s&&i&&i()};return s&&(document.addEventListener("keydown",handleEscape),document.body.style.overflow="hidden"),()=>{document.removeEventListener("keydown",handleEscape),document.body.style.overflow="auto"}},[s,i]);const k=n("fixed inset-0 transition-all duration-300",`z-[${b??"10000000001"}]`),E=n(k,{"bg-neutral-darker/50 backdrop-blur-sm":s,"bg-transparent pointer-events-none":!s,"hidden invisible absolute inset-0":f&&!w}),j=n("fixed bg-white shadow-2xl transition-all duration-300 ease-out overflow-auto",(()=>{switch(a){case"top":return"top-0 left-0 right-0";case"bottom":default:return"bottom-0 left-0 right-0";case"left":return"top-0 left-0 bottom-0";case"right":return"top-0 right-0 bottom-0"}})(),(()=>{const e="top"===a||"bottom"===a;return u?"w-full h-full":e?"w-full max-h-[90vh]":"h-full max-w-[90vw]"})(),(()=>{if(!s)switch(a){case"top":return"-translate-y-full";case"bottom":default:return"translate-y-full";case"left":return"-translate-x-full";case"right":return"translate-x-full"}return"translate-x-0 translate-y-0"})(),{"rounded-t-2xl":"bottom"===a&&!u,"rounded-b-2xl":"top"===a&&!u,"rounded-r-2xl":"left"===a&&!u,"rounded-l-2xl":"right"===a&&!u,"p-6":!y,"p-4":y},d),q=e.jsx("div",{ref:v,className:E,onClick:e=>{!u&&i&&v.current&&e.target===v.current&&i()},onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||!u&&i&&v.current&&e.target===v.current&&i()},tabIndex:-1,role:"button","aria-label":"Close drawer","aria-hidden":!s,children:e.jsx("div",{ref:h||g,className:j,role:"dialog","aria-modal":"true","aria-label":"Drawer",...m,children:o})});return f||w?f&&!w?q:s?r.createPortal(q,document.body):null:null});o.displayName="Drawer",exports.Drawer=o;

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 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};
+"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 a}from"./Typography.js";import{C as o}from"./chunks/chevron-left-4HSuTes3.js";import"./chunks/createLucideIcon-DGp0SoUT.js";const l=t.forwardRef(({items:t,className:l,isMobile:s,allowLastItemAsLink:c=!1},m)=>{const p=n(),u=s??p;return e("nav",{ref:m,className:i("flex items-center",u?"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,m=(c||!s)&&!!n.onClick,p=`${n.label}-${l}`,d=n.component??(!c&&s||!n.href?"span":"a"),f=m&&!n.href;return r("li",{className:"flex items-center gap-inherit",children:[e(d,{className:i("whitespace-nowrap text-neutral-main",m?"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:f?"button":void 0,tabIndex:f?0:void 0,"aria-current":s&&!c?"page":void 0,"aria-label":s&&!c?`Current page: ${n.label}`:void 0,title:n.title,href:c||!s?n.href:void 0,onClick:m?e=>((e,r,i)=>{(r!==t.length-1||c)&&e.onClick&&(e.href||i.preventDefault(),e.onClick())})(n,l,e):void 0,onKeyDown:f?e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),n.onClick&&n.onClick())}:void 0,children:e(a,{variant:u?"body-t-medium":"body-s-medium",children:n.label})}),!s&&e(o,{className:i("text-neutral-main flex-shrink-0",u?"w-2.5 h-2.5":"w-3 h-3"),"aria-hidden":"true"})]},p)})})})});l.displayName="Breadcrumb";export{l as Breadcrumb};

package/dist/esm/Drawer.js

@@ -1 +1 @@
-"use client";import{jsx as t}from"react/jsx-runtime";import e,{useState as r,useRef as o,useEffect as n}from"react";import{createPortal as l}from"react-dom";import a from"./utils.js";import{useMobile as i}from"./contexts.js";const s=e.forwardRef(({children:e,direction:s="bottom",fullScreen:u=!1,isOpen:d=!1,onClose:c,className:m,isMobile:f,keepMounted:b,...p},h)=>{const[w,x]=r(!1),y=i(),g=f??y,v=o(null),k=o(null);n(()=>{x(!0)},[]),n(()=>{const handleEscape=t=>{"Escape"===t.key&&d&&c&&c()};return d&&(document.addEventListener("keydown",handleEscape),document.body.style.overflow="hidden"),()=>{document.removeEventListener("keydown",handleEscape),document.body.style.overflow="auto"}},[d,c]);const E=a("fixed inset-0 z-[10000000001] transition-all duration-300",{"bg-neutral-darker/50 backdrop-blur-sm":d,"bg-transparent pointer-events-none":!d,"hidden invisible absolute inset-0":b&&!w}),N=a("fixed bg-white shadow-2xl transition-all duration-300 ease-out overflow-auto",(()=>{switch(s){case"top":return"top-0 left-0 right-0";case"bottom":default:return"bottom-0 left-0 right-0";case"left":return"top-0 left-0 bottom-0";case"right":return"top-0 right-0 bottom-0"}})(),(()=>{const t="top"===s||"bottom"===s;return u?"w-full h-full":t?"w-full max-h-[90vh]":"h-full max-w-[90vw]"})(),(()=>{if(!d)switch(s){case"top":return"-translate-y-full";case"bottom":default:return"translate-y-full";case"left":return"-translate-x-full";case"right":return"translate-x-full"}return"translate-x-0 translate-y-0"})(),{"rounded-t-2xl":"bottom"===s&&!u,"rounded-b-2xl":"top"===s&&!u,"rounded-r-2xl":"left"===s&&!u,"rounded-l-2xl":"right"===s&&!u,"p-6":!g,"p-4":g},m),j=t("div",{ref:v,className:E,onClick:t=>{!u&&c&&v.current&&t.target===v.current&&c()},onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||!u&&c&&v.current&&t.target===v.current&&c()},tabIndex:-1,role:"button","aria-label":"Close drawer","aria-hidden":!d,children:t("div",{ref:h||k,className:N,role:"dialog","aria-modal":"true","aria-label":"Drawer",...p,children:e})});return b||w?b&&!w?j:d?l(j,document.body):null:null});s.displayName="Drawer";export{s as Drawer};
+"use client";import{jsx as e}from"react/jsx-runtime";import t,{useState as r,useRef as o,useEffect as n}from"react";import{createPortal as l}from"react-dom";import a from"./utils.js";import{useMobile as i}from"./contexts.js";const s=t.forwardRef(({children:t,direction:s="bottom",fullScreen:u=!1,isOpen:d=!1,onClose:c,className:m,isMobile:f,keepMounted:b,zIndex:p,...h},w)=>{const[x,y]=r(!1),g=i(),v=f??g,k=o(null),E=o(null);n(()=>{y(!0)},[]),n(()=>{const handleEscape=e=>{"Escape"===e.key&&d&&c&&c()};return d&&(document.addEventListener("keydown",handleEscape),document.body.style.overflow="hidden"),()=>{document.removeEventListener("keydown",handleEscape),document.body.style.overflow="auto"}},[d,c]);const N=a("fixed inset-0 transition-all duration-300",`z-[${p??"10000000001"}]`),j=a(N,{"bg-neutral-darker/50 backdrop-blur-sm":d,"bg-transparent pointer-events-none":!d,"hidden invisible absolute inset-0":b&&!x}),C=a("fixed bg-white shadow-2xl transition-all duration-300 ease-out overflow-auto",(()=>{switch(s){case"top":return"top-0 left-0 right-0";case"bottom":default:return"bottom-0 left-0 right-0";case"left":return"top-0 left-0 bottom-0";case"right":return"top-0 right-0 bottom-0"}})(),(()=>{const e="top"===s||"bottom"===s;return u?"w-full h-full":e?"w-full max-h-[90vh]":"h-full max-w-[90vw]"})(),(()=>{if(!d)switch(s){case"top":return"-translate-y-full";case"bottom":default:return"translate-y-full";case"left":return"-translate-x-full";case"right":return"translate-x-full"}return"translate-x-0 translate-y-0"})(),{"rounded-t-2xl":"bottom"===s&&!u,"rounded-b-2xl":"top"===s&&!u,"rounded-r-2xl":"left"===s&&!u,"rounded-l-2xl":"right"===s&&!u,"p-6":!v,"p-4":v},m),D=e("div",{ref:k,className:j,onClick:e=>{!u&&c&&k.current&&e.target===k.current&&c()},onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||!u&&c&&k.current&&e.target===k.current&&c()},tabIndex:-1,role:"button","aria-label":"Close drawer","aria-hidden":!d,children:e("div",{ref:w||E,className:C,role:"dialog","aria-modal":"true","aria-label":"Drawer",...h,children:t})});return b||x?b&&!x?D:d?l(D,document.body):null:null});s.displayName="Drawer";export{s as Drawer};

package/dist/types/Breadcrumb.js

@@ -6,12 +6,12 @@ import { Typography } from './Typography.js';
 import { C as ChevronLeft } from './chevron-left-Ck6O99eF.js';
 import './createLucideIcon-D-q73LTT.js';
 
-const Breadcrumb = React.forwardRef(({ items, className, isMobile }, ref) => {
+const Breadcrumb = React.forwardRef(({ items, className, isMobile, allowLastItemAsLink = false }, ref) => {
     const detectedIsMobile = useMobile();
     const actualIsMobile = isMobile ?? detectedIsMobile;
     const handleItemClick = (item, index, e) => {
-        // Don't make the last item (current page) clickable
-        if (index === items.length - 1)
+        // Don't make the last item (current page) clickable unless explicitly allowed
+        if (index === items.length - 1 && !allowLastItemAsLink)
             return;
         if (item.onClick) {
             // If there is no href, we fully handle the click
@@ -27,15 +27,18 @@ 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.onClick;
+                const isClickable = (allowLastItemAsLink || !isLast) && !!item.onClick;
                 const itemKey = `${item.label}-${index}`;
-                const ItemElement = item.component ?? (!isLast && item.href ? 'a' : 'span');
+                const ItemElement = item.component ??
+                    ((allowLastItemAsLink || !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
+                            role: isButtonLike ? 'button' : undefined, tabIndex: isButtonLike ? 0 : undefined, "aria-current": isLast && !allowLastItemAsLink ? 'page' : undefined, "aria-label": isLast && !allowLastItemAsLink
+                                ? `Current page: ${item.label}`
+                                : undefined, title: item.title, href: allowLastItemAsLink || !isLast ? item.href : undefined, onClick: isClickable
                                 ? (e) => handleItemClick(item, index, e)
                                 : undefined, onKeyDown: isButtonLike
                                 ? (e) => {

package/dist/types/Drawer.js

@@ -4,7 +4,7 @@ import { createPortal } from 'react-dom';
 import cn from './utils.js';
 import { useMobile } from './contexts.js';
 
-const Drawer = React.forwardRef(({ children, direction = 'bottom', fullScreen = false, isOpen = false, onClose, className, isMobile, keepMounted, ...props }, ref) => {
+const Drawer = React.forwardRef(({ children, direction = 'bottom', fullScreen = false, isOpen = false, onClose, className, isMobile, keepMounted, zIndex, ...props }, ref) => {
     const [isClient, setIsClient] = useState(false);
     const detectedIsMobile = useMobile();
     const actualIsMobile = isMobile ?? detectedIsMobile;
@@ -91,7 +91,10 @@ const Drawer = React.forwardRef(({ children, direction = 'bottom', fullScreen =
         }
         return 'h-full max-w-[90vw]';
     };
-    const baseOverlayClasses = 'fixed inset-0 z-[10000000001] transition-all duration-300';
+    const defaultZIndex = '10000000001';
+    const zIndexValue = zIndex ?? defaultZIndex;
+    const zIndexClass = `z-[${zIndexValue}]`;
+    const baseOverlayClasses = cn('fixed inset-0 transition-all duration-300', zIndexClass);
     const baseDrawerClasses = 'fixed bg-white shadow-2xl transition-all duration-300 ease-out overflow-auto';
     const overlayClasses = cn(baseOverlayClasses, {
         'bg-neutral-darker/50 backdrop-blur-sm': isOpen,

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

@@ -16,6 +16,12 @@ export interface BreadcrumbProps {
      * Whether the component is in mobile mode (optional, auto-detected if not provided)
      */
     isMobile?: boolean;
+    /**
+     * Whether the last item should be allowed to be a link (default: false)
+     * When true, the last item can be clickable if it has onClick or href
+     * When false, the last item is always non-clickable (current page behavior)
+     */
+    allowLastItemAsLink?: boolean;
 }
 declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;
 export { Breadcrumb };

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

@@ -33,6 +33,13 @@ declare const _default: {
             };
             description: string;
         };
+        allowLastItemAsLink: {
+            name: string;
+            control: {
+                type: string;
+            };
+            description: string;
+        };
     };
     args: {
         items: ({
@@ -47,6 +54,7 @@ declare const _default: {
             onClick?: undefined;
         })[];
         isMobile: boolean;
+        allowLastItemAsLink: boolean;
     };
 };
 export default _default;
@@ -220,3 +228,31 @@ export declare const WithCustomComponent: {
         })[];
     };
 };
+export declare const LastItemAsLink: {
+    (args: StoryArgs): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+    args: {
+        allowLastItemAsLink: boolean;
+        items: {
+            label: string;
+            href: string;
+            onClick: () => void;
+        }[];
+    };
+};
+export declare const LastItemWithoutLink: {
+    (args: StoryArgs): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+    args: {
+        allowLastItemAsLink: boolean;
+        items: {
+            label: string;
+            href: string;
+            onClick: () => void;
+        }[];
+    };
+};
+export declare const LastItemLinkComparison: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};

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

@@ -16,6 +16,10 @@ export type DrawerProps = {
      * This allows SSR rendering but keeps it visually hidden until opened.
      */
     keepMounted?: boolean;
+    /**
+     * Custom z-index value for the overlay. Defaults to 10000000001.
+     */
+    zIndex?: number | string;
 };
 declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
 export { Drawer };

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

@@ -47,6 +47,13 @@ declare const _default: {
             };
             description: string;
         };
+        zIndex: {
+            name: string;
+            control: {
+                type: string;
+            };
+            description: string;
+        };
         children: {
             table: {
                 disable: boolean;

package/package.json

@@ -1,176 +1,176 @@
-{
-  "name": "automoby-kit",
-  "version": "1.0.69",
-  "description": "A comprehensive React UI component library - created in war 2025",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "exports": {
-    ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js",
-      "types": "./dist/types/index.d.ts"
-    },
-    "./Typography": {
-      "import": "./dist/esm/Typography.js",
-      "require": "./dist/cjs/Typography.js",
-      "types": "./dist/types/components/Typography/Typography.d.ts"
-    },
-    "./Button": {
-      "import": "./dist/esm/Button.js",
-      "require": "./dist/cjs/Button.js",
-      "types": "./dist/types/components/Button/Button.d.ts"
-    },
-    "./Input": {
-      "import": "./dist/esm/Input.js",
-      "require": "./dist/cjs/Input.js",
-      "types": "./dist/types/components/Input/Input.d.ts"
-    },
-    "./Tabs": {
-      "import": "./dist/esm/Tabs.js",
-      "require": "./dist/cjs/Tabs.js",
-      "types": "./dist/types/components/Tabs/Tabs.d.ts"
-    },
-    "./Drawer": {
-      "import": "./dist/esm/Drawer.js",
-      "require": "./dist/cjs/Drawer.js",
-      "types": "./dist/types/components/Drawer/Drawer.d.ts"
-    },
-    "./Backdrop": {
-      "import": "./dist/esm/Backdrop.js",
-      "require": "./dist/cjs/Backdrop.js",
-      "types": "./dist/types/components/Backdrop/Backdrop.d.ts"
-    },
-    "./Breadcrumb": {
-      "import": "./dist/esm/Breadcrumb.js",
-      "require": "./dist/cjs/Breadcrumb.js",
-      "types": "./dist/types/components/Breadcrumb/Breadcrumb.d.ts"
-    },
-    "./Pagination": {
-      "import": "./dist/esm/Pagination.js",
-      "require": "./dist/cjs/Pagination.js",
-      "types": "./dist/types/components/Pagination/Pagination.d.ts"
-    },
-    "./Accordion": {
-      "import": "./dist/esm/Accordion.js",
-      "require": "./dist/cjs/Accordion.js",
-      "types": "./dist/types/components/Accordion/Accordion.d.ts"
-    },
-    "./Divider": {
-      "import": "./dist/esm/Divider.js",
-      "require": "./dist/cjs/Divider.js",
-      "types": "./dist/types/components/Divider/Divider.d.ts"
-    },
-    "./RadioGroup": {
-      "import": "./dist/esm/RadioGroup.js",
-      "require": "./dist/cjs/RadioGroup.js",
-      "types": "./dist/types/components/RadioGroup/RadioGroup.d.ts"
-    },
-    "./Chips": {
-      "import": "./dist/esm/Chips.js",
-      "require": "./dist/cjs/Chips.js",
-      "types": "./dist/types/components/Chips/Chips.d.ts"
-    },
-    "./Menu": {
-      "import": "./dist/esm/Menu.js",
-      "require": "./dist/cjs/Menu.js",
-      "types": "./dist/types/components/Menu/Menu.d.ts"
-    },
-    "./contexts": {
-      "import": "./dist/esm/contexts.js",
-      "require": "./dist/cjs/contexts.js",
-      "types": "./dist/types/contexts/index.d.ts"
-    },
-    "./utils": {
-      "import": "./dist/esm/utils.js",
-      "require": "./dist/cjs/utils.js",
-      "types": "./dist/types/utils/cn.d.ts"
-    }
-  },
-  "keywords": [
-    "react",
-    "ui",
-    "components",
-    "typescript",
-    "tailwind",
-    "kit"
-  ],
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "lint": "eslint \"src/**/*.{js,ts,jsx,tsx}\" --fix",
-    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
-    "check-format": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
-    "check-lint": "eslint \"src/**/*.{js,ts,jsx,tsx}\"",
-    "check-types": "tsc --noEmit",
-    "prepare": "husky",
-    "prepublishOnly": "npm run build",
-    "storybook": "storybook dev -p 6006",
-    "storybook:dev": "concurrently \"npm:build:storybook:css:watch\" \"cross-env STORYBOOK_FORCE_MOBILE=true storybook dev -p 6006 \"",
-    "storybook:dev:mobile": "concurrently \"npm:build:storybook:css:watch\" \"cross-env STORYBOOK_FORCE_MOBILE=true storybook dev -p 6006 \"",
-    "storybook:dev:desktop": "concurrently \"npm:build:storybook:css:watch\" \"cross-env STORYBOOK_FORCE_MOBILE=false storybook dev -p 6006 \"",
-    "build-storybook": "storybook build",
-    "build:storybook:css:watch": "npx @tailwindcss/cli -i ./.storybook/tailwind.css -o ./tailwind-build/tailwind.build.css --watch",
-    "build:storybook:css": "npx @tailwindcss/cli -i ./.storybook/tailwind.css -o ./tailwind-build/tailwind.build.css",
-    "clean": "rimraf dist",
-    "build": "npm run clean && rollup -c"
-  },
-  "author": "Ghazal_kordi Alireza_mirzaee",
-  "license": "ISC",
-  "peerDependencies": {
-    "clsx": "^2.1.1",
-    "lucide-react": "^0.522.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "tailwindcss": "^4.1.10",
-    "typescript": "^5.8.3",
-    "ua-parser-js": "^2.0.4"
-  },
-  "devDependencies": {
-    "@rollup/plugin-alias": "^5.1.1",
-    "@rollup/plugin-commonjs": "^28.0.6",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^12.1.3",
-    "@storybook/addon-docs": "^9.0.6",
-    "@storybook/addon-onboarding": "^9.0.6",
-    "@storybook/react-vite": "^9.0.6",
-    "@tailwindcss/cli": "^4.1.10",
-    "@tailwindcss/postcss": "^4.1.10",
-    "@types/node": "^24.0.3",
-    "@types/react": "^19.1.4",
-    "@types/react-dom": "^19.1.5",
-    "@types/ua-parser-js": "^0.7.39",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
-    "autoprefixer": "^10.4.21",
-    "clsx": "^2.1.1",
-    "concurrently": "^9.2.0",
-    "cross-env": "^7.0.3",
-    "eslint": "^8.57.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "^18.0.0",
-    "eslint-config-prettier": "^10.1.5",
-    "eslint-import-resolver-typescript": "^4.4.3",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "^5.5.0",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-storybook": "^9.0.6",
-    "husky": "^9.1.7",
-    "lucide-react": "^0.522.0",
-    "prettier": "^3.5.3",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "rimraf": "^6.0.1",
-    "rollup": "^4.44.0",
-    "serve": "^14.2.4",
-    "storybook": "^9.0.6",
-    "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.10",
-    "typescript": "^5.8.3",
-    "ua-parser-js": "^2.0.4"
-  }
-}
+{
+  "name": "automoby-kit",
+  "version": "1.0.71",
+  "description": "A comprehensive React UI component library - created in war 2025",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./Typography": {
+      "import": "./dist/esm/Typography.js",
+      "require": "./dist/cjs/Typography.js",
+      "types": "./dist/types/components/Typography/Typography.d.ts"
+    },
+    "./Button": {
+      "import": "./dist/esm/Button.js",
+      "require": "./dist/cjs/Button.js",
+      "types": "./dist/types/components/Button/Button.d.ts"
+    },
+    "./Input": {
+      "import": "./dist/esm/Input.js",
+      "require": "./dist/cjs/Input.js",
+      "types": "./dist/types/components/Input/Input.d.ts"
+    },
+    "./Tabs": {
+      "import": "./dist/esm/Tabs.js",
+      "require": "./dist/cjs/Tabs.js",
+      "types": "./dist/types/components/Tabs/Tabs.d.ts"
+    },
+    "./Drawer": {
+      "import": "./dist/esm/Drawer.js",
+      "require": "./dist/cjs/Drawer.js",
+      "types": "./dist/types/components/Drawer/Drawer.d.ts"
+    },
+    "./Backdrop": {
+      "import": "./dist/esm/Backdrop.js",
+      "require": "./dist/cjs/Backdrop.js",
+      "types": "./dist/types/components/Backdrop/Backdrop.d.ts"
+    },
+    "./Breadcrumb": {
+      "import": "./dist/esm/Breadcrumb.js",
+      "require": "./dist/cjs/Breadcrumb.js",
+      "types": "./dist/types/components/Breadcrumb/Breadcrumb.d.ts"
+    },
+    "./Pagination": {
+      "import": "./dist/esm/Pagination.js",
+      "require": "./dist/cjs/Pagination.js",
+      "types": "./dist/types/components/Pagination/Pagination.d.ts"
+    },
+    "./Accordion": {
+      "import": "./dist/esm/Accordion.js",
+      "require": "./dist/cjs/Accordion.js",
+      "types": "./dist/types/components/Accordion/Accordion.d.ts"
+    },
+    "./Divider": {
+      "import": "./dist/esm/Divider.js",
+      "require": "./dist/cjs/Divider.js",
+      "types": "./dist/types/components/Divider/Divider.d.ts"
+    },
+    "./RadioGroup": {
+      "import": "./dist/esm/RadioGroup.js",
+      "require": "./dist/cjs/RadioGroup.js",
+      "types": "./dist/types/components/RadioGroup/RadioGroup.d.ts"
+    },
+    "./Chips": {
+      "import": "./dist/esm/Chips.js",
+      "require": "./dist/cjs/Chips.js",
+      "types": "./dist/types/components/Chips/Chips.d.ts"
+    },
+    "./Menu": {
+      "import": "./dist/esm/Menu.js",
+      "require": "./dist/cjs/Menu.js",
+      "types": "./dist/types/components/Menu/Menu.d.ts"
+    },
+    "./contexts": {
+      "import": "./dist/esm/contexts.js",
+      "require": "./dist/cjs/contexts.js",
+      "types": "./dist/types/contexts/index.d.ts"
+    },
+    "./utils": {
+      "import": "./dist/esm/utils.js",
+      "require": "./dist/cjs/utils.js",
+      "types": "./dist/types/utils/cn.d.ts"
+    }
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "typescript",
+    "tailwind",
+    "kit"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "eslint \"src/**/*.{js,ts,jsx,tsx}\" --fix",
+    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
+    "check-format": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
+    "check-lint": "eslint \"src/**/*.{js,ts,jsx,tsx}\"",
+    "check-types": "tsc --noEmit",
+    "prepare": "husky",
+    "prepublishOnly": "npm run build",
+    "storybook": "storybook dev -p 6006",
+    "storybook:dev": "concurrently \"npm:build:storybook:css:watch\" \"cross-env STORYBOOK_FORCE_MOBILE=true storybook dev -p 6006 \"",
+    "storybook:dev:mobile": "concurrently \"npm:build:storybook:css:watch\" \"cross-env STORYBOOK_FORCE_MOBILE=true storybook dev -p 6006 \"",
+    "storybook:dev:desktop": "concurrently \"npm:build:storybook:css:watch\" \"cross-env STORYBOOK_FORCE_MOBILE=false storybook dev -p 6006 \"",
+    "build-storybook": "storybook build",
+    "build:storybook:css:watch": "npx @tailwindcss/cli -i ./.storybook/tailwind.css -o ./tailwind-build/tailwind.build.css --watch",
+    "build:storybook:css": "npx @tailwindcss/cli -i ./.storybook/tailwind.css -o ./tailwind-build/tailwind.build.css",
+    "clean": "rimraf dist",
+    "build": "npm run clean && rollup -c"
+  },
+  "author": "Ghazal_kordi Alireza_mirzaee",
+  "license": "ISC",
+  "peerDependencies": {
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.522.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tailwindcss": "^4.1.10",
+    "typescript": "^5.8.3",
+    "ua-parser-js": "^2.0.4"
+  },
+  "devDependencies": {
+    "@rollup/plugin-alias": "^5.1.1",
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.3",
+    "@storybook/addon-docs": "^9.0.6",
+    "@storybook/addon-onboarding": "^9.0.6",
+    "@storybook/react-vite": "^9.0.6",
+    "@tailwindcss/cli": "^4.1.10",
+    "@tailwindcss/postcss": "^4.1.10",
+    "@types/node": "^24.0.3",
+    "@types/react": "^19.1.4",
+    "@types/react-dom": "^19.1.5",
+    "@types/ua-parser-js": "^0.7.39",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "autoprefixer": "^10.4.21",
+    "clsx": "^2.1.1",
+    "concurrently": "^9.2.0",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.57.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^18.0.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-import-resolver-typescript": "^4.4.3",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.5.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-storybook": "^9.0.6",
+    "husky": "^9.1.7",
+    "lucide-react": "^0.522.0",
+    "prettier": "^3.5.3",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.44.0",
+    "serve": "^14.2.4",
+    "storybook": "^9.0.6",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.1.10",
+    "typescript": "^5.8.3",
+    "ua-parser-js": "^2.0.4"
+  }
+}