automoby-kit 1.0.36 → 1.0.38

package/dist/cjs/Breadcrumb.js

@@ -1 +1 @@
-"use client";"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("./utils.js"),a=require("./contexts.js"),n=require("./chunks/chevron-left-Do__K6cA.js");require("./chunks/createLucideIcon-BqJVOzoK.js");const s=r.forwardRef(({items:r,className:s,isMobile:l},i)=>{const c=a.useMobile(),o=l??c;return e.jsx("nav",{ref:i,className:t("flex flex-row-reverse items-center",o?"gap-1 px-4 py-2.5":"gap-3 pr-1 pt-3 pb-4 pl-0",s),"aria-label":"Breadcrumb navigation",children:e.jsx("ol",{className:"flex flex-row-reverse items-center gap-inherit",children:r.map((a,s)=>{const l=s===r.length-1,i=!l&&(a.href||a.onClick),c=`${a.label}-${s}`;return e.jsxs("li",{className:"flex items-center gap-inherit",children:[i?e.jsx("a",{href:a.href||"#",className:t("whitespace-nowrap border-0 bg-transparent p-0 no-underline",o?"text-t":"text-s","text-neutral-main","cursor-pointer hover:text-neutral-dark transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-sm"),onClick:e=>((e,t,a)=>{t!==r.length-1&&e.onClick&&(a.preventDefault(),e.onClick())})(a,s,e),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),a.onClick&&a.onClick())},"aria-label":`Go to ${a.label}`,children:a.label}):e.jsx("span",{className:t("whitespace-nowrap",o?"text-t":"text-s","text-neutral-main","font-medium"),"aria-current":l?"page":void 0,"aria-label":l?`Current page: ${a.label}`:void 0,children:a.label}),!l&&e.jsx(n.ChevronLeft,{className:t("text-black flex-shrink-0",o?"w-2.5 h-2.5":"w-3 h-3"),"aria-hidden":"true"})]},c)})})})});s.displayName="Breadcrumb",exports.Breadcrumb=s;
+"use client";"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("./utils.js"),a=require("./contexts.js"),n=require("./chunks/chevron-left-Do__K6cA.js");require("./chunks/createLucideIcon-BqJVOzoK.js");const i=r.forwardRef(({items:r,className:i,isMobile:s},l)=>{const c=a.useMobile(),o=s??c;return e.jsx("nav",{ref:l,className:t("flex items-center",o?"gap-1 px-4 py-2.5":"gap-3 pr-1 pt-3 pb-4 pl-0",i),"aria-label":"Breadcrumb navigation",children:e.jsx("ol",{className:"flex items-center gap-inherit",children:r.map((a,i)=>{const s=i===r.length-1,l=!s&&(a.href||a.onClick),c=`${a.label}-${i}`;return e.jsxs("li",{className:"flex items-center gap-inherit",children:[l?e.jsx("a",{href:a.href||"#",className:t("whitespace-nowrap border-0 bg-transparent p-0 no-underline",o?"text-t":"text-s","text-neutral-main","cursor-pointer hover:text-neutral-dark transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-sm"),onClick:e=>((e,t,a)=>{t!==r.length-1&&e.onClick&&(a.preventDefault(),e.onClick())})(a,i,e),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),a.onClick&&a.onClick())},"aria-label":`Go to ${a.label}`,children:a.label}):e.jsx("span",{className:t("whitespace-nowrap",o?"text-t":"text-s","text-neutral-main","font-medium"),"aria-current":s?"page":void 0,"aria-label":s?`Current page: ${a.label}`:void 0,children:a.label}),!s&&e.jsx(n.ChevronLeft,{className:t("text-neutral-main flex-shrink-0",o?"w-2.5 h-2.5":"w-3 h-3"),"aria-hidden":"true"})]},c)})})})});i.displayName="Breadcrumb",exports.Breadcrumb=i;

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

package/dist/cjs/index.js

@@ -1 +1 @@
-"use strict";var r=require("./Typography.js"),e=require("./Button.js"),i=require("./Input.js"),o=require("./Tabs.js"),s=require("./Drawer.js"),u=require("./Backdrop.js"),t=require("./Breadcrumb.js"),p=require("./Pagination.js"),a=require("./Accordion.js"),n=require("./Divider.js"),c=require("./RadioGroup.js"),q=require("./Chips.js"),d=require("./Menu.js"),j=require("./contexts.js");require("react"),require("./utils.js"),require("react/jsx-runtime"),require("./chunks/chevron-left-Do__K6cA.js"),require("./chunks/createLucideIcon-BqJVOzoK.js");const x=r.Typography,b=e.Button,h=i.Input,B=o.Tabs,v=s.Drawer,M=u.Backdrop,g=t.Breadcrumb,l=p.Pagination,y=a.Accordion,D=n.Divider,T=c.RadioGroup,k=q.Chips,P=d.Menu;exports.MobileProvider=j.MobileProvider,exports.useMobile=j.useMobile,exports.Accordion=y,exports.Backdrop=M,exports.Breadcrumb=g,exports.Button=b,exports.Chips=k,exports.Divider=D,exports.Drawer=v,exports.Input=h,exports.Menu=P,exports.Pagination=l,exports.RadioGroup=T,exports.Tabs=B,exports.Typography=x;
+"use strict";var r=require("./Typography.js"),e=require("./Button.js"),i=require("./Input.js"),o=require("./Tabs.js"),s=require("./Drawer.js"),u=require("./Backdrop.js"),t=require("./Breadcrumb.js"),p=require("./Pagination.js"),a=require("./Accordion.js"),n=require("./Divider.js"),c=require("./RadioGroup.js"),q=require("./Chips.js"),d=require("./Menu.js"),j=require("./contexts.js");require("react"),require("./utils.js"),require("react/jsx-runtime"),require("react-dom"),require("./chunks/chevron-left-Do__K6cA.js"),require("./chunks/createLucideIcon-BqJVOzoK.js");const x=r.Typography,b=e.Button,h=i.Input,B=o.Tabs,v=s.Drawer,M=u.Backdrop,g=t.Breadcrumb,l=p.Pagination,y=a.Accordion,D=n.Divider,T=c.RadioGroup,k=q.Chips,m=d.Menu;exports.MobileProvider=j.MobileProvider,exports.useMobile=j.useMobile,exports.Accordion=y,exports.Backdrop=M,exports.Breadcrumb=g,exports.Button=b,exports.Chips=k,exports.Divider=D,exports.Drawer=v,exports.Input=h,exports.Menu=m,exports.Pagination=l,exports.RadioGroup=T,exports.Tabs=B,exports.Typography=x;

package/dist/esm/Breadcrumb.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import t from"react";import a from"./utils.js";import{useMobile as n}from"./contexts.js";import{C as l}from"./chunks/chevron-left-4HSuTes3.js";import"./chunks/createLucideIcon-DGp0SoUT.js";const i=t.forwardRef(({items:t,className:i,isMobile:o},s)=>{const c=n(),m=o??c;return e("nav",{ref:s,className:a("flex flex-row-reverse items-center",m?"gap-1 px-4 py-2.5":"gap-3 pr-1 pt-3 pb-4 pl-0",i),"aria-label":"Breadcrumb navigation",children:e("ol",{className:"flex flex-row-reverse items-center gap-inherit",children:t.map((n,i)=>{const o=i===t.length-1,s=!o&&(n.href||n.onClick),c=`${n.label}-${i}`;return r("li",{className:"flex items-center gap-inherit",children:[s?e("a",{href:n.href||"#",className:a("whitespace-nowrap border-0 bg-transparent p-0 no-underline",m?"text-t":"text-s","text-neutral-main","cursor-pointer hover:text-neutral-dark transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-sm"),onClick:e=>((e,r,a)=>{r!==t.length-1&&e.onClick&&(a.preventDefault(),e.onClick())})(n,i,e),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),n.onClick&&n.onClick())},"aria-label":`Go to ${n.label}`,children:n.label}):e("span",{className:a("whitespace-nowrap",m?"text-t":"text-s","text-neutral-main","font-medium"),"aria-current":o?"page":void 0,"aria-label":o?`Current page: ${n.label}`:void 0,children:n.label}),!o&&e(l,{className:a("text-black flex-shrink-0",m?"w-2.5 h-2.5":"w-3 h-3"),"aria-hidden":"true"})]},c)})})})});i.displayName="Breadcrumb";export{i as Breadcrumb};
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import t from"react";import a from"./utils.js";import{useMobile as n}from"./contexts.js";import{C as i}from"./chunks/chevron-left-4HSuTes3.js";import"./chunks/createLucideIcon-DGp0SoUT.js";const l=t.forwardRef(({items:t,className:l,isMobile:o},s)=>{const c=n(),m=o??c;return e("nav",{ref:s,className:a("flex items-center",m?"gap-1 px-4 py-2.5":"gap-3 pr-1 pt-3 pb-4 pl-0",l),"aria-label":"Breadcrumb navigation",children:e("ol",{className:"flex items-center gap-inherit",children:t.map((n,l)=>{const o=l===t.length-1,s=!o&&(n.href||n.onClick),c=`${n.label}-${l}`;return r("li",{className:"flex items-center gap-inherit",children:[s?e("a",{href:n.href||"#",className:a("whitespace-nowrap border-0 bg-transparent p-0 no-underline",m?"text-t":"text-s","text-neutral-main","cursor-pointer hover:text-neutral-dark transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-sm"),onClick:e=>((e,r,a)=>{r!==t.length-1&&e.onClick&&(a.preventDefault(),e.onClick())})(n,l,e),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),n.onClick&&n.onClick())},"aria-label":`Go to ${n.label}`,children:n.label}):e("span",{className:a("whitespace-nowrap",m?"text-t":"text-s","text-neutral-main","font-medium"),"aria-current":o?"page":void 0,"aria-label":o?`Current page: ${n.label}`:void 0,children:n.label}),!o&&e(i,{className:a("text-neutral-main flex-shrink-0",m?"w-2.5 h-2.5":"w-3 h-3"),"aria-hidden":"true"})]},c)})})})});l.displayName="Breadcrumb";export{l as Breadcrumb};

package/dist/esm/Drawer.js

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

package/dist/esm/index.js

@@ -1 +1 @@
-import{Typography as r}from"./Typography.js";import{Button as o}from"./Button.js";import{Input as s}from"./Input.js";import{Tabs as i}from"./Tabs.js";import{Drawer as t}from"./Drawer.js";import{Backdrop as m}from"./Backdrop.js";import{Breadcrumb as a}from"./Breadcrumb.js";import{Pagination as p}from"./Pagination.js";import{Accordion as e}from"./Accordion.js";import{Divider as n}from"./Divider.js";import{RadioGroup as c}from"./RadioGroup.js";import{Chips as j}from"./Chips.js";import{Menu as u}from"./Menu.js";export{MobileProvider,useMobile}from"./contexts.js";import"react";import"./utils.js";import"react/jsx-runtime";import"./chunks/chevron-left-4HSuTes3.js";import"./chunks/createLucideIcon-DGp0SoUT.js";const f=r,d=o,h=s,b=i,B=t,g=m,k=a,l=p,v=e,x=n,y=c,D=j,M=u;export{v as Accordion,g as Backdrop,k as Breadcrumb,d as Button,D as Chips,x as Divider,B as Drawer,h as Input,M as Menu,l as Pagination,y as RadioGroup,b as Tabs,f as Typography};
+import{Typography as r}from"./Typography.js";import{Button as o}from"./Button.js";import{Input as s}from"./Input.js";import{Tabs as i}from"./Tabs.js";import{Drawer as t}from"./Drawer.js";import{Backdrop as m}from"./Backdrop.js";import{Breadcrumb as a}from"./Breadcrumb.js";import{Pagination as p}from"./Pagination.js";import{Accordion as e}from"./Accordion.js";import{Divider as c}from"./Divider.js";import{RadioGroup as n}from"./RadioGroup.js";import{Chips as j}from"./Chips.js";import{Menu as u}from"./Menu.js";export{MobileProvider,useMobile}from"./contexts.js";import"react";import"./utils.js";import"react/jsx-runtime";import"react-dom";import"./chunks/chevron-left-4HSuTes3.js";import"./chunks/createLucideIcon-DGp0SoUT.js";const f=r,d=o,h=s,b=i,B=t,g=m,k=a,l=p,v=e,x=c,y=n,D=j,M=u;export{v as Accordion,g as Backdrop,k as Breadcrumb,d as Button,D as Chips,x as Divider,B as Drawer,h as Input,M as Menu,l as Pagination,y as RadioGroup,b as Tabs,f as Typography};

package/dist/types/Breadcrumb.js

@@ -19,10 +19,10 @@ const Breadcrumb = React.forwardRef(({ items, className, isMobile }, ref) => {
         // If item has href, let the anchor tag handle navigation naturally
     };
     return (jsx("nav", { ref: ref, className: cn(
-        // Base layout - RTL with flex-row-reverse to show items right to left
-        'flex flex-row-reverse items-center', 
+        // Base layout - rely on page RTL direction; no manual row-reverse
+        'flex items-center', 
         // Responsive gap and padding based on mobile state
-        actualIsMobile ? 'gap-1 px-4 py-2.5' : 'gap-3 pr-1 pt-3 pb-4 pl-0', className), "aria-label": "Breadcrumb navigation", children: jsx("ol", { className: "flex flex-row-reverse items-center gap-inherit", children: items.map((item, index) => {
+        actualIsMobile ? 'gap-1 px-4 py-2.5' : 'gap-3 pr-1 pt-3 pb-4 pl-0', className), "aria-label": "Breadcrumb navigation", children: jsx("ol", { className: "flex items-center gap-inherit", children: items.map((item, index) => {
                 const isLast = index === items.length - 1;
                 const isClickable = !isLast && (item.href || item.onClick);
                 const itemKey = `${item.label}-${index}`;
@@ -49,7 +49,7 @@ const Breadcrumb = React.forwardRef(({ items, className, isMobile }, ref) => {
                             // Color
                             'text-neutral-main', 
                             // Different styles for current page (last item)
-                            'font-medium'), "aria-current": isLast ? 'page' : undefined, "aria-label": isLast ? `Current page: ${item.label}` : undefined, children: item.label })), !isLast && (jsx(ChevronLeft, { className: cn('text-black flex-shrink-0', 
+                            'font-medium'), "aria-current": isLast ? 'page' : undefined, "aria-label": isLast ? `Current page: ${item.label}` : undefined, children: item.label })), !isLast && (jsx(ChevronLeft, { className: cn('text-neutral-main flex-shrink-0', 
                             // Responsive icon size
                             actualIsMobile ? 'w-2.5 h-2.5' : 'w-3 h-3'), "aria-hidden": "true" }))] }, itemKey));
             }) }) }));

package/dist/types/Drawer.js

@@ -1,13 +1,18 @@
 import { jsx } from 'react/jsx-runtime';
-import React, { useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import cn from './utils.js';
 import { useMobile } from './contexts.js';
 
-const Drawer = React.forwardRef(({ children, direction = 'bottom', fullScreen = false, isOpen = false, onClose, className, isMobile, ...props }, ref) => {
+const Drawer = React.forwardRef(({ children, direction = 'bottom', fullScreen = false, isOpen = false, onClose, className, isMobile, keepMounted, ...props }, ref) => {
+    const [isClient, setIsClient] = useState(false);
     const detectedIsMobile = useMobile();
     const actualIsMobile = isMobile ?? detectedIsMobile;
     const overlayRef = useRef(null);
     const drawerRef = useRef(null);
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
     // Handle escape key
     useEffect(() => {
         const handleEscape = (event) => {
@@ -100,10 +105,18 @@ const Drawer = React.forwardRef(({ children, direction = 'bottom', fullScreen =
         'p-6': !actualIsMobile,
         'p-4': actualIsMobile,
     }, className);
-    if (!isOpen) {
+    const content = (jsx("div", { ref: overlayRef, className: overlayClasses, onClick: handleOverlayClick, onKeyDown: handleOverlayKeyDown, tabIndex: -1, role: "button", "aria-label": "Close drawer", "aria-hidden": !isOpen, children: jsx("div", { ref: ref || drawerRef, className: drawerClasses, role: "dialog", "aria-modal": "true", "aria-label": "Drawer", ...props, children: children }) }));
+    // If not open and not requested to keep mounted, render nothing
+    if (!isOpen && !keepMounted) {
         return null;
     }
-    return (jsx("div", { ref: overlayRef, className: overlayClasses, onClick: handleOverlayClick, onKeyDown: handleOverlayKeyDown, tabIndex: -1, role: "button", "aria-label": "Close drawer", children: jsx("div", { ref: ref || drawerRef, className: drawerClasses, role: "dialog", "aria-modal": "true", "aria-label": "Drawer", ...props, children: children }) }));
+    // During SSR or before client mounts, we cannot portal.
+    // If keepMounted is true, render the content inline (hidden when closed).
+    if (!isClient) {
+        return content;
+    }
+    // On the client, render into body using a portal.
+    return createPortal(content, document.body);
 });
 Drawer.displayName = 'Drawer';
 

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

@@ -11,6 +11,11 @@ export type DrawerProps = {
      * Whether the component is in mobile mode (optional, auto-detected if not provided)
      */
     isMobile?: boolean;
+    /**
+     * If true, keep the drawer mounted in the DOM when closed.
+     * This allows SSR rendering but keeps it visually hidden until opened.
+     */
+    keepMounted?: boolean;
 };
 declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
 export { Drawer };

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

@@ -40,6 +40,13 @@ declare const _default: {
             defaultValue: boolean;
             description: string;
         };
+        keepMounted: {
+            name: string;
+            control: {
+                type: string;
+            };
+            description: string;
+        };
         children: {
             table: {
                 disable: boolean;
@@ -64,6 +71,7 @@ export declare const Default: {
     args: {
         direction: string;
         isMobile: boolean;
+        keepMounted: boolean;
     };
 };
 export declare const TopDirection: {
@@ -73,6 +81,7 @@ export declare const TopDirection: {
         direction: string;
         triggerButtonText: string;
         isMobile: boolean;
+        keepMounted: boolean;
     };
 };
 export declare const LeftDirection: {
@@ -82,6 +91,7 @@ export declare const LeftDirection: {
         direction: string;
         triggerButtonText: string;
         isMobile: boolean;
+        keepMounted: boolean;
     };
 };
 export declare const RightDirection: {
@@ -91,6 +101,7 @@ export declare const RightDirection: {
         direction: string;
         triggerButtonText: string;
         isMobile: boolean;
+        keepMounted: boolean;
     };
 };
 export declare const FullScreenDrawer: {
@@ -101,6 +112,17 @@ export declare const FullScreenDrawer: {
         triggerButtonText: string;
         direction: string;
         isMobile: boolean;
+        keepMounted: boolean;
+    };
+};
+export declare const KeepMounted: {
+    (args: StoryArgs): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+    args: {
+        keepMounted: boolean;
+        triggerButtonText: string;
+        direction: string;
+        isMobile: boolean;
     };
 };
 export declare const NavigationDrawer: {
@@ -120,6 +142,7 @@ export declare const MobileVersion: {
         direction: string;
         triggerButtonText: string;
         isMobile: boolean;
+        keepMounted: boolean;
     };
 };
 export declare const ResponsiveComparison: {

package/dist/types/index.js

@@ -15,6 +15,7 @@ export { MobileProvider, useMobile } from './contexts.js';
 import 'react';
 import './utils.js';
 import 'react/jsx-runtime';
+import 'react-dom';
 import './chevron-left-Ck6O99eF.js';
 import './createLucideIcon-D-q73LTT.js';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "automoby-kit",
-  "version": "1.0.36",
+  "version": "1.0.38",
   "description": "A comprehensive React UI component library - created in war 2025",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",