@cloud-ru/uikit-product-quota 2.0.13 → 2.0.14-preview-9cd6156d.0

package/dist/cjs/components/QuotaButtonDropdown/QuotaDropdown.d.ts

@@ -21,4 +21,7 @@ export type QuotaDropdownProps = WithSupportProps<{
     /** CSS класс */
     className?: string;
 }>;
+/**
+ * @deprecated use QuotaWidget instead
+ */
 export declare function QuotaDropdown({ placement, layoutType, className, size, ...props }: QuotaDropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/QuotaButtonDropdown/QuotaDropdown.js

@@ -18,6 +18,9 @@ const uikit_product_button_predefined_1 = require("@cloud-ru/uikit-product-butto
 const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
 const utils_1 = require("../../utils");
 const components_1 = require("./components");
+/**
+ * @deprecated use QuotaWidget instead
+ */
 function QuotaDropdown(_a) {
     var { placement = 'bottom-end', layoutType = 'desktop', className, size } = _a, props = __rest(_a, ["placement", "layoutType", "className", "size"]);
     const [open, setOpen] = (0, react_1.useState)(false);

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

@@ -18,5 +18,8 @@ export type QuotaCardProps = QuotaCardCommonProps & ({
     customUnit: string;
     customLabel: string;
 });
+/**
+ * @deprecated use QuotaWidgetCard instead
+ */
 export declare function QuotaCard({ loading, title, limit, created, increaseLink, onRetry, unlimited, type, customUnit, customLabel, ...rest }: QuotaCardProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/components/QuotaCard/QuotaCard.js

@@ -25,6 +25,9 @@ const truncate_string_1 = require("@snack-uikit/truncate-string");
 const utils_1 = require("../../utils");
 const components_1 = require("./components");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/**
+ * @deprecated use QuotaWidgetCard instead
+ */
 function QuotaCard(_a) {
     var { loading, title, limit, created, increaseLink, onRetry, unlimited = false, type = 'instances', customUnit, customLabel } = _a, rest = __rest(_a, ["loading", "title", "limit", "created", "increaseLink", "onRetry", "unlimited", "type", "customUnit", "customLabel"]);
     const available = (limit !== null && limit !== void 0 ? limit : 0) - (created !== null && created !== void 0 ? created : 0);

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

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

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

@@ -0,0 +1,39 @@
+"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 uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
+const progress_bar_1 = require("@snack-uikit/progress-bar");
+const tooltip_1 = require("@snack-uikit/tooltip");
+const truncate_string_1 = require("@snack-uikit/truncate-string");
+const typography_1 = require("@snack-uikit/typography");
+const getPercent_1 = require("../../utils/getPercent");
+const QuotaTooltip_1 = require("./components/QuotaTooltip");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function getProgressAppearance(percent) {
+    if (percent >= 90) {
+        return 'red';
+    }
+    else if (percent >= 70) {
+        return 'orange';
+    }
+    return 'green';
+}
+function QuotaWidgetCard({ quota }) {
+    const { t } = (0, uikit_product_locale_1.useLocale)('Quota');
+    const percent = (0, getPercent_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, { 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": quota.remains === 0, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyM, { 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)(typography_1.Typography.SansLabelM, { className: styles_module_scss_1.default.percent, children: [Math.floor(percent), "%"] })] }), (0, jsx_runtime_1.jsx)(progress_bar_1.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)(typography_1.Typography.SansLabelM, { className: styles_module_scss_1.default.label, children: row.label }), (0, jsx_runtime_1.jsxs)(typography_1.Typography.SansLabelL, { className: styles_module_scss_1.default.value, children: [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,19 @@
+"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 uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
+const typography_1 = require("@snack-uikit/typography");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function QuotaTooltip({ quota }) {
+    const { t } = (0, uikit_product_locale_1.useLocale)('Quota');
+    const rows = [
+        { label: t('tooltipAvailable'), value: quota.limit },
+        { label: t('tooltipUsed'), value: quota.usage },
+        { label: t('tooltipRemaining'), value: quota.remains },
+    ];
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [rows.map(row => ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.row, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, { children: row.label }), (0, jsx_runtime_1.jsxs)(typography_1.Typography.SansBodyS, { children: [row.value, " ", quota.unitDisplayName] })] }, row.label))), quota.remains === 0 && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.exhausted, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, { tag: 'div', children: t('tooltipExhaustedHint.first') }), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, { tag: 'div', children: t('tooltipExhaustedHint.second') })] }))] }));
+}

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,19 @@
+.content{
+  display:flex;
+  flex-direction:column;
+  gap:4px;
+  width:216px;
+}
+
+.row{
+  display:flex;
+  justify-content:space-between;
+  -moz-column-gap:8px;
+       column-gap:8px;
+}
+
+.exhausted{
+  margin-top:8px;
+  padding-top:8px;
+  border-top:1px solid var(--sys-neutral-decor-default, #dde0ea);
+}

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,60 @@
+.card{
+  display:flex;
+  flex-direction:column;
+  row-gap:4px;
+  padding:8px;
+  background-color:var(--sys-neutral-background-opacity, rgba(238, 239, 243, 0.5019607843));
+  border-radius:4px;
+  height:100%;
+}
+.card[data-exhausted=true]{
+  background-color:var(--sys-red-background, #fdf1ef);
+}
+
+.header{
+  display:flex;
+  align-items:flex-end;
+  justify-content:space-between;
+  -moz-column-gap:4px;
+       column-gap:4px;
+  flex:1;
+}
+
+.title{
+  color:var(--sys-neutral-text-main, #41424e);
+  align-self:flex-start;
+}
+
+.percent[data-family=sans][data-purpose=label][data-size=m]{
+  font-weight:400;
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}
+
+.info{
+  display:flex;
+  flex-direction:column;
+  row-gap:2px;
+}
+
+.row{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  -moz-column-gap:8px;
+       column-gap:8px;
+}
+
+.label[data-family=sans][data-purpose=label][data-size=m]{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  font-weight:400;
+}
+
+.value[data-family=sans][data-purpose=label][data-size=l]{
+  color:var(--sys-neutral-text-main, #41424e);
+  white-space:nowrap;
+  font-weight:400;
+}
+
+.unit{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}

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

@@ -0,0 +1,12 @@
+import { QuotaItem } from '../../types';
+export type QuotasWidgetProps = {
+    quotas: QuotaItem[];
+    isLoading: boolean;
+    isError: boolean;
+    onRefresh: () => void;
+    projectName: string;
+    quotasUrl: string;
+    canEditQuota: boolean;
+    onIncreaseQuotaClick?: () => void;
+};
+export declare function QuotasWidget({ quotas, isLoading, isError, onRefresh, projectName, quotasUrl, canEditQuota, onIncreaseQuotaClick, }: QuotasWidgetProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/QuotasWidget/QuotasWidget.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuotasWidget = QuotasWidget;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
+const button_1 = require("@snack-uikit/button");
+const dropdown_1 = require("@snack-uikit/dropdown");
+const icons_1 = require("@snack-uikit/icons");
+const QuotaCardsGrid_1 = require("../../helperComponents/QuotaCardsGrid");
+const ProjectHeader_1 = require("./components/ProjectHeader");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function QuotasWidget({ quotas, isLoading, isError, onRefresh, projectName, quotasUrl, canEditQuota, onIncreaseQuotaClick, }) {
+    const { t } = (0, uikit_product_locale_1.useLocale)('Quota');
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const exhaustedCount = quotas.filter(item => item.remains === 0).length;
+    return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { placement: 'bottom-end', open: isOpen, onOpenChange: setIsOpen, content: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [(0, jsx_runtime_1.jsx)(ProjectHeader_1.ProjectHeader, { projectName: projectName, quotasUrl: quotasUrl, canEditQuota: canEditQuota, isError: isError, onIncreaseQuotaClick: onIncreaseQuotaClick }), (0, jsx_runtime_1.jsx)(QuotaCardsGrid_1.QuotaCardsGrid, { quotas: quotas, isLoading: isLoading, isError: isError, onRefresh: onRefresh })] }), children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { label: t('quotas'), icon: isOpen ? (0, jsx_runtime_1.jsx)(icons_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(icons_1.ChevronDownSVG, {}), counter: exhaustedCount > 0
+                ? {
+                    value: exhaustedCount,
+                    appearance: 'red',
+                }
+                : undefined, size: 's' }) }));
+}

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

@@ -0,0 +1,9 @@
+type ProjectHeaderProps = {
+    projectName: string;
+    quotasUrl: string;
+    canEditQuota: boolean;
+    isError: boolean;
+    onIncreaseQuotaClick?: () => void;
+};
+export declare function ProjectHeader({ projectName, quotasUrl, canEditQuota, isError, onIncreaseQuotaClick, }: ProjectHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,17 @@
+"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 uikit_product_icons_1 = require("@cloud-ru/uikit-product-icons");
+const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
+const uikit_product_title_clickable_1 = require("@cloud-ru/uikit-product-title-clickable");
+const button_1 = require("@snack-uikit/button");
+const typography_1 = require("@snack-uikit/typography");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function ProjectHeader({ projectName, quotasUrl, canEditQuota, isError, onIncreaseQuotaClick, }) {
+    const { t } = (0, uikit_product_locale_1.useLocale)('Quota');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, 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, { title: projectName, href: quotasUrl, target: '_blank', icon: uikit_product_icons_1.CloudFolderSVG }), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, { className: styles_module_scss_1.default.subtitle, children: t('widgetSubtitle') })] }), canEditQuota && !isError && ((0, jsx_runtime_1.jsx)(button_1.ButtonOutline, { appearance: 'neutral', label: t('increaseQuota'), size: 's', onClick: onIncreaseQuotaClick }))] }));
+}

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

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

package/dist/cjs/components/QuotasWidget/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/QuotasWidget/components/ProjectHeader/styles.module.css

@@ -0,0 +1,17 @@
+.header{
+  display:grid;
+  grid-template-columns:minmax(0, 1fr) 128px;
+  align-items:center;
+  justify-content:space-between;
+  -moz-column-gap:12px;
+       column-gap:12px;
+}
+
+.projectWrapper{
+  min-width:0;
+}
+
+.subtitle{
+  display:block;
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}

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

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

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

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

@@ -0,0 +1,9 @@
+.content{
+  width:620px;
+  display:flex;
+  flex-direction:column;
+  gap:16px;
+  padding:12px 16px 0;
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  border-radius:12px;
+}

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

@@ -0,0 +1,12 @@
+import { QuotaItem } from '../../types';
+export type QuotasWidgetMiniProps = {
+    quotas: QuotaItem[];
+    isLoading: boolean;
+    isError: boolean;
+    onRefresh: () => void;
+    projectName: string;
+    canEditQuota: boolean;
+    isExpandedDefault?: boolean;
+    onIncreaseQuotaClick?: () => void;
+};
+export declare function QuotasWidgetMini({ quotas, isLoading, isError, onRefresh, projectName, canEditQuota, isExpandedDefault, onIncreaseQuotaClick, }: QuotasWidgetMiniProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/QuotasWidgetMini/QuotasWidgetMini.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuotasWidgetMini = QuotasWidgetMini;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
+const accordion_1 = require("@snack-uikit/accordion");
+const button_1 = require("@snack-uikit/button");
+const counter_1 = require("@snack-uikit/counter");
+const truncate_string_1 = require("@snack-uikit/truncate-string");
+const typography_1 = require("@snack-uikit/typography");
+const QuotaCardsGrid_1 = require("../../helperComponents/QuotaCardsGrid");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const ACCORDION_ID = 'quotas-widget-accordion';
+function QuotasWidgetMini({ quotas, isLoading, isError, onRefresh, projectName, canEditQuota, isExpandedDefault, onIncreaseQuotaClick, }) {
+    const { t } = (0, uikit_product_locale_1.useLocale)('Quota');
+    const exhaustedCount = quotas.filter(item => item.remains === 0).length;
+    return ((0, jsx_runtime_1.jsx)(accordion_1.AccordionPrimary, { expandedDefault: isExpandedDefault ? ACCORDION_ID : undefined, children: (0, jsx_runtime_1.jsxs)(accordion_1.AccordionPrimary.CollapseBlock, { id: ACCORDION_ID, className: styles_module_scss_1.default.collapse, header: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.title, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansTitleM, { children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { maxLines: 1, text: t('quotas') }) }), exhaustedCount > 0 && (0, jsx_runtime_1.jsx)(counter_1.Counter, { value: exhaustedCount, size: 's', appearance: 'red' })] }), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyM, { className: styles_module_scss_1.default.subtitle, children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { maxLines: 1, text: projectName }) })] }), children: [(0, jsx_runtime_1.jsx)(QuotaCardsGrid_1.QuotaCardsGrid, { isAccordion: true, quotas: quotas, isLoading: isLoading, isError: isError, onRefresh: onRefresh, isMobile: true }), !isError && canEditQuota && ((0, jsx_runtime_1.jsx)(button_1.ButtonOutline, { className: styles_module_scss_1.default.button, fullWidth: true, appearance: 'neutral', label: t('increaseQuota'), size: 's', onClick: onIncreaseQuotaClick }))] }) }));
+}

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

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

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

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

@@ -0,0 +1,19 @@
+.collapse{
+  padding:16px 24px;
+}
+
+.title{
+  display:flex;
+  align-items:center;
+  -moz-column-gap:4px;
+       column-gap:4px;
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.subtitle{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+
+.button{
+  margin-top:12px;
+}

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

@@ -0,0 +1,13 @@
+import { QuotaItem } from '../../types';
+export type QuotasWidgetMobileProps = {
+    quotas: QuotaItem[];
+    isLoading: boolean;
+    isError: boolean;
+    onRefresh: () => void;
+    projectName: string;
+    canEditQuota: boolean;
+    isOpen: boolean;
+    onClose: () => void;
+    onIncreaseQuotaClick?: () => void;
+};
+export declare function QuotasWidgetMobile({ quotas, isLoading, isError, onRefresh, projectName, canEditQuota, isOpen, onClose, onIncreaseQuotaClick, }: QuotasWidgetMobileProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/QuotasWidgetMobile/QuotasWidgetMobile.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuotasWidgetMobile = QuotasWidgetMobile;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
+const uikit_product_mobile_modal_1 = require("@cloud-ru/uikit-product-mobile-modal");
+const QuotaCardsGrid_1 = require("../../helperComponents/QuotaCardsGrid");
+function QuotasWidgetMobile({ quotas, isLoading, isError, onRefresh, projectName, canEditQuota, isOpen, onClose, onIncreaseQuotaClick, }) {
+    const { t } = (0, uikit_product_locale_1.useLocale)('Quota');
+    return (
+    // @ts-expect-error no approve button needed
+    (0, jsx_runtime_1.jsx)(uikit_product_mobile_modal_1.MobileModal, { closeButtonEnabled: true, open: isOpen, onClose: onClose, title: t('quotas'), subtitle: projectName, cancelButton: isError || !canEditQuota
+            ? undefined
+            : {
+                appearance: 'neutral',
+                label: t('increaseQuota'),
+                onClick: onIncreaseQuotaClick,
+            }, content: (0, jsx_runtime_1.jsx)(QuotaCardsGrid_1.QuotaCardsGrid, { quotas: quotas, isLoading: isLoading, isError: isError, onRefresh: onRefresh, isMobile: true }) }));
+}

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

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

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

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

@@ -1,2 +1,5 @@
 export * from './QuotaCard';
 export * from './QuotaButtonDropdown';
+export * from './QuotasWidget';
+export * from './QuotasWidgetMini';
+export * from './QuotasWidgetMobile';

package/dist/cjs/components/index.js

@@ -16,3 +16,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./QuotaCard"), exports);
 __exportStar(require("./QuotaButtonDropdown"), exports);
+__exportStar(require("./QuotasWidget"), exports);
+__exportStar(require("./QuotasWidgetMini"), exports);
+__exportStar(require("./QuotasWidgetMobile"), exports);

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

@@ -0,0 +1,11 @@
+import { QuotaItem } from '../../types';
+type QuotaCardsGridProps = {
+    quotas: QuotaItem[];
+    isAccordion?: boolean;
+    isLoading: boolean;
+    isError: boolean;
+    onRefresh: () => void;
+    isMobile?: boolean;
+};
+export declare function QuotaCardsGrid({ quotas, isAccordion, isLoading, isError, onRefresh, isMobile, }: QuotaCardsGridProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/helperComponents/QuotaCardsGrid/QuotaCardsGrid.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuotaCardsGrid = QuotaCardsGrid;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const scroll_1 = require("@snack-uikit/scroll");
+const Grid_1 = require("./components/Grid");
+const QuotaError_1 = require("./components/QuotaError");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function QuotaCardsGrid({ quotas, isAccordion = false, isLoading, isError, onRefresh, isMobile = false, }) {
+    const wrapperAttributes = {
+        className: styles_module_scss_1.default.wrapper,
+        'data-accordion': isAccordion,
+    };
+    if (isError) {
+        return isMobile ? ((0, jsx_runtime_1.jsx)(QuotaError_1.QuotaError, { onRefresh: onRefresh })) : ((0, jsx_runtime_1.jsx)("div", Object.assign({}, wrapperAttributes, { children: (0, jsx_runtime_1.jsx)(QuotaError_1.QuotaError, { onRefresh: onRefresh }) })));
+    }
+    return isMobile ? ((0, jsx_runtime_1.jsx)(Grid_1.Grid, { quotas: quotas, isLoading: isLoading, isAccordion: isAccordion, isMobile: isMobile })) : ((0, jsx_runtime_1.jsx)(scroll_1.Scroll, Object.assign({}, wrapperAttributes, { size: 's', children: (0, jsx_runtime_1.jsx)(Grid_1.Grid, { quotas: quotas, isLoading: isLoading, isAccordion: isAccordion, isMobile: isMobile }) })));
+}

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

@@ -0,0 +1,9 @@
+import { QuotaItem } from '../../../../types';
+type GridProps = {
+    quotas: QuotaItem[];
+    isLoading: boolean;
+    isAccordion: boolean;
+    isMobile: boolean;
+};
+export declare function Grid({ quotas, isLoading, isAccordion, isMobile }: GridProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Grid = Grid;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const QuotaWidgetCard_1 = require("../../../../components/QuotaWidgetCard");
+const getPercent_1 = require("../../../../utils/getPercent");
+const QuotaWidgetCardsSkeleton_1 = require("./components/QuotaWidgetCardsSkeleton");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function sortQuotas(quotas) {
+    return [...quotas].sort((first, second) => {
+        const percentFirst = (0, getPercent_1.getPercent)(first);
+        const percentSecond = (0, getPercent_1.getPercent)(second);
+        if (percentSecond !== percentFirst) {
+            return percentSecond - percentFirst;
+        }
+        return first.name.localeCompare(second.name);
+    });
+}
+function Grid({ quotas, isLoading, isAccordion, isMobile }) {
+    const sortedQuotas = sortQuotas(quotas);
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.grid, "data-single": (quotas.length <= 1 && !isLoading) || isMobile || isAccordion, children: (0, jsx_runtime_1.jsx)(QuotaWidgetCardsSkeleton_1.QuotaWidgetCardsSkeleton, { isLoading: isLoading, children: sortedQuotas.map((quota, index) => ((0, jsx_runtime_1.jsx)(QuotaWidgetCard_1.QuotaWidgetCard, { quota: quota }, index))) }) }));
+}

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

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+type QuotaWidgetCardsSkeletonProps = PropsWithChildren<{
+    isLoading: boolean;
+}>;
+export declare function QuotaWidgetCardsSkeleton({ isLoading, 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 {};