@salutejs/sdds-cs 0.380.1-dev.0 → 0.381.0-dev.0

package/dist/emotion/cjs/components/DateTimePicker/DateTimePicker.config.js

@@ -106,9 +106,9 @@ const config = {
                 ${_emotion.dateTimePickerTokens.tooltipBoxShadow}: ${_sdds_cs.shadowDownHardM};
                 ${_emotion.dateTimePickerTokens.tooltipColor}: ${_sdds_cs.textPrimary};
 
-                ${_emotion.dateTimePickerTokens.timePickerItemBackgroundHover}: ${_sdds_cs.surfaceSolidSecondary};
+                ${_emotion.dateTimePickerTokens.timePickerItemBackgroundHover}: ${_sdds_cs.surfaceTransparentAccent};
                 ${_emotion.dateTimePickerTokens.timePickerItemBackgroundActive}: ${_sdds_cs.surfaceSolidSecondary};
-                ${_emotion.dateTimePickerTokens.timePickerScrollbarColor}: ${_sdds_cs.surfaceSolidTertiary};
+                ${_emotion.dateTimePickerTokens.timePickerScrollbarColor}: ${_sdds_cs.surfaceSolidDefault};
                 ${_emotion.dateTimePickerTokens.timePickerScrollbarTrackColor}: ${_sdds_cs.surfaceSolidPrimary};
 
                 ${_emotion.dateTimePickerTokens.shortcutColor}: ${_sdds_cs.textPrimary};
@@ -252,7 +252,7 @@ const config = {
 
                 ${_emotion.dateTimePickerTokens.timePickerColumnWidth}: 2.5rem;
                 ${_emotion.dateTimePickerTokens.timePickerColumnHeight}: 18.625rem;
-                ${_emotion.dateTimePickerTokens.timePickerColumnGap}: 0.125rem;
+                ${_emotion.dateTimePickerTokens.timePickerColumnGap}: 0rem;
                 ${_emotion.dateTimePickerTokens.timePickerItemHeight}: 2.5rem;
                 ${_emotion.dateTimePickerTokens.timePickerItemBorderRadius}: 0.5rem;
                 ${_emotion.dateTimePickerTokens.timePickerItemPadding}: 0;
@@ -262,6 +262,7 @@ const config = {
                 ${_emotion.dateTimePickerTokens.timePickerItemFontWeight}: ${_sdds_cs.bodyM.fontWeight};
                 ${_emotion.dateTimePickerTokens.timePickerItemLetterSpacing}: ${_sdds_cs.bodyM.letterSpacing};
                 ${_emotion.dateTimePickerTokens.timePickerItemLineHeight}: ${_sdds_cs.bodyM.lineHeight};
+                ${_emotion.dateTimePickerTokens.timePickerGap}: 0;
                 ${_emotion.dateTimePickerTokens.timePickerScrollbarWidth}: 0.125rem;
                 ${_emotion.dateTimePickerTokens.timePickerScrollbarMargin}: 0.25rem;
 

package/dist/emotion/cjs/components/Group/Group.config.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "config", {
+    enumerable: true,
+    get: function() {
+        return config;
+    }
+});
+const _emotion = require("@salutejs/plasma-new-hope/emotion");
+const config = {
+    defaults: {
+        gap: 'dense',
+        orientation: 'horizontal',
+        shape: 'default',
+        stretching: 'auto'
+    },
+    variations: {
+        orientation: {
+            horizontal: (0, _emotion.css)`
+                ${_emotion.groupTokens.orientation}: row;
+            `,
+            vertical: (0, _emotion.css)`
+                ${_emotion.groupTokens.orientation}: column;
+            `
+        },
+        gap: {
+            none: (0, _emotion.css)`
+                ${_emotion.groupTokens.gap}: 0;
+            `,
+            dense: (0, _emotion.css)`
+                ${_emotion.groupTokens.gap}: 0.125rem;
+            `,
+            wide: (0, _emotion.css)`
+                ${_emotion.groupTokens.gap}: 0.5rem;
+            `
+        },
+        shape: {
+            default: (0, _emotion.css)``,
+            segmented: (0, _emotion.css)`
+                ${_emotion.groupTokens.segmentedRadius}: 0.25rem;
+            `
+        },
+        stretching: {
+            auto: (0, _emotion.css)``,
+            filled: (0, _emotion.css)``
+        }
+    }
+};

package/dist/emotion/cjs/components/Group/Group.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Group", {
+    enumerable: true,
+    get: function() {
+        return Group;
+    }
+});
+const _emotion = require("@salutejs/plasma-new-hope/emotion");
+const _Groupconfig = require("./Group.config");
+const mergedConfig = (0, _emotion.mergeConfig)(_emotion.groupConfig, _Groupconfig.config);
+const Group = (0, _emotion.component)(mergedConfig);

package/dist/emotion/cjs/components/Group/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get Group () {
+        return _Group.Group;
+    },
+    get groupTokens () {
+        return _emotion.groupTokens;
+    }
+});
+const _Group = require("./Group");
+const _emotion = require("@salutejs/plasma-new-hope/emotion");

package/dist/emotion/cjs/components/TimePicker/TimePicker.config.js

@@ -51,9 +51,9 @@ const config = {
                 ${_emotion.timePickerTokens.textFieldBorderColorErrorFocus}: ${_sdds_cs.textNegative};
                 ${_emotion.timePickerTokens.textFieldBorderColorErrorHover}: ${_sdds_cs.textNegative};
 
-                ${_emotion.timePickerTokens.textFieldBorderColorSuccess}: ${_sdds_cs.textNegative};
-                ${_emotion.timePickerTokens.textFieldBorderColorSuccessFocus}: ${_sdds_cs.textNegative};
-                ${_emotion.timePickerTokens.textFieldBorderColorSuccessHover}: ${_sdds_cs.textNegative};
+                ${_emotion.timePickerTokens.textFieldBorderColorSuccess}: ${_sdds_cs.textPositive};
+                ${_emotion.timePickerTokens.textFieldBorderColorSuccessFocus}: ${_sdds_cs.textPositive};
+                ${_emotion.timePickerTokens.textFieldBorderColorSuccessHover}: ${_sdds_cs.textPositive};
 
                 ${_emotion.timePickerTokens.textFieldContentSlotColor}: ${_sdds_cs.textSecondary};
                 ${_emotion.timePickerTokens.textFieldContentSlotColorHover}: ${_sdds_cs.textSecondaryHover};
@@ -69,11 +69,11 @@ const config = {
                 ${_emotion.timePickerTokens.textFieldPlaceholderColorFocus}: ${_sdds_cs.textTertiary};
 
                 ${_emotion.timePickerTokens.timePickerBackground}: ${_sdds_cs.surfaceSolidCard};
-                ${_emotion.timePickerTokens.itemBackgroundHover}: ${_sdds_cs.surfaceSolidSecondary};
+                ${_emotion.timePickerTokens.itemBackgroundHover}: ${_sdds_cs.surfaceTransparentAccent};
                 ${_emotion.timePickerTokens.itemBackgroundActive}: ${_sdds_cs.surfaceSolidSecondary};
                 ${_emotion.timePickerTokens.itemFocusColor}: ${_sdds_cs.surfaceAccent};
 
-                ${_emotion.timePickerTokens.scrollbarColor}: ${_sdds_cs.surfaceSolidTertiary};
+                ${_emotion.timePickerTokens.scrollbarColor}: ${_sdds_cs.surfaceSolidDefault};
                 ${_emotion.timePickerTokens.scrollbarTrackColor}: ${_sdds_cs.surfaceSolidPrimary};
 
                 ${_emotion.timePickerTokens.disabledOpacity}: 0.4;
@@ -130,7 +130,7 @@ const config = {
                 ${_emotion.timePickerTokens.textFieldTextAfterMargin}: 0 0 0 0.25rem;
 
                 ${_emotion.timePickerTokens.timePickerBorderRadius}: 0.625rem;
-                ${_emotion.timePickerTokens.timePickerWidth}: 7.75rem;
+                ${_emotion.timePickerTokens.timePickerWidth}: 7.5rem;
                 ${_emotion.timePickerTokens.timePickerPadding}: 0.125rem;
 
                 ${_emotion.timePickerTokens.columnHeight}: 19rem;
@@ -154,6 +154,7 @@ const config = {
                 ${_emotion.timePickerTokens.leftHelperLetterSpacing}: ${_sdds_cs.bodyXS.letterSpacing};
                 ${_emotion.timePickerTokens.leftHelperLineHeight}: ${_sdds_cs.bodyXS.lineHeight};
 
+                ${_emotion.timePickerTokens.gap}: 0;
                 ${_emotion.timePickerTokens.scrollbarWidth}: 0.125rem;
                 ${_emotion.timePickerTokens.scrollbarMargin}: 0.25rem;
             `

package/dist/emotion/cjs/index.js

@@ -8,6 +8,7 @@ _export_star(require("./components/Badge"), exports);
 _export_star(require("./components/Breadcrumbs"), exports);
 _export_star(require("./components/Button"), exports);
 _export_star(require("./components/ButtonGroup"), exports);
+_export_star(require("./components/Group"), exports);
 _export_star(require("./components/Divider"), exports);
 _export_star(require("./components/Drawer"), exports);
 _export_star(require("./components/Flow"), exports);

package/dist/emotion/es/components/DateTimePicker/DateTimePicker.config.js

@@ -1,4 +1,4 @@
-import { bodyM, bodyMBold, bodyS, bodySBold, bodyXS, inverseOutlineSolidSecondary, inverseTextPrimary, outlineAccent, outlineNegative, outlineSolidPrimary, outlineSolidPrimaryHover, shadowDownHardM, shadowDownSoftS, surfaceAccent, surfaceClear, surfaceNegative, surfaceSolidCard, surfaceSolidCardBrightness, surfaceSolidPrimary, surfaceSolidSecondary, surfaceSolidTertiary, surfaceTransparentAccent, textAccent, textAccentActive, textAccentMinor, textNegative, textPositive, textPrimary, textPrimaryHover, textSecondary, textSecondaryActive, textSecondaryHover, textTertiary } from '@salutejs/sdds-themes/tokens/sdds_cs';
+import { bodyM, bodyMBold, bodyS, bodySBold, bodyXS, inverseOutlineSolidSecondary, inverseTextPrimary, outlineAccent, outlineNegative, outlineSolidPrimary, outlineSolidPrimaryHover, shadowDownHardM, shadowDownSoftS, surfaceAccent, surfaceClear, surfaceNegative, surfaceSolidCard, surfaceSolidCardBrightness, surfaceSolidDefault, surfaceSolidPrimary, surfaceSolidSecondary, surfaceSolidTertiary, surfaceTransparentAccent, textAccent, textAccentActive, textAccentMinor, textNegative, textPositive, textPrimary, textPrimaryHover, textSecondary, textSecondaryActive, textSecondaryHover, textTertiary } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { dateTimePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -96,9 +96,9 @@ export const config = {
                 ${tokens.tooltipBoxShadow}: ${shadowDownHardM};
                 ${tokens.tooltipColor}: ${textPrimary};
 
-                ${tokens.timePickerItemBackgroundHover}: ${surfaceSolidSecondary};
+                ${tokens.timePickerItemBackgroundHover}: ${surfaceTransparentAccent};
                 ${tokens.timePickerItemBackgroundActive}: ${surfaceSolidSecondary};
-                ${tokens.timePickerScrollbarColor}: ${surfaceSolidTertiary};
+                ${tokens.timePickerScrollbarColor}: ${surfaceSolidDefault};
                 ${tokens.timePickerScrollbarTrackColor}: ${surfaceSolidPrimary};
 
                 ${tokens.shortcutColor}: ${textPrimary};
@@ -242,7 +242,7 @@ export const config = {
 
                 ${tokens.timePickerColumnWidth}: 2.5rem;
                 ${tokens.timePickerColumnHeight}: 18.625rem;
-                ${tokens.timePickerColumnGap}: 0.125rem;
+                ${tokens.timePickerColumnGap}: 0rem;
                 ${tokens.timePickerItemHeight}: 2.5rem;
                 ${tokens.timePickerItemBorderRadius}: 0.5rem;
                 ${tokens.timePickerItemPadding}: 0;
@@ -252,6 +252,7 @@ export const config = {
                 ${tokens.timePickerItemFontWeight}: ${bodyM.fontWeight};
                 ${tokens.timePickerItemLetterSpacing}: ${bodyM.letterSpacing};
                 ${tokens.timePickerItemLineHeight}: ${bodyM.lineHeight};
+                ${tokens.timePickerGap}: 0;
                 ${tokens.timePickerScrollbarWidth}: 0.125rem;
                 ${tokens.timePickerScrollbarMargin}: 0.25rem;
 

package/dist/emotion/es/components/Group/Group.config.js

@@ -0,0 +1,40 @@
+import { css, groupTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
+export const config = {
+    defaults: {
+        gap: 'dense',
+        orientation: 'horizontal',
+        shape: 'default',
+        stretching: 'auto'
+    },
+    variations: {
+        orientation: {
+            horizontal: css`
+                ${tokens.orientation}: row;
+            `,
+            vertical: css`
+                ${tokens.orientation}: column;
+            `
+        },
+        gap: {
+            none: css`
+                ${tokens.gap}: 0;
+            `,
+            dense: css`
+                ${tokens.gap}: 0.125rem;
+            `,
+            wide: css`
+                ${tokens.gap}: 0.5rem;
+            `
+        },
+        shape: {
+            default: css``,
+            segmented: css`
+                ${tokens.segmentedRadius}: 0.25rem;
+            `
+        },
+        stretching: {
+            auto: css``,
+            filled: css``
+        }
+    }
+};

package/dist/emotion/es/components/Group/Group.js

@@ -0,0 +1,6 @@
+import { groupConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/emotion';
+import { config } from './Group.config';
+const mergedConfig = mergeConfig(groupConfig, config);
+/**
+ * Группа элементов с общими отступами, направлением и скруглением внутренних углов.
+ */ export const Group = component(mergedConfig);

package/dist/emotion/es/components/Group/index.js

@@ -0,0 +1,2 @@
+export { Group } from './Group';
+export { groupTokens } from '@salutejs/plasma-new-hope/emotion';

package/dist/emotion/es/components/TimePicker/TimePicker.config.js

@@ -1,4 +1,4 @@
-import { bodyM, bodyS, bodyXS, outlineAccent, outlineSolidPrimary, outlineSolidPrimaryHover, shadowDownSoftS, surfaceAccent, surfaceClear, surfaceNegative, surfaceSolidCard, surfaceSolidPrimary, surfaceSolidSecondary, surfaceSolidTertiary, textAccent, textAccentActive, textAccentMinor, textNegative, textPositive, textPrimary, textSecondary, textSecondaryActive, textSecondaryHover, textTertiary } from '@salutejs/sdds-themes/tokens/sdds_cs';
+import { bodyM, bodyS, bodyXS, outlineAccent, outlineSolidPrimary, outlineSolidPrimaryHover, shadowDownSoftS, surfaceAccent, surfaceClear, surfaceNegative, surfaceSolidCard, surfaceSolidDefault, surfaceSolidPrimary, surfaceSolidSecondary, surfaceTransparentAccent, textAccent, textAccentActive, textAccentMinor, textNegative, textPositive, textPrimary, textSecondary, textSecondaryActive, textSecondaryHover, textTertiary } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { timePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -41,9 +41,9 @@ export const config = {
                 ${tokens.textFieldBorderColorErrorFocus}: ${textNegative};
                 ${tokens.textFieldBorderColorErrorHover}: ${textNegative};
 
-                ${tokens.textFieldBorderColorSuccess}: ${textNegative};
-                ${tokens.textFieldBorderColorSuccessFocus}: ${textNegative};
-                ${tokens.textFieldBorderColorSuccessHover}: ${textNegative};
+                ${tokens.textFieldBorderColorSuccess}: ${textPositive};
+                ${tokens.textFieldBorderColorSuccessFocus}: ${textPositive};
+                ${tokens.textFieldBorderColorSuccessHover}: ${textPositive};
 
                 ${tokens.textFieldContentSlotColor}: ${textSecondary};
                 ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover};
@@ -59,11 +59,11 @@ export const config = {
                 ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary};
 
                 ${tokens.timePickerBackground}: ${surfaceSolidCard};
-                ${tokens.itemBackgroundHover}: ${surfaceSolidSecondary};
+                ${tokens.itemBackgroundHover}: ${surfaceTransparentAccent};
                 ${tokens.itemBackgroundActive}: ${surfaceSolidSecondary};
                 ${tokens.itemFocusColor}: ${surfaceAccent};
 
-                ${tokens.scrollbarColor}: ${surfaceSolidTertiary};
+                ${tokens.scrollbarColor}: ${surfaceSolidDefault};
                 ${tokens.scrollbarTrackColor}: ${surfaceSolidPrimary};
 
                 ${tokens.disabledOpacity}: 0.4;
@@ -120,7 +120,7 @@ export const config = {
                 ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem;
 
                 ${tokens.timePickerBorderRadius}: 0.625rem;
-                ${tokens.timePickerWidth}: 7.75rem;
+                ${tokens.timePickerWidth}: 7.5rem;
                 ${tokens.timePickerPadding}: 0.125rem;
 
                 ${tokens.columnHeight}: 19rem;
@@ -144,6 +144,7 @@ export const config = {
                 ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing};
                 ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight};
 
+                ${tokens.gap}: 0;
                 ${tokens.scrollbarWidth}: 0.125rem;
                 ${tokens.scrollbarMargin}: 0.25rem;
             `

package/dist/emotion/es/index.js

@@ -4,6 +4,7 @@ export * from './components/Badge';
 export * from './components/Breadcrumbs';
 export * from './components/Button';
 export * from './components/ButtonGroup';
+export * from './components/Group';
 export * from './components/Divider';
 export * from './components/Drawer';
 export * from './components/Flow';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/sdds-cs",
-  "version": "0.380.1-dev.0",
+  "version": "0.381.0-dev.0",
   "description": "Salute Design System / React UI kit for SDDS CS web applications",
   "author": "Salute Frontend Team <salute.developers@gmail.com>",
   "publishConfig": {
@@ -42,7 +42,7 @@
     "styled-components": "^5.3.11"
   },
   "dependencies": {
-    "@salutejs/plasma-new-hope": "0.388.1-dev.0",
+    "@salutejs/plasma-new-hope": "0.389.0-dev.0",
     "@salutejs/sdds-themes": "0.87.0-dev.0",
     "classnames": "2.5.1"
   },
@@ -62,10 +62,10 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@salutejs/plasma-colors": "0.28.0-dev.0",
-    "@salutejs/plasma-core": "1.249.0-dev.0",
-    "@salutejs/plasma-cy-utils": "0.179.0-dev.0",
+    "@salutejs/plasma-core": "1.250.0-dev.0",
+    "@salutejs/plasma-cy-utils": "0.180.0-dev.0",
     "@salutejs/plasma-icons": "1.257.1-dev.0",
-    "@salutejs/plasma-sb-utils": "0.251.1-dev.0",
+    "@salutejs/plasma-sb-utils": "0.252.0-dev.0",
     "@types/node": "16.7.13",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
@@ -107,5 +107,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "ed4c47d66e4b9e902ba7b56c72b5df1da7230489"
+  "gitHead": "3c21629c0b49cb41f7254eb061bb18e82a13e858"
 }

package/types/components/Group/Group.config.d.ts

@@ -0,0 +1,27 @@
+export declare const config: {
+    defaults: {
+        gap: string;
+        orientation: string;
+        shape: string;
+        stretching: string;
+    };
+    variations: {
+        orientation: {
+            horizontal: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+            vertical: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+        };
+        gap: {
+            none: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+            dense: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+            wide: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+        };
+        shape: {
+            default: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+            segmented: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+        };
+        stretching: {
+            auto: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+            filled: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+        };
+    };
+};

package/types/components/Group/Group.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Группа элементов с общими отступами, направлением и скруглением внутренних углов.
+ */
+export declare const Group: import("react").FunctionComponent<import("@salutejs/plasma-new-hope/types/engines/types.js").PropsType<{
+    orientation: {
+        horizontal: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+        vertical: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+    };
+    gap: {
+        none: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+        dense: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+        wide: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+    };
+    shape: {
+        default: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+        segmented: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+    };
+    stretching: {
+        auto: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+        filled: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
+    };
+}> & import("@salutejs/plasma-new-hope/emotion").GroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/components/Group/index.d.ts

@@ -0,0 +1,3 @@
+export { Group } from './Group';
+export { groupTokens } from '@salutejs/plasma-new-hope/emotion';
+export type { GroupProps } from '@salutejs/plasma-new-hope/emotion';

package/types/index.d.ts

@@ -4,6 +4,7 @@ export * from './components/Badge';
 export * from './components/Breadcrumbs';
 export * from './components/Button';
 export * from './components/ButtonGroup';
+export * from './components/Group';
 export * from './components/Divider';
 export * from './components/Drawer';
 export * from './components/Flow';