@cloud-ru/ds-uikit-product-quota 1.0.0

package/dist/cjs/components/QuotaWidget/QuotaIncreaseButton.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuotaIncreaseButton = QuotaIncreaseButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@cloud-ru/ds-button");
+const locale_1 = require("../../locale");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/** Кнопка «Увеличить квоту» (outline, на всю ширину) — низ мобильного листа / footer-слот BottomSheet. */
+function QuotaIncreaseButton({ onClick }) {
+    const { t } = locale_1.quotaLocale.useTranslations();
+    return ((0, jsx_runtime_1.jsx)(button_1.Button, { className: styles_module_scss_1.default.increaseButton, view: 'outline', appearance: 'neutral', label: t('increaseQuota'), size: 'm', fullWidth: true, onClick: onClick }));
+}

package/dist/cjs/components/QuotaWidget/QuotaMobileHeader.d.ts

@@ -0,0 +1,4 @@
+/** Мобильная шапка квота-виджета (макет): заголовок «Квоты» + имя проекта, слева, без пиктограмм. */
+export declare function QuotaMobileHeader({ projectName }: {
+    projectName: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/QuotaWidget/QuotaMobileHeader.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuotaMobileHeader = QuotaMobileHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const truncate_string_1 = require("@cloud-ru/ds-truncate-string");
+const locale_1 = require("../../locale");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/** Мобильная шапка квота-виджета (макет): заголовок «Квоты» + имя проекта, слева, без пиктограмм. */
+function QuotaMobileHeader({ projectName }) {
+    const { t } = locale_1.quotaLocale.useTranslations();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.mobileHeader, children: [(0, jsx_runtime_1.jsx)("h2", { className: styles_module_scss_1.default.mobileTitle, children: t('quotas') }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.mobileSubtitle, children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { maxLines: 1, text: projectName }) })] }));
+}

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

@@ -0,0 +1,12 @@
+import { ButtonProps } from '@cloud-ru/ds-button';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { QuotaWidgetPropsBase } from '../../types';
+export type QuotaWidgetProps = WithSupportProps<QuotaWidgetPropsBase & {
+    /** Ссылка на страницу квот по проекту */
+    quotasUrl: string;
+    /** Колбек клика по ссылке на страницу квот по проекту */
+    onQuotasUrlClick?: () => void;
+    /** Свойства кнопки открытия виджета */
+    buttonProps?: Pick<ButtonProps, 'size' | 'className' | 'fullWidth' | 'label' | 'appearance' | 'disabled' | 'view'>;
+}>;
+export declare function QuotaWidget({ quotas, disableSorting, loading, error, onRefresh, projectName, quotasUrl, canEditQuota, hideIncreaseQuotaButton, onIncreaseQuotaClick, onWidgetOpen, onQuotasUrlClick, buttonProps, ...props }: QuotaWidgetProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/QuotaWidget/QuotaWidget.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuotaWidget = QuotaWidget;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const adaptive_1 = require("@cloud-ru/ds-adaptive");
+const button_1 = require("@cloud-ru/ds-button");
+const dropdown_1 = require("@cloud-ru/ds-dropdown");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const locale_1 = require("../../locale");
+const utils_1 = require("../../utils");
+const QuotaIncreaseButton_1 = require("./QuotaIncreaseButton");
+const QuotaMobileHeader_1 = require("./QuotaMobileHeader");
+const QuotaWidgetContent_1 = require("./QuotaWidgetContent");
+function QuotaWidget({ quotas, disableSorting, loading, error, onRefresh, projectName, quotasUrl, canEditQuota, hideIncreaseQuotaButton, onIncreaseQuotaClick, onWidgetOpen, onQuotasUrlClick, buttonProps, ...props }) {
+    const { t } = locale_1.quotaLocale.useTranslations();
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const { layoutType } = (0, adaptive_1.useAdaptiveLayout)();
+    const isMobile = (0, adaptive_1.isMobileLayout)(layoutType);
+    const rootTestId = props['data-test-id'];
+    const useMatrixTestIds = Boolean(rootTestId && rootTestId !== constants_1.TEST_IDS.quotaWidget.root);
+    const contentTestId = useMatrixTestIds && rootTestId ? `content-${rootTestId}` : constants_1.TEST_IDS.quotaWidget.content;
+    const triggerTestId = useMatrixTestIds && rootTestId ? `trigger-${rootTestId}` : constants_1.TEST_IDS.quotaWidget.trigger;
+    const handleOpenChange = (open) => {
+        setIsOpen(open);
+        if (open) {
+            onWidgetOpen?.();
+        }
+    };
+    const exhaustedCount = quotas.filter(utils_1.checkIsExceeded).length;
+    // На мобилке лист full-height (snap `1`): шапку и кнопку выносим в pinned-слоты BottomSheet
+    // (`title` сверху, `footer` снизу), а карточки скроллятся в теле листа — как в макете.
+    const showMobileIncreaseButton = isMobile && canEditQuota && !error && !hideIncreaseQuotaButton;
+    return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { ...props, placement: 'bottom-end', 
+        // Mobile: лист на всю высоту экрана (число `1` = full-height snap; safe-area даёт сам BottomSheet).
+        snapPoints: [1], title: isMobile ? (0, jsx_runtime_1.jsx)(QuotaMobileHeader_1.QuotaMobileHeader, { projectName: projectName }) : undefined, footer: showMobileIncreaseButton ? (0, jsx_runtime_1.jsx)(QuotaIncreaseButton_1.QuotaIncreaseButton, { onClick: onIncreaseQuotaClick }) : undefined, open: isOpen, onOpenChange: handleOpenChange, content: (0, jsx_runtime_1.jsx)(QuotaWidgetContent_1.QuotaWidgetContent, { quotas: quotas, disableSorting: disableSorting, loading: loading, error: error, onRefresh: onRefresh, projectName: projectName, quotasUrl: quotasUrl, canEditQuota: canEditQuota, hideIncreaseQuotaButton: hideIncreaseQuotaButton, onIncreaseQuotaClick: onIncreaseQuotaClick, onQuotasUrlClick: onQuotasUrlClick, hideMobileHeader: isMobile, hideMobileIncreaseButton: isMobile, "data-test-id": contentTestId }), children: (0, jsx_runtime_1.jsx)(button_1.Button
+        // На мобилке триггер бордюрный (`outline` — как в макете кнопки квот),
+        // на desktop — плоский `function`. Переопределяется через `buttonProps.view`.
+        , { 
+            // На мобилке триггер бордюрный (`outline` — как в макете кнопки квот),
+            // на desktop — плоский `function`. Переопределяется через `buttonProps.view`.
+            view: isMobile ? 'outline' : 'function', label: t('quotas'), appearance: 'neutral', iconPosition: 'after', icon: isOpen ? (0, jsx_runtime_1.jsx)(system_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}), counter: exhaustedCount > 0 ? { value: exhaustedCount, appearance: 'red' } : undefined, size: 'm', "data-test-id": triggerTestId, ...buttonProps }) }));
+}

package/dist/cjs/components/QuotaWidget/QuotaWidgetContent.d.ts

@@ -0,0 +1,27 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { QuotaWidgetPropsBase } from '../../types';
+export type QuotaWidgetContentProps = WithSupportProps<QuotaWidgetPropsBase & {
+    /** Ссылка на страницу квот по проекту */
+    quotasUrl: string;
+    /** Колбек клика по ссылке на страницу квот по проекту */
+    onQuotasUrlClick?: () => void;
+    /**
+     * Не рендерить мобильную шапку (её выносят в pinned-`title` контейнера, напр. BottomSheet).
+     * На desktop не влияет.
+     */
+    hideMobileHeader?: boolean;
+    /**
+     * Не рендерить мобильную кнопку расширения (её выносят в pinned-`footer` контейнера).
+     * На desktop не влияет.
+     */
+    hideMobileIncreaseButton?: boolean;
+}>;
+/**
+ * Голый контент квота-виджета: шапка проекта + карточки + кнопка расширения — без триггера,
+ * дропдауна и аккордеона. Используется внутри `QuotaWidget` (в дропдауне/BottomSheet) и напрямую,
+ * когда контейнер-раскрытие даёт кто-то снаружи (напр. `sideBlock` формы уже открывает BottomSheet).
+ *
+ * На full-height BottomSheet шапка/кнопка уезжают в pinned-слоты `title`/`footer` (см. `QuotaWidget`),
+ * а сюда остаются только карточки — тогда `hideMobileHeader`/`hideMobileIncreaseButton` = true.
+ */
+export declare function QuotaWidgetContent({ quotas, disableSorting, loading, error, onRefresh, projectName, quotasUrl, canEditQuota, hideIncreaseQuotaButton, onIncreaseQuotaClick, onQuotasUrlClick, hideMobileHeader, hideMobileIncreaseButton, ...props }: QuotaWidgetContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/QuotaWidget/QuotaWidgetContent.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuotaWidgetContent = QuotaWidgetContent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const adaptive_1 = require("@cloud-ru/ds-adaptive");
+const constants_1 = require("../../constants");
+const QuotaCardsGrid_1 = require("../../helperComponents/QuotaCardsGrid");
+const ProjectHeader_1 = require("./components/ProjectHeader");
+const QuotaIncreaseButton_1 = require("./QuotaIncreaseButton");
+const QuotaMobileHeader_1 = require("./QuotaMobileHeader");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/**
+ * Голый контент квота-виджета: шапка проекта + карточки + кнопка расширения — без триггера,
+ * дропдауна и аккордеона. Используется внутри `QuotaWidget` (в дропдауне/BottomSheet) и напрямую,
+ * когда контейнер-раскрытие даёт кто-то снаружи (напр. `sideBlock` формы уже открывает BottomSheet).
+ *
+ * На full-height BottomSheet шапка/кнопка уезжают в pinned-слоты `title`/`footer` (см. `QuotaWidget`),
+ * а сюда остаются только карточки — тогда `hideMobileHeader`/`hideMobileIncreaseButton` = true.
+ */
+function QuotaWidgetContent({ quotas, disableSorting, loading, error, onRefresh, projectName, quotasUrl, canEditQuota, hideIncreaseQuotaButton, onIncreaseQuotaClick, onQuotasUrlClick, hideMobileHeader = false, hideMobileIncreaseButton = false, ...props }) {
+    const { layoutType } = (0, adaptive_1.useAdaptiveLayout)();
+    const isMobile = (0, adaptive_1.isMobileLayout)(layoutType);
+    const contentTestId = props['data-test-id'] ?? constants_1.TEST_IDS.quotaWidget.content;
+    const showMobileIncreaseButton = isMobile && !hideMobileIncreaseButton && canEditQuota && !error && !hideIncreaseQuotaButton;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, "data-mobile": isMobile, "data-test-id": contentTestId, children: [isMobile ? (
+            // Мобильная шапка (макет): «Квоты» + имя проекта, без пиктограммы/ссылки/подзаголовка «Остаток…».
+            !hideMobileHeader && (0, jsx_runtime_1.jsx)(QuotaMobileHeader_1.QuotaMobileHeader, { projectName: projectName })) : (
+            // Desktop-popover: полная шапка проекта (с пиктограммой, ссылкой и кнопкой расширения).
+            (0, jsx_runtime_1.jsx)(ProjectHeader_1.ProjectHeader, { projectName: projectName, quotasUrl: quotasUrl, canEditQuota: canEditQuota, error: error, onIncreaseQuotaClick: onIncreaseQuotaClick, hideIncreaseQuotaButton: hideIncreaseQuotaButton, onQuotasUrlClick: onQuotasUrlClick })), (0, jsx_runtime_1.jsx)(QuotaCardsGrid_1.QuotaCardsGrid, { quotas: quotas, disableSorting: disableSorting, loading: loading, error: error, onRefresh: onRefresh }), showMobileIncreaseButton && (0, jsx_runtime_1.jsx)(QuotaIncreaseButton_1.QuotaIncreaseButton, { onClick: onIncreaseQuotaClick })] }));
+}

package/dist/cjs/components/QuotaWidget/components/ProjectHeader/ProjectHeader.d.ts

@@ -0,0 +1,7 @@
+import { QuotaWidgetPropsBase } from '../../../../types';
+type ProjectHeaderProps = Pick<QuotaWidgetPropsBase, 'projectName' | 'canEditQuota' | 'error' | 'hideIncreaseQuotaButton' | 'onIncreaseQuotaClick'> & {
+    quotasUrl: string;
+    onQuotasUrlClick?: () => void;
+};
+export declare function ProjectHeader({ projectName, quotasUrl, canEditQuota, error, onIncreaseQuotaClick, hideIncreaseQuotaButton, onQuotasUrlClick, }: ProjectHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/QuotaWidget/components/ProjectHeader/ProjectHeader.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProjectHeader = ProjectHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@cloud-ru/ds-button");
+const product_1 = require("@cloud-ru/ds-icons/interface/product");
+const uikit_product_title_clickable_1 = require("@cloud-ru/ds-uikit-product-title-clickable");
+const constants_1 = require("../../../../constants");
+const locale_1 = require("../../../../locale");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const RUSSIAN_CHARS_REGEXP = /[А-Яа-яЁё]/;
+function ProjectHeader({ projectName, quotasUrl, canEditQuota, error, onIncreaseQuotaClick, hideIncreaseQuotaButton, onQuotasUrlClick, }) {
+    const { t } = locale_1.quotaLocale.useTranslations();
+    const widgetTitle = RUSSIAN_CHARS_REGEXP.test(projectName) ? 'widgetTitle.quotes' : 'widgetTitle.noQuotes';
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, "data-test-id": constants_1.TEST_IDS.quotaWidget.projectHeader, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.projectWrapper, children: [(0, jsx_runtime_1.jsx)(uikit_product_title_clickable_1.TitleClickable, { className: styles_module_scss_1.default.titleLink, title: t(widgetTitle, { project: projectName }), href: quotasUrl, target: '_blank', icon: (0, jsx_runtime_1.jsx)(product_1.QuotaSVG, {}), onClick: onQuotasUrlClick }), (0, jsx_runtime_1.jsx)("p", { className: styles_module_scss_1.default.subtitle, children: t('widgetSubtitle') })] }), canEditQuota && !error && !hideIncreaseQuotaButton && ((0, jsx_runtime_1.jsx)(button_1.Button, { view: 'outline', appearance: 'neutral', label: t('increaseQuota'), size: 'm', onClick: onIncreaseQuotaClick }))] }));
+}

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

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

package/dist/cjs/components/QuotaWidget/components/ProjectHeader/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("./ProjectHeader"), exports);

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

@@ -0,0 +1,30 @@
+.header{
+  display:flex;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  width:100%;
+}
+
+.projectWrapper{
+  display:flex;
+  flex:1 0 0;
+  flex-direction:column;
+  align-items:flex-start;
+  min-width:0;
+}
+
+.titleLink{
+  gap:var(--sn-primitive-dimension-8, 8px);
+}
+
+.subtitle{
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+  width:100%;
+  margin:0;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}

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

@@ -0,0 +1,2 @@
+export * from './QuotaWidget';
+export * from './QuotaWidgetContent';

package/dist/cjs/components/QuotaWidget/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("./QuotaWidget"), exports);
+__exportStar(require("./QuotaWidgetContent"), exports);

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

@@ -0,0 +1,49 @@
+@charset "UTF-8";
+.content{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-16, 16px);
+  align-items:flex-start;
+  width:620px;
+  min-width:620px;
+  padding:var(--sn-primitive-dimension-12, 12px) var(--sn-primitive-dimension-16, 16px);
+}
+.content[data-mobile=true]{
+  width:100%;
+  min-width:0;
+  height:100%;
+  padding:0;
+}
+.increaseButton{
+  width:100%;
+}
+.mobileHeader{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-2, 2px);
+  align-items:flex-start;
+  width:100%;
+}
+
+.mobileTitle{
+  font-family:var(--sn-regular-title-l-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-title-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-l, var(--sn-brand-font-fontWeight-light-regular-title-l, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-title-l-lineHeight, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-title-l-fontSize, var(--sn-density-typography-roleTitle-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-title-l-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
+  paragraph-spacing:var(--sn-regular-title-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize20, 10px));
+  margin:0;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+
+.mobileSubtitle{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+  width:100%;
+  margin:0;
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}

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

@@ -0,0 +1,13 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { QuotaItem } from '../../types';
+export type QuotaWidgetCardProps = WithSupportProps<{
+    /** Отображаемая квота */
+    quota: QuotaItem;
+    /** Состояние «не удалось загрузить данные» (Figma: noData=true) */
+    noData?: boolean;
+    /** Состояние загрузки (Figma: loading=true) */
+    loading?: boolean;
+    /** Колбек кнопки «Обновить» в состоянии noData */
+    onRefresh?: () => void;
+}>;
+export declare function QuotaWidgetCard({ quota, noData, loading, onRefresh, ...props }: QuotaWidgetCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/QuotaWidgetCard/QuotaWidgetCard.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuotaWidgetCard = QuotaWidgetCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@cloud-ru/ds-button");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const info_block_1 = require("@cloud-ru/ds-info-block");
+const progress_bar_1 = require("@cloud-ru/ds-progress-bar");
+const skeleton_1 = require("@cloud-ru/ds-skeleton");
+const tooltip_1 = require("@cloud-ru/ds-tooltip");
+const truncate_string_1 = require("@cloud-ru/ds-truncate-string");
+const typography_1 = require("@cloud-ru/ds-typography");
+const locale_1 = require("../../locale");
+const utils_1 = require("../../utils");
+const QuotaTooltip_1 = require("./components/QuotaTooltip");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const QUOTA_USAGE_PROGRESS = {
+    HIGH: 90,
+    MEDIUM: 70,
+};
+function getProgressAppearance(percent) {
+    if (percent >= QUOTA_USAGE_PROGRESS.HIGH) {
+        return 'red';
+    }
+    if (percent >= QUOTA_USAGE_PROGRESS.MEDIUM) {
+        return 'yellow';
+    }
+    return 'green';
+}
+function QuotaWidgetCard({ quota, noData = false, loading = false, onRefresh, ...props }) {
+    const { t } = locale_1.quotaLocale.useTranslations();
+    if (noData) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.card, "data-no-data": true, ...props, children: (0, jsx_runtime_1.jsx)(info_block_1.InfoBlock, { size: 's', align: 'vertical', title: quota.name, content: t('errorText'), footer: onRefresh ? ((0, jsx_runtime_1.jsx)(button_1.Button, { view: 'simple', appearance: 'neutral', size: 's', label: t('errorButton'), icon: (0, jsx_runtime_1.jsx)(system_1.UpdateSVG, { size: 16 }), iconPosition: 'after', onClick: onRefresh })) : undefined }) }));
+    }
+    if (loading) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.card, "data-loading": true, ...props, children: [(0, jsx_runtime_1.jsx)(skeleton_1.SkeletonText, { loading: true, lines: 1, variant: 'body', size: 'm' }), (0, jsx_runtime_1.jsx)(skeleton_1.SkeletonText, { loading: true, lines: 1, variant: 'body', size: 'm' }), (0, jsx_runtime_1.jsx)(skeleton_1.SkeletonText, { loading: true, lines: 1, variant: 'body', size: 'l' })] }));
+    }
+    const percent = (0, utils_1.getPercent)(quota);
+    const rows = [
+        {
+            label: t('cardAvailable'),
+            value: quota.limit,
+        },
+        {
+            label: t('cardRemaining'),
+            value: quota.remains,
+        },
+    ];
+    return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { triggerClassName: styles_module_scss_1.default.tooltip, hoverDelayOpen: 500, tip: (0, jsx_runtime_1.jsx)(QuotaTooltip_1.QuotaTooltip, { quota: quota }), children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.card, "data-exhausted": (0, utils_1.checkIsExceeded)(quota), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: 'body', size: 'm', className: styles_module_scss_1.default.title, children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { maxLines: 2, text: quota.name }) }), (0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.percent, children: [Math.round(percent), "%"] })] }), (0, jsx_runtime_1.jsx)(progress_bar_1.ProgressBar, { className: styles_module_scss_1.default.progressBar, progress: percent, size: 'xs', appearance: getProgressAppearance(percent) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.info, children: rows.map(row => ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.row, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.label, children: row.label }), (0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.value, children: [(0, utils_1.formatNumber)(row.value), " ", (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.unit, children: quota.unitDisplayName })] })] }, row.label))) })] }) }));
+}

package/dist/cjs/components/QuotaWidgetCard/components/QuotaTooltip/QuotaTooltip.d.ts

@@ -0,0 +1,6 @@
+import { QuotaItem } from '../../../../types';
+type QuotaTooltipProps = {
+    quota: QuotaItem;
+};
+export declare function QuotaTooltip({ quota }: QuotaTooltipProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/QuotaWidgetCard/components/QuotaTooltip/QuotaTooltip.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuotaTooltip = QuotaTooltip;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const divider_1 = require("@cloud-ru/ds-divider");
+const typography_1 = require("@cloud-ru/ds-typography");
+const constants_1 = require("../../../../constants");
+const locale_1 = require("../../../../locale");
+const utils_1 = require("../../../../utils");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function QuotaTooltip({ quota }) {
+    const { t } = locale_1.quotaLocale.useTranslations();
+    const rows = [
+        { label: t('tooltipAvailable'), value: quota.limit },
+        { label: t('tooltipUsed'), value: quota.usage },
+        { label: t('tooltipRemaining'), value: quota.remains },
+    ];
+    const exhaustedHint = `${t('tooltipExhaustedHint.first')} ${t('tooltipExhaustedHint.second')}`;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, "data-test-id": constants_1.TEST_IDS.quotaWidgetCard.tooltip, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.lists, children: rows.map(row => ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.row, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.rowLabel, children: row.label }), (0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.rowValue, children: [(0, utils_1.formatNumber)(row.value), " ", quota.unitDisplayName] })] }, row.label))) }), (0, utils_1.checkIsExceeded)(quota) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { appearance: divider_1.APPEARANCE.InvertNeutral }), (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: 'body', size: 'm', children: exhaustedHint })] }))] }));
+}

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

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

package/dist/cjs/components/QuotaWidgetCard/components/QuotaTooltip/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("./QuotaTooltip"), exports);

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

@@ -0,0 +1,34 @@
+.content{
+  display:flex;
+  flex-direction:column;
+  row-gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:stretch;
+}
+
+.lists{
+  display:flex;
+  flex-direction:column;
+  row-gap:var(--sn-primitive-dimension-4, 4px);
+}
+
+.row{
+  display:flex;
+  -moz-column-gap:var(--sn-primitive-dimension-8, 8px);
+       column-gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  justify-content:space-between;
+}
+
+.rowLabel,
+.rowValue{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+
+.rowValue{
+  text-align:right;
+}

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

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

package/dist/cjs/components/QuotaWidgetCard/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("./QuotaWidgetCard"), exports);

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

@@ -0,0 +1,97 @@
+@charset "UTF-8";
+.tooltip{
+  display:flex;
+  width:100%;
+  max-width:100%;
+}
+.card{
+  display:flex;
+  flex:1 1 auto;
+  flex-direction:column;
+  row-gap:var(--sn-primitive-dimension-4, 4px);
+  box-sizing:border-box;
+  min-width:min(256px, 100%);
+  max-width:100%;
+  padding:var(--sn-primitive-dimension-8, 8px);
+  border-radius:var(--sn-card-anatomy-radius-s-container-borderRadius, var(--sn-brand-anatomy-radius-card-s, var(--sn-primitive-dimension-2, 2px)));
+  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.card[data-exhausted=true]{
+  background-color:var(--sn-theme-color-red-background, var(--sn-primitive-color-red-90, #fee8e5));
+}
+.header{
+  display:flex;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:flex-end;
+  justify-content:space-between;
+  width:100%;
+}
+
+.title{
+  flex:1 1 0;
+  min-width:0;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+
+.percent{
+  font-family:var(--sn-thin-label-m-fontFamily, var(--sn-brand-font-fontFamily-thin-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-thin-label-m-fontWeight, var(--sn-theme-typography-fontWeight-thin-label-m, var(--sn-brand-font-fontWeight-light-thin-label-m, var(--sn-primitive-font-fontWeightValue-450, 450))));
+  line-height:var(--sn-thin-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-thin-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-thin-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-thin-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+  flex-shrink:0;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+
+.progressBar{
+  width:100%;
+}
+
+.info{
+  display:flex;
+  flex-direction:column;
+  row-gap:var(--sn-primitive-dimension-2, 2px);
+  width:100%;
+}
+
+.row{
+  display:flex;
+  -moz-column-gap:var(--sn-primitive-dimension-8, 8px);
+       column-gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  justify-content:space-between;
+  width:100%;
+}
+
+.label{
+  font-family:var(--sn-thin-label-s-fontFamily, var(--sn-brand-font-fontFamily-thin-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-thin-label-s-fontWeight, var(--sn-theme-typography-fontWeight-thin-label-s, var(--sn-brand-font-fontWeight-light-thin-label-s, var(--sn-primitive-font-fontWeightValue-450, 450))));
+  line-height:var(--sn-thin-label-s-lineHeight, var(--sn-density-typography-roleLabel-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-thin-label-s-fontSize, var(--sn-density-typography-roleLabel-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-thin-label-s-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-thin-label-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize11, 5px));
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+
+.value{
+  font-family:var(--sn-thin-label-l-fontFamily, var(--sn-brand-font-fontFamily-thin-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-thin-label-l-fontWeight, var(--sn-theme-typography-fontWeight-thin-label-l, var(--sn-brand-font-fontWeight-light-thin-label-l, var(--sn-primitive-font-fontWeightValue-450, 450))));
+  line-height:var(--sn-thin-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-thin-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-thin-label-l-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-thin-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  white-space:nowrap;
+}
+
+.unit{
+  font-family:var(--sn-thin-label-l-fontFamily, var(--sn-brand-font-fontFamily-thin-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-thin-label-l-fontWeight, var(--sn-theme-typography-fontWeight-thin-label-l, var(--sn-brand-font-fontWeight-light-thin-label-l, var(--sn-primitive-font-fontWeightValue-450, 450))));
+  line-height:var(--sn-thin-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-thin-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-thin-label-l-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-thin-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}

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

@@ -0,0 +1,7 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { QuotaWidgetPropsBase } from '../../types';
+export type QuotaWidgetMiniProps = WithSupportProps<QuotaWidgetPropsBase & {
+    /** Флаг раскрытия аккордиона по умолчанию */
+    defaultExpanded?: boolean;
+}>;
+export declare function QuotaWidgetMini({ quotas, disableSorting, loading, error, onRefresh, projectName, canEditQuota, defaultExpanded, hideIncreaseQuotaButton, onIncreaseQuotaClick, onWidgetOpen, 'data-test-id': dataTestId, ...props }: QuotaWidgetMiniProps): import("react/jsx-runtime").JSX.Element;