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

package/dist/cjs/style.css

@@ -0,0 +1,260 @@
+.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)));
+}
+@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)));
+}
+.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;
+}
+@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)));
+}
+.collapse{
+  width:304px;
+}
+
+.body{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-16, 16px);
+  align-items:flex-start;
+  width:100%;
+}
+
+.button{
+  width:100%;
+}
+.card{
+  display:flex;
+  flex:1;
+  flex-direction:column;
+  row-gap:var(--sn-primitive-dimension-4, 4px);
+  min-width:0;
+  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)));
+}
+.grid{
+  display:grid;
+  grid-template-columns:repeat(2, minmax(0, 1fr));
+  gap:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-4, 4px);
+  width:100%;
+}
+.grid[data-single=true]{
+  grid-template-columns:minmax(0, 1fr);
+}
+@charset "UTF-8";
+.wrapper{
+  width:100%;
+  height:auto;
+  max-height:382px;
+}
+.wrapper[data-accordion=true]{
+  max-height:400px;
+}
+.wrapper{
+}
+.wrapper[data-mobile=true]{
+  flex:1 1 auto;
+  min-height:0;
+  max-height:none;
+}

package/dist/cjs/types.d.ts

@@ -0,0 +1,34 @@
+export type QuotaItem = {
+    /** Название квоты */
+    name: string;
+    /** Лимит квоты */
+    limit: number;
+    /** Потребление квоты */
+    usage: number;
+    /** Остаток квоты */
+    remains: number;
+    /** Единица измерения квоты */
+    unitDisplayName: string;
+};
+export type QuotaWidgetPropsBase = {
+    /** Список квот для отображения */
+    quotas: QuotaItem[];
+    /** Флаг отключения сортировки квот */
+    disableSorting?: boolean;
+    /** Флаг загрузки квот */
+    loading: boolean;
+    /** Флаг ошибки при загрузке квот */
+    error: boolean;
+    /** Колбек на обновление списка квот при ошибке */
+    onRefresh: () => void;
+    /** Название проекта, по которому отображаются квоты */
+    projectName: string;
+    /** Флаг наличия прав на редактирование квот */
+    canEditQuota: boolean;
+    /** Флаг скрытия кнопки увеличения квоты */
+    hideIncreaseQuotaButton?: boolean;
+    /** Колбек нажатия на кнопку увеличения квот */
+    onIncreaseQuotaClick?: () => void;
+    /** Колбек открытия виджета квот */
+    onWidgetOpen?: () => void;
+};

package/dist/cjs/types.js

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

package/dist/cjs/utils/checkIsExceeded.d.ts

@@ -0,0 +1,2 @@
+import { QuotaItem } from '../types';
+export declare const checkIsExceeded: (quota: QuotaItem) => boolean;

package/dist/cjs/utils/checkIsExceeded.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkIsExceeded = void 0;
+const checkIsExceeded = (quota) => quota.remains <= 0;
+exports.checkIsExceeded = checkIsExceeded;

package/dist/cjs/utils/formatNumber.d.ts

@@ -0,0 +1 @@
+export declare function formatNumber(value: number): string;

package/dist/cjs/utils/formatNumber.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatNumber = formatNumber;
+function formatNumber(value) {
+    return value.toLocaleString(undefined, { maximumFractionDigits: 2 });
+}

package/dist/cjs/utils/getPercent.d.ts

@@ -0,0 +1,2 @@
+import { QuotaItem } from '../types';
+export declare function getPercent(quota: QuotaItem): number;

package/dist/cjs/utils/getPercent.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPercent = getPercent;
+function getPercent(quota) {
+    if (quota.limit === 0) {
+        return 100;
+    }
+    return (quota.usage / quota.limit) * 100;
+}

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

@@ -0,0 +1,3 @@
+export * from './checkIsExceeded';
+export * from './formatNumber';
+export * from './getPercent';

package/dist/cjs/utils/index.js

@@ -0,0 +1,19 @@
+"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("./checkIsExceeded"), exports);
+__exportStar(require("./formatNumber"), exports);
+__exportStar(require("./getPercent"), exports);

package/dist/esm/components/QuotaWidget/QuotaIncreaseButton.d.ts

@@ -0,0 +1,4 @@
+/** Кнопка «Увеличить квоту» (outline, на всю ширину) — низ мобильного листа / footer-слот BottomSheet. */
+export declare function QuotaIncreaseButton({ onClick }: {
+    onClick?: () => void;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@cloud-ru/ds-button';
+import { quotaLocale } from '../../locale/index.js';
+import styles from './styles.module.css';
+/** Кнопка «Увеличить квоту» (outline, на всю ширину) — низ мобильного листа / footer-слот BottomSheet. */
+export function QuotaIncreaseButton({ onClick }) {
+    const { t } = quotaLocale.useTranslations();
+    return (_jsx(Button, { className: styles.increaseButton, view: 'outline', appearance: 'neutral', label: t('increaseQuota'), size: 'm', fullWidth: true, onClick: onClick }));
+}

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

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

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TruncateString } from '@cloud-ru/ds-truncate-string';
+import { quotaLocale } from '../../locale/index.js';
+import styles from './styles.module.css';
+/** Мобильная шапка квота-виджета (макет): заголовок «Квоты» + имя проекта, слева, без пиктограмм. */
+export function QuotaMobileHeader({ projectName }) {
+    const { t } = quotaLocale.useTranslations();
+    return (_jsxs("div", { className: styles.mobileHeader, children: [_jsx("h2", { className: styles.mobileTitle, children: t('quotas') }), _jsx("div", { className: styles.mobileSubtitle, children: _jsx(TruncateString, { maxLines: 1, text: projectName }) })] }));
+}

package/dist/esm/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.js';
+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/esm/components/QuotaWidget/QuotaWidget.js

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

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

@@ -0,0 +1,27 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { QuotaWidgetPropsBase } from '../../types.js';
+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/esm/components/QuotaWidget/QuotaWidgetContent.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+import { TEST_IDS } from '../../constants.js';
+import { QuotaCardsGrid } from '../../helperComponents/QuotaCardsGrid/index.js';
+import { ProjectHeader } from './components/ProjectHeader/index.js';
+import { QuotaIncreaseButton } from './QuotaIncreaseButton.js';
+import { QuotaMobileHeader } from './QuotaMobileHeader.js';
+import styles from './styles.module.css';
+/**
+ * Голый контент квота-виджета: шапка проекта + карточки + кнопка расширения — без триггера,
+ * дропдауна и аккордеона. Используется внутри `QuotaWidget` (в дропдауне/BottomSheet) и напрямую,
+ * когда контейнер-раскрытие даёт кто-то снаружи (напр. `sideBlock` формы уже открывает BottomSheet).
+ *
+ * На full-height BottomSheet шапка/кнопка уезжают в pinned-слоты `title`/`footer` (см. `QuotaWidget`),
+ * а сюда остаются только карточки — тогда `hideMobileHeader`/`hideMobileIncreaseButton` = true.
+ */
+export function QuotaWidgetContent({ quotas, disableSorting, loading, error, onRefresh, projectName, quotasUrl, canEditQuota, hideIncreaseQuotaButton, onIncreaseQuotaClick, onQuotasUrlClick, hideMobileHeader = false, hideMobileIncreaseButton = false, ...props }) {
+    const { layoutType } = useAdaptiveLayout();
+    const isMobile = isMobileLayout(layoutType);
+    const contentTestId = props['data-test-id'] ?? TEST_IDS.quotaWidget.content;
+    const showMobileIncreaseButton = isMobile && !hideMobileIncreaseButton && canEditQuota && !error && !hideIncreaseQuotaButton;
+    return (_jsxs("div", { className: styles.content, "data-mobile": isMobile, "data-test-id": contentTestId, children: [isMobile ? (
+            // Мобильная шапка (макет): «Квоты» + имя проекта, без пиктограммы/ссылки/подзаголовка «Остаток…».
+            !hideMobileHeader && _jsx(QuotaMobileHeader, { projectName: projectName })) : (
+            // Desktop-popover: полная шапка проекта (с пиктограммой, ссылкой и кнопкой расширения).
+            _jsx(ProjectHeader, { projectName: projectName, quotasUrl: quotasUrl, canEditQuota: canEditQuota, error: error, onIncreaseQuotaClick: onIncreaseQuotaClick, hideIncreaseQuotaButton: hideIncreaseQuotaButton, onQuotasUrlClick: onQuotasUrlClick })), _jsx(QuotaCardsGrid, { quotas: quotas, disableSorting: disableSorting, loading: loading, error: error, onRefresh: onRefresh }), showMobileIncreaseButton && _jsx(QuotaIncreaseButton, { onClick: onIncreaseQuotaClick })] }));
+}

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

@@ -0,0 +1,7 @@
+import { QuotaWidgetPropsBase } from '../../../../types.js';
+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/esm/components/QuotaWidget/components/ProjectHeader/ProjectHeader.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@cloud-ru/ds-button';
+import { QuotaSVG } from '@cloud-ru/ds-icons/interface/product';
+import { TitleClickable } from '@cloud-ru/ds-uikit-product-title-clickable';
+import { TEST_IDS } from '../../../../constants.js';
+import { quotaLocale } from '../../../../locale/index.js';
+import styles from './styles.module.css';
+const RUSSIAN_CHARS_REGEXP = /[А-Яа-яЁё]/;
+export function ProjectHeader({ projectName, quotasUrl, canEditQuota, error, onIncreaseQuotaClick, hideIncreaseQuotaButton, onQuotasUrlClick, }) {
+    const { t } = quotaLocale.useTranslations();
+    const widgetTitle = RUSSIAN_CHARS_REGEXP.test(projectName) ? 'widgetTitle.quotes' : 'widgetTitle.noQuotes';
+    return (_jsxs("div", { className: styles.header, "data-test-id": TEST_IDS.quotaWidget.projectHeader, children: [_jsxs("div", { className: styles.projectWrapper, children: [_jsx(TitleClickable, { className: styles.titleLink, title: t(widgetTitle, { project: projectName }), href: quotasUrl, target: '_blank', icon: _jsx(QuotaSVG, {}), onClick: onQuotasUrlClick }), _jsx("p", { className: styles.subtitle, children: t('widgetSubtitle') })] }), canEditQuota && !error && !hideIncreaseQuotaButton && (_jsx(Button, { view: 'outline', appearance: 'neutral', label: t('increaseQuota'), size: 'm', onClick: onIncreaseQuotaClick }))] }));
+}

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

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

package/dist/esm/components/QuotaWidget/components/ProjectHeader/index.js

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

package/dist/esm/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/esm/components/QuotaWidget/index.d.ts

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

package/dist/esm/components/QuotaWidget/index.js

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

package/dist/esm/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)));
+}