@smg-automotive/components 25.11.0-ST-1552-migrate-drawer.1 → 25.11.0-ST-1552-migrate-drawer.3

package/dist/cjs/components/drawer/index.d.ts

@@ -1,5 +1,9 @@
 import { FC, PropsWithChildren } from 'react';
 import { DrawerRootProps as DrawerProps } from '@chakra-ui/react';
-export declare const Drawer: FC<PropsWithChildren<DrawerProps>>;
-export type { DrawerProps };
+interface DrawerComponentProps extends Omit<DrawerProps, 'open' | 'onOpenChange'> {
+    isOpen: boolean;
+    onClose: () => void;
+}
+export declare const Drawer: FC<PropsWithChildren<DrawerComponentProps>>;
+export type { DrawerComponentProps };
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/drawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/index.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAEL,eAAe,IAAI,WAAW,EAE/B,MAAM,kBAAkB,CAAC;AAE1B,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAQrD,CAAC;AAEF,YAAY,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/index.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAEL,eAAe,IAAI,WAAW,EAE/B,MAAM,kBAAkB,CAAC;AAE1B,UAAU,oBACR,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,cAAc,CAAC;IAClD,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,CAQ9D,CAAC;AAEF,YAAY,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/cjs/index.js

@@ -330,7 +330,7 @@ var aspectRatios = react$1.defineTokens.aspectRatios({
 var animations = react$1.defineTokens.animations({
     skeletonPulse: { value: 'skeletonPulse 1.6s linear infinite' },
     spin: { value: 'spin 0.8s linear infinite' },
-    'fade-in': { value: 'fade-in var(--fade-in-duration, 0.1s) ease-out' },
+    'fade-in': { value: 'fade-in var(--fade-in-duration, 0.1s) ease-in' },
     'fade-out': { value: 'fade-out var(--fade-out-duration, 0.1s) ease-out' },
 });
 
@@ -1798,7 +1798,6 @@ var drawerRecipe = react$1.defineSlotRecipe({
     base: {
         root: {},
         backdrop: {
-            background: 'blackAlpha.500',
             position: 'fixed',
             insetInlineStart: '0',
             top: '0',
@@ -1806,12 +1805,10 @@ var drawerRecipe = react$1.defineSlotRecipe({
             height: 'full',
             zIndex: 'overlay',
             _open: {
-                animationName: 'fade-in',
-                animationDuration: 'normal',
+                animation: 'fade-in',
             },
             _closed: {
-                animationName: 'fade-out',
-                animationDuration: 'normal',
+                animation: 'fade-out',
             },
         },
         positioner: {
@@ -1825,7 +1822,7 @@ var drawerRecipe = react$1.defineSlotRecipe({
         },
         content: {
             bg: 'white',
-            boxShadow: 'lg',
+            boxShadow: 'xs',
         },
         body: {
             flex: 1,
@@ -1899,7 +1896,7 @@ var drawerRecipe = react$1.defineSlotRecipe({
             css: {
                 content: {
                     width: 'full',
-                    height: '4xl',
+                    height: '2xl',
                     _open: {
                         animationName: ['slide-in-from-top'],
                         animationDuration: 'slow',
@@ -1917,7 +1914,7 @@ var drawerRecipe = react$1.defineSlotRecipe({
             css: {
                 content: {
                     width: 'full',
-                    height: '8xl',
+                    height: 'half',
                     _open: {
                         animationName: ['slide-in-from-top'],
                         animationDuration: 'slow',
@@ -1968,7 +1965,7 @@ var drawerRecipe = react$1.defineSlotRecipe({
             css: {
                 content: {
                     width: 'full',
-                    height: '4xl',
+                    height: '2xl',
                     _open: {
                         animationName: ['slide-in-from-bottom'],
                         animationDuration: 'slow',
@@ -1986,7 +1983,7 @@ var drawerRecipe = react$1.defineSlotRecipe({
             css: {
                 content: {
                     width: 'full',
-                    height: '8xl',
+                    height: 'half',
                     _open: {
                         animationName: ['slide-in-from-bottom'],
                         animationDuration: 'slow',
@@ -5656,8 +5653,8 @@ var Dialog = function (_a) {
 };
 
 var Drawer = function (props) {
-    var children = props.children, drawerProps = __rest(props, ["children"]);
-    return (React.createElement(react$1.Drawer.Root, __assign({}, drawerProps),
+    var children = props.children, isOpen = props.isOpen, onClose = props.onClose, drawerProps = __rest(props, ["children", "isOpen", "onClose"]);
+    return (React.createElement(react$1.Drawer.Root, __assign({ open: isOpen, onOpenChange: onClose }, drawerProps),
         React.createElement(react$1.Portal, null, children)));
 };