@smg-automotive/components 25.10.0-talamcol-menu.2 → 25.11.0-ST-1552-migrate-drawer.1

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({
@@ -327,6 +331,7 @@ 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-out': { value: 'fade-out var(--fade-out-duration, 0.1s) ease-out' },
 });
 
 var textStyles = react$1.defineTextStyles({
@@ -805,6 +810,56 @@ var switchRecipe = react$1.defineSlotRecipe({
     },
 });
 
+var sliderSlotRecipe = react$1.defineSlotRecipe({
+    className: 'chakra-slider',
+    slots: ['root', 'control', 'track', 'range', 'markerGroup', 'thumb'],
+    base: {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            fontSize: 'base',
+            '--slider-marker-inset': '4px',
+            '--slider-marker-track': '5px',
+            '--slider-thumb-border': '1px',
+            '--slider-thumb-boxShadow': '0 0 0 8px #2988E14D',
+        },
+        control: {
+            display: 'inline-flex',
+        },
+        track: {
+            flex: '1',
+            height: 'var(--slider-marker-track)',
+            bg: 'gray.300',
+            borderRadius: 'full',
+        },
+        range: {
+            height: 'var(--slider-marker-inset)',
+            bg: 'gray.800',
+            borderRadius: 'full',
+        },
+        markerGroup: {
+            position: 'absolute!',
+            top: '2xl',
+            insetInline: 'var(--slider-marker-inset)',
+        },
+        thumb: {
+            width: 'sm',
+            height: 'sm',
+            borderRadius: 'full',
+            borderWidth: 'var(--slider-thumb-border)',
+            borderColor: 'gray.400',
+            backgroundColor: 'white',
+            translate: '0 -40%',
+            _hover: {
+                cursor: 'pointer',
+            },
+            _active: {
+                boxShadow: 'var(--slider-thumb-boxShadow)',
+            },
+        },
+    },
+});
+
 var simpleHeaderRecipe = react$1.defineSlotRecipe({
     className: 'chakra-simple-header',
     slots: ['header', 'mainContainer', 'title', 'iconWrapper'],
@@ -1530,6 +1585,51 @@ var listRecipe = react$1.defineSlotRecipe({
     },
 });
 
+var baseStyleContainer = react$1.defineStyle({
+    color: 'white',
+    px: '2xl',
+    py: 'lg',
+    position: {
+        base: 'fixed',
+        md: 'static',
+    },
+    top: '0',
+    left: '0',
+    right: '0',
+    zIndex: 'docked',
+});
+var baseStyleGrid = react$1.defineStyle({
+    alignItems: 'center',
+});
+var baseStyleCountContainer = react$1.defineStyle({
+    textAlign: {
+        base: 'left',
+        md: 'center',
+    },
+});
+var baseStyleCloseContainer = react$1.defineStyle({
+    textAlign: 'right',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+});
+var slots$1 = [
+    'container',
+    'grid',
+    'countContainer',
+    'closeContainer',
+];
+var galleryHeaderRecipe = react$1.defineSlotRecipe({
+    slots: slots$1,
+    className: 'chakra-gallery-header',
+    base: {
+        container: baseStyleContainer,
+        grid: baseStyleGrid,
+        countContainer: baseStyleCountContainer,
+        closeContainer: baseStyleCloseContainer,
+    },
+});
+
 var fieldSlotRecipe = react$1.defineSlotRecipe({
     className: 'chakra-field',
     slots: [
@@ -1692,6 +1792,252 @@ var energyLabelRecipe = react$1.defineSlotRecipe({
     },
 });
 
+var drawerRecipe = react$1.defineSlotRecipe({
+    slots: ['root', 'backdrop', 'positioner', 'content', 'body', 'closeTrigger'],
+    className: 'chakra-drawer',
+    base: {
+        root: {},
+        backdrop: {
+            background: 'blackAlpha.500',
+            position: 'fixed',
+            insetInlineStart: '0',
+            top: '0',
+            width: 'full',
+            height: 'full',
+            zIndex: 'overlay',
+            _open: {
+                animationName: 'fade-in',
+                animationDuration: 'normal',
+            },
+            _closed: {
+                animationName: 'fade-out',
+                animationDuration: 'normal',
+            },
+        },
+        positioner: {
+            display: 'flex',
+            width: 'full',
+            height: 'full',
+            position: 'fixed',
+            insetInlineStart: '0',
+            top: '0',
+            zIndex: 'modal',
+        },
+        content: {
+            bg: 'white',
+            boxShadow: 'lg',
+        },
+        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: '4xl',
+                    _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: '8xl',
+                    _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: '4xl',
+                    _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: '8xl',
+                    _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',
@@ -2256,6 +2602,7 @@ var slotRecipes = {
     breadcrumbs: breadcrumbsRecipe,
     card: cardRecipe,
     energyLabel: energyLabelRecipe,
+    galleryHeader: galleryHeaderRecipe,
     list: listRecipe,
     markedText: markedTextRecipe,
     dialog: dialogRecipe,
@@ -2270,10 +2617,12 @@ var slotRecipes = {
     input: inputSlotRecipe,
     select: selectSlotRecipe,
     dialogFilter: dialogFilterRecipe,
+    drawer: drawerRecipe,
     alert: alertRecipe,
     popoverFilter: popoverFilterRecipe,
     numberInput: numberInputRecipe,
     radio: radioRecipe,
+    slider: sliderSlotRecipe,
     pagination: paginationRecipe,
     menu: menuRecipe,
 };
@@ -2715,6 +3064,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({
@@ -5274,6 +5655,12 @@ var Dialog = function (_a) {
                             primaryActionButton ? (React.createElement(Button, { variant: "primary", onClick: primaryActionButton.action, width: { base: 'full', sm: 'fit' } }, primaryActionButton.label)) : null))))))));
 };
 
+var Drawer = function (props) {
+    var children = props.children, drawerProps = __rest(props, ["children"]);
+    return (React.createElement(react$1.Drawer.Root, __assign({}, drawerProps),
+        React.createElement(react$1.Portal, null, children)));
+};
+
 var Text = react$1.Text;
 Text.displayName = 'Text';
 
@@ -5471,6 +5858,7 @@ var header$3 = {
 		manageAdditionalTitles: "Gestire titolo addizionale",
 		manageNotes: "Gestire osservazioni",
 		manageVehicles: "Gestione dei miei veicoli",
+		marketPriceCheck: "MarketPriceCheck",
 		motorcyclePark: "Parco moto",
 		myMotorcycles: "le mie moto",
 		myVehicles: "I miei veicoli",
@@ -5681,6 +6069,7 @@ var header$2 = {
 		manageAdditionalTitles: "Gérer titre complémentaire",
 		manageNotes: "Gérer les remarques",
 		manageVehicles: "Gestion de mes véhicules",
+		marketPriceCheck: "MarketPriceCheck",
 		motorcyclePark: "Parc de motos",
 		myMotorcycles: "Mes motos",
 		myVehicles: "Mes véhicules",
@@ -5891,6 +6280,7 @@ var header$1 = {
 		manageAdditionalTitles: "Manage additional titles",
 		manageNotes: "Manage Notes",
 		manageVehicles: "Manage vehicle",
+		marketPriceCheck: "MarketPriceCheck",
 		motorcyclePark: "Motorcycle park",
 		myMotorcycles: "My Motorcycles",
 		myVehicles: "My Vehicles",
@@ -6101,6 +6491,7 @@ var header = {
 		manageAdditionalTitles: "Zusatztitel verwalten",
 		manageNotes: "Bemerkungen verwalten",
 		manageVehicles: "Meine Fahrzeuge verwalten",
+		marketPriceCheck: "MarketPriceCheck",
 		motorcyclePark: "Zum Motorradpark",
 		myMotorcycles: "Meine Motorräder",
 		myVehicles: "Meine Fahrzeuge",
@@ -6342,6 +6733,36 @@ var FullHeight = function (_a) {
     return (React.createElement(react$1.Box, { minHeight: "screen-height", height: "screen-height" }, children));
 };
 
+var Link$1 = function (_a) {
+    var isExternal = _a.isExternal, target = _a.target, rel = _a.rel, props = __rest(_a, ["isExternal", "target", "rel"]);
+    return (React.createElement(react$1.Link, __assign({ target: target || (isExternal ? '_blank' : undefined), rel: rel || (isExternal ? 'noopener noreferrer' : undefined) }, props)));
+};
+
+var GalleryHeader = function (_a) {
+    var currentSlide = _a.currentSlide, slidesCount = _a.slidesCount, onClose = _a.onClose, language = _a.language, children = _a.children;
+    var recipe = react$1.useSlotRecipe({ key: 'galleryHeader' });
+    var styles = recipe();
+    return (React.createElement(TranslationProvider, { language: language, scopes: ['galleryHeader'] },
+        React.createElement(i18nPkg.I18nContext.Consumer, null, function (_a) {
+            var t = _a.t;
+            return (React.createElement(react$1.Box, { css: styles.container },
+                React.createElement(react$1.Box, { css: styles.grid },
+                    React.createElement(SimpleGrid, { columns: {
+                            base: 2,
+                            md: 3,
+                        }, alignItems: "center" },
+                        React.createElement(react$1.Box, { hideBelow: "md" }, children),
+                        React.createElement(react$1.Box, { css: styles.countContainer },
+                            React.createElement(react$1.Box, null, t('galleryHeader.imageCount', {
+                                x: currentSlide,
+                                of: slidesCount,
+                            }))),
+                        React.createElement(react$1.Box, { css: styles.closeContainer },
+                            React.createElement(Link$1, { "aria-label": "Close gallery", onClick: function () { return onClose(); } },
+                                React.createElement(CloseIcon, { color: "white" })))))));
+        })));
+};
+
 var Grid = react$1.Grid;
 Grid.displayName = 'Grid';
 var GridItem = react$1.GridItem;
@@ -6452,11 +6873,6 @@ var SingleColumnCenteredLayout = function (_a) {
             React.createElement(react$1.Box, null, content))));
 };
 
-var Link$1 = function (_a) {
-    var isExternal = _a.isExternal, target = _a.target, rel = _a.rel, props = __rest(_a, ["isExternal", "target", "rel"]);
-    return (React.createElement(react$1.Link, __assign({ target: target || (isExternal ? '_blank' : undefined), rel: rel || (isExternal ? 'noopener noreferrer' : undefined) }, props)));
-};
-
 var isRenderable = function (value) {
     return (typeof value === 'string' ||
         typeof value === 'number' ||
@@ -7813,6 +8229,14 @@ var ThemeProvider = function (_a) {
     return React.createElement(react$1.ChakraProvider, { value: themes[theme] }, children);
 };
 
+var TopListingBadge = function (_a) {
+    var children = _a.children, aspectRatio = _a.aspectRatio;
+    return (React.createElement(react$1.Grid, null,
+        React.createElement(react$1.GridItem, { gridColumn: 1, gridRow: 1 }, aspectRatio ? (React.createElement(react$1.AspectRatio, { ratio: aspectRatio }, children)) : (children)),
+        React.createElement(react$1.GridItem, { gridColumn: 1, gridRow: 1, zIndex: "docked", overflow: "hidden", position: "relative", pointerEvents: "none", css: { touchAction: 'none' } },
+            React.createElement(react$1.Badge, { transform: "rotate(-45deg) translate(-50%) translateY(9px)", position: "absolute", transformOrigin: "top left", width: "4xl", textAlign: "center", paddingLeft: "sm", color: "gray.900" }, "Top"))));
+};
+
 var InputLeftElement = function (_a) {
     var unit = _a.unit;
     return (React.createElement(react$1.InputElement, { insetY: "0", px: "sm", textStyle: "body-small", pointerEvents: "none" }, unit));
@@ -7862,6 +8286,46 @@ var TopVehicleSharedBadge = function (_a) {
         aspectRatio ? (React.createElement(AspectRatio, { ratio: aspectRatio }, children)) : (children)));
 };
 
+var emptyItemOffset = 0;
+var firstItemOffset = 1;
+var getItemOffset = function (applyIndentation) {
+    return applyIndentation ? firstItemOffset : emptyItemOffset;
+};
+var getSliderStepValue = function (marks, applyIndentation, value) {
+    var selectedMarkIndex = marks.findIndex(function (mark) { return mark.value === value; });
+    if (selectedMarkIndex < emptyItemOffset) {
+        return getItemOffset(applyIndentation);
+    }
+    return selectedMarkIndex + getItemOffset(applyIndentation);
+};
+var getSliderMarks = function (marks, applyIndentation) {
+    return marks.map(function (mark, index) { return (__assign(__assign({}, mark), { stepValue: index + getItemOffset(applyIndentation) })); });
+};
+var DiscreteSlider = function (_a) {
+    var marks = _a.marks, _b = _a.applyIndentation, applyIndentation = _b === void 0 ? true : _b, onValueChanged = _a.onValueChanged, value = _a.value;
+    var sliderStepValue = getSliderStepValue(marks, applyIndentation, value);
+    var sliderMarks = getSliderMarks(marks, applyIndentation);
+    var handleOnChange = function (newStepValue) {
+        var _a;
+        if (applyIndentation && newStepValue < firstItemOffset)
+            return;
+        var newSliderMark = (_a = sliderMarks.find(function (mark) { return mark.stepValue === newStepValue; })) === null || _a === void 0 ? void 0 : _a.value;
+        onValueChanged(newSliderMark);
+    };
+    return (React.createElement(react$1.Slider.Root, { step: 1, max: sliderMarks.length - 1 + getItemOffset(applyIndentation), value: [sliderStepValue], onValueChange: function (details) { var _a; return handleOnChange((_a = details.value[0]) !== null && _a !== void 0 ? _a : sliderStepValue); } },
+        React.createElement(react$1.Slider.Control, null,
+            React.createElement(react$1.Slider.Track, null,
+                React.createElement(react$1.Slider.Range, null)),
+            React.createElement(react$1.Slider.Thumbs, null),
+            React.createElement(react$1.Slider.MarkerGroup, null, sliderMarks.map(function (_a, index) {
+                var stepValue = _a.stepValue, label = _a.label;
+                return (React.createElement(react$1.Slider.Marker, { key: index, value: stepValue, style: {
+                        pointerEvents: 'all',
+                        fontWeight: sliderStepValue === stepValue ? 'bold' : 'normal',
+                    } }, label));
+            })))));
+};
+
 var Tooltip = function (_a) {
     var children = _a.children, _b = _a.placement, placement = _b === void 0 ? 'bottom' : _b, _c = _a.maxWidth, maxWidth = _c === void 0 ? '6xl' : _c, label = _a.label;
     var _d = React.useState(false), isOpen = _d[0], setIsOpen = _d[1];
@@ -8000,6 +8464,7 @@ exports.DeleteIcon = DeleteIcon;
 exports.DevOverlay = DevOverlay;
 exports.Dialog = Dialog;
 exports.DigitalContractIcon = DigitalContractIcon;
+exports.DiscreteSlider = DiscreteSlider;
 exports.DocumentCheckIcon = DocumentCheckIcon;
 exports.DocumentIcon = DocumentIcon;
 exports.DoubleChevronDownIcon = DoubleChevronDownIcon;
@@ -8007,6 +8472,7 @@ exports.DoubleChevronUpIcon = DoubleChevronUpIcon;
 exports.DoubleLineIcon = DoubleLineIcon;
 exports.DownloadIcon = DownloadIcon;
 exports.DragIcon = DragIcon;
+exports.Drawer = Drawer;
 exports.DriveSystemIcon = DriveSystemIcon;
 exports.DriveSystemLargeIcon = DriveSystemLargeIcon;
 exports.DriveTypeIcon = DriveTypeIcon;
@@ -8027,6 +8493,7 @@ exports.Footer = Footer$1;
 exports.FormControlSection = FormControlSection;
 exports.ForwardIcon = ForwardIcon;
 exports.FullHeight = FullHeight;
+exports.GalleryHeader = GalleryHeader;
 exports.GarageIcon = GarageIcon;
 exports.GasStationIcon = GasStationIcon;
 exports.GlobeIcon = GlobeIcon;
@@ -8137,6 +8604,7 @@ exports.ThumbsUpIcon = ThumbsUpIcon;
 exports.TiltedRectangleIcon = TiltedRectangleIcon;
 exports.TimeIcon = TimeIcon;
 exports.TooltipIcon = TooltipIcon;
+exports.TopListingBadge = TopListingBadge;
 exports.TopListingIcon = TopListingIcon;
 exports.TopVehicleSharedBadge = TopVehicleSharedBadge;
 exports.TrailerIcon = TrailerIcon;