@smg-automotive/components 25.11.0-chakra-v3.2 → 25.11.0-chakra-v3.4

package/dist/cjs/index.js

@@ -59,6 +59,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: {
@@ -145,6 +146,9 @@ var durations = react$1.defineTokens.durations({
     normal: {
         value: '200ms',
     },
+    slow: {
+        value: '350ms',
+    },
 });
 
 var cursor = react$1.defineTokens.cursor({
@@ -326,7 +330,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({
@@ -523,6 +528,122 @@ var tooltipSlotRecipe = react$1.defineSlotRecipe({
     },
 });
 
+var baseTriggerStyle$1 = react$1.defineStyle({
+    textStyle: 'body',
+    transitionProperty: 'common',
+    transitionDuration: 'normal',
+    '--tabs-border-width': '3px',
+    borderBottomWidth: 'var(--tabs-border-width)',
+    borderBottomStyle: 'var(--tabs-border-style, solid)',
+    borderBottomColor: 'transparent',
+    p: 'md',
+    color: 'gray.600',
+    cursor: 'pointer',
+    _selected: {
+        fontWeight: 'bold',
+        color: 'gray.900',
+        borderBottomWidth: 'var(--tabs-border-width)',
+        borderBottomStyle: 'var(--tabs-border-style, solid)',
+        borderBottomColor: 'currentColor',
+    },
+    _disabled: {
+        _active: { bg: 'none' },
+        cursor: 'notAllowed',
+        color: 'gray.300',
+    },
+});
+var baseListStyle = react$1.defineStyle({
+    display: 'flex',
+    width: 'full',
+    borderBottom: '1px',
+    borderColor: 'gray.200',
+    justifyContent: 'start',
+});
+var baseContentStyle$1 = react$1.defineStyle({
+    textStyle: 'body',
+    m: 'sm',
+});
+var tabsRecipe = react$1.defineSlotRecipe({
+    slots: ['root', 'list', 'trigger', 'content', 'contentGroup'],
+    className: 'chakra-tabs',
+    base: {
+        trigger: baseTriggerStyle$1,
+        list: baseListStyle,
+        content: baseContentStyle$1,
+    },
+    variants: {
+        variant: {
+            default: {
+                trigger: {
+                    _selected: {
+                        borderBottomColor: 'currentColor',
+                    },
+                },
+            },
+            spaceBetween: {
+                list: {
+                    justifyContent: 'space-between',
+                },
+                trigger: {
+                    _selected: {
+                        borderBottomColor: 'currentColor',
+                    },
+                },
+            },
+            spaceAround: {
+                list: {
+                    justifyContent: 'space-around',
+                },
+                trigger: {
+                    _selected: {
+                        borderBottomColor: 'currentColor',
+                    },
+                },
+            },
+            enclosed: {
+                list: {
+                    borderBottom: 'none',
+                },
+                trigger: {
+                    color: 'gray.700',
+                    fontWeight: 'bold',
+                    flexBasis: 'full',
+                    border: '1px',
+                    borderColor: 'blue.200',
+                    backgroundColor: 'blue.50',
+                    borderRight: 'none',
+                    '--tabs-border-width': '1px',
+                    _selected: {
+                        backgroundColor: 'transparent',
+                        borderBottomColor: 'transparent',
+                    },
+                    _last: {
+                        borderRight: '1px',
+                        borderRightColor: 'blue.200',
+                    },
+                },
+                content: {
+                    m: '0',
+                },
+            },
+            fullWidth: {
+                trigger: {
+                    flex: 1,
+                    _selected: {
+                        borderBottomColor: 'currentColor',
+                    },
+                },
+                content: {
+                    m: '0',
+                },
+            },
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+
 var borderColor = 'colorPalette.200';
 var subtleColor = 'colorPalette.50';
 var tableRecipe = react$1.defineSlotRecipe({
@@ -1452,6 +1573,7 @@ var content = react$1.defineStyle({
     },
 });
 var item = react$1.defineStyle({
+    display: 'flex',
     paddingY: 'md',
     paddingX: 'lg',
     cursor: 'pointer',
@@ -1787,6 +1909,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',
@@ -2357,6 +2722,7 @@ var slotRecipes = {
     dialog: dialogRecipe,
     simpleHeader: simpleHeaderRecipe,
     table: tableRecipe,
+    tabs: tabsRecipe,
     vehicleReference: vehicleReferenceRecipe,
     tooltip: tooltipSlotRecipe,
     field: fieldSlotRecipe,
@@ -2366,6 +2732,7 @@ var slotRecipes = {
     input: inputSlotRecipe,
     select: selectSlotRecipe,
     dialogFilter: dialogFilterRecipe,
+    drawer: drawerRecipe,
     alert: alertRecipe,
     popoverFilter: popoverFilterRecipe,
     numberInput: numberInputRecipe,
@@ -2812,6 +3179,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({
@@ -5371,6 +5770,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';
 
@@ -6677,14 +7100,16 @@ var Chip = function (_a) {
 Chip.displayName = 'Chip';
 
 var Menu = function (_a) {
-    var title = _a.title, items = _a.items, _b = _a.fontWeightTitle, fontWeightTitle = _b === void 0 ? 'regular' : _b, _c = _a.offset, offset = _c === void 0 ? [8, 0] : _c, menuColor = _a.menuColor, _d = _a.showChevron, showChevron = _d === void 0 ? true : _d, icon = _a.icon, _e = _a.iconSpacing, iconSpacing = _e === void 0 ? 'sm' : _e, placement = _a.placement;
+    var title = _a.title, items = _a.items, value = _a.value, _b = _a.fontWeightTitle, fontWeightTitle = _b === void 0 ? 'regular' : _b, _c = _a.offset, offset = _c === void 0 ? [8, 0] : _c, menuColor = _a.menuColor, menuOptionColor = _a.menuOptionColor, _d = _a.showChevron, showChevron = _d === void 0 ? true : _d, icon = _a.icon, _e = _a.iconSpacing, iconSpacing = _e === void 0 ? 'sm' : _e, placement = _a.placement, _f = _a.showOptionsCheckmark, showOptionsCheckmark = _f === void 0 ? false : _f;
     var recipe = react$1.useSlotRecipe({ key: 'menu' });
     var styles = recipe();
-    var _f = offset[0], mainAxis = _f === void 0 ? 0 : _f, _g = offset[1], crossAxis = _g === void 0 ? 0 : _g;
+    var _g = offset[0], mainAxis = _g === void 0 ? 0 : _g, _h = offset[1], crossAxis = _h === void 0 ? 0 : _h;
     return (React.createElement(react$1.Menu.Root, { positioning: { placement: placement, offset: { mainAxis: mainAxis, crossAxis: crossAxis } } },
         React.createElement(react$1.Menu.Context, null, function (_a) {
             var open = _a.open;
-            return (React.createElement(react$1.Menu.Trigger, { css: styles.trigger, gap: iconSpacing, fontWeight: fontWeightTitle, color: open ? 'blue.700' : menuColor },
+            // menuColor takes precedence over the open state color
+            var color = menuColor || (open ? 'blue.700' : undefined);
+            return (React.createElement(react$1.Menu.Trigger, { css: styles.trigger, gap: iconSpacing, fontWeight: fontWeightTitle, color: color },
                 icon,
                 title,
                 showChevron ? (React.createElement(ChevronDownSmallIcon, { transition: "transform", transform: open ? 'rotate(180deg)' : 'rotate(0deg)' })) : null));
@@ -6692,8 +7117,11 @@ var Menu = function (_a) {
         React.createElement(react$1.Portal, null,
             React.createElement(react$1.Menu.Positioner, null,
                 React.createElement(react$1.Menu.Content, { css: styles.content }, items.map(function (_a) {
-                    var onClick = _a.onClick, text = _a.text, value = _a.value;
-                    return (React.createElement(react$1.Menu.Item, __assign({ key: "menuItem-".concat(value), value: value, onSelect: onClick, css: styles.item }, (menuColor && { color: menuColor })), text));
+                    var onClick = _a.onClick, text = _a.text, itemValue = _a.value;
+                    var optionColor = menuOptionColor || menuColor;
+                    return (React.createElement(react$1.Menu.Item, __assign({ key: "menuItem-".concat(value), value: itemValue, onSelect: onClick, css: styles.item }, (optionColor && { color: optionColor })),
+                        showOptionsCheckmark ? (React.createElement(react$1.Box, { w: "xs", display: "flex", justifyContent: "center", marginRight: "sm" }, itemValue === value ? React.createElement(CheckmarkIcon, null) : null)) : null,
+                        text));
                 }))))));
 };
 
@@ -7847,6 +8275,54 @@ var SimpleHeader = function (props) {
                             React.createElement(CloseIcon, null))))))));
 };
 
+var Tab = function (_a) {
+    var variant = _a.variant, children = _a.children, rest = __rest(_a, ["variant", "children"]);
+    var recipe = react$1.useSlotRecipe({ key: 'tabs' });
+    var styles = recipe({ variant: variant });
+    return (React.createElement(react$1.Tabs.Trigger, __assign({}, rest, { css: styles.trigger }), children));
+};
+
+var TabList = function (_a) {
+    var variant = _a.variant, children = _a.children, rest = __rest(_a, ["variant", "children"]);
+    var recipe = react$1.useSlotRecipe({ key: 'tabs' });
+    var styles = recipe({ variant: variant });
+    return (React.createElement(react$1.Box, { overflowX: "auto" },
+        React.createElement(react$1.Tabs.List, __assign({}, rest, { css: styles.list }), React.Children.map(children, function (child) {
+            return React.isValidElement(child)
+                ? React.cloneElement(child, { variant: variant })
+                : child;
+        }))));
+};
+
+var TabPanel = function (_a) {
+    var variant = _a.variant, children = _a.children, rest = __rest(_a, ["variant", "children"]);
+    var recipe = react$1.useSlotRecipe({ key: 'tabs' });
+    var styles = recipe({ variant: variant });
+    return (React.createElement(react$1.Tabs.Content, __assign({}, rest, { css: styles.content }), children));
+};
+
+var TabPanels = function (_a) {
+    var variant = _a.variant, children = _a.children;
+    var recipe = react$1.useSlotRecipe({ key: 'tabs' });
+    var styles = recipe({ variant: variant });
+    return (React.createElement(react$1.Box, { css: styles.contentGroup }, React.Children.map(children, function (child) {
+        return React.isValidElement(child)
+            ? React.cloneElement(child, { variant: variant })
+            : child;
+    })));
+};
+
+var Tabs = function (_a) {
+    var variant = _a.variant, children = _a.children, rest = __rest(_a, ["variant", "children"]);
+    var recipe = react$1.useSlotRecipe({ key: 'tabs' });
+    var styles = recipe({ variant: variant });
+    return (React.createElement(react$1.Tabs.Root, __assign({}, rest, { css: styles.root }), React.Children.map(children, function (child) {
+        return React.isValidElement(child)
+            ? React.cloneElement(child, { variant: variant })
+            : child;
+    })));
+};
+
 var Body = react$1.Table.Body, Caption = react$1.Table.Caption, Cell = react$1.Table.Cell, Column = react$1.Table.Column, ColumnGroup = react$1.Table.ColumnGroup, ColumnHeader = react$1.Table.ColumnHeader, Footer = react$1.Table.Footer, Header = react$1.Table.Header, Root = react$1.Table.Root, Row = react$1.Table.Row, ScrollArea = react$1.Table.ScrollArea;
 Body.displayName = 'Table.Body';
 Caption.displayName = 'Table.Caption';
@@ -8182,6 +8658,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;
@@ -8293,6 +8773,10 @@ exports.SteeringWheelIcon = SteeringWheelIcon;
 exports.SuvIcon = SuvIcon;
 exports.SwissFlagIcon = SwissFlagIcon;
 exports.Switch = Switch;
+exports.Tab = Tab;
+exports.TabList = TabList;
+exports.TabPanel = TabPanel;
+exports.TabPanels = TabPanels;
 exports.Table = Table;
 exports.TableBody = Body;
 exports.TableCaption = Caption;
@@ -8305,6 +8789,7 @@ exports.TableHeader = Header;
 exports.TableRoot = Root;
 exports.TableRow = Row;
 exports.TableScrollArea = ScrollArea;
+exports.Tabs = Tabs;
 exports.Text = Text;
 exports.ThemeProvider = ThemeProvider;
 exports.ThreeSixtyIcon = ThreeSixtyIcon;