@ttoss/components 2.0.0 → 2.0.1

package/dist/esm/index.js

@@ -2492,9 +2492,36 @@ var Menu = ({
 
 // src/components/Drawer.tsx
 import { Box as Box4 } from "@ttoss/ui";
+import { css as createClassName2 } from "@emotion/css";
 import DrawerUi from "react-modern-drawer";
-import "react-modern-drawer/dist/index.css";
 import { jsx as jsx9 } from "react/jsx-runtime";
+var reactModernDrawerClassName = createClassName2(`
+.EZDrawer .EZDrawer__checkbox {
+    display: none;
+}
+.EZDrawer .EZDrawer__checkbox:checked ~ .EZDrawer__overlay {
+    display: block;
+    opacity: 1;
+}
+.EZDrawer .EZDrawer__checkbox:checked ~ .EZDrawer__container {
+    visibility: visible;
+    transform: translate3d(0, 0, 0) !important;
+}
+.EZDrawer .EZDrawer__overlay {
+    display: none;
+    height: 100vh;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100%;
+}
+.EZDrawer .EZDrawer__container {
+    position: fixed;
+    visibility: hidden;
+    background: white;
+    transition: all;
+    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
+}`);
 var Drawer = ({
   children,
   sx,
@@ -2502,6 +2529,7 @@ var Drawer = ({
 }) => {
   return /* @__PURE__ */jsx9(DrawerUi, {
     ...props,
+    className: reactModernDrawerClassName,
     children: /* @__PURE__ */jsx9(Box4, {
       sx: {
         width: "100%",

package/dist/index.d.ts

@@ -352,7 +352,6 @@ type MenuProps = {
 declare const Menu: ({ children, srcLogo, onClose, onOpen, isOpen, sx, direction, sizeOnDesktop, sizeOnMobile, menuIcon, }: MenuProps) => react_jsx_runtime.JSX.Element;
 
 type DrawerUiProps = React.ComponentProps<typeof DrawerUi>;
-
 type DrawerProps = DrawerUiProps & {
     sx?: BoxProps['sx'];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "React components for ttoss ecosystem.",
   "author": "ttoss",
   "contributors": [
@@ -47,7 +47,7 @@
   "peerDependencies": {
     "react": ">=16.8.0",
     "@ttoss/react-hooks": "^2.0.0",
-    "@ttoss/ui": "^5.0.0"
+    "@ttoss/ui": "^5.0.1"
   },
   "devDependencies": {
     "@types/jest": "^29.5.12",
@@ -57,9 +57,9 @@
     "tsup": "^8.2.4",
     "@ttoss/config": "^1.32.9",
     "@ttoss/react-hooks": "^2.0.0",
-    "@ttoss/test-utils": "^2.1.13",
     "@ttoss/react-icons": "^0.4.0",
-    "@ttoss/ui": "^5.0.0"
+    "@ttoss/test-utils": "^2.1.13",
+    "@ttoss/ui": "^5.0.1"
   },
   "keywords": [
     "React",

package/src/components/Drawer.tsx

@@ -1,18 +1,48 @@
 import * as React from 'react';
 import { Box, type BoxProps } from '@ttoss/ui';
+import { css as createClassName } from '@emotion/css';
 import DrawerUi from 'react-modern-drawer';
 
 type DrawerUiProps = React.ComponentProps<typeof DrawerUi>;
 
-import 'react-modern-drawer/dist/index.css';
-
 export type DrawerProps = DrawerUiProps & {
   sx?: BoxProps['sx'];
 };
 
+/**
+ * https://github.com/Farzin-Firoozi/react-modern-drawer/blob/master/src/styles.css
+ */
+const reactModernDrawerClassName = createClassName(`
+.EZDrawer .EZDrawer__checkbox {
+    display: none;
+}
+.EZDrawer .EZDrawer__checkbox:checked ~ .EZDrawer__overlay {
+    display: block;
+    opacity: 1;
+}
+.EZDrawer .EZDrawer__checkbox:checked ~ .EZDrawer__container {
+    visibility: visible;
+    transform: translate3d(0, 0, 0) !important;
+}
+.EZDrawer .EZDrawer__overlay {
+    display: none;
+    height: 100vh;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100%;
+}
+.EZDrawer .EZDrawer__container {
+    position: fixed;
+    visibility: hidden;
+    background: white;
+    transition: all;
+    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
+}`);
+
 export const Drawer = ({ children, sx, ...props }: DrawerProps) => {
   return (
-    <DrawerUi {...props}>
+    <DrawerUi {...props} className={reactModernDrawerClassName}>
       <Box
         sx={{
           width: '100%',