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

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

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@cloud-ru/ds-button';
+import { UpdateSVG } from '@cloud-ru/ds-icons/interface/system';
+import { InfoBlock } from '@cloud-ru/ds-info-block';
+import { ProgressBar } from '@cloud-ru/ds-progress-bar';
+import { SkeletonText } from '@cloud-ru/ds-skeleton';
+import { Tooltip } from '@cloud-ru/ds-tooltip';
+import { TruncateString } from '@cloud-ru/ds-truncate-string';
+import { Typography } from '@cloud-ru/ds-typography';
+import { quotaLocale } from '../../locale/index.js';
+import { checkIsExceeded, formatNumber, getPercent } from '../../utils/index.js';
+import { QuotaTooltip } from './components/QuotaTooltip/index.js';
+import styles from './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';
+}
+export function QuotaWidgetCard({ quota, noData = false, loading = false, onRefresh, ...props }) {
+    const { t } = quotaLocale.useTranslations();
+    if (noData) {
+        return (_jsx("div", { className: styles.card, "data-no-data": true, ...props, children: _jsx(InfoBlock, { size: 's', align: 'vertical', title: quota.name, content: t('errorText'), footer: onRefresh ? (_jsx(Button, { view: 'simple', appearance: 'neutral', size: 's', label: t('errorButton'), icon: _jsx(UpdateSVG, { size: 16 }), iconPosition: 'after', onClick: onRefresh })) : undefined }) }));
+    }
+    if (loading) {
+        return (_jsxs("div", { className: styles.card, "data-loading": true, ...props, children: [_jsx(SkeletonText, { loading: true, lines: 1, variant: 'body', size: 'm' }), _jsx(SkeletonText, { loading: true, lines: 1, variant: 'body', size: 'm' }), _jsx(SkeletonText, { loading: true, lines: 1, variant: 'body', size: 'l' })] }));
+    }
+    const percent = getPercent(quota);
+    const rows = [
+        {
+            label: t('cardAvailable'),
+            value: quota.limit,
+        },
+        {
+            label: t('cardRemaining'),
+            value: quota.remains,
+        },
+    ];
+    return (_jsx(Tooltip, { triggerClassName: styles.tooltip, hoverDelayOpen: 500, tip: _jsx(QuotaTooltip, { quota: quota }), children: _jsxs("div", { className: styles.card, "data-exhausted": checkIsExceeded(quota), ...props, children: [_jsxs("div", { className: styles.header, children: [_jsx(Typography, { variant: 'body', size: 'm', className: styles.title, children: _jsx(TruncateString, { maxLines: 2, text: quota.name }) }), _jsxs("span", { className: styles.percent, children: [Math.round(percent), "%"] })] }), _jsx(ProgressBar, { className: styles.progressBar, progress: percent, size: 'xs', appearance: getProgressAppearance(percent) }), _jsx("div", { className: styles.info, children: rows.map(row => (_jsxs("div", { className: styles.row, children: [_jsx("span", { className: styles.label, children: row.label }), _jsxs("span", { className: styles.value, children: [formatNumber(row.value), " ", _jsx("span", { className: styles.unit, children: quota.unitDisplayName })] })] }, row.label))) })] }) }));
+}

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

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

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { APPEARANCE, Divider } from '@cloud-ru/ds-divider';
+import { Typography } from '@cloud-ru/ds-typography';
+import { TEST_IDS } from '../../../../constants.js';
+import { quotaLocale } from '../../../../locale/index.js';
+import { checkIsExceeded, formatNumber } from '../../../../utils/index.js';
+import styles from './styles.module.css';
+export function QuotaTooltip({ quota }) {
+    const { t } = 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 (_jsxs("div", { className: styles.content, "data-test-id": TEST_IDS.quotaWidgetCard.tooltip, children: [_jsx("div", { className: styles.lists, children: rows.map(row => (_jsxs("div", { className: styles.row, children: [_jsx("span", { className: styles.rowLabel, children: row.label }), _jsxs("span", { className: styles.rowValue, children: [formatNumber(row.value), " ", quota.unitDisplayName] })] }, row.label))) }), checkIsExceeded(quota) && (_jsxs(_Fragment, { children: [_jsx(Divider, { appearance: APPEARANCE.InvertNeutral }), _jsx(Typography, { variant: 'body', size: 'm', children: exhaustedHint })] }))] }));
+}

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

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

package/dist/esm/components/QuotaWidgetCard/components/QuotaTooltip/index.js

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

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

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

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

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

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

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

package/dist/esm/components/QuotaWidgetMini/QuotaWidgetMini.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Accordion } from '@cloud-ru/ds-accordion';
+import { Button } from '@cloud-ru/ds-button';
+import { Counter } from '@cloud-ru/ds-counter';
+import { TruncateString } from '@cloud-ru/ds-truncate-string';
+import { TEST_IDS } from '../../constants.js';
+import { QuotaCardsGrid } from '../../helperComponents/QuotaCardsGrid/index.js';
+import { quotaLocale } from '../../locale/index.js';
+import { checkIsExceeded } from '../../utils/index.js';
+import styles from './styles.module.css';
+const ACCORDION_ID = 'quotas-widget-accordion';
+export function QuotaWidgetMini({ quotas, disableSorting, loading, error, onRefresh, projectName, canEditQuota, defaultExpanded, hideIncreaseQuotaButton, onIncreaseQuotaClick, onWidgetOpen, 'data-test-id': dataTestId, ...props }) {
+    const { t } = quotaLocale.useTranslations();
+    const exhaustedCount = quotas.filter(checkIsExceeded).length;
+    const handleExpandedChange = (expanded) => {
+        if (expanded) {
+            onWidgetOpen?.();
+        }
+    };
+    return (_jsx("div", { "data-test-id": dataTestId ?? TEST_IDS.quotaWidgetMini.root, children: _jsx(Accordion, { ...props, expandedDefault: defaultExpanded ? ACCORDION_ID : undefined, onExpandedChange: handleExpandedChange, children: _jsx(Accordion.CollapseBlockSecondary, { id: ACCORDION_ID, className: styles.collapse, "data-test-id": TEST_IDS.quotaWidgetMini.trigger, title: t('quotas'), afterTitle: !error && !loading && exhaustedCount > 0 ? (_jsx(Counter, { value: exhaustedCount, size: 'xs', appearance: 'red' })) : undefined, subTitle: _jsx(TruncateString, { maxLines: 1, text: projectName }), children: _jsxs("div", { className: styles.body, "data-test-id": TEST_IDS.quotaWidgetMini.content, children: [_jsx(QuotaCardsGrid, { isAccordion: true, quotas: quotas, disableSorting: disableSorting, loading: loading, error: error, onRefresh: onRefresh }), !error && canEditQuota && !hideIncreaseQuotaButton && (_jsx(Button, { className: styles.button, fullWidth: true, view: 'outline', appearance: 'neutral', label: t('increaseQuota'), size: 'm', onClick: onIncreaseQuotaClick }))] }) }) }) }));
+}

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

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

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

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

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

@@ -0,0 +1,15 @@
+.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%;
+}

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

@@ -0,0 +1,3 @@
+export * from './QuotaWidget/index.js';
+export * from './QuotaWidgetMini/index.js';
+export * from './QuotaWidgetCard/index.js';

package/dist/esm/components/index.js

@@ -0,0 +1,3 @@
+export * from './QuotaWidget/index.js';
+export * from './QuotaWidgetMini/index.js';
+export * from './QuotaWidgetCard/index.js';

package/dist/esm/constants.d.ts

@@ -0,0 +1,17 @@
+export declare const TEST_IDS: {
+    readonly quotaWidget: {
+        readonly root: "quota-widget";
+        readonly trigger: "quota-widget__trigger";
+        readonly content: "quota-widget__content";
+        readonly projectHeader: "quota-widget__project-header";
+    };
+    readonly quotaWidgetMini: {
+        readonly root: "quota-widget-mini";
+        readonly trigger: "quota-widget-mini__trigger";
+        readonly content: "quota-widget-mini__content";
+    };
+    readonly quotaWidgetCard: {
+        readonly root: "quota-widget-card";
+        readonly tooltip: "quota-widget-card__tooltip";
+    };
+};

package/dist/esm/constants.js

@@ -0,0 +1,17 @@
+export const TEST_IDS = {
+    quotaWidget: {
+        root: 'quota-widget',
+        trigger: 'quota-widget__trigger',
+        content: 'quota-widget__content',
+        projectHeader: 'quota-widget__project-header',
+    },
+    quotaWidgetMini: {
+        root: 'quota-widget-mini',
+        trigger: 'quota-widget-mini__trigger',
+        content: 'quota-widget-mini__content',
+    },
+    quotaWidgetCard: {
+        root: 'quota-widget-card',
+        tooltip: 'quota-widget-card__tooltip',
+    },
+};

package/dist/esm/helperComponents/QuotaCardsGrid/QuotaCardsGrid.d.ts

@@ -0,0 +1,6 @@
+import { QuotaWidgetPropsBase } from '../../types.js';
+type QuotaCardsGridProps = Pick<QuotaWidgetPropsBase, 'quotas' | 'disableSorting' | 'loading' | 'error' | 'onRefresh'> & {
+    isAccordion?: boolean;
+};
+export declare function QuotaCardsGrid({ quotas, loading, error, onRefresh, disableSorting, isAccordion, }: QuotaCardsGridProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/helperComponents/QuotaCardsGrid/QuotaCardsGrid.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+import { Scroll } from '@cloud-ru/ds-scroll';
+import { Grid } from './components/Grid/index.js';
+import { QuotaError } from './components/QuotaError/index.js';
+import styles from './styles.module.css';
+export function QuotaCardsGrid({ quotas, loading, error, onRefresh, disableSorting = false, isAccordion = false, }) {
+    // На мобилке bottom-sheet-виджет full-height: снимаем фикс-cap высоты (`max-height`), карточки
+    // скроллятся телом листа. Для аккордеона (`QuotaWidgetMini`) это НЕ применяем — у него свой cap.
+    const isMobile = isMobileLayout(useAdaptiveLayout().layoutType);
+    const wrapperAttributes = {
+        className: styles.wrapper,
+        'data-accordion': isAccordion,
+        'data-mobile': isMobile && !isAccordion,
+    };
+    const gridProps = {
+        quotas,
+        loading,
+        disableSorting,
+        isAccordion,
+    };
+    if (error) {
+        return (_jsx("div", { ...wrapperAttributes, children: _jsx(QuotaError, { onRefresh: onRefresh }) }));
+    }
+    return (_jsx(Scroll, { ...wrapperAttributes, size: 's', children: _jsx(Grid, { ...gridProps }) }));
+}

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

@@ -0,0 +1,6 @@
+import { QuotaWidgetPropsBase } from '../../../../types.js';
+type GridProps = Pick<QuotaWidgetPropsBase, 'quotas' | 'loading' | 'disableSorting'> & {
+    isAccordion?: boolean;
+};
+export declare function Grid({ quotas, loading, disableSorting, isAccordion }: GridProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/helperComponents/QuotaCardsGrid/components/Grid/Grid.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+import { QuotaWidgetCard } from '../../../../components/QuotaWidgetCard/index.js';
+import { TEST_IDS } from '../../../../constants.js';
+import { getPercent } from '../../../../utils/getPercent.js';
+import { QuotaWidgetCardsSkeleton } from './components/QuotaWidgetCardsSkeleton/index.js';
+import styles from './styles.module.css';
+function sortQuotas(quotas) {
+    return [...quotas].sort((first, second) => {
+        const percentFirst = getPercent(first);
+        const percentSecond = getPercent(second);
+        if (percentSecond !== percentFirst) {
+            return percentSecond - percentFirst;
+        }
+        return first.name.localeCompare(second.name);
+    });
+}
+export function Grid({ quotas, loading, disableSorting = false, isAccordion = false }) {
+    const sortedQuotas = disableSorting ? quotas : sortQuotas(quotas);
+    // На мобилке — строго одна колонка на всю ширину (BottomSheet-раскладка узкая, 2 колонки не влезают).
+    const { layoutType } = useAdaptiveLayout();
+    const isSingleColumn = (quotas.length <= 1 && !loading) || isAccordion || isMobileLayout(layoutType);
+    return (_jsx("div", { className: styles.grid, "data-single": isSingleColumn, children: _jsx(QuotaWidgetCardsSkeleton, { loading: loading, children: sortedQuotas.map(quota => (_jsx(QuotaWidgetCard, { quota: quota, "data-test-id": `${TEST_IDS.quotaWidgetCard.root}--${quota.name}` }, quota.name))) }) }));
+}

package/dist/esm/helperComponents/QuotaCardsGrid/components/Grid/components/QuotaWidgetCardsSkeleton/QuotaCardsSkeleton.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+type QuotaWidgetCardsSkeletonProps = PropsWithChildren<{
+    loading: boolean;
+}>;
+export declare function QuotaWidgetCardsSkeleton({ loading, children }: QuotaWidgetCardsSkeletonProps): string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element[] | null | undefined;
+export {};

package/dist/esm/helperComponents/QuotaCardsGrid/components/Grid/components/QuotaWidgetCardsSkeleton/QuotaCardsSkeleton.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SkeletonText } from '@cloud-ru/ds-skeleton';
+import styles from './styles.module.css';
+const SKELETON_COUNT = 6;
+export function QuotaWidgetCardsSkeleton({ loading, children }) {
+    if (loading) {
+        return [...Array(SKELETON_COUNT)].map((_, index) => (_jsxs("div", { className: styles.card, children: [_jsx(SkeletonText, { loading: true, lines: 1, variant: 'body', size: 'm' }), _jsx(SkeletonText, { loading: true, lines: 1, variant: 'body', size: 'm' }), _jsx(SkeletonText, { loading: true, lines: 1, variant: 'body', size: 'l' })] }, index)));
+    }
+    return children;
+}

package/dist/esm/helperComponents/QuotaCardsGrid/components/Grid/components/QuotaWidgetCardsSkeleton/index.d.ts

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

package/dist/esm/helperComponents/QuotaCardsGrid/components/Grid/components/QuotaWidgetCardsSkeleton/index.js

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

package/dist/esm/helperComponents/QuotaCardsGrid/components/Grid/components/QuotaWidgetCardsSkeleton/styles.module.css

@@ -0,0 +1,10 @@
+.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)));
+}

package/dist/esm/helperComponents/QuotaCardsGrid/components/Grid/index.d.ts

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

package/dist/esm/helperComponents/QuotaCardsGrid/components/Grid/index.js

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

package/dist/esm/helperComponents/QuotaCardsGrid/components/Grid/styles.module.css

@@ -0,0 +1,9 @@
+.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);
+}

package/dist/esm/helperComponents/QuotaCardsGrid/components/QuotaError/QuotaError.d.ts

@@ -0,0 +1,5 @@
+type QuotaErrorProps = {
+    onRefresh: () => void;
+};
+export declare function QuotaError({ onRefresh }: QuotaErrorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/helperComponents/QuotaCardsGrid/components/QuotaError/QuotaError.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@cloud-ru/ds-button';
+import { CrossSVG, UpdateSVG } from '@cloud-ru/ds-icons/interface/system';
+import { InfoBlock } from '@cloud-ru/ds-info-block';
+import { quotaLocale } from '../../../../locale/index.js';
+export function QuotaError({ onRefresh }) {
+    const { t } = quotaLocale.useTranslations();
+    return (_jsx(InfoBlock, { size: 'm', align: 'vertical', content: t('errorText'), icon: { icon: CrossSVG, appearance: 'neutral', background: true }, footer: _jsx(Button, { appearance: 'neutral', size: 'm', label: t('errorButton'), icon: _jsx(UpdateSVG, { size: 24 }), onClick: onRefresh }) }));
+}

package/dist/esm/helperComponents/QuotaCardsGrid/components/QuotaError/index.d.ts

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

package/dist/esm/helperComponents/QuotaCardsGrid/components/QuotaError/index.js

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

package/dist/esm/helperComponents/QuotaCardsGrid/index.d.ts

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

package/dist/esm/helperComponents/QuotaCardsGrid/index.js

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

package/dist/esm/helperComponents/QuotaCardsGrid/styles.module.css

@@ -0,0 +1,16 @@
+@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/esm/index.d.ts

@@ -0,0 +1,5 @@
+export * from './components/index.js';
+export * from './constants.js';
+export * from './types.js';
+export * from './utils/index.js';
+export * from './locale/index.js';

package/dist/esm/index.js

@@ -0,0 +1,5 @@
+export * from './components/index.js';
+export * from './constants.js';
+export * from './types.js';
+export * from './utils/index.js';
+export * from './locale/index.js';

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

@@ -0,0 +1,91 @@
+declare const QUOTA_MESSAGES: {
+    readonly 'en-GB': {
+        readonly quotas: "Quotas";
+        readonly widgetTitle: {
+            readonly withoutProject: "Project quotas";
+            readonly quotes: "Project quotas «{{project}}»";
+            readonly noQuotes: "Project quotas {{project}}";
+        };
+        readonly widgetSubtitle: "Current quota balance";
+        readonly increaseQuota: "Increase quota";
+        readonly cardAvailable: "Available";
+        readonly cardRemaining: "Remaining";
+        readonly tooltipAvailable: "Available";
+        readonly tooltipUsed: "Used";
+        readonly tooltipRemaining: "Remaining";
+        readonly tooltipExhaustedHint: {
+            readonly first: "Quota exhausted.";
+            readonly second: "To increase the quota, contact the quota or organization administrator.";
+        };
+        readonly errorText: "Failed to load data";
+        readonly errorButton: "Refresh";
+    };
+    readonly 'ru-RU': {
+        readonly quotas: "Квоты";
+        readonly widgetTitle: {
+            readonly withoutProject: "Квоты проекта";
+            readonly quotes: "Квоты проекта «{{project}}»";
+            readonly noQuotes: "Квоты проекта {{project}}";
+        };
+        readonly widgetSubtitle: "Остаток по квотам на текущий момент";
+        readonly increaseQuota: "Увеличить квоту";
+        readonly cardAvailable: "Доступно";
+        readonly cardRemaining: "Остаток";
+        readonly tooltipAvailable: "Доступно";
+        readonly tooltipUsed: "Использовано";
+        readonly tooltipRemaining: "Остаток";
+        readonly tooltipExhaustedHint: {
+            readonly first: "Квота исчерпана.";
+            readonly second: "Чтобы увеличить квоту, обратитесь к администратору квот или организации.";
+        };
+        readonly errorText: "Не удалось загрузить данные";
+        readonly errorButton: "Обновить";
+    };
+};
+export type QuotaMessages = (typeof QUOTA_MESSAGES)['en-GB'];
+/** locale компонента Quota: `quotaLocale.useTranslations()` в коде, `quotaLocale.extend(...)` в сервисе. */
+export declare const quotaLocale: import("@cloud-ru/ds-locale").DefinedLocale<{
+    readonly 'en-GB': {
+        readonly quotas: "Quotas";
+        readonly widgetTitle: {
+            readonly withoutProject: "Project quotas";
+            readonly quotes: "Project quotas «{{project}}»";
+            readonly noQuotes: "Project quotas {{project}}";
+        };
+        readonly widgetSubtitle: "Current quota balance";
+        readonly increaseQuota: "Increase quota";
+        readonly cardAvailable: "Available";
+        readonly cardRemaining: "Remaining";
+        readonly tooltipAvailable: "Available";
+        readonly tooltipUsed: "Used";
+        readonly tooltipRemaining: "Remaining";
+        readonly tooltipExhaustedHint: {
+            readonly first: "Quota exhausted.";
+            readonly second: "To increase the quota, contact the quota or organization administrator.";
+        };
+        readonly errorText: "Failed to load data";
+        readonly errorButton: "Refresh";
+    };
+    readonly 'ru-RU': {
+        readonly quotas: "Квоты";
+        readonly widgetTitle: {
+            readonly withoutProject: "Квоты проекта";
+            readonly quotes: "Квоты проекта «{{project}}»";
+            readonly noQuotes: "Квоты проекта {{project}}";
+        };
+        readonly widgetSubtitle: "Остаток по квотам на текущий момент";
+        readonly increaseQuota: "Увеличить квоту";
+        readonly cardAvailable: "Доступно";
+        readonly cardRemaining: "Остаток";
+        readonly tooltipAvailable: "Доступно";
+        readonly tooltipUsed: "Использовано";
+        readonly tooltipRemaining: "Остаток";
+        readonly tooltipExhaustedHint: {
+            readonly first: "Квота исчерпана.";
+            readonly second: "Чтобы увеличить квоту, обратитесь к администратору квот или организации.";
+        };
+        readonly errorText: "Не удалось загрузить данные";
+        readonly errorButton: "Обновить";
+    };
+}, "@cloud-ru/ds-uikit-product-quota">;
+export {};