automoby-kit 1.0.52 → 1.0.54

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/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-1000 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"),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-70 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;

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: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;
+"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",placeholder:h,isMobile:p,containerClassName:c,...m},f)=>{const[g,b]=t.useState(!1),j=t.useId(),v=l.useMobile(),w=p??v,y=g||""!==i&&null!=i,N="disabled"===a,I=r("relative flex items-center border rounded-lg transition-all duration-300 w-90",{"h-14":!w,"h-12":w,"border-neutral-light":"default"===a&&!g,"border-primary":"default"===a&&g,"border-error":"error"===a,"bg-white border-neutral-light cursor-not-allowed":N},c),q=r("absolute pointer-events-none transition-all duration-300",{"-top-2.5 bg-white px-1 mx-3 font-medium":y,"text-s":!w&&y||w&&!y,"text-xs":w&&y,"text-m":!w&&!y,"right-1":u,"right-3":!u,"top-1/2 -translate-y-1/2 text-m font-medium":!y,"right-11":!y&&u,"right-4":!y&&!u,"text-neutral-main":!g&&"default"===a,"text-neutral-light":N,"text-primary":g&&"default"===a,"text-error":y&&"error"===a}),C=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":N,"text-neutral-dark":!g,"text-neutral-darker":g}),F=r("absolute h-5 w-5 transition-colors duration-300",{"text-neutral-main":"error"!==a&&!g,"text-primary":"default"===a&&g,"text-error":"error"===a,"text-neutral-light":N}),k=r("font-light mt-1 px-2 h-4",{"text-s":!w,"text-xs":w,"text-neutral-main":"default"===a,"text-primary":"default"===a&&g,"text-error":"error"===a,"text-neutral-light":N}),B=h&&!g?void 0:h;return e.jsxs("div",{children:[e.jsxs("div",{className:I,children:[d&&e.jsx("span",{className:r(F,"left-4"),children:d}),e.jsx("label",{htmlFor:j,className:q,children:n}),e.jsx("input",{ref:f,id:j,type:x,value:i,onChange:s,onFocus:e=>{N||(b(!0),m.onFocus?.(e))},onBlur:e=>{N||(b(!1),m.onBlur?.(e))},disabled:N,placeholder:B,className:C,...m}),u&&e.jsx("span",{className:r(F,"right-4"),children:u})]}),o&&e.jsx("p",{className:k,children:o})]})});a.displayName="Input",exports.Input=a;

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-1000 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 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-70 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};

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: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};
+"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:d,helperText:u,startIcon:m,endIcon:x,type:p="text",placeholder:h,isMobile:c,containerClassName:f,...g},b)=>{const[w,y]=l(!1),N=a(),v=o(),j=c??v,C=w||""!==s&&null!=s,F="disabled"===r,I=n("relative flex items-center border rounded-lg transition-all duration-300 w-90",{"h-14":!j,"h-12":j,"border-neutral-light":"default"===r&&!w,"border-primary":"default"===r&&w,"border-error":"error"===r,"bg-white border-neutral-light cursor-not-allowed":F},f),k=n("absolute pointer-events-none transition-all duration-300",{"-top-2.5 bg-white px-1 mx-3 font-medium":C,"text-s":!j&&C||j&&!C,"text-xs":j&&C,"text-m":!j&&!C,"right-1":m,"right-3":!m,"top-1/2 -translate-y-1/2 text-m font-medium":!C,"right-11":!C&&m,"right-4":!C&&!m,"text-neutral-main":!w&&"default"===r,"text-neutral-light":F,"text-primary":w&&"default"===r,"text-error":C&&"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":!w,"text-neutral-darker":w}),M=n("absolute h-5 w-5 transition-colors duration-300",{"text-neutral-main":"error"!==r&&!w,"text-primary":"default"===r&&w,"text-error":"error"===r,"text-neutral-light":F}),R=n("font-light mt-1 px-2 h-4",{"text-s":!j,"text-xs":j,"text-neutral-main":"default"===r,"text-primary":"default"===r&&w,"text-error":"error"===r,"text-neutral-light":F}),T=h&&!w?void 0:h;return t("div",{children:[t("div",{className:I,children:[x&&e("span",{className:n(M,"left-4"),children:x}),e("label",{htmlFor:N,className:k,children:i}),e("input",{ref:b,id:N,type:p,value:s,onChange:d,onFocus:t=>{F||(y(!0),g.onFocus?.(t))},onBlur:t=>{F||(y(!1),g.onBlur?.(t))},disabled:F,placeholder:T,className:B,...g}),m&&e("span",{className:n(M,"right-4"),children:m})]}),u&&e("p",{className:R,children:u})]})});i.displayName="Input";export{i as Input};

package/dist/types/Drawer.js

@@ -91,7 +91,7 @@ const Drawer = React.forwardRef(({ children, direction = 'bottom', fullScreen =
         }
         return 'h-full max-w-[90vw]';
     };
-    const baseOverlayClasses = 'fixed inset-0 z-1000 transition-all duration-300';
+    const baseOverlayClasses = 'fixed inset-0 z-70 transition-all duration-300';
     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/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', placeholder, isMobile, ...props }, ref) => {
+const Input = React.forwardRef(({ state = 'default', label, value, onChange, helperText, startIcon, endIcon, type = 'text', placeholder, isMobile, containerClassName, ...props }, ref) => {
     const [isFocused, setIsFocused] = useState(false);
     const id = useId();
     const detectedIsMobile = useMobile();
@@ -34,7 +34,7 @@ const Input = React.forwardRef(({ state = 'default', label, value, onChange, hel
         'border-primary': state === 'default' && isFocused,
         'border-error': state === 'error',
         'bg-white border-neutral-light cursor-not-allowed': isDisabled,
-    });
+    }, containerClassName);
     const labelClasses = cn(baseLabelClasses, {
         '-top-2.5 bg-white px-1 mx-3 font-medium': isLabelFloated,
         'text-s': (!actualIsMobile && isLabelFloated) ||

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

@@ -9,6 +9,7 @@ export type InputProps = {
      * Whether the component is in mobile mode (optional, auto-detected if not provided)
      */
     isMobile?: boolean;
+    containerClassName?: string;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>;
 declare const Input: React.ForwardRefExoticComponent<{
     state?: "default" | "disabled" | "error";
@@ -20,5 +21,6 @@ declare const Input: React.ForwardRefExoticComponent<{
      * Whether the component is in mobile mode (optional, auto-detected if not provided)
      */
     isMobile?: boolean;
+    containerClassName?: string;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "id"> & React.RefAttributes<HTMLInputElement>>;
 export { Input };

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

@@ -11,6 +11,7 @@ declare const _default: {
         startIcon?: import("react").ReactNode;
         endIcon?: import("react").ReactNode;
         isMobile?: boolean;
+        containerClassName?: string;
     } & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "id"> & import("react").RefAttributes<HTMLInputElement>>;
     parameters: {
         docs: {

package/dist/types/index.d.ts

@@ -7,6 +7,7 @@ export declare const Input: import("react").ForwardRefExoticComponent<{
     startIcon?: import("react").ReactNode;
     endIcon?: import("react").ReactNode;
     isMobile?: boolean;
+    containerClassName?: string;
 } & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "id"> & import("react").RefAttributes<HTMLInputElement>>;
 export declare const Tabs: import("react").ForwardRefExoticComponent<import("./components/Tabs/Tabs").TabsProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const Drawer: import("react").ForwardRefExoticComponent<import("./components/Drawer/Drawer").DrawerProps & import("react").RefAttributes<HTMLDivElement>>;

package/package.json

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