@smg-automotive/components 25.11.0-migrate-v3-header-full.1 → 25.11.0-migrate-v3-header-full.2

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

@@ -0,0 +1,4 @@
+import { FC, PropsWithChildren } from 'react';
+import { DrawerBodyProps } from '@chakra-ui/react';
+export declare const DrawerBody: FC<PropsWithChildren<DrawerBodyProps>>;
+//# sourceMappingURL=DrawerBody.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerBody.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/DrawerBody.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAA0B,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAE3E,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAI7D,CAAC"}

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

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from 'react';
+import { DrawerContentProps as ChakraDrawerContentProps } from '@chakra-ui/react';
+interface Props extends ChakraDrawerContentProps {
+    withCloseButton?: boolean;
+}
+export declare const DrawerContent: FC<PropsWithChildren<Props>>;
+export {};
+//# sourceMappingURL=DrawerContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/DrawerContent.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAEL,kBAAkB,IAAI,wBAAwB,EAC/C,MAAM,kBAAkB,CAAC;AAI1B,UAAU,KAAM,SAAQ,wBAAwB;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAetD,CAAC"}

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

@@ -0,0 +1,3 @@
+import { FC, PropsWithChildren } from 'react';
+export declare const DrawerOverlay: FC<PropsWithChildren>;
+//# sourceMappingURL=DrawerOverlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerOverlay.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/DrawerOverlay.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIrD,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,iBAAiB,CAE/C,CAAC"}

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

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

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

@@ -0,0 +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,EAEhB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,UAAU,WAAY,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,cAAc,CAAC;IAC1E,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAYrD,CAAC;AAEF,YAAY,EAAE,WAAW,EAAE,CAAC;AAE5B,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC"}

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

@@ -14,6 +14,7 @@ export * from './count';
 export * from './datePicker';
 export * from './devOverlay';
 export * from './dialog';
+export * from './drawer';
 export * from './energyLabel';
 export * from './errorPage';
 export * from './flex';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC"}

package/dist/cjs/index.js

@@ -61,6 +61,7 @@ var sizes = react$1.defineTokens.sizes({
     '6xl': { value: '20rem' },
     '7xl': { value: '30rem' },
     '8xl': { value: '45rem' },
+    half: { value: '50%' },
     full: { value: '100%' },
     fit: { value: 'fit-content' },
     container: {
@@ -147,6 +148,9 @@ var durations = react$1.defineTokens.durations({
     normal: {
         value: '200ms',
     },
+    slow: {
+        value: '350ms',
+    },
 });
 
 var cursor = react$1.defineTokens.cursor({
@@ -328,7 +332,8 @@ 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' },
 });
 
 var textStyles = react$1.defineTextStyles({
@@ -1961,6 +1966,249 @@ var energyLabelRecipe = react$1.defineSlotRecipe({
     },
 });
 
+var drawerRecipe = react$1.defineSlotRecipe({
+    slots: ['root', 'backdrop', 'positioner', 'content', 'body', 'closeTrigger'],
+    className: 'chakra-drawer',
+    base: {
+        root: {},
+        backdrop: {
+            position: 'fixed',
+            insetInlineStart: '0',
+            top: '0',
+            width: 'full',
+            height: 'full',
+            zIndex: 'overlay',
+            _open: {
+                animation: 'fade-in',
+            },
+            _closed: {
+                animation: 'fade-out',
+            },
+        },
+        positioner: {
+            display: 'flex',
+            width: 'full',
+            height: 'full',
+            position: 'fixed',
+            insetInlineStart: '0',
+            top: '0',
+            zIndex: 'modal',
+        },
+        content: {
+            bg: 'white',
+            boxShadow: 'xs',
+        },
+        body: {
+            flex: 1,
+            padding: 'lg',
+            overflowY: 'auto',
+        },
+        closeTrigger: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: 'xs',
+            height: 'xs',
+            borderRadius: 'sm',
+            color: 'gray.800',
+            fontSize: 'base',
+            cursor: 'pointer',
+            _hover: {
+                bg: 'gray.100',
+            },
+        },
+    },
+    variants: {
+        placement: {
+            top: {
+                positioner: {
+                    alignItems: 'flex-start',
+                    justifyContent: 'stretch',
+                },
+            },
+            bottom: {
+                positioner: {
+                    alignItems: 'flex-end',
+                    justifyContent: 'stretch',
+                },
+            },
+            left: {
+                positioner: {
+                    alignItems: 'stretch',
+                    justifyContent: 'flex-start',
+                },
+            },
+            right: {
+                positioner: {
+                    alignItems: 'stretch',
+                    justifyContent: 'flex-end',
+                },
+            },
+        },
+        size: {
+            xl: {
+                content: {
+                    width: '4xl',
+                },
+            },
+            half: {
+                content: {
+                    width: 'half',
+                },
+            },
+            full: {
+                content: {
+                    width: 'full',
+                },
+            },
+        },
+    },
+    compoundVariants: [
+        {
+            placement: 'top',
+            size: 'xl',
+            css: {
+                content: {
+                    width: 'full',
+                    height: '2xl',
+                    _open: {
+                        animationName: 'slide-in-from-top',
+                        animationDuration: 'slow',
+                    },
+                    _closed: {
+                        animationName: 'slide-out-to-top',
+                        animationDuration: 'fast',
+                    },
+                },
+            },
+        },
+        {
+            placement: 'top',
+            size: 'half',
+            css: {
+                content: {
+                    width: 'full',
+                    height: 'half',
+                    _open: {
+                        animationName: 'slide-in-from-top',
+                        animationDuration: 'slow',
+                    },
+                    _closed: {
+                        animationName: 'slide-out-to-top',
+                        animationDuration: 'fast',
+                    },
+                },
+            },
+        },
+        {
+            placement: 'top',
+            size: 'full',
+            css: {
+                content: {
+                    width: 'full',
+                    height: 'full',
+                    _open: {
+                        animationName: 'slide-in-from-top',
+                        animationDuration: 'slow',
+                    },
+                    _closed: {
+                        animationName: 'slide-out-to-top',
+                        animationDuration: 'fast',
+                    },
+                },
+            },
+        },
+        {
+            placement: 'right',
+            css: {
+                content: {
+                    _open: {
+                        animationName: 'slide-in-from-right',
+                        animationDuration: 'slow',
+                    },
+                    _closed: {
+                        animationName: 'slide-out-to-right',
+                        animationDuration: 'fast',
+                    },
+                },
+            },
+        },
+        {
+            placement: 'bottom',
+            size: 'xl',
+            css: {
+                content: {
+                    width: 'full',
+                    height: '2xl',
+                    _open: {
+                        animationName: 'slide-in-from-bottom',
+                        animationDuration: 'slow',
+                    },
+                    _closed: {
+                        animationName: 'slide-out-to-bottom',
+                        animationDuration: 'fast',
+                    },
+                },
+            },
+        },
+        {
+            placement: 'bottom',
+            size: 'half',
+            css: {
+                content: {
+                    width: 'full',
+                    height: 'half',
+                    _open: {
+                        animationName: 'slide-in-from-bottom',
+                        animationDuration: 'slow',
+                    },
+                    _closed: {
+                        animationName: 'slide-out-to-bottom',
+                        animationDuration: 'fast',
+                    },
+                },
+            },
+        },
+        {
+            placement: 'bottom',
+            size: 'full',
+            css: {
+                content: {
+                    width: 'full',
+                    height: 'full',
+                    _open: {
+                        animationName: 'slide-in-from-bottom',
+                        animationDuration: 'slow',
+                    },
+                    _closed: {
+                        animationName: 'slide-out-to-bottom',
+                        animationDuration: 'fast',
+                    },
+                },
+            },
+        },
+        {
+            placement: 'left',
+            css: {
+                content: {
+                    _open: {
+                        animationName: 'slide-in-from-left',
+                        animationDuration: 'slow',
+                    },
+                    _closed: {
+                        animationName: 'slide-out-to-left',
+                        animationDuration: 'fast',
+                    },
+                },
+            },
+        },
+    ],
+    defaultVariants: {
+        placement: 'right',
+        size: 'half',
+    },
+});
+
 var baseStyleDialog$1 = react$1.defineStyle({
     _open: {
         animationName: 'fade-in',
@@ -2541,6 +2789,7 @@ var slotRecipes = {
     input: inputSlotRecipe,
     select: selectSlotRecipe,
     dialogFilter: dialogFilterRecipe,
+    drawer: drawerRecipe,
     alert: alertRecipe,
     popoverFilter: popoverFilterRecipe,
     numberInput: numberInputRecipe,
@@ -2995,6 +3244,38 @@ var keyframes = react$1.defineKeyframes({
             scale: '0.95',
         },
     },
+    'slide-in-from-top': {
+        from: { transform: 'translateY(-100%)' },
+        to: { transform: 'translateY(0)' },
+    },
+    'slide-in-from-right': {
+        from: { transform: 'translateX(100%)' },
+        to: { transform: 'translateX(0)' },
+    },
+    'slide-in-from-bottom': {
+        from: { transform: 'translateY(100%)' },
+        to: { transform: 'translateY(0)' },
+    },
+    'slide-in-from-left': {
+        from: { transform: 'translateX(-100%)' },
+        to: { transform: 'translateX(0)' },
+    },
+    'slide-out-to-top': {
+        from: { transform: 'translateY(0)' },
+        to: { transform: 'translateY(-100%)' },
+    },
+    'slide-out-to-right': {
+        from: { transform: 'translateX(0)' },
+        to: { transform: 'translateX(100%)' },
+    },
+    'slide-out-to-bottom': {
+        from: { transform: 'translateY(0)' },
+        to: { transform: 'translateY(100%)' },
+    },
+    'slide-out-to-left': {
+        from: { transform: 'translateX(0)' },
+        to: { transform: 'translateX(-100%)' },
+    },
 });
 
 var globalCss = react$1.defineGlobalStyles({
@@ -5565,6 +5846,30 @@ var Dialog = function (_a) {
                             primaryActionButton ? (React.createElement(Button, { variant: "primary", onClick: primaryActionButton.action, width: { base: 'full', sm: 'fit' } }, primaryActionButton.label)) : null))))))));
 };
 
+var DrawerOverlay = function (props) {
+    return React.createElement(react$1.Drawer.Backdrop, __assign({}, props));
+};
+
+var DrawerContent = function (props) {
+    var children = props.children, withCloseButton = props.withCloseButton, drawerContentProps = __rest(props, ["children", "withCloseButton"]);
+    return (React.createElement(react$1.Drawer.Positioner, null,
+        React.createElement(react$1.Drawer.Content, __assign({}, drawerContentProps),
+            withCloseButton ? (React.createElement(react$1.Drawer.CloseTrigger, { asChild: true, fontSize: "base" },
+                React.createElement(CloseIcon, null))) : null,
+            children)));
+};
+
+var DrawerBody = function (props) {
+    var children = props.children, drawerBodyProps = __rest(props, ["children"]);
+    return React.createElement(react$1.Drawer.Body, __assign({}, drawerBodyProps), children);
+};
+
+var Drawer = function (props) {
+    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: function (e) { return !e.open && onClose(); } }, drawerProps),
+        React.createElement(react$1.Portal, null, children)));
+};
+
 var Text = react$1.Text;
 Text.displayName = 'Text';
 
@@ -10704,6 +11009,10 @@ exports.DoubleChevronUpIcon = DoubleChevronUpIcon;
 exports.DoubleLineIcon = DoubleLineIcon;
 exports.DownloadIcon = DownloadIcon;
 exports.DragIcon = DragIcon;
+exports.Drawer = Drawer;
+exports.DrawerBody = DrawerBody;
+exports.DrawerContent = DrawerContent;
+exports.DrawerOverlay = DrawerOverlay;
 exports.DriveSystemIcon = DriveSystemIcon;
 exports.DriveSystemLargeIcon = DriveSystemLargeIcon;
 exports.DriveTypeIcon = DriveTypeIcon;