@smg-automotive/components 25.10.0-chakra-v3.3 → 25.10.0-gallery-header-v3-migrate.1

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

@@ -0,0 +1,11 @@
+import { FC, PropsWithChildren } from 'react';
+export type BaseProps = {
+    id: string;
+    errorMessage?: string;
+    label?: string;
+    hint?: string;
+    tooltip?: string;
+};
+export declare const FormControlSection: FC<PropsWithChildren<BaseProps>>;
+export { BaseProps as FormControlSectionProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/formControlSection/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AASrD,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,iBAAiB,CAAC,SAAS,CAAC,CA4C/D,CAAC;AAEF,OAAO,EAAE,SAAS,IAAI,uBAAuB,EAAE,CAAC"}

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

@@ -0,0 +1,10 @@
+import { FC, PropsWithChildren } from 'react';
+import { Language } from 'src/types/language';
+export interface GalleryHeaderProps {
+    currentSlide: number;
+    slidesCount: number;
+    onClose: () => void;
+    language: Language;
+}
+export declare const GalleryHeader: FC<PropsWithChildren<GalleryHeaderProps>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/galleryHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIrD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAQ9C,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CA8CnE,CAAC"}

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

@@ -18,6 +18,7 @@ export * from './energyLabel';
 export * from './errorPage';
 export * from './flex';
 export * from './fullHeight';
+export * from './galleryHeader';
 export * from './grid';
 export * from './heading';
 export * from './icons';
@@ -46,4 +47,5 @@ export * from './themeProvider';
 export * from './vehicleReference';
 export * from './rangeFilterInput';
 export * from './topVehicleSharedBadge';
+export * from './formControlSection';
 //# sourceMappingURL=index.d.ts.map

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,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,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,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,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,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,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,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,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,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC"}

package/dist/cjs/index.js

@@ -1470,6 +1470,56 @@ 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 baseStyleChildrenContainer = react$1.defineStyle({
+// This will be shown only above md breakpoint
+});
+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',
+    'childrenContainer',
+    'countContainer',
+    'closeContainer',
+];
+var galleryHeaderRecipe = react$1.defineSlotRecipe({
+    slots: slots$1,
+    className: 'chakra-gallery-header',
+    base: {
+        container: baseStyleContainer,
+        grid: baseStyleGrid,
+        childrenContainer: baseStyleChildrenContainer,
+        countContainer: baseStyleCountContainer,
+        closeContainer: baseStyleCloseContainer,
+    },
+});
+
 var fieldSlotRecipe = react$1.defineSlotRecipe({
     className: 'chakra-field',
     slots: [
@@ -2196,6 +2246,7 @@ var slotRecipes = {
     breadcrumbs: breadcrumbsRecipe,
     card: cardRecipe,
     energyLabel: energyLabelRecipe,
+    galleryHeader: galleryHeaderRecipe,
     list: listRecipe,
     markedText: markedTextRecipe,
     dialog: dialogRecipe,
@@ -6281,6 +6332,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", css: styles.childrenContainer }, 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;
@@ -6391,11 +6472,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' ||
@@ -7780,6 +7856,42 @@ var TopVehicleSharedBadge = function (_a) {
         aspectRatio ? (React.createElement(AspectRatio, { ratio: aspectRatio }, children)) : (children)));
 };
 
+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];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var childrenWithProps = React.cloneElement(children, {
+        onMouseEnter: function () { return setIsOpen(true); },
+        onMouseLeave: function () { return setIsOpen(false); },
+        onClick: function () { return setIsOpen(true); },
+    });
+    return (React.createElement(react$1.TooltipRoot, { positioning: {
+            placement: placement,
+        }, open: isOpen },
+        React.createElement(react$1.TooltipTrigger, { asChild: true }, childrenWithProps),
+        React.createElement(react$1.TooltipPositioner, null,
+            React.createElement(react$1.TooltipContent, { maxWidth: maxWidth },
+                React.createElement(react$1.TooltipArrow, null,
+                    React.createElement(react$1.TooltipArrowTip, null)),
+                label))));
+};
+
+var FormControlSection = function (_a) {
+    var children = _a.children, errorMessage = _a.errorMessage, id = _a.id, label = _a.label, hint = _a.hint, tooltip = _a.tooltip;
+    var isInvalid = !!errorMessage;
+    return (React.createElement(react$1.Field.Root, { id: id, invalid: isInvalid },
+        React.createElement(react$1.Box, { border: "1px", borderRadius: "sm", borderColor: isInvalid ? 'red.500' : 'gray.400', padding: "2xl" },
+            React.createElement(Flex, { flexDirection: "column" },
+                React.createElement(react$1.Box, { mb: "lg" },
+                    React.createElement(Flex, { alignItems: "center" },
+                        label ? (React.createElement(Text, { color: "gray.900", textStyle: "heading4" }, label)) : null,
+                        tooltip ? (React.createElement(Tooltip, { label: tooltip },
+                            React.createElement(InformationIcon, { ml: "md" }))) : null),
+                    hint ? (React.createElement(Text, { color: "gray.900", textStyle: "body" }, hint)) : null),
+                children)),
+        React.createElement(react$1.Field.ErrorText, null, errorMessage)));
+};
+
 Object.defineProperty(exports, "Box", {
     enumerable: true,
     get: function () { return react$1.Box; }
@@ -7906,8 +8018,10 @@ exports.FlameIcon = FlameIcon;
 exports.FlashIcon = FlashIcon;
 exports.Flex = Flex;
 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;