@rubenpazch/drawer 2.0.4 → 3.0.0

package/dist/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../src/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AACjE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAC5D,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,eAAe,CAAC;AAExE,MAAM,WAAW,WAAW;IAC1B,iCAAiC;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,mCAAmC;IACnC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,yBAAyB;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iDAAiD;IACjD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gDAAgD;IAChD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,gEAAgE;IAChE,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,uBAAuB;IACvB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,8FAA8F;IAC9F,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+MjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../src/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAO3D,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AACjE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAC5D,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,eAAe,CAAC;AAExE,MAAM,WAAW,WAAW;IAC1B,iCAAiC;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,mCAAmC;IACnC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,yBAAyB;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iDAAiD;IACjD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gDAAgD;IAChD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,gEAAgE;IAChE,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,uBAAuB;IACvB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,8FAA8F;IAC9F,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAiNjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/index.cjs.js

@@ -425,6 +425,38 @@ function requireJsxRuntime () {
 
 var jsxRuntimeExports = requireJsxRuntime();
 
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".Drawer-module_root__9H22a {\n  position: fixed;\n  inset: 0;\n  z-index: 50;\n}\n\n.Drawer-module_overlay__Rargl {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n  transition: opacity 300ms ease;\n}\n\n.Drawer-module_overlayHidden__TFZlN {\n  opacity: 0;\n}\n\n.Drawer-module_overlayVisible__N4NrM {\n  opacity: 1;\n}\n\n.Drawer-module_drawer__vfWNf {\n  position: fixed;\n  background: #fff;\n  box-shadow:\n    0 10px 15px -3px rgba(0, 0, 0, 0.1),\n    0 4px 6px -4px rgba(0, 0, 0, 0.1);\n  transition: transform 300ms ease-in-out;\n  display: flex;\n  flex-direction: column;\n}\n\n.Drawer-module_left__xgJYo {\n  top: 0;\n  left: 0;\n  height: 100%;\n}\n\n.Drawer-module_right__1tmSN {\n  top: 0;\n  right: 0;\n  height: 100%;\n}\n\n.Drawer-module_top__upIWP {\n  top: 0;\n  left: 0;\n  width: 100%;\n}\n\n.Drawer-module_bottom__6xl26 {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n}\n\n.Drawer-module_widthSm__K6ZGK {\n  width: 16rem;\n}\n\n.Drawer-module_widthMd__hLcKn {\n  width: 20rem;\n}\n\n.Drawer-module_widthLg__50gKX {\n  width: 24rem;\n}\n\n.Drawer-module_widthXl__7K3jw {\n  width: 32rem;\n}\n\n.Drawer-module_widthFull__XarDU {\n  width: 100%;\n}\n\n.Drawer-module_heightSm__Cfqo4 {\n  height: 16rem;\n}\n\n.Drawer-module_heightMd__GuWSW {\n  height: 20rem;\n}\n\n.Drawer-module_heightLg__Xegtp {\n  height: 24rem;\n}\n\n.Drawer-module_heightXl__KXBN- {\n  height: 32rem;\n}\n\n.Drawer-module_heightFull__Ql0LW {\n  height: 100%;\n}\n\n.Drawer-module_translateIn__dtrHw {\n  transform: translate3d(0, 0, 0);\n}\n\n.Drawer-module_translateLeftOut__D1dDk {\n  transform: translate3d(-100%, 0, 0);\n}\n\n.Drawer-module_translateRightOut__l8ajr {\n  transform: translate3d(100%, 0, 0);\n}\n\n.Drawer-module_translateTopOut__fo51S {\n  transform: translate3d(0, -100%, 0);\n}\n\n.Drawer-module_translateBottomOut__7Mkk7 {\n  transform: translate3d(0, 100%, 0);\n}\n\n.Drawer-module_header__9o-ND {\n  padding: 1rem 1.5rem;\n  border-bottom: 1px solid #e5e7eb;\n}\n\n.Drawer-module_headerCenter__-nLFC {\n  text-align: center;\n}\n\n.Drawer-module_headerContent__dZNmL {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.Drawer-module_title__eq2N2 {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n  font-weight: 600;\n  color: #111827;\n  flex: 1;\n}\n\n.Drawer-module_closeButton__rhBhH {\n  margin-left: 1rem;\n  padding: 0.25rem;\n  border: none;\n  border-radius: 0.5rem;\n  background: transparent;\n  color: #9ca3af;\n  cursor: pointer;\n  transition:\n    color 150ms ease,\n    background-color 150ms ease;\n}\n\n.Drawer-module_closeButton__rhBhH:hover {\n  color: #4b5563;\n  background-color: #f3f4f6;\n}\n\n.Drawer-module_body__u1caV {\n  flex: 1;\n  overflow-y: auto;\n  padding: 1rem 1.5rem;\n}\n\n.Drawer-module_contained__PSHRt {\n  max-width: 64rem;\n  margin: 0 auto;\n  width: 100%;\n}\n\n.Drawer-module_footer__DfyGH {\n  padding: 1rem 1.5rem;\n  border-top: 1px solid #e5e7eb;\n  background: #f9fafb;\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n.Drawer-module_footerStart__XmQAT {\n  justify-content: flex-start;\n}\n\n.Drawer-module_footerCenter__v9ZJN {\n  justify-content: center;\n}\n\n.Drawer-module_footerEnd__d1Ysh {\n  justify-content: flex-end;\n}\n\n.Drawer-module_footerSpaceBetween__LV5m4 {\n  justify-content: space-between;\n}\n";
+var styles = {"root":"Drawer-module_root__9H22a","overlay":"Drawer-module_overlay__Rargl","overlayHidden":"Drawer-module_overlayHidden__TFZlN","overlayVisible":"Drawer-module_overlayVisible__N4NrM","drawer":"Drawer-module_drawer__vfWNf","left":"Drawer-module_left__xgJYo","right":"Drawer-module_right__1tmSN","top":"Drawer-module_top__upIWP","bottom":"Drawer-module_bottom__6xl26","widthSm":"Drawer-module_widthSm__K6ZGK","widthMd":"Drawer-module_widthMd__hLcKn","widthLg":"Drawer-module_widthLg__50gKX","widthXl":"Drawer-module_widthXl__7K3jw","widthFull":"Drawer-module_widthFull__XarDU","heightSm":"Drawer-module_heightSm__Cfqo4","heightMd":"Drawer-module_heightMd__GuWSW","heightLg":"Drawer-module_heightLg__Xegtp","heightXl":"Drawer-module_heightXl__KXBN-","heightFull":"Drawer-module_heightFull__Ql0LW","translateIn":"Drawer-module_translateIn__dtrHw","translateLeftOut":"Drawer-module_translateLeftOut__D1dDk","translateRightOut":"Drawer-module_translateRightOut__l8ajr","translateTopOut":"Drawer-module_translateTopOut__fo51S","translateBottomOut":"Drawer-module_translateBottomOut__7Mkk7","header":"Drawer-module_header__9o-ND","headerCenter":"Drawer-module_headerCenter__-nLFC","headerContent":"Drawer-module_headerContent__dZNmL","title":"Drawer-module_title__eq2N2","closeButton":"Drawer-module_closeButton__rhBhH","body":"Drawer-module_body__u1caV","contained":"Drawer-module_contained__PSHRt","footer":"Drawer-module_footer__DfyGH","footerStart":"Drawer-module_footerStart__XmQAT","footerCenter":"Drawer-module_footerCenter__v9ZJN","footerEnd":"Drawer-module_footerEnd__d1Ysh","footerSpaceBetween":"Drawer-module_footerSpaceBetween__LV5m4"};
+styleInject(css_248z);
+
+const classNames = (...classes) => classes.filter(Boolean).join(" ");
 const Drawer = ({ isOpen, onClose, position = "right", size = "md", title, children, showOverlay = true, closeOnOverlayClick = true, closeOnEscape = true, className = "", footer, headerAlign = "space-between", footerAlign = "right", contentContained = false, }) => {
     const drawerRef = require$$0.useRef(null);
     const [isAnimating, setIsAnimating] = require$$0.useState(false);
@@ -449,52 +481,49 @@ const Drawer = ({ isOpen, onClose, position = "right", size = "md", title, child
             return () => clearTimeout(timer);
         }
     }, [isOpen]);
-    const getPositionClasses = () => {
-        const base = "fixed bg-white shadow-xl transition-transform duration-300 ease-in-out";
-        const sizes = {
-            left: {
-                sm: "w-64",
-                md: "w-80",
-                lg: "w-96",
-                xl: "w-[32rem]",
-                full: "w-full",
-            },
-            right: {
-                sm: "w-64",
-                md: "w-80",
-                lg: "w-96",
-                xl: "w-[32rem]",
-                full: "w-full",
-            },
-            top: {
-                sm: "h-64",
-                md: "h-80",
-                lg: "h-96",
-                xl: "h-[32rem]",
-                full: "h-full",
-            },
-            bottom: {
-                sm: "h-64",
-                md: "h-80",
-                lg: "h-96",
-                xl: "h-[32rem]",
-                full: "h-full",
-            },
-        };
-        const positions = {
-            left: "left-0 top-0 h-full",
-            right: "right-0 top-0 h-full",
-            top: "top-0 left-0 w-full",
-            bottom: "bottom-0 left-0 w-full",
-        };
-        const transforms = {
-            left: isAnimating ? "translate-x-0" : "-translate-x-full",
-            right: isAnimating ? "translate-x-0" : "translate-x-full",
-            top: isAnimating ? "translate-y-0" : "-translate-y-full",
-            bottom: isAnimating ? "translate-y-0" : "translate-y-full",
-        };
-        return `${base} ${positions[position]} ${sizes[position][size]} ${transforms[position]} ${className}`;
+    const positionClasses = {
+        left: styles.left,
+        right: styles.right,
+        top: styles.top,
+        bottom: styles.bottom,
+    };
+    const sizeClasses = {
+        left: {
+            sm: styles.widthSm,
+            md: styles.widthMd,
+            lg: styles.widthLg,
+            xl: styles.widthXl,
+            full: styles.widthFull,
+        },
+        right: {
+            sm: styles.widthSm,
+            md: styles.widthMd,
+            lg: styles.widthLg,
+            xl: styles.widthXl,
+            full: styles.widthFull,
+        },
+        top: {
+            sm: styles.heightSm,
+            md: styles.heightMd,
+            lg: styles.heightLg,
+            xl: styles.heightXl,
+            full: styles.heightFull,
+        },
+        bottom: {
+            sm: styles.heightSm,
+            md: styles.heightMd,
+            lg: styles.heightLg,
+            xl: styles.heightXl,
+            full: styles.heightFull,
+        },
+    };
+    const transformClasses = {
+        left: isAnimating ? styles.translateIn : styles.translateLeftOut,
+        right: isAnimating ? styles.translateIn : styles.translateRightOut,
+        top: isAnimating ? styles.translateIn : styles.translateTopOut,
+        bottom: isAnimating ? styles.translateIn : styles.translateBottomOut,
     };
+    const getPositionClasses = () => classNames(styles.drawer, positionClasses[position], sizeClasses[position][size], transformClasses[position], className);
     require$$0.useEffect(() => {
         if (!isOpen || !closeOnEscape)
             return;
@@ -531,12 +560,12 @@ const Drawer = ({ isOpen, onClose, position = "right", size = "md", title, child
     if (!shouldRender)
         return null;
     const footerAlignClass = {
-        left: "justify-start",
-        center: "justify-center",
-        right: "justify-end",
-        "space-between": "justify-between",
+        left: styles.footerStart,
+        center: styles.footerCenter,
+        right: styles.footerEnd,
+        "space-between": styles.footerSpaceBetween,
     }[footerAlign];
-    return (jsxRuntimeExports.jsxs("div", { className: "fixed inset-0 z-50", role: "dialog", "aria-modal": "true", "aria-labelledby": title ? "drawer-title" : undefined, children: [showOverlay && (jsxRuntimeExports.jsx("div", { className: `fixed inset-0 bg-black/50 transition-opacity duration-300 ${isAnimating ? "opacity-100" : "opacity-0"}`, onClick: handleOverlayClick, "aria-hidden": "true" })), jsxRuntimeExports.jsxs("div", { ref: drawerRef, tabIndex: -1, className: `${getPositionClasses()} flex flex-col`, children: [title && (jsxRuntimeExports.jsx("div", { className: `px-6 py-4 border-b border-gray-200 ${headerAlign === "center" ? "text-center" : ""}`, children: jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx("h2", { id: "drawer-title", className: "text-lg font-semibold text-gray-900 flex-1", children: title }), jsxRuntimeExports.jsx("button", { onClick: onClose, className: "ml-4 p-1 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors", "aria-label": "Close drawer", children: jsxRuntimeExports.jsx(icons.CloseIcon, { size: "md" }) })] }) })), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: contentContained ? (jsxRuntimeExports.jsx("div", { className: "max-w-5xl mx-auto", children: children })) : (children) }), footer && (jsxRuntimeExports.jsx("div", { className: `px-6 py-4 border-t border-gray-200 bg-gray-50 flex ${footerAlignClass}`, children: contentContained ? (jsxRuntimeExports.jsx("div", { className: "max-w-5xl mx-auto w-full", children: footer })) : (footer) }))] })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: styles.root, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? "drawer-title" : undefined, children: [showOverlay && (jsxRuntimeExports.jsx("div", { className: classNames(styles.overlay, isAnimating ? styles.overlayVisible : styles.overlayHidden), "data-testid": "drawer-overlay", onClick: handleOverlayClick, "aria-hidden": "true" })), jsxRuntimeExports.jsxs("div", { ref: drawerRef, tabIndex: -1, className: getPositionClasses(), "data-position": position, "data-size": size, children: [title && (jsxRuntimeExports.jsx("div", { className: classNames(styles.header, headerAlign === "center" && styles.headerCenter), children: jsxRuntimeExports.jsxs("div", { className: styles.headerContent, children: [jsxRuntimeExports.jsx("h2", { id: "drawer-title", className: styles.title, children: title }), jsxRuntimeExports.jsx("button", { onClick: onClose, className: styles.closeButton, "aria-label": "Close drawer", children: jsxRuntimeExports.jsx(icons.CloseIcon, { size: "md" }) })] }) })), jsxRuntimeExports.jsx("div", { className: styles.body, children: contentContained ? (jsxRuntimeExports.jsx("div", { className: styles.contained, children: children })) : (children) }), footer && (jsxRuntimeExports.jsx("div", { className: classNames(styles.footer, footerAlignClass), children: contentContained ? (jsxRuntimeExports.jsx("div", { className: styles.contained, children: footer })) : (footer) }))] })] }));
 };
 
 module.exports = Drawer;

package/dist/index.esm.js

@@ -423,6 +423,38 @@ function requireJsxRuntime () {
 
 var jsxRuntimeExports = requireJsxRuntime();
 
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".Drawer-module_root__9H22a {\n  position: fixed;\n  inset: 0;\n  z-index: 50;\n}\n\n.Drawer-module_overlay__Rargl {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n  transition: opacity 300ms ease;\n}\n\n.Drawer-module_overlayHidden__TFZlN {\n  opacity: 0;\n}\n\n.Drawer-module_overlayVisible__N4NrM {\n  opacity: 1;\n}\n\n.Drawer-module_drawer__vfWNf {\n  position: fixed;\n  background: #fff;\n  box-shadow:\n    0 10px 15px -3px rgba(0, 0, 0, 0.1),\n    0 4px 6px -4px rgba(0, 0, 0, 0.1);\n  transition: transform 300ms ease-in-out;\n  display: flex;\n  flex-direction: column;\n}\n\n.Drawer-module_left__xgJYo {\n  top: 0;\n  left: 0;\n  height: 100%;\n}\n\n.Drawer-module_right__1tmSN {\n  top: 0;\n  right: 0;\n  height: 100%;\n}\n\n.Drawer-module_top__upIWP {\n  top: 0;\n  left: 0;\n  width: 100%;\n}\n\n.Drawer-module_bottom__6xl26 {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n}\n\n.Drawer-module_widthSm__K6ZGK {\n  width: 16rem;\n}\n\n.Drawer-module_widthMd__hLcKn {\n  width: 20rem;\n}\n\n.Drawer-module_widthLg__50gKX {\n  width: 24rem;\n}\n\n.Drawer-module_widthXl__7K3jw {\n  width: 32rem;\n}\n\n.Drawer-module_widthFull__XarDU {\n  width: 100%;\n}\n\n.Drawer-module_heightSm__Cfqo4 {\n  height: 16rem;\n}\n\n.Drawer-module_heightMd__GuWSW {\n  height: 20rem;\n}\n\n.Drawer-module_heightLg__Xegtp {\n  height: 24rem;\n}\n\n.Drawer-module_heightXl__KXBN- {\n  height: 32rem;\n}\n\n.Drawer-module_heightFull__Ql0LW {\n  height: 100%;\n}\n\n.Drawer-module_translateIn__dtrHw {\n  transform: translate3d(0, 0, 0);\n}\n\n.Drawer-module_translateLeftOut__D1dDk {\n  transform: translate3d(-100%, 0, 0);\n}\n\n.Drawer-module_translateRightOut__l8ajr {\n  transform: translate3d(100%, 0, 0);\n}\n\n.Drawer-module_translateTopOut__fo51S {\n  transform: translate3d(0, -100%, 0);\n}\n\n.Drawer-module_translateBottomOut__7Mkk7 {\n  transform: translate3d(0, 100%, 0);\n}\n\n.Drawer-module_header__9o-ND {\n  padding: 1rem 1.5rem;\n  border-bottom: 1px solid #e5e7eb;\n}\n\n.Drawer-module_headerCenter__-nLFC {\n  text-align: center;\n}\n\n.Drawer-module_headerContent__dZNmL {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.Drawer-module_title__eq2N2 {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n  font-weight: 600;\n  color: #111827;\n  flex: 1;\n}\n\n.Drawer-module_closeButton__rhBhH {\n  margin-left: 1rem;\n  padding: 0.25rem;\n  border: none;\n  border-radius: 0.5rem;\n  background: transparent;\n  color: #9ca3af;\n  cursor: pointer;\n  transition:\n    color 150ms ease,\n    background-color 150ms ease;\n}\n\n.Drawer-module_closeButton__rhBhH:hover {\n  color: #4b5563;\n  background-color: #f3f4f6;\n}\n\n.Drawer-module_body__u1caV {\n  flex: 1;\n  overflow-y: auto;\n  padding: 1rem 1.5rem;\n}\n\n.Drawer-module_contained__PSHRt {\n  max-width: 64rem;\n  margin: 0 auto;\n  width: 100%;\n}\n\n.Drawer-module_footer__DfyGH {\n  padding: 1rem 1.5rem;\n  border-top: 1px solid #e5e7eb;\n  background: #f9fafb;\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n.Drawer-module_footerStart__XmQAT {\n  justify-content: flex-start;\n}\n\n.Drawer-module_footerCenter__v9ZJN {\n  justify-content: center;\n}\n\n.Drawer-module_footerEnd__d1Ysh {\n  justify-content: flex-end;\n}\n\n.Drawer-module_footerSpaceBetween__LV5m4 {\n  justify-content: space-between;\n}\n";
+var styles = {"root":"Drawer-module_root__9H22a","overlay":"Drawer-module_overlay__Rargl","overlayHidden":"Drawer-module_overlayHidden__TFZlN","overlayVisible":"Drawer-module_overlayVisible__N4NrM","drawer":"Drawer-module_drawer__vfWNf","left":"Drawer-module_left__xgJYo","right":"Drawer-module_right__1tmSN","top":"Drawer-module_top__upIWP","bottom":"Drawer-module_bottom__6xl26","widthSm":"Drawer-module_widthSm__K6ZGK","widthMd":"Drawer-module_widthMd__hLcKn","widthLg":"Drawer-module_widthLg__50gKX","widthXl":"Drawer-module_widthXl__7K3jw","widthFull":"Drawer-module_widthFull__XarDU","heightSm":"Drawer-module_heightSm__Cfqo4","heightMd":"Drawer-module_heightMd__GuWSW","heightLg":"Drawer-module_heightLg__Xegtp","heightXl":"Drawer-module_heightXl__KXBN-","heightFull":"Drawer-module_heightFull__Ql0LW","translateIn":"Drawer-module_translateIn__dtrHw","translateLeftOut":"Drawer-module_translateLeftOut__D1dDk","translateRightOut":"Drawer-module_translateRightOut__l8ajr","translateTopOut":"Drawer-module_translateTopOut__fo51S","translateBottomOut":"Drawer-module_translateBottomOut__7Mkk7","header":"Drawer-module_header__9o-ND","headerCenter":"Drawer-module_headerCenter__-nLFC","headerContent":"Drawer-module_headerContent__dZNmL","title":"Drawer-module_title__eq2N2","closeButton":"Drawer-module_closeButton__rhBhH","body":"Drawer-module_body__u1caV","contained":"Drawer-module_contained__PSHRt","footer":"Drawer-module_footer__DfyGH","footerStart":"Drawer-module_footerStart__XmQAT","footerCenter":"Drawer-module_footerCenter__v9ZJN","footerEnd":"Drawer-module_footerEnd__d1Ysh","footerSpaceBetween":"Drawer-module_footerSpaceBetween__LV5m4"};
+styleInject(css_248z);
+
+const classNames = (...classes) => classes.filter(Boolean).join(" ");
 const Drawer = ({ isOpen, onClose, position = "right", size = "md", title, children, showOverlay = true, closeOnOverlayClick = true, closeOnEscape = true, className = "", footer, headerAlign = "space-between", footerAlign = "right", contentContained = false, }) => {
     const drawerRef = useRef(null);
     const [isAnimating, setIsAnimating] = useState(false);
@@ -447,52 +479,49 @@ const Drawer = ({ isOpen, onClose, position = "right", size = "md", title, child
             return () => clearTimeout(timer);
         }
     }, [isOpen]);
-    const getPositionClasses = () => {
-        const base = "fixed bg-white shadow-xl transition-transform duration-300 ease-in-out";
-        const sizes = {
-            left: {
-                sm: "w-64",
-                md: "w-80",
-                lg: "w-96",
-                xl: "w-[32rem]",
-                full: "w-full",
-            },
-            right: {
-                sm: "w-64",
-                md: "w-80",
-                lg: "w-96",
-                xl: "w-[32rem]",
-                full: "w-full",
-            },
-            top: {
-                sm: "h-64",
-                md: "h-80",
-                lg: "h-96",
-                xl: "h-[32rem]",
-                full: "h-full",
-            },
-            bottom: {
-                sm: "h-64",
-                md: "h-80",
-                lg: "h-96",
-                xl: "h-[32rem]",
-                full: "h-full",
-            },
-        };
-        const positions = {
-            left: "left-0 top-0 h-full",
-            right: "right-0 top-0 h-full",
-            top: "top-0 left-0 w-full",
-            bottom: "bottom-0 left-0 w-full",
-        };
-        const transforms = {
-            left: isAnimating ? "translate-x-0" : "-translate-x-full",
-            right: isAnimating ? "translate-x-0" : "translate-x-full",
-            top: isAnimating ? "translate-y-0" : "-translate-y-full",
-            bottom: isAnimating ? "translate-y-0" : "translate-y-full",
-        };
-        return `${base} ${positions[position]} ${sizes[position][size]} ${transforms[position]} ${className}`;
+    const positionClasses = {
+        left: styles.left,
+        right: styles.right,
+        top: styles.top,
+        bottom: styles.bottom,
+    };
+    const sizeClasses = {
+        left: {
+            sm: styles.widthSm,
+            md: styles.widthMd,
+            lg: styles.widthLg,
+            xl: styles.widthXl,
+            full: styles.widthFull,
+        },
+        right: {
+            sm: styles.widthSm,
+            md: styles.widthMd,
+            lg: styles.widthLg,
+            xl: styles.widthXl,
+            full: styles.widthFull,
+        },
+        top: {
+            sm: styles.heightSm,
+            md: styles.heightMd,
+            lg: styles.heightLg,
+            xl: styles.heightXl,
+            full: styles.heightFull,
+        },
+        bottom: {
+            sm: styles.heightSm,
+            md: styles.heightMd,
+            lg: styles.heightLg,
+            xl: styles.heightXl,
+            full: styles.heightFull,
+        },
+    };
+    const transformClasses = {
+        left: isAnimating ? styles.translateIn : styles.translateLeftOut,
+        right: isAnimating ? styles.translateIn : styles.translateRightOut,
+        top: isAnimating ? styles.translateIn : styles.translateTopOut,
+        bottom: isAnimating ? styles.translateIn : styles.translateBottomOut,
     };
+    const getPositionClasses = () => classNames(styles.drawer, positionClasses[position], sizeClasses[position][size], transformClasses[position], className);
     useEffect(() => {
         if (!isOpen || !closeOnEscape)
             return;
@@ -529,12 +558,12 @@ const Drawer = ({ isOpen, onClose, position = "right", size = "md", title, child
     if (!shouldRender)
         return null;
     const footerAlignClass = {
-        left: "justify-start",
-        center: "justify-center",
-        right: "justify-end",
-        "space-between": "justify-between",
+        left: styles.footerStart,
+        center: styles.footerCenter,
+        right: styles.footerEnd,
+        "space-between": styles.footerSpaceBetween,
     }[footerAlign];
-    return (jsxRuntimeExports.jsxs("div", { className: "fixed inset-0 z-50", role: "dialog", "aria-modal": "true", "aria-labelledby": title ? "drawer-title" : undefined, children: [showOverlay && (jsxRuntimeExports.jsx("div", { className: `fixed inset-0 bg-black/50 transition-opacity duration-300 ${isAnimating ? "opacity-100" : "opacity-0"}`, onClick: handleOverlayClick, "aria-hidden": "true" })), jsxRuntimeExports.jsxs("div", { ref: drawerRef, tabIndex: -1, className: `${getPositionClasses()} flex flex-col`, children: [title && (jsxRuntimeExports.jsx("div", { className: `px-6 py-4 border-b border-gray-200 ${headerAlign === "center" ? "text-center" : ""}`, children: jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx("h2", { id: "drawer-title", className: "text-lg font-semibold text-gray-900 flex-1", children: title }), jsxRuntimeExports.jsx("button", { onClick: onClose, className: "ml-4 p-1 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors", "aria-label": "Close drawer", children: jsxRuntimeExports.jsx(CloseIcon, { size: "md" }) })] }) })), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: contentContained ? (jsxRuntimeExports.jsx("div", { className: "max-w-5xl mx-auto", children: children })) : (children) }), footer && (jsxRuntimeExports.jsx("div", { className: `px-6 py-4 border-t border-gray-200 bg-gray-50 flex ${footerAlignClass}`, children: contentContained ? (jsxRuntimeExports.jsx("div", { className: "max-w-5xl mx-auto w-full", children: footer })) : (footer) }))] })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: styles.root, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? "drawer-title" : undefined, children: [showOverlay && (jsxRuntimeExports.jsx("div", { className: classNames(styles.overlay, isAnimating ? styles.overlayVisible : styles.overlayHidden), "data-testid": "drawer-overlay", onClick: handleOverlayClick, "aria-hidden": "true" })), jsxRuntimeExports.jsxs("div", { ref: drawerRef, tabIndex: -1, className: getPositionClasses(), "data-position": position, "data-size": size, children: [title && (jsxRuntimeExports.jsx("div", { className: classNames(styles.header, headerAlign === "center" && styles.headerCenter), children: jsxRuntimeExports.jsxs("div", { className: styles.headerContent, children: [jsxRuntimeExports.jsx("h2", { id: "drawer-title", className: styles.title, children: title }), jsxRuntimeExports.jsx("button", { onClick: onClose, className: styles.closeButton, "aria-label": "Close drawer", children: jsxRuntimeExports.jsx(CloseIcon, { size: "md" }) })] }) })), jsxRuntimeExports.jsx("div", { className: styles.body, children: contentContained ? (jsxRuntimeExports.jsx("div", { className: styles.contained, children: children })) : (children) }), footer && (jsxRuntimeExports.jsx("div", { className: classNames(styles.footer, footerAlignClass), children: contentContained ? (jsxRuntimeExports.jsx("div", { className: styles.contained, children: footer })) : (footer) }))] })] }));
 };
 
 export { Drawer as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rubenpazch/drawer",
-  "version": "2.0.4",
+  "version": "3.0.0",
   "description": "Flexible drawer/sidebar component with multiple positions and animations",
   "private": false,
   "main": "dist/index.cjs.js",
@@ -16,7 +16,9 @@
   "files": [
     "dist"
   ],
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "exports": {
     ".": {
       "import": "./dist/index.esm.js",
@@ -25,7 +27,7 @@
     }
   },
   "dependencies": {
-    "@rubenpazch/icons": "3.0.4"
+    "@rubenpazch/icons": "4.0.0"
   },
   "devDependencies": {
     "@types/react": "^19.0.2",