@cloud-ru/uikit-product-site-grid 0.1.3 → 0.1.5

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.1.5 (2025-11-13)
+
+### Only dependencies have been changed
+* [@cloud-ru/uikit-product-utils@7.0.2](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/utils/CHANGELOG.md)
+
+
+
+
+
+## 0.1.4 (2025-11-12)
+
+
+### Bug Fixes
+
+* **PD-3377:** contributors update to publish all packages ([719fd3e](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/719fd3e1249e247443b125c47ea408d92c8395c3))
+
+
+
+
+
 ## 0.1.3 (2025-11-12)
 
 ### Only dependencies have been changed

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

@@ -0,0 +1,2 @@
+import { GridProps } from './types';
+export declare function Grid({ children, columnsConfig, gap, layoutType, className, ...rest }: GridProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/Grid.js

@@ -0,0 +1,28 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Grid = Grid;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const helpers_1 = require("../helpers");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function Grid(_a) {
+    var { children, columnsConfig, gap = 'm', layoutType, className } = _a, rest = __rest(_a, ["children", "columnsConfig", "gap", "layoutType", "className"]);
+    const columnsStyles = (0, react_1.useMemo)(() => (0, helpers_1.getColumnsStyles)({ columnsConfig, layoutType }), [columnsConfig, layoutType]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.grid, className) }, (0, uikit_product_utils_1.extractSupportProps)(rest), { style: columnsStyles, "data-gap": gap, "data-layout-type": layoutType, children: children })));
+}

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

@@ -0,0 +1,2 @@
+export * from './Grid';
+export * from './types';

package/dist/cjs/components/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Grid"), exports);
+__exportStar(require("./types"), exports);

package/dist/cjs/components/styles.module.css

@@ -0,0 +1,27 @@
+.grid{
+  box-sizing:border-box;
+  display:grid;
+  --gap-count:calc(var(--grid-column-count) - 1);
+  --total-gap-width:calc(var(--gap-count) * var(--grid-layout-gap));
+  --grid-item--max-width:calc((100% - var(--total-gap-width)) / var(--grid-column-count));
+  grid-template-columns:repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
+  grid-gap:var(--grid-layout-gap);
+}
+.grid[data-gap=l]{
+  --grid-layout-gap:var(--dimension-4m, 32px);
+}
+.grid[data-gap=m]{
+  --grid-layout-gap:var(--dimension-2m, 16px);
+}
+.grid[data-gap=s]{
+  --grid-layout-gap:var(--dimension-1m, 8px);
+}
+.grid[data-gap=xs]{
+  --grid-layout-gap:var(--dimension-025m, 2px);
+}
+.grid[data-layout-type=tablet][data-gap=l], .grid[data-layout-type=mobile][data-gap=l]{
+  --grid-layout-gap:var(--dimension-2m, 16px);
+}
+.grid[data-layout-type=tablet][data-gap=m], .grid[data-layout-type=tablet][data-gap=s], .grid[data-layout-type=mobile][data-gap=m], .grid[data-layout-type=mobile][data-gap=s]{
+  --grid-layout-gap:var(--dimension-1m, 8px);
+}

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

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { WithLayoutType, WithSupportProps } from '@sbercloud/uikit-product-utils';
+type ColumnConfig = {
+    /** Количество колонок для текущего layout */
+    amount: number;
+    /** Минимальная ширина колонки */
+    minWidth: number;
+};
+type ColumnsConfig = {
+    desktop?: ColumnConfig;
+    desktopSmall?: ColumnConfig;
+    tablet?: ColumnConfig;
+    mobile?: ColumnConfig;
+};
+export type GridProps = WithSupportProps<WithLayoutType<{
+    /** Содержимое */
+    children: ReactNode;
+    /** Конфигурация настройки колонок для разных layoutType */
+    columnsConfig: ColumnsConfig;
+    /** Расстояние между колонками и рядами */
+    gap?: 'xs' | 's' | 'm' | 'l';
+    className?: string;
+}>>;
+export {};

package/dist/cjs/components/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/helpers/getColumnsStyles.d.ts

@@ -0,0 +1,5 @@
+import { GridProps } from '../components';
+export declare const getColumnsStyles: ({ columnsConfig, layoutType }: Pick<GridProps, "columnsConfig" | "layoutType">) => {
+    '--grid-column-count': number;
+    '--grid-item--min-width': string;
+} | undefined;

package/dist/cjs/helpers/getColumnsStyles.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getColumnsStyles = void 0;
+const getColumnsStyles = ({ columnsConfig, layoutType }) => {
+    switch (layoutType) {
+        case 'mobile':
+            if (columnsConfig.mobile) {
+                return {
+                    '--grid-column-count': columnsConfig.mobile.amount,
+                    '--grid-item--min-width': `${columnsConfig.mobile.minWidth}px`,
+                };
+            }
+            break;
+        case 'tablet':
+            if (columnsConfig.tablet) {
+                return {
+                    '--grid-column-count': columnsConfig.tablet.amount,
+                    '--grid-item--min-width': `${columnsConfig.tablet.minWidth}px`,
+                };
+            }
+            break;
+        case 'desktopSmall':
+            if (columnsConfig.desktopSmall) {
+                return {
+                    '--grid-column-count': columnsConfig.desktopSmall.amount,
+                    '--grid-item--min-width': `${columnsConfig.desktopSmall.minWidth}px`,
+                };
+            }
+            if (columnsConfig.desktop) {
+                return {
+                    '--grid-column-count': columnsConfig.desktop.amount,
+                    '--grid-item--min-width': `${columnsConfig.desktop.minWidth}px`,
+                };
+            }
+            break;
+        case 'desktop':
+            if (columnsConfig.desktop) {
+                return {
+                    '--grid-column-count': columnsConfig.desktop.amount,
+                    '--grid-item--min-width': `${columnsConfig.desktop.minWidth}px`,
+                };
+            }
+            break;
+        default:
+            return undefined;
+    }
+};
+exports.getColumnsStyles = getColumnsStyles;

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

@@ -0,0 +1 @@
+export * from './getColumnsStyles';

package/dist/cjs/helpers/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./getColumnsStyles"), exports);

package/dist/cjs/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/cjs/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);

package/dist/esm/components/Grid.d.ts

@@ -0,0 +1,2 @@
+import { GridProps } from './types';
+export declare function Grid({ children, columnsConfig, gap, layoutType, className, ...rest }: GridProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Grid.js

@@ -0,0 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useMemo } from 'react';
+import { extractSupportProps } from '@sbercloud/uikit-product-utils';
+import { getColumnsStyles } from '../helpers';
+import styles from './styles.module.css';
+export function Grid(_a) {
+    var { children, columnsConfig, gap = 'm', layoutType, className } = _a, rest = __rest(_a, ["children", "columnsConfig", "gap", "layoutType", "className"]);
+    const columnsStyles = useMemo(() => getColumnsStyles({ columnsConfig, layoutType }), [columnsConfig, layoutType]);
+    return (_jsx("div", Object.assign({ className: cn(styles.grid, className) }, extractSupportProps(rest), { style: columnsStyles, "data-gap": gap, "data-layout-type": layoutType, children: children })));
+}

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

@@ -0,0 +1,2 @@
+export * from './Grid';
+export * from './types';

package/dist/esm/components/index.js

@@ -0,0 +1,2 @@
+export * from './Grid';
+export * from './types';

package/dist/esm/components/styles.module.css

@@ -0,0 +1,27 @@
+.grid{
+  box-sizing:border-box;
+  display:grid;
+  --gap-count:calc(var(--grid-column-count) - 1);
+  --total-gap-width:calc(var(--gap-count) * var(--grid-layout-gap));
+  --grid-item--max-width:calc((100% - var(--total-gap-width)) / var(--grid-column-count));
+  grid-template-columns:repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
+  grid-gap:var(--grid-layout-gap);
+}
+.grid[data-gap=l]{
+  --grid-layout-gap:var(--dimension-4m, 32px);
+}
+.grid[data-gap=m]{
+  --grid-layout-gap:var(--dimension-2m, 16px);
+}
+.grid[data-gap=s]{
+  --grid-layout-gap:var(--dimension-1m, 8px);
+}
+.grid[data-gap=xs]{
+  --grid-layout-gap:var(--dimension-025m, 2px);
+}
+.grid[data-layout-type=tablet][data-gap=l], .grid[data-layout-type=mobile][data-gap=l]{
+  --grid-layout-gap:var(--dimension-2m, 16px);
+}
+.grid[data-layout-type=tablet][data-gap=m], .grid[data-layout-type=tablet][data-gap=s], .grid[data-layout-type=mobile][data-gap=m], .grid[data-layout-type=mobile][data-gap=s]{
+  --grid-layout-gap:var(--dimension-1m, 8px);
+}

package/dist/esm/components/types.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { WithLayoutType, WithSupportProps } from '@sbercloud/uikit-product-utils';
+type ColumnConfig = {
+    /** Количество колонок для текущего layout */
+    amount: number;
+    /** Минимальная ширина колонки */
+    minWidth: number;
+};
+type ColumnsConfig = {
+    desktop?: ColumnConfig;
+    desktopSmall?: ColumnConfig;
+    tablet?: ColumnConfig;
+    mobile?: ColumnConfig;
+};
+export type GridProps = WithSupportProps<WithLayoutType<{
+    /** Содержимое */
+    children: ReactNode;
+    /** Конфигурация настройки колонок для разных layoutType */
+    columnsConfig: ColumnsConfig;
+    /** Расстояние между колонками и рядами */
+    gap?: 'xs' | 's' | 'm' | 'l';
+    className?: string;
+}>>;
+export {};

package/dist/esm/components/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/helpers/getColumnsStyles.d.ts

@@ -0,0 +1,5 @@
+import { GridProps } from '../components';
+export declare const getColumnsStyles: ({ columnsConfig, layoutType }: Pick<GridProps, "columnsConfig" | "layoutType">) => {
+    '--grid-column-count': number;
+    '--grid-item--min-width': string;
+} | undefined;

package/dist/esm/helpers/getColumnsStyles.js

@@ -0,0 +1,44 @@
+export const getColumnsStyles = ({ columnsConfig, layoutType }) => {
+    switch (layoutType) {
+        case 'mobile':
+            if (columnsConfig.mobile) {
+                return {
+                    '--grid-column-count': columnsConfig.mobile.amount,
+                    '--grid-item--min-width': `${columnsConfig.mobile.minWidth}px`,
+                };
+            }
+            break;
+        case 'tablet':
+            if (columnsConfig.tablet) {
+                return {
+                    '--grid-column-count': columnsConfig.tablet.amount,
+                    '--grid-item--min-width': `${columnsConfig.tablet.minWidth}px`,
+                };
+            }
+            break;
+        case 'desktopSmall':
+            if (columnsConfig.desktopSmall) {
+                return {
+                    '--grid-column-count': columnsConfig.desktopSmall.amount,
+                    '--grid-item--min-width': `${columnsConfig.desktopSmall.minWidth}px`,
+                };
+            }
+            if (columnsConfig.desktop) {
+                return {
+                    '--grid-column-count': columnsConfig.desktop.amount,
+                    '--grid-item--min-width': `${columnsConfig.desktop.minWidth}px`,
+                };
+            }
+            break;
+        case 'desktop':
+            if (columnsConfig.desktop) {
+                return {
+                    '--grid-column-count': columnsConfig.desktop.amount,
+                    '--grid-item--min-width': `${columnsConfig.desktop.minWidth}px`,
+                };
+            }
+            break;
+        default:
+            return undefined;
+    }
+};

package/dist/esm/helpers/index.d.ts

@@ -0,0 +1 @@
+export * from './getColumnsStyles';

package/dist/esm/helpers/index.js

@@ -0,0 +1 @@
+export * from './getColumnsStyles';

package/dist/esm/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/esm/index.js

@@ -0,0 +1 @@
+export * from './components';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-site-grid",
   "title": "Site Grid",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -30,14 +30,15 @@
     "name": "Akhremenko Grigorii",
     "url": "https://github.com/AGrigorii"
   },
+  "contributors": [],
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {},
   "dependencies": {
-    "@cloud-ru/uikit-product-utils": "7.0.0",
+    "@cloud-ru/uikit-product-utils": "7.0.2",
     "classnames": "2.5.1"
   },
-  "gitHead": "e8bd79bc92b26a8f52611972eec98a867536ccd3"
+  "gitHead": "bf479ecf7238ef20b78f20acaef439efa535d1a1"
 }