automoby-kit 1.0.26 → 1.0.27

package/dist/cjs/Backdrop.js

@@ -1 +1 @@
-"use strict";var r=require("react/jsx-runtime"),e=require("react"),i=require("./utils.js");const s=e.forwardRef(({isOpen:e=!1,onClick:s,blur:t=!1,zIndex:a=51,className:n,children:l,visibleChildren:c,...d},o)=>{const u=i("fixed inset-0 transition-all duration-300",{"backdrop-blur-sm":t},n),h={backgroundColor:"rgba(0, 0, 0, 0.60)",zIndex:a,width:"100vw",height:"100vh"};return r.jsxs(r.Fragment,{children:[!e&&c,e&&r.jsxs("div",{ref:o,className:u,style:h,onClick:r=>{s&&r.target===r.currentTarget&&s()},role:"presentation",...d,children:[c,l]})]})});s.displayName="Backdrop",exports.Backdrop=s;
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("react-dom"),i=require("./utils.js");const a=r.forwardRef(({isOpen:r=!1,onClick:a,blur:n=!1,zIndex:s=51,disablePortal:d=!1,className:o,children:c,visibleChildren:l,...u},m)=>{const b=i("fixed inset-0 transition-all duration-300",{"backdrop-blur-sm":n},o),p={backgroundColor:"rgba(0, 0, 0, 0.60)",zIndex:s,width:"100%",height:"100%"},h=e.jsxs(e.Fragment,{children:[!r&&l,r&&e.jsxs("div",{ref:m,className:b,style:p,onClick:e=>{a&&e.target===e.currentTarget&&a()},role:"presentation",...u,children:[l,c]})]});return d||"undefined"==typeof document?h:t.createPortal(h,document.body)});a.displayName="Backdrop",exports.Backdrop=a;

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/Backdrop.js

@@ -1 +1 @@
-import{jsxs as r,Fragment as e}from"react/jsx-runtime";import i from"react";import t from"./utils.js";const n=i.forwardRef(({isOpen:i=!1,onClick:n,blur:o=!1,zIndex:a=51,className:l,children:s,visibleChildren:c,...d},m)=>{const p=t("fixed inset-0 transition-all duration-300",{"backdrop-blur-sm":o},l);return r(e,{children:[!i&&c,i&&r("div",{ref:m,className:p,style:{backgroundColor:"rgba(0, 0, 0, 0.60)",zIndex:a,width:"100vw",height:"100vh"},onClick:r=>{n&&r.target===r.currentTarget&&n()},role:"presentation",...d,children:[c,s]})]})});n.displayName="Backdrop";export{n as Backdrop};
+import{jsxs as r,Fragment as e}from"react/jsx-runtime";import t from"react";import{createPortal as o}from"react-dom";import i from"./utils.js";const n=t.forwardRef(({isOpen:t=!1,onClick:n,blur:a=!1,zIndex:d=51,disablePortal:l=!1,className:c,children:s,visibleChildren:m,...p},u)=>{const f=i("fixed inset-0 transition-all duration-300",{"backdrop-blur-sm":a},c),b=r(e,{children:[!t&&m,t&&r("div",{ref:u,className:f,style:{backgroundColor:"rgba(0, 0, 0, 0.60)",zIndex:d,width:"100%",height:"100%"},onClick:r=>{n&&r.target===r.currentTarget&&n()},role:"presentation",...p,children:[m,s]})]});return l||"undefined"==typeof document?b:o(b,document.body)});n.displayName="Backdrop";export{n as Backdrop};

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/Backdrop.js

@@ -1,8 +1,9 @@
 import { jsxs, Fragment } from 'react/jsx-runtime';
 import React from 'react';
+import { createPortal } from 'react-dom';
 import cn from './utils.js';
 
-const Backdrop = React.forwardRef(({ isOpen = false, onClick, blur = false, zIndex = 51, className, children, visibleChildren, ...props }, ref) => {
+const Backdrop = React.forwardRef(({ isOpen = false, onClick, blur = false, zIndex = 51, disablePortal = false, className, children, visibleChildren, ...props }, ref) => {
     // // Don't render anything if backdrop is not open
     // if (!isOpen) {
     //   return null;
@@ -18,10 +19,15 @@ const Backdrop = React.forwardRef(({ isOpen = false, onClick, blur = false, zInd
     const backdropStyle = {
         backgroundColor: 'rgba(0, 0, 0, 0.60)',
         zIndex,
-        width: '100vw',
-        height: '100vh',
+        width: '100%',
+        height: '100%',
     };
-    return (jsxs(Fragment, { children: [!isOpen && visibleChildren, isOpen && (jsxs("div", { ref: ref, className: backdropClasses, style: backdropStyle, onClick: handleClick, role: "presentation", ...props, children: [visibleChildren, children] }))] }));
+    const backdropContent = (jsxs(Fragment, { children: [!isOpen && visibleChildren, isOpen && (jsxs("div", { ref: ref, className: backdropClasses, style: backdropStyle, onClick: handleClick, role: "presentation", ...props, children: [visibleChildren, children] }))] }));
+    // Use portal to render in body unless disabled
+    if (!disablePortal && typeof document !== 'undefined') {
+        return createPortal(backdropContent, document.body);
+    }
+    return backdropContent;
 });
 Backdrop.displayName = 'Backdrop';
 

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

@@ -17,6 +17,10 @@ export interface BackdropProps {
      * Custom z-index (defaults to z-51 which is drawer z-index + 1)
      */
     zIndex?: number;
+    /**
+     * Disable portal rendering (useful for stories)
+     */
+    disablePortal?: boolean;
     children?: React.ReactNode;
     visibleChildren?: React.ReactNode;
 }

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.26",
+  "version": "1.0.27",
   "description": "A comprehensive React UI component library - created in war 2025",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",