automoby-kit 1.0.53 → 1.0.55

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

package/dist/cjs/Menu.js

@@ -1 +1 @@
-"use client";"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("./utils.js"),n=require("./Typography.js");const a=r.forwardRef(({buttonText:a,items:i,disabled:o=!1,className:s,onOpenChange:l,isOpen:d,"aria-label":u,...c},b)=>{const[p,f]=r.useState(!1),h=r.useRef(null),m=r.useRef(null),v=void 0!==d?d:p,handleToggle=()=>{if(o)return;const e=!v;void 0===d&&f(e),l?.(e)};r.useEffect(()=>{const handleClickOutside=e=>{h.current&&!h.current.contains(e.target)&&(void 0===d&&f(!1),l?.(!1))};if(v)return document.addEventListener("mousedown",handleClickOutside),()=>{document.removeEventListener("mousedown",handleClickOutside)}},[v,d,l]);const y=t("inline-flex items-center justify-center","bg-white border border-neutral-light","rounded-md px-4 py-3","transition-colors duration-200","hover:bg-neutral-lighter","focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",{"opacity-50 cursor-not-allowed":o,"cursor-pointer":!o}),x=t("absolute top-full left-0 right-0 z-10 mt-1","bg-white border border-neutral-light","rounded-md py-3 px-4","shadow-lg","transition-all duration-200",{"opacity-100 translate-y-0 pointer-events-auto":v,"opacity-0 -translate-y-2 pointer-events-none":!v}),g=t("block w-full text-right","transition-colors duration-200","hover:bg-neutral-lighter rounded px-2 py-1 -mx-2","focus:outline-none focus:bg-neutral-lighter");return e.jsx("div",{ref:b,className:t("relative inline-block",s),...c,children:e.jsxs("div",{ref:h,children:[e.jsx("button",{ref:m,type:"button",className:y,onClick:handleToggle,onKeyDown:e=>{if(!o)switch(e.key){case"Escape":v&&(e.preventDefault(),void 0===d&&f(!1),l?.(!1),m.current?.focus());break;case"ArrowDown":v||(e.preventDefault(),handleToggle());break;case"Enter":case" ":e.preventDefault(),handleToggle()}},disabled:o,"aria-expanded":v,"aria-haspopup":"true","aria-label":u||`منوی ${a}`,children:e.jsx(n.Typography,{variant:"body-s-heavy",color:"neutral-darker",className:"text-right",children:a})}),e.jsx("div",{className:x,children:e.jsx("div",{className:"flex flex-col gap-4",children:i.map(r=>{const a=e.jsx(n.Typography,{variant:"body-s-heavy",color:r.disabled?"neutral-main":"neutral-darker",className:"text-right",children:r.label}),i={className:t(g,{"opacity-50 cursor-not-allowed":r.disabled,"cursor-pointer":!r.disabled}),onClick:r.disabled?void 0:()=>(e=>{e.disabled||(void 0===d&&f(!1),l?.(!1),e.onClick?.())})(r),"aria-label":`منوی ${r.label}`};return r.href&&!r.disabled?e.jsx("a",{...i,href:r.href,role:"menuitem",tabIndex:v?0:-1,children:a},r.id):e.jsx("button",{...i,type:"button",role:"menuitem",tabIndex:v?0:-1,disabled:r.disabled,children:a},r.id)})})})]})})});a.displayName="Menu",exports.Menu=a;
+"use client";"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("./utils.js"),n=require("./Typography.js");const a=r.forwardRef(({buttonText:a,items:i,disabled:s=!1,className:l,onOpenChange:o,isOpen:d,"aria-label":u,...c},m)=>{const[p,b]=r.useState(!1),g=r.useRef(null),x=r.useRef(null),f=void 0!==d?d:p,handleToggle=()=>{if(s)return;const e=!f;void 0===d&&b(e),o?.(e)};r.useEffect(()=>{const handleClickOutside=e=>{g.current&&!g.current.contains(e.target)&&(void 0===d&&b(!1),o?.(!1))};if(f)return document.addEventListener("mousedown",handleClickOutside),()=>{document.removeEventListener("mousedown",handleClickOutside)}},[f,d,o]);const h=t("inline-flex items-center justify-center","bg-white border border-neutral-light","rounded-md transition-colors duration-200","px-3 py-2 sm:px-4 sm:py-3 md:px-4 md:py-3 lg:px-5 lg:py-3","min-w-20 sm:min-w-24 md:min-w-28 lg:min-w-32","hover:bg-neutral-lighter","focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",{"opacity-50 cursor-not-allowed":s,"cursor-pointer":!s}),y=t("absolute top-full z-10 mt-1","bg-white border border-neutral-light","rounded-md shadow-lg","left-0 right-0 sm:left-0 sm:right-auto sm:min-w-48 md:min-w-52 lg:min-w-56","py-2 px-3 sm:py-3 sm:px-4 md:py-3 md:px-4 lg:py-4 lg:px-5","transition-all duration-200",{"opacity-100 translate-y-0 pointer-events-auto":f,"opacity-0 -translate-y-2 pointer-events-none":!f}),v=t("block w-full text-right","transition-colors duration-200","hover:bg-neutral-lighter rounded","focus:outline-none focus:bg-neutral-lighter","px-2 py-1 sm:px-2 sm:py-2 md:px-3 md:py-2 lg:px-3 lg:py-2","-mx-2 sm:-mx-2 md:-mx-3 lg:-mx-3");return e.jsx("div",{ref:m,className:t("relative inline-block",l),...c,children:e.jsxs("div",{ref:g,children:[e.jsx("button",{ref:x,type:"button",className:h,onClick:handleToggle,onKeyDown:e=>{if(!s)switch(e.key){case"Escape":f&&(e.preventDefault(),void 0===d&&b(!1),o?.(!1),x.current?.focus());break;case"ArrowDown":f||(e.preventDefault(),handleToggle());break;case"Enter":case" ":e.preventDefault(),handleToggle()}},disabled:s,"aria-expanded":f,"aria-haspopup":"true","aria-label":u||`منوی ${a}`,children:e.jsx(n.Typography,{variant:"body-s-heavy",color:"neutral-darker",className:"text-right",children:a})}),e.jsx("div",{className:y,children:e.jsx("div",{className:"flex flex-col gap-2 sm:gap-3 md:gap-4 lg:gap-4",children:i.map(r=>{const a=e.jsx(n.Typography,{variant:"body-s-heavy",color:r.disabled?"neutral-main":"neutral-darker",className:"text-right",children:r.label}),i={className:t(v,{"opacity-50 cursor-not-allowed":r.disabled,"cursor-pointer":!r.disabled}),onClick:r.disabled?void 0:()=>(e=>{e.disabled||(void 0===d&&b(!1),o?.(!1),e.onClick?.())})(r),"aria-label":`منوی ${r.label}`};return r.href&&!r.disabled?e.jsx("a",{...i,href:r.href,role:"menuitem",tabIndex:f?0:-1,children:a},r.id):e.jsx("button",{...i,type:"button",role:"menuitem",tabIndex:f?0:-1,disabled:r.disabled,children:a},r.id)})})})]})})});a.displayName="Menu",exports.Menu=a;

package/dist/cjs/Typography.js

@@ -1 +1 @@
-"use strict";var t=require("react"),e=require("./utils.js");const o={h1:"text-h1 font-fat",h2:"text-h2 font-fat",h3:"text-h3 font-fat",h4:"text-h4 font-heavy",h5:"text-h5 font-heavy",h6:"text-h6 font-heavy","body-xl-heavy":"text-xl font-heavy","body-l-heavy":"text-l font-heavy","body-l-bold":"text-l font-bold","body-l-medium":"text-l font-medium","body-m-heavy":"text-m font-heavy","body-m-bold":"text-m font-bold","body-m-medium":"text-m font-medium","body-s-heavy":"text-s font-heavy","body-s-bold":"text-s font-bold","body-s-medium":"text-s font-medium","body-ms-bold":"text-ms font-bold","body-ms-medium":"text-ms font-medium","body-xs-bold":"text-xs font-bold","body-xs-medium":"text-xs font-medium","body-t-bold":"text-t font-bold","body-t-medium":"text-t font-medium","body-ss-medium":"text-ss font-medium"},d={primary:"text-primary",secondary:"text-secondary","neutral-darker":"text-neutral-darker","neutral-dark":"text-neutral-dark","neutral-main":"text-neutral-main",white:"text-white",inherit:"text-inherit"},m=t.forwardRef(({variant:m="body-m-medium",color:a="inherit",as:r,className:n,children:s,...y},x)=>{const i=r||(t=>t.startsWith("h")?t.split("-")[0]:"p")(m);return t.createElement(i,{ref:x,className:e(d[a],o[m],n),...y},s)});m.displayName="Typography",exports.Typography=m,exports.getTypographyClasses=t=>o[t];
+"use strict";var t=require("react"),e=require("./utils.js");const x={h1:"text-h3 sm:text-h2 md:text-h1 lg:text-h1 xl:text-h1 font-fat",h2:"text-h4 sm:text-h3 md:text-h2 lg:text-h2 xl:text-h2 font-fat",h3:"text-h5 sm:text-h4 md:text-h3 lg:text-h3 xl:text-h3 font-fat",h4:"text-h6 sm:text-h5 md:text-h4 lg:text-h4 xl:text-h4 font-heavy",h5:"text-l sm:text-xl md:text-h5 lg:text-h5 xl:text-h5 font-heavy",h6:"text-m sm:text-l md:text-h6 lg:text-h6 xl:text-h6 font-heavy","body-xl-heavy":"text-l sm:text-xl md:text-xl lg:text-xl xl:text-xl font-heavy","body-l-heavy":"text-m sm:text-l md:text-l lg:text-l xl:text-l font-heavy","body-l-bold":"text-m sm:text-l md:text-l lg:text-l xl:text-l font-bold","body-l-medium":"text-m sm:text-l md:text-l lg:text-l xl:text-l font-medium","body-m-heavy":"text-s sm:text-m md:text-m lg:text-m xl:text-m font-heavy","body-m-bold":"text-s sm:text-m md:text-m lg:text-m xl:text-m font-bold","body-m-medium":"text-s sm:text-m md:text-m lg:text-m xl:text-m font-medium","body-s-heavy":"text-ms sm:text-s md:text-s lg:text-s xl:text-s font-heavy","body-s-bold":"text-ms sm:text-s md:text-s lg:text-s xl:text-s font-bold","body-s-medium":"text-ms sm:text-s md:text-s lg:text-s xl:text-s font-medium","body-ms-bold":"text-xs sm:text-ms md:text-ms lg:text-ms xl:text-ms font-bold","body-ms-medium":"text-xs sm:text-ms md:text-ms lg:text-ms xl:text-ms font-medium","body-xs-bold":"text-t sm:text-xs md:text-xs lg:text-xs xl:text-xs font-bold","body-xs-medium":"text-t sm:text-xs md:text-xs lg:text-xs xl:text-xs font-medium","body-t-bold":"text-ss sm:text-t md:text-t lg:text-t xl:text-t font-bold","body-t-medium":"text-ss sm:text-t md:text-t lg:text-t xl:text-t font-medium","body-ss-medium":"text-ss sm:text-ss md:text-ss lg:text-ss xl:text-ss font-medium"},m={primary:"text-primary",secondary:"text-secondary","neutral-darker":"text-neutral-darker","neutral-dark":"text-neutral-dark","neutral-main":"text-neutral-main",white:"text-white",inherit:"text-inherit"},s=t.forwardRef(({variant:s="body-m-medium",color:l="inherit",as:d,className:o,children:h,...a},r)=>{const n=d||(t=>t.startsWith("h")?t.split("-")[0]:"p")(s);return t.createElement(n,{ref:r,className:e(m[l],x[s],o),...a},h)});s.displayName="Typography",exports.Typography=s,exports.getTypographyClasses=t=>x[t];

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

package/dist/esm/Menu.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import t,{useState as n,useRef as o,useEffect as a}from"react";import i from"./utils.js";import{Typography as l}from"./Typography.js";const s=t.forwardRef(({buttonText:t,items:s,disabled:d=!1,className:c,onOpenChange:u,isOpen:b,"aria-label":p,...m},f)=>{const[h,v]=n(!1),g=o(null),y=o(null),x=void 0!==b?b:h,handleToggle=()=>{if(d)return;const e=!x;void 0===b&&v(e),u?.(e)};a(()=>{const handleClickOutside=e=>{g.current&&!g.current.contains(e.target)&&(void 0===b&&v(!1),u?.(!1))};if(x)return document.addEventListener("mousedown",handleClickOutside),()=>{document.removeEventListener("mousedown",handleClickOutside)}},[x,b,u]);const w=i("inline-flex items-center justify-center","bg-white border border-neutral-light","rounded-md px-4 py-3","transition-colors duration-200","hover:bg-neutral-lighter","focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",{"opacity-50 cursor-not-allowed":d,"cursor-pointer":!d}),k=i("absolute top-full left-0 right-0 z-10 mt-1","bg-white border border-neutral-light","rounded-md py-3 px-4","shadow-lg","transition-all duration-200",{"opacity-100 translate-y-0 pointer-events-auto":x,"opacity-0 -translate-y-2 pointer-events-none":!x}),N=i("block w-full text-right","transition-colors duration-200","hover:bg-neutral-lighter rounded px-2 py-1 -mx-2","focus:outline-none focus:bg-neutral-lighter");return e("div",{ref:f,className:i("relative inline-block",c),...m,children:r("div",{ref:g,children:[e("button",{ref:y,type:"button",className:w,onClick:handleToggle,onKeyDown:e=>{if(!d)switch(e.key){case"Escape":x&&(e.preventDefault(),void 0===b&&v(!1),u?.(!1),y.current?.focus());break;case"ArrowDown":x||(e.preventDefault(),handleToggle());break;case"Enter":case" ":e.preventDefault(),handleToggle()}},disabled:d,"aria-expanded":x,"aria-haspopup":"true","aria-label":p||`منوی ${t}`,children:e(l,{variant:"body-s-heavy",color:"neutral-darker",className:"text-right",children:t})}),e("div",{className:k,children:e("div",{className:"flex flex-col gap-4",children:s.map(r=>{const t=e(l,{variant:"body-s-heavy",color:r.disabled?"neutral-main":"neutral-darker",className:"text-right",children:r.label}),n={className:i(N,{"opacity-50 cursor-not-allowed":r.disabled,"cursor-pointer":!r.disabled}),onClick:r.disabled?void 0:()=>(e=>{e.disabled||(void 0===b&&v(!1),u?.(!1),e.onClick?.())})(r),"aria-label":`منوی ${r.label}`};return r.href&&!r.disabled?e("a",{...n,href:r.href,role:"menuitem",tabIndex:x?0:-1,children:t},r.id):e("button",{...n,type:"button",role:"menuitem",tabIndex:x?0:-1,disabled:r.disabled,children:t},r.id)})})})]})})});s.displayName="Menu";export{s as Menu};
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import t,{useState as n,useRef as a,useEffect as i}from"react";import o from"./utils.js";import{Typography as l}from"./Typography.js";const s=t.forwardRef(({buttonText:t,items:s,disabled:d=!1,className:m,onOpenChange:c,isOpen:u,"aria-label":p,...b},g)=>{const[f,h]=n(!1),y=a(null),x=a(null),v=void 0!==u?u:f,handleToggle=()=>{if(d)return;const e=!v;void 0===u&&h(e),c?.(e)};i(()=>{const handleClickOutside=e=>{y.current&&!y.current.contains(e.target)&&(void 0===u&&h(!1),c?.(!1))};if(v)return document.addEventListener("mousedown",handleClickOutside),()=>{document.removeEventListener("mousedown",handleClickOutside)}},[v,u,c]);const w=o("inline-flex items-center justify-center","bg-white border border-neutral-light","rounded-md transition-colors duration-200","px-3 py-2 sm:px-4 sm:py-3 md:px-4 md:py-3 lg:px-5 lg:py-3","min-w-20 sm:min-w-24 md:min-w-28 lg:min-w-32","hover:bg-neutral-lighter","focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",{"opacity-50 cursor-not-allowed":d,"cursor-pointer":!d}),k=o("absolute top-full z-10 mt-1","bg-white border border-neutral-light","rounded-md shadow-lg","left-0 right-0 sm:left-0 sm:right-auto sm:min-w-48 md:min-w-52 lg:min-w-56","py-2 px-3 sm:py-3 sm:px-4 md:py-3 md:px-4 lg:py-4 lg:px-5","transition-all duration-200",{"opacity-100 translate-y-0 pointer-events-auto":v,"opacity-0 -translate-y-2 pointer-events-none":!v}),N=o("block w-full text-right","transition-colors duration-200","hover:bg-neutral-lighter rounded","focus:outline-none focus:bg-neutral-lighter","px-2 py-1 sm:px-2 sm:py-2 md:px-3 md:py-2 lg:px-3 lg:py-2","-mx-2 sm:-mx-2 md:-mx-3 lg:-mx-3");return e("div",{ref:g,className:o("relative inline-block",m),...b,children:r("div",{ref:y,children:[e("button",{ref:x,type:"button",className:w,onClick:handleToggle,onKeyDown:e=>{if(!d)switch(e.key){case"Escape":v&&(e.preventDefault(),void 0===u&&h(!1),c?.(!1),x.current?.focus());break;case"ArrowDown":v||(e.preventDefault(),handleToggle());break;case"Enter":case" ":e.preventDefault(),handleToggle()}},disabled:d,"aria-expanded":v,"aria-haspopup":"true","aria-label":p||`منوی ${t}`,children:e(l,{variant:"body-s-heavy",color:"neutral-darker",className:"text-right",children:t})}),e("div",{className:k,children:e("div",{className:"flex flex-col gap-2 sm:gap-3 md:gap-4 lg:gap-4",children:s.map(r=>{const t=e(l,{variant:"body-s-heavy",color:r.disabled?"neutral-main":"neutral-darker",className:"text-right",children:r.label}),n={className:o(N,{"opacity-50 cursor-not-allowed":r.disabled,"cursor-pointer":!r.disabled}),onClick:r.disabled?void 0:()=>(e=>{e.disabled||(void 0===u&&h(!1),c?.(!1),e.onClick?.())})(r),"aria-label":`منوی ${r.label}`};return r.href&&!r.disabled?e("a",{...n,href:r.href,role:"menuitem",tabIndex:v?0:-1,children:t},r.id):e("button",{...n,type:"button",role:"menuitem",tabIndex:v?0:-1,disabled:r.disabled,children:t},r.id)})})})]})})});s.displayName="Menu";export{s as Menu};

package/dist/esm/Typography.js

@@ -1 +1 @@
-import t from"react";import e from"./utils.js";const o={h1:"text-h1 font-fat",h2:"text-h2 font-fat",h3:"text-h3 font-fat",h4:"text-h4 font-heavy",h5:"text-h5 font-heavy",h6:"text-h6 font-heavy","body-xl-heavy":"text-xl font-heavy","body-l-heavy":"text-l font-heavy","body-l-bold":"text-l font-bold","body-l-medium":"text-l font-medium","body-m-heavy":"text-m font-heavy","body-m-bold":"text-m font-bold","body-m-medium":"text-m font-medium","body-s-heavy":"text-s font-heavy","body-s-bold":"text-s font-bold","body-s-medium":"text-s font-medium","body-ms-bold":"text-ms font-bold","body-ms-medium":"text-ms font-medium","body-xs-bold":"text-xs font-bold","body-xs-medium":"text-xs font-medium","body-t-bold":"text-t font-bold","body-t-medium":"text-t font-medium","body-ss-medium":"text-ss font-medium"},getTypographyClasses=t=>o[t],d={primary:"text-primary",secondary:"text-secondary","neutral-darker":"text-neutral-darker","neutral-dark":"text-neutral-dark","neutral-main":"text-neutral-main",white:"text-white",inherit:"text-inherit"},m=t.forwardRef(({variant:m="body-m-medium",color:a="inherit",as:n,className:r,children:x,...y},i)=>{const l=n||(t=>t.startsWith("h")?t.split("-")[0]:"p")(m);return t.createElement(l,{ref:i,className:e(d[a],o[m],r),...y},x)});m.displayName="Typography";export{m as Typography,getTypographyClasses};
+import t from"react";import e from"./utils.js";const x={h1:"text-h3 sm:text-h2 md:text-h1 lg:text-h1 xl:text-h1 font-fat",h2:"text-h4 sm:text-h3 md:text-h2 lg:text-h2 xl:text-h2 font-fat",h3:"text-h5 sm:text-h4 md:text-h3 lg:text-h3 xl:text-h3 font-fat",h4:"text-h6 sm:text-h5 md:text-h4 lg:text-h4 xl:text-h4 font-heavy",h5:"text-l sm:text-xl md:text-h5 lg:text-h5 xl:text-h5 font-heavy",h6:"text-m sm:text-l md:text-h6 lg:text-h6 xl:text-h6 font-heavy","body-xl-heavy":"text-l sm:text-xl md:text-xl lg:text-xl xl:text-xl font-heavy","body-l-heavy":"text-m sm:text-l md:text-l lg:text-l xl:text-l font-heavy","body-l-bold":"text-m sm:text-l md:text-l lg:text-l xl:text-l font-bold","body-l-medium":"text-m sm:text-l md:text-l lg:text-l xl:text-l font-medium","body-m-heavy":"text-s sm:text-m md:text-m lg:text-m xl:text-m font-heavy","body-m-bold":"text-s sm:text-m md:text-m lg:text-m xl:text-m font-bold","body-m-medium":"text-s sm:text-m md:text-m lg:text-m xl:text-m font-medium","body-s-heavy":"text-ms sm:text-s md:text-s lg:text-s xl:text-s font-heavy","body-s-bold":"text-ms sm:text-s md:text-s lg:text-s xl:text-s font-bold","body-s-medium":"text-ms sm:text-s md:text-s lg:text-s xl:text-s font-medium","body-ms-bold":"text-xs sm:text-ms md:text-ms lg:text-ms xl:text-ms font-bold","body-ms-medium":"text-xs sm:text-ms md:text-ms lg:text-ms xl:text-ms font-medium","body-xs-bold":"text-t sm:text-xs md:text-xs lg:text-xs xl:text-xs font-bold","body-xs-medium":"text-t sm:text-xs md:text-xs lg:text-xs xl:text-xs font-medium","body-t-bold":"text-ss sm:text-t md:text-t lg:text-t xl:text-t font-bold","body-t-medium":"text-ss sm:text-t md:text-t lg:text-t xl:text-t font-medium","body-ss-medium":"text-ss sm:text-ss md:text-ss lg:text-ss xl:text-ss font-medium"},getTypographyClasses=t=>x[t],m={primary:"text-primary",secondary:"text-secondary","neutral-darker":"text-neutral-darker","neutral-dark":"text-neutral-dark","neutral-main":"text-neutral-main",white:"text-white",inherit:"text-inherit"},s=t.forwardRef(({variant:s="body-m-medium",color:l="inherit",as:d,className:o,children:h,...a},n)=>{const r=d||(t=>t.startsWith("h")?t.split("-")[0]:"p")(s);return t.createElement(r,{ref:n,className:e(m[l],x[s],o),...a},h)});s.displayName="Typography";export{s as Typography,getTypographyClasses};

package/dist/types/Input.js

@@ -3,10 +3,12 @@ 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();
+    // Use provided isMobile prop or fall back to detected mobile state
+    // This ensures SSR compatibility while allowing responsive breakpoints on client
     const actualIsMobile = isMobile ?? detectedIsMobile;
     const hasContent = value !== '' && value !== null && value !== undefined;
     const isLabelFloated = isFocused || hasContent;
@@ -23,53 +25,78 @@ 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-90';
+    const baseContainerClasses = 'relative flex items-center border rounded-lg transition-all duration-300 w-full sm:w-90 md:w-90 lg: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-14': !actualIsMobile,
-        'h-12': actualIsMobile,
+    const baseInputClasses = 'peer w-full h-full bg-transparent outline-none font-medium disabled:text-neutral-light';
+    const baseIconClasses = 'absolute transition-colors duration-300';
+    const containerClasses = cn(baseContainerClasses, 
+    // SSR-safe initial height based on mobile detection, then responsive scaling
+    {
+        'h-12 sm:h-13 md:h-14 lg:h-14': actualIsMobile,
+        'h-14 sm:h-14 md:h-14 lg:h-14': !actualIsMobile,
+    }, 
+    // Enhanced responsive breakpoints for client-side optimization
+    'transition-all duration-300', {
         'border-neutral-light': state === 'default' && !isFocused,
         '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) ||
-            (actualIsMobile && !isLabelFloated),
-        'text-xs': actualIsMobile && isLabelFloated,
-        'text-m': !actualIsMobile && !isLabelFloated,
-        'right-1': startIcon,
-        'right-3': !startIcon,
-        'top-1/2 -translate-y-1/2 text-m font-medium': !isLabelFloated,
-        'right-11': !isLabelFloated && startIcon,
-        'right-4': !isLabelFloated && !startIcon,
+        // SSR-safe label text sizes with responsive enhancement
+        'text-xs sm:text-s md:text-s lg:text-s': isLabelFloated && actualIsMobile,
+        'text-s sm:text-s md:text-s lg:text-s': isLabelFloated && !actualIsMobile,
+        'text-s sm:text-m md:text-m lg:text-m font-medium': !isLabelFloated && actualIsMobile,
+        'text-m sm:text-m md:text-m lg:text-m font-medium': !isLabelFloated && !actualIsMobile,
+        // Responsive positioning
+        'right-1 sm:right-1 md:right-1 lg:right-1': startIcon,
+        'right-3 sm:right-3 md:right-3 lg:right-3': !startIcon,
+        'top-1/2 -translate-y-1/2': !isLabelFloated,
+        // Responsive positioning for non-floated with icons
+        'right-11 sm:right-11 md:right-12 lg:right-12': !isLabelFloated && startIcon,
+        'right-4 sm:right-4 md:right-4 lg:right-4': !isLabelFloated && !startIcon,
+        // Colors
         'text-neutral-main': !isFocused && state === 'default',
         'text-neutral-light': isDisabled,
         'text-primary': isFocused && state === 'default',
         'text-error': isLabelFloated && state === 'error',
     });
-    const inputClasses = cn(baseInputClasses, {
-        'pr-12': startIcon,
-        'pl-12': endIcon,
-        'px-4': !startIcon && !endIcon,
-        'pr-4 pl-12': !startIcon && endIcon,
-        'pl-4 pr-12': startIcon && !endIcon,
+    const inputClasses = cn(baseInputClasses, 
+    // SSR-safe text size with responsive enhancement
+    {
+        'text-s sm:text-m md:text-m lg:text-m': actualIsMobile,
+        'text-m sm:text-m md:text-m lg:text-m': !actualIsMobile,
+    }, {
+        // Responsive padding with icons
+        'pr-10 sm:pr-12 md:pr-12 lg:pr-12': startIcon,
+        'pl-10 sm:pl-12 md:pl-12 lg:pl-12': endIcon,
+        'px-3 sm:px-4 md:px-4 lg:px-4': !startIcon && !endIcon,
+        'pr-3 pl-10 sm:pr-4 sm:pl-12 md:pr-4 md:pl-12 lg:pr-4 lg:pl-12': !startIcon && endIcon,
+        'pl-3 pr-10 sm:pl-4 sm:pr-12 md:pl-4 md:pr-12 lg:pl-4 lg:pr-12': startIcon && !endIcon,
+        // States
         'cursor-not-allowed text-red-500': isDisabled,
         'text-neutral-dark': !isFocused,
         'text-neutral-darker': isFocused,
     });
-    const iconClasses = cn(baseIconClasses, {
+    const iconClasses = cn(baseIconClasses, 
+    // SSR-safe icon size with responsive enhancement
+    {
+        'h-4 w-4 sm:h-5 sm:w-5 md:h-5 md:w-5 lg:h-6 lg:w-6': actualIsMobile,
+        'h-5 w-5 sm:h-5 sm:w-5 md:h-6 md:w-6 lg:h-6 lg:w-6': !actualIsMobile,
+    }, {
         'text-neutral-main': state !== 'error' && !isFocused,
         'text-primary': state === 'default' && isFocused,
         'text-error': state === 'error',
         'text-neutral-light': isDisabled,
     });
-    const helperTextClasses = cn('font-light mt-1 px-2 h-4', {
-        'text-s': !actualIsMobile,
-        'text-xs': actualIsMobile,
+    const helperTextClasses = cn('font-light mt-1 h-4', 
+    // Responsive padding and text size
+    'px-2 sm:px-2 md:px-3 lg:px-3', {
+        // SSR-safe text sizing with responsive enhancement
+        'text-xs sm:text-s md:text-s lg:text-s': actualIsMobile,
+        'text-s sm:text-s md:text-s lg:text-s': !actualIsMobile,
+    }, {
         'text-neutral-main': state === 'default',
         'text-primary': state === 'default' && isFocused,
         'text-error': state === 'error',
@@ -77,7 +104,7 @@ const Input = React.forwardRef(({ state = 'default', label, value, onChange, hel
     });
     // 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 })] }));
+    return (jsxs("div", { children: [jsxs("div", { className: containerClasses, children: [endIcon && (jsx("span", { className: cn(iconClasses, 'left-3 sm:left-4 md:left-4 lg: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-3 sm:right-4 md:right-4 lg:right-4'), children: startIcon }))] }), helperText && jsx("p", { className: helperTextClasses, children: helperText })] }));
 });
 Input.displayName = 'Input';
 

package/dist/types/Menu.js

@@ -78,7 +78,9 @@ const Menu = React.forwardRef(({ buttonText, items, disabled = false, className,
     };
     const buttonClasses = cn(
     // Base button styles matching Figma design
-    'inline-flex items-center justify-center', 'bg-white border border-neutral-light', 'rounded-md px-4 py-3', 'transition-colors duration-200', 
+    'inline-flex items-center justify-center', 'bg-white border border-neutral-light', 'rounded-md transition-colors duration-200', 
+    // Responsive padding and sizing
+    'px-3 py-2 sm:px-4 sm:py-3 md:px-4 md:py-3 lg:px-5 lg:py-3', 'min-w-20 sm:min-w-24 md:min-w-28 lg:min-w-32', 
     // Interactive states
     'hover:bg-neutral-lighter', 'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2', 
     // Disabled state
@@ -88,14 +90,22 @@ const Menu = React.forwardRef(({ buttonText, items, disabled = false, className,
     });
     const dropdownClasses = cn(
     // Base dropdown styles
-    'absolute top-full left-0 right-0 z-10 mt-1', 'bg-white border border-neutral-light', 'rounded-md py-3 px-4', 'shadow-lg', 
+    'absolute top-full z-10 mt-1', 'bg-white border border-neutral-light', 'rounded-md shadow-lg', 
+    // Responsive positioning and sizing
+    'left-0 right-0 sm:left-0 sm:right-auto sm:min-w-48 md:min-w-52 lg:min-w-56', 
+    // Responsive padding
+    'py-2 px-3 sm:py-3 sm:px-4 md:py-3 md:px-4 lg:py-4 lg:px-5', 
     // Animation
     'transition-all duration-200', {
         'opacity-100 translate-y-0 pointer-events-auto': isOpen,
         'opacity-0 -translate-y-2 pointer-events-none': !isOpen,
     });
-    const itemClasses = cn('block w-full text-right', 'transition-colors duration-200', 'hover:bg-neutral-lighter rounded px-2 py-1 -mx-2', 'focus:outline-none focus:bg-neutral-lighter');
-    return (jsx("div", { ref: ref, className: cn('relative inline-block', className), ...props, children: jsxs("div", { ref: menuRef, children: [jsx("button", { ref: buttonRef, type: "button", className: buttonClasses, onClick: handleToggle, onKeyDown: handleKeyDown, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "true", "aria-label": ariaLabel || `منوی ${buttonText}`, children: jsx(Typography, { variant: "body-s-heavy", color: "neutral-darker", className: "text-right", children: buttonText }) }), jsx("div", { className: dropdownClasses, children: jsx("div", { className: "flex flex-col gap-4", children: items.map((item) => {
+    const itemClasses = cn('block w-full text-right', 'transition-colors duration-200', 'hover:bg-neutral-lighter rounded', 'focus:outline-none focus:bg-neutral-lighter', 
+    // Responsive padding
+    'px-2 py-1 sm:px-2 sm:py-2 md:px-3 md:py-2 lg:px-3 lg:py-2', 
+    // Responsive margins
+    '-mx-2 sm:-mx-2 md:-mx-3 lg:-mx-3');
+    return (jsx("div", { ref: ref, className: cn('relative inline-block', className), ...props, children: jsxs("div", { ref: menuRef, children: [jsx("button", { ref: buttonRef, type: "button", className: buttonClasses, onClick: handleToggle, onKeyDown: handleKeyDown, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "true", "aria-label": ariaLabel || `منوی ${buttonText}`, children: jsx(Typography, { variant: "body-s-heavy", color: "neutral-darker", className: "text-right", children: buttonText }) }), jsx("div", { className: dropdownClasses, children: jsx("div", { className: "flex flex-col gap-2 sm:gap-3 md:gap-4 lg:gap-4", children: items.map((item) => {
                             const content = (jsx(Typography, { variant: "body-s-heavy", color: item.disabled ? 'neutral-main' : 'neutral-darker', className: "text-right", children: item.label }));
                             const commonProps = {
                                 className: cn(itemClasses, {

package/dist/types/Typography.js

@@ -2,31 +2,31 @@ import React from 'react';
 import cn from './utils.js';
 
 const variantClasses = {
-    // Headings with Fat weight (900)
-    h1: 'text-h1 font-fat',
-    h2: 'text-h2 font-fat',
-    h3: 'text-h3 font-fat',
-    h4: 'text-h4 font-heavy',
-    h5: 'text-h5 font-heavy',
-    h6: 'text-h6 font-heavy',
-    // Body Copy with specific weight variants
-    'body-xl-heavy': 'text-xl font-heavy',
-    'body-l-heavy': 'text-l font-heavy',
-    'body-l-bold': 'text-l font-bold',
-    'body-l-medium': 'text-l font-medium',
-    'body-m-heavy': 'text-m font-heavy',
-    'body-m-bold': 'text-m font-bold',
-    'body-m-medium': 'text-m font-medium',
-    'body-s-heavy': 'text-s font-heavy',
-    'body-s-bold': 'text-s font-bold',
-    'body-s-medium': 'text-s font-medium',
-    'body-ms-bold': 'text-ms font-bold',
-    'body-ms-medium': 'text-ms font-medium',
-    'body-xs-bold': 'text-xs font-bold',
-    'body-xs-medium': 'text-xs font-medium',
-    'body-t-bold': 'text-t font-bold',
-    'body-t-medium': 'text-t font-medium',
-    'body-ss-medium': 'text-ss font-medium',
+    // Headings with Fat weight (900) - Responsive scaling
+    h1: 'text-h3 sm:text-h2 md:text-h1 lg:text-h1 xl:text-h1 font-fat',
+    h2: 'text-h4 sm:text-h3 md:text-h2 lg:text-h2 xl:text-h2 font-fat',
+    h3: 'text-h5 sm:text-h4 md:text-h3 lg:text-h3 xl:text-h3 font-fat',
+    h4: 'text-h6 sm:text-h5 md:text-h4 lg:text-h4 xl:text-h4 font-heavy',
+    h5: 'text-l sm:text-xl md:text-h5 lg:text-h5 xl:text-h5 font-heavy',
+    h6: 'text-m sm:text-l md:text-h6 lg:text-h6 xl:text-h6 font-heavy',
+    // Body Copy with specific weight variants - Responsive scaling
+    'body-xl-heavy': 'text-l sm:text-xl md:text-xl lg:text-xl xl:text-xl font-heavy',
+    'body-l-heavy': 'text-m sm:text-l md:text-l lg:text-l xl:text-l font-heavy',
+    'body-l-bold': 'text-m sm:text-l md:text-l lg:text-l xl:text-l font-bold',
+    'body-l-medium': 'text-m sm:text-l md:text-l lg:text-l xl:text-l font-medium',
+    'body-m-heavy': 'text-s sm:text-m md:text-m lg:text-m xl:text-m font-heavy',
+    'body-m-bold': 'text-s sm:text-m md:text-m lg:text-m xl:text-m font-bold',
+    'body-m-medium': 'text-s sm:text-m md:text-m lg:text-m xl:text-m font-medium',
+    'body-s-heavy': 'text-ms sm:text-s md:text-s lg:text-s xl:text-s font-heavy',
+    'body-s-bold': 'text-ms sm:text-s md:text-s lg:text-s xl:text-s font-bold',
+    'body-s-medium': 'text-ms sm:text-s md:text-s lg:text-s xl:text-s font-medium',
+    'body-ms-bold': 'text-xs sm:text-ms md:text-ms lg:text-ms xl:text-ms font-bold',
+    'body-ms-medium': 'text-xs sm:text-ms md:text-ms lg:text-ms xl:text-ms font-medium',
+    'body-xs-bold': 'text-t sm:text-xs md:text-xs lg:text-xs xl:text-xs font-bold',
+    'body-xs-medium': 'text-t sm:text-xs md:text-xs lg:text-xs xl:text-xs font-medium',
+    'body-t-bold': 'text-ss sm:text-t md:text-t lg:text-t xl:text-t font-bold',
+    'body-t-medium': 'text-ss sm:text-t md:text-t lg:text-t xl:text-t font-medium',
+    'body-ss-medium': 'text-ss sm:text-ss md:text-ss lg:text-ss xl:text-ss font-medium',
 };
 // Export for reuse in other components
 const getTypographyClasses = (variant) => {

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: {
@@ -152,3 +153,7 @@ export declare const WithLabelAndPlaceholder: {
         placeholder: string;
     };
 };
+export declare const ResponsiveDemo: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};

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

@@ -1,6 +1,6 @@
 import React from 'react';
 export type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body-xl-heavy' | 'body-l-heavy' | 'body-l-bold' | 'body-l-medium' | 'body-m-heavy' | 'body-m-bold' | 'body-m-medium' | 'body-s-heavy' | 'body-s-bold' | 'body-s-medium' | 'body-ms-bold' | 'body-ms-medium' | 'body-xs-bold' | 'body-xs-medium' | 'body-t-bold' | 'body-t-medium' | 'body-ss-medium';
-export interface TypographyProps {
+export interface TypographyProps extends React.HTMLAttributes<HTMLElement> {
     variant?: TypographyVariant;
     children?: React.ReactNode;
     color?: 'primary' | 'secondary' | 'neutral-darker' | 'neutral-dark' | 'neutral-main' | 'white' | 'inherit';

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

@@ -55,3 +55,7 @@ export declare const ColorVariants: {
     (): import("react/jsx-runtime").JSX.Element;
     storyName: string;
 };
+export declare const ResponsiveTypography: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};

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.53",
-  "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.55",
+  "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"
+  }
+}