automoby-kit 1.0.32 → 1.0.34

package/README.md

@@ -1,100 +1,100 @@
-# Automoby Kit
-
-A comprehensive React UI component library - created in war 2025.
-
-## 🚀 Installation
-
-```bash
-npm install automoby-kit
-```
-
-## 📦 Usage
-
-```typescript
-import { 
-  Button, 
-  Typography, 
-  Input, 
-  Tabs
-} 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>
-  );
-}
-```
-
-## 🧩 Available Components
-
-- **Typography** - Text rendering with various styles
-- **Button** - Interactive buttons with multiple variants
-- **Input** - Form input fields
-- **Tabs** - Tabbed interfaces
-- **Drawer** - Slide-out panels
-- **Backdrop** - Modal overlays
-- **Breadcrumb** - Navigation breadcrumbs
-- **Pagination** - Page navigation
-- **Accordion** - Collapsible content sections
-- **Divider** - Visual separators
-- **RadioGroup** - Radio button groups
-- **Chips** - Tag-like elements
-- **Menu** - Context menus and dropdowns
-
-## 🏗️ TypeScript Support
-
-All components come with full TypeScript support:
-
-```typescript
-import { ButtonProps, TypographyVariant } from 'automoby-kit';
-
-const MyButton: React.FC<ButtonProps> = (props) => {
-  return <Button {...props} />;
-};
-```
-
-## 📱 Mobile Context
-
-The library includes a mobile detection context:
-
-```typescript
-import { MobileProvider } from 'automoby-kit';
-
-function App() {
-  return (
-    <MobileProvider userAgent={navigator.userAgent}>
-      <MyComponent />
-    </MobileProvider>
-  );
-}
-```
-
-## 🛠️ Development
-
-This package requires the following peer dependencies:
-
-```json
-{
-  "react": "^19.1.0",
-  "react-dom": "^19.1.0",
-  "clsx": "^2.1.1",
-  "tailwindcss": "^4.1.10"
-}
-```
-
-## 🆘 Support
-
-If you have issues:
-
-1. Check the [GitHub issues](https://github.com/yourusername/automoby-kit/issues) for known problems
-2. Submit a new issue with detailed information about your problem
-
-## 🔄 Version History
-
+# Automoby Kit
+
+A comprehensive React UI component library - created in war 2025.
+
+## 🚀 Installation
+
+```bash
+npm install automoby-kit
+```
+
+## 📦 Usage
+
+```typescript
+import { 
+  Button, 
+  Typography, 
+  Input, 
+  Tabs
+} 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>
+  );
+}
+```
+
+## 🧩 Available Components
+
+- **Typography** - Text rendering with various styles
+- **Button** - Interactive buttons with multiple variants
+- **Input** - Form input fields
+- **Tabs** - Tabbed interfaces
+- **Drawer** - Slide-out panels
+- **Backdrop** - Modal overlays
+- **Breadcrumb** - Navigation breadcrumbs
+- **Pagination** - Page navigation
+- **Accordion** - Collapsible content sections
+- **Divider** - Visual separators
+- **RadioGroup** - Radio button groups
+- **Chips** - Tag-like elements
+- **Menu** - Context menus and dropdowns
+
+## 🏗️ TypeScript Support
+
+All components come with full TypeScript support:
+
+```typescript
+import { ButtonProps, TypographyVariant } from 'automoby-kit';
+
+const MyButton: React.FC<ButtonProps> = (props) => {
+  return <Button {...props} />;
+};
+```
+
+## 📱 Mobile Context
+
+The library includes a mobile detection context:
+
+```typescript
+import { MobileProvider } from 'automoby-kit';
+
+function App() {
+  return (
+    <MobileProvider userAgent={navigator.userAgent}>
+      <MyComponent />
+    </MobileProvider>
+  );
+}
+```
+
+## 🛠️ Development
+
+This package requires the following peer dependencies:
+
+```json
+{
+  "react": "^19.1.0",
+  "react-dom": "^19.1.0",
+  "clsx": "^2.1.1",
+  "tailwindcss": "^4.1.10"
+}
+```
+
+## 🆘 Support
+
+If you have issues:
+
+1. Check the [GitHub issues](https://github.com/yourusername/automoby-kit/issues) for known problems
+2. Submit a new issue with detailed information about your problem
+
+## 🔄 Version History
+
 - **1.0.0** - Initial release 

package/dist/cjs/Input.js

@@ -1 +1 @@
-"use client";"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("./utils.js"),l=require("./contexts.js");const a=t.forwardRef(({state:a="default",label:n,value:i,onChange:s,helperText:o,startIcon:u,endIcon:d,type:x="text",isMobile:p,...h},m)=>{const[c,f]=t.useState(!1),g=t.useId(),b=l.useMobile(),j=p??b,w=c||""!==i&&null!=i,y="disabled"===a,v=r("relative flex items-center border rounded-lg transition-all duration-300 w-[360px]",{"h-[54px]":!j,"h-12":j,"border-neutral-light":"default"===a&&!c,"border-primary":"default"===a&&c,"border-error":"error"===a,"bg-white border-neutral-light cursor-not-allowed":y}),N=r("absolute pointer-events-none transition-all duration-300",{"top-[-10px] bg-white px-1 mx-3 font-medium":w,"text-s":!j&&w||j&&!w,"text-xs":j&&w,"text-m":!j&&!w,"right-1":u,"right-3":!u,"top-1/2 -translate-y-1/2 text-m font-medium":!w,"right-11":!w&&u,"right-4":!w&&!u,"text-neutral-main":!c&&"default"===a,"text-neutral-light":y,"text-primary":c&&"default"===a,"text-error":w&&"error"===a}),I=r("peer w-full h-full bg-transparent outline-none text-m font-medium disabled:text-neutral-light",{"pr-12":u,"pl-12":d,"px-4":!u&&!d,"pr-4 pl-12":!u&&d,"pl-4 pr-12":u&&!d,"cursor-not-allowed text-red-500":y,"text-neutral-dark":!c,"text-neutral-darker":c}),q=r("absolute h-5 w-5 transition-colors duration-300",{"text-neutral-main":"error"!==a&&!c,"text-primary":"default"===a&&c,"text-error":"error"===a,"text-neutral-light":y}),F=r("font-light mt-1 px-2 h-4",{"text-s":!j,"text-xs":j,"text-neutral-main":"default"===a,"text-primary":"default"===a&&c,"text-error":"error"===a,"text-neutral-light":y});return e.jsxs("div",{children:[e.jsxs("div",{className:v,children:[d&&e.jsx("span",{className:r(q,"left-4"),children:d}),e.jsx("label",{htmlFor:g,className:N,children:n}),e.jsx("input",{ref:m,id:g,type:x,value:i,onChange:s,onFocus:e=>{y||(f(!0),h.onFocus?.(e))},onBlur:e=>{y||(f(!1),h.onBlur?.(e))},disabled:y,className:I,...h}),u&&e.jsx("span",{className:r(q,"right-4"),children:u})]}),o&&e.jsx("p",{className:F,children:o})]})});a.displayName="Input",exports.Input=a;
+"use client";"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("./utils.js"),l=require("./contexts.js");const a=t.forwardRef(({state:a="default",label:n,value:i,onChange:o,helperText:s,startIcon:u,endIcon:d,type:x="text",placeholder:h,isMobile:p,...c},m)=>{const[f,g]=t.useState(!1),b=t.useId(),j=l.useMobile(),v=p??j,w=f||""!==i&&null!=i,y="disabled"===a,N=r("relative flex items-center border rounded-lg transition-all duration-300 w-90",{"h-14":!v,"h-12":v,"border-neutral-light":"default"===a&&!f,"border-primary":"default"===a&&f,"border-error":"error"===a,"bg-white border-neutral-light cursor-not-allowed":y}),I=r("absolute pointer-events-none transition-all duration-300",{"-top-2.5 bg-white px-1 mx-3 font-medium":w,"text-s":!v&&w||v&&!w,"text-xs":v&&w,"text-m":!v&&!w,"right-1":u,"right-3":!u,"top-1/2 -translate-y-1/2 text-m font-medium":!w,"right-11":!w&&u,"right-4":!w&&!u,"text-neutral-main":!f&&"default"===a,"text-neutral-light":y,"text-primary":f&&"default"===a,"text-error":w&&"error"===a}),q=r("peer w-full h-full bg-transparent outline-none text-m font-medium disabled:text-neutral-light",{"pr-12":u,"pl-12":d,"px-4":!u&&!d,"pr-4 pl-12":!u&&d,"pl-4 pr-12":u&&!d,"cursor-not-allowed text-red-500":y,"text-neutral-dark":!f,"text-neutral-darker":f}),F=r("absolute h-5 w-5 transition-colors duration-300",{"text-neutral-main":"error"!==a&&!f,"text-primary":"default"===a&&f,"text-error":"error"===a,"text-neutral-light":y}),k=r("font-light mt-1 px-2 h-4",{"text-s":!v,"text-xs":v,"text-neutral-main":"default"===a,"text-primary":"default"===a&&f,"text-error":"error"===a,"text-neutral-light":y}),B=h&&!f?void 0:h;return e.jsxs("div",{children:[e.jsxs("div",{className:N,children:[d&&e.jsx("span",{className:r(F,"left-4"),children:d}),e.jsx("label",{htmlFor:b,className:I,children:n}),e.jsx("input",{ref:m,id:b,type:x,value:i,onChange:o,onFocus:e=>{y||(g(!0),c.onFocus?.(e))},onBlur:e=>{y||(g(!1),c.onBlur?.(e))},disabled:y,placeholder:B,className:q,...c}),u&&e.jsx("span",{className:r(F,"right-4"),children:u})]}),s&&e.jsx("p",{className:k,children:s})]})});a.displayName="Input",exports.Input=a;

package/dist/esm/Input.js

@@ -1 +1 @@
-"use client";import{jsxs as t,jsx as e}from"react/jsx-runtime";import r,{useState as l,useId as a}from"react";import n from"./utils.js";import{useMobile as o}from"./contexts.js";const i=r.forwardRef(({state:r="default",label:i,value:s,onChange:u,helperText:d,startIcon:x,endIcon:m,type:p="text",isMobile:h,...c},f)=>{const[g,b]=l(!1),w=a(),y=o(),N=h??y,v=g||""!==s&&null!=s,j="disabled"===r,F=n("relative flex items-center border rounded-lg transition-all duration-300 w-[360px]",{"h-[54px]":!N,"h-12":N,"border-neutral-light":"default"===r&&!g,"border-primary":"default"===r&&g,"border-error":"error"===r,"bg-white border-neutral-light cursor-not-allowed":j}),I=n("absolute pointer-events-none transition-all duration-300",{"top-[-10px] bg-white px-1 mx-3 font-medium":v,"text-s":!N&&v||N&&!v,"text-xs":N&&v,"text-m":!N&&!v,"right-1":x,"right-3":!x,"top-1/2 -translate-y-1/2 text-m font-medium":!v,"right-11":!v&&x,"right-4":!v&&!x,"text-neutral-main":!g&&"default"===r,"text-neutral-light":j,"text-primary":g&&"default"===r,"text-error":v&&"error"===r}),k=n("peer w-full h-full bg-transparent outline-none text-m font-medium disabled:text-neutral-light",{"pr-12":x,"pl-12":m,"px-4":!x&&!m,"pr-4 pl-12":!x&&m,"pl-4 pr-12":x&&!m,"cursor-not-allowed text-red-500":j,"text-neutral-dark":!g,"text-neutral-darker":g}),B=n("absolute h-5 w-5 transition-colors duration-300",{"text-neutral-main":"error"!==r&&!g,"text-primary":"default"===r&&g,"text-error":"error"===r,"text-neutral-light":j}),C=n("font-light mt-1 px-2 h-4",{"text-s":!N,"text-xs":N,"text-neutral-main":"default"===r,"text-primary":"default"===r&&g,"text-error":"error"===r,"text-neutral-light":j});return t("div",{children:[t("div",{className:F,children:[m&&e("span",{className:n(B,"left-4"),children:m}),e("label",{htmlFor:w,className:I,children:i}),e("input",{ref:f,id:w,type:p,value:s,onChange:u,onFocus:t=>{j||(b(!0),c.onFocus?.(t))},onBlur:t=>{j||(b(!1),c.onBlur?.(t))},disabled:j,className:k,...c}),x&&e("span",{className:n(B,"right-4"),children:x})]}),d&&e("p",{className:C,children:d})]})});i.displayName="Input";export{i as Input};
+"use client";import{jsxs as t,jsx as e}from"react/jsx-runtime";import r,{useState as l,useId as a}from"react";import n from"./utils.js";import{useMobile as o}from"./contexts.js";const i=r.forwardRef(({state:r="default",label:i,value:d,onChange:s,helperText:u,startIcon:m,endIcon:x,type:p="text",placeholder:h,isMobile:c,...f},g)=>{const[b,w]=l(!1),y=a(),v=o(),N=c??v,j=b||""!==d&&null!=d,F="disabled"===r,I=n("relative flex items-center border rounded-lg transition-all duration-300 w-90",{"h-14":!N,"h-12":N,"border-neutral-light":"default"===r&&!b,"border-primary":"default"===r&&b,"border-error":"error"===r,"bg-white border-neutral-light cursor-not-allowed":F}),k=n("absolute pointer-events-none transition-all duration-300",{"-top-2.5 bg-white px-1 mx-3 font-medium":j,"text-s":!N&&j||N&&!j,"text-xs":N&&j,"text-m":!N&&!j,"right-1":m,"right-3":!m,"top-1/2 -translate-y-1/2 text-m font-medium":!j,"right-11":!j&&m,"right-4":!j&&!m,"text-neutral-main":!b&&"default"===r,"text-neutral-light":F,"text-primary":b&&"default"===r,"text-error":j&&"error"===r}),B=n("peer w-full h-full bg-transparent outline-none text-m font-medium disabled:text-neutral-light",{"pr-12":m,"pl-12":x,"px-4":!m&&!x,"pr-4 pl-12":!m&&x,"pl-4 pr-12":m&&!x,"cursor-not-allowed text-red-500":F,"text-neutral-dark":!b,"text-neutral-darker":b}),C=n("absolute h-5 w-5 transition-colors duration-300",{"text-neutral-main":"error"!==r&&!b,"text-primary":"default"===r&&b,"text-error":"error"===r,"text-neutral-light":F}),M=n("font-light mt-1 px-2 h-4",{"text-s":!N,"text-xs":N,"text-neutral-main":"default"===r,"text-primary":"default"===r&&b,"text-error":"error"===r,"text-neutral-light":F}),R=h&&!b?void 0:h;return t("div",{children:[t("div",{className:I,children:[x&&e("span",{className:n(C,"left-4"),children:x}),e("label",{htmlFor:y,className:k,children:i}),e("input",{ref:g,id:y,type:p,value:d,onChange:s,onFocus:t=>{F||(w(!0),f.onFocus?.(t))},onBlur:t=>{F||(w(!1),f.onBlur?.(t))},disabled:F,placeholder:R,className:B,...f}),m&&e("span",{className:n(C,"right-4"),children:m})]}),u&&e("p",{className:M,children:u})]})});i.displayName="Input";export{i as Input};

package/dist/types/Input.js

@@ -3,7 +3,7 @@ import React, { useState, useId } from 'react';
 import cn from './utils.js';
 import { useMobile } from './contexts.js';
 
-const Input = React.forwardRef(({ state = 'default', label, value, onChange, helperText, startIcon, endIcon, type = 'text', isMobile, ...props }, ref) => {
+const Input = React.forwardRef(({ state = 'default', label, value, onChange, helperText, startIcon, endIcon, type = 'text', placeholder, isMobile, ...props }, ref) => {
     const [isFocused, setIsFocused] = useState(false);
     const id = useId();
     const detectedIsMobile = useMobile();
@@ -23,12 +23,12 @@ const Input = React.forwardRef(({ state = 'default', label, value, onChange, hel
             props.onBlur?.(e);
         }
     };
-    const baseContainerClasses = 'relative flex items-center border rounded-lg transition-all duration-300 w-[360px]';
+    const baseContainerClasses = 'relative flex items-center border rounded-lg transition-all duration-300 w-90';
     const baseLabelClasses = 'absolute pointer-events-none transition-all duration-300';
     const baseInputClasses = 'peer w-full h-full bg-transparent outline-none text-m font-medium disabled:text-neutral-light';
     const baseIconClasses = 'absolute h-5 w-5 transition-colors duration-300';
     const containerClasses = cn(baseContainerClasses, {
-        'h-[54px]': !actualIsMobile,
+        'h-14': !actualIsMobile,
         'h-12': actualIsMobile,
         'border-neutral-light': state === 'default' && !isFocused,
         'border-primary': state === 'default' && isFocused,
@@ -36,7 +36,7 @@ const Input = React.forwardRef(({ state = 'default', label, value, onChange, hel
         'bg-white border-neutral-light cursor-not-allowed': isDisabled,
     });
     const labelClasses = cn(baseLabelClasses, {
-        'top-[-10px] bg-white px-1 mx-3 font-medium': isLabelFloated,
+        '-top-2.5 bg-white px-1 mx-3 font-medium': isLabelFloated,
         'text-s': (!actualIsMobile && isLabelFloated) ||
             (actualIsMobile && !isLabelFloated),
         'text-xs': actualIsMobile && isLabelFloated,
@@ -75,7 +75,9 @@ const Input = React.forwardRef(({ state = 'default', label, value, onChange, hel
         'text-error': state === 'error',
         'text-neutral-light': isDisabled,
     });
-    return (jsxs("div", { children: [jsxs("div", { className: containerClasses, children: [endIcon && (jsx("span", { className: cn(iconClasses, 'left-4'), children: endIcon })), jsx("label", { htmlFor: id, className: labelClasses, children: label }), jsx("input", { ref: ref, id: id, type: type, value: value, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur, disabled: isDisabled, className: inputClasses, ...props }), startIcon && (jsx("span", { className: cn(iconClasses, 'right-4'), children: startIcon }))] }), helperText && jsx("p", { className: helperTextClasses, children: helperText })] }));
+    // If both label and placeholder are provided, hide placeholder when not focused
+    const computedPlaceholder = placeholder && !isFocused ? undefined : placeholder;
+    return (jsxs("div", { children: [jsxs("div", { className: containerClasses, children: [endIcon && (jsx("span", { className: cn(iconClasses, 'left-4'), children: endIcon })), jsx("label", { htmlFor: id, className: labelClasses, children: label }), jsx("input", { ref: ref, id: id, type: type, value: value, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur, disabled: isDisabled, placeholder: computedPlaceholder, className: inputClasses, ...props }), startIcon && (jsx("span", { className: cn(iconClasses, 'right-4'), children: startIcon }))] }), helperText && jsx("p", { className: helperTextClasses, children: helperText })] }));
 });
 Input.displayName = 'Input';
 

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

@@ -51,6 +51,12 @@ declare const _default: {
                 type: string;
             };
         };
+        placeholder: {
+            name: string;
+            control: {
+                type: string;
+            };
+        };
         startIcon: {
             table: {
                 disable: boolean;
@@ -83,6 +89,7 @@ export declare const Default: {
         initialValue: string;
         helperText: string;
         isMobile: boolean;
+        placeholder: string;
     };
 };
 export declare const ErrorState: {
@@ -94,6 +101,7 @@ export declare const ErrorState: {
         initialValue: string;
         helperText: string;
         isMobile: boolean;
+        placeholder: string;
     };
 };
 export declare const DisabledState: {
@@ -105,6 +113,7 @@ export declare const DisabledState: {
         helperText: string;
         initialValue: string;
         isMobile: boolean;
+        placeholder: string;
     };
 };
 export declare const WithIcons: {
@@ -116,6 +125,7 @@ export declare const WithIcons: {
         initialValue: string;
         helperText: string;
         isMobile: boolean;
+        placeholder: string;
     };
 };
 export declare const MobileVersion: {
@@ -127,5 +137,18 @@ export declare const MobileVersion: {
         helperText: string;
         state: string;
         initialValue: string;
+        placeholder: string;
+    };
+};
+export declare const WithLabelAndPlaceholder: {
+    (args: StoryArgs): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+    args: {
+        state: string;
+        label: string;
+        initialValue: string;
+        helperText: string;
+        isMobile: boolean;
+        placeholder: string;
     };
 };

package/package.json

@@ -1,176 +1,176 @@
-{
-  "name": "automoby-kit",
-  "version": "1.0.32",
-  "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.34",
+  "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"
+  }
+}