@epam/ai-dial-usage-dashboard 1.0.0-rc.7

package/components/ModelLimitsSection/MetricCell.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { ModelLimitMetricCell, ModelLimitsLabels, ModelLimitsTypography } from '../../models/model-limits-props';
+interface MetricCellProps {
+    cell: ModelLimitMetricCell;
+    label: string;
+    progressAriaLabel: string;
+    showProgress: boolean;
+    labels: ModelLimitsLabels;
+    typography: ModelLimitsTypography;
+}
+/** Renders one normalized Cost or Tokens value without owning its table-cell semantics. */
+export declare const MetricCell: FC<MetricCellProps>;
+export {};
+//# sourceMappingURL=MetricCell.d.ts.map

package/components/ModelLimitsSection/MetricCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricCell.d.ts","sourceRoot":"","sources":["../../../src/components/ModelLimitsSection/MetricCell.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EACL,oBAAoB,EAEpB,iBAAiB,EAEjB,qBAAqB,EACtB,MAAM,iCAAiC,CAAC;AAczC,UAAU,eAAe;IACvB,IAAI,EAAE,oBAAoB,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,UAAU,EAAE,qBAAqB,CAAC;CACnC;AAED,2FAA2F;AAC3F,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA2F1C,CAAC"}

package/components/ModelLimitsSection/ModelLimitsRow.d.ts

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import { ModelLimitRow as ModelLimitRowData, ModelLimitPeriodStatuses, ModelLimitsLabels, ModelLimitsTypography } from '../../models/model-limits-props';
+/** Grid template shared by the header row and every data row so columns stay aligned on desktop. */
+export declare const MODEL_LIMITS_GRID_COLUMNS = "desktop:grid-cols-[minmax(12rem,1.25fr)_repeat(3,minmax(0,1fr))_minmax(8rem,10rem)]";
+/** Props for `ModelLimitsRow`. */
+export interface ModelLimitsRowProps {
+    /** The row's normalized data. */
+    row: ModelLimitRowData;
+    /** Localized strings shared by every row. */
+    labels: ModelLimitsLabels;
+    /** Host-derived overall Cost statuses for the fixed periods. */
+    periodStatuses: ModelLimitPeriodStatuses;
+    /** Typography class overrides. */
+    typography: ModelLimitsTypography;
+    /** Avatar badge dimension in pixels. */
+    avatarSize: number;
+}
+/** One data row of `ModelLimitsSection`: identity, three period comparisons, and host-derived Status. */
+export declare const ModelLimitsRow: FC<ModelLimitsRowProps>;
+//# sourceMappingURL=ModelLimitsRow.d.ts.map

package/components/ModelLimitsSection/ModelLimitsRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModelLimitsRow.d.ts","sourceRoot":"","sources":["../../../src/components/ModelLimitsSection/ModelLimitsRow.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EACL,aAAa,IAAI,iBAAiB,EAClC,wBAAwB,EACxB,iBAAiB,EAEjB,qBAAqB,EACtB,MAAM,iCAAiC,CAAC;AAIzC,oGAAoG;AACpG,eAAO,MAAM,yBAAyB,wFACiD,CAAC;AAkCxF,kCAAkC;AAClC,MAAM,WAAW,mBAAmB;IAClC,iCAAiC;IACjC,GAAG,EAAE,iBAAiB,CAAC;IACvB,6CAA6C;IAC7C,MAAM,EAAE,iBAAiB,CAAC;IAC1B,gEAAgE;IAChE,cAAc,EAAE,wBAAwB,CAAC;IACzC,kCAAkC;IAClC,UAAU,EAAE,qBAAqB,CAAC;IAClC,wCAAwC;IACxC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,yGAAyG;AACzG,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAmIlD,CAAC"}

package/components/ModelLimitsSection/ModelLimitsSection.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ModelLimitsSectionProps } from '../../models/model-limits-props';
+/** "Model limits" section: a fixed table comparing Cost and Tokens across three rolling periods. */
+export declare const ModelLimitsSection: FC<ModelLimitsSectionProps>;
+//# sourceMappingURL=ModelLimitsSection.d.ts.map

package/components/ModelLimitsSection/ModelLimitsSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModelLimitsSection.d.ts","sourceRoot":"","sources":["../../../src/components/ModelLimitsSection/ModelLimitsSection.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAEL,uBAAuB,EACxB,MAAM,iCAAiC,CAAC;AA+BzC,oGAAoG;AACpG,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CA4I1D,CAAC"}

package/components/ModelLimitsSection/PeriodCell.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { ModelLimitPeriodCell, ModelLimitPeriodStatus, ModelLimitsLabels, ModelLimitsTypography } from '../../models/model-limits-props';
+interface PeriodCellProps {
+    cell: ModelLimitPeriodCell;
+    periodLabel: string;
+    periodStatus: ModelLimitPeriodStatus;
+    labels: ModelLimitsLabels;
+    typography: ModelLimitsTypography;
+}
+/** One rolling-period table cell containing the period's Tokens progress and attributed Cost. */
+export declare const PeriodCell: FC<PeriodCellProps>;
+export {};
+//# sourceMappingURL=PeriodCell.d.ts.map

package/components/ModelLimitsSection/PeriodCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PeriodCell.d.ts","sourceRoot":"","sources":["../../../src/components/ModelLimitsSection/PeriodCell.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAGL,oBAAoB,EACpB,sBAAsB,EACtB,iBAAiB,EACjB,qBAAqB,EACtB,MAAM,iCAAiC,CAAC;AAKzC,UAAU,eAAe;IACvB,IAAI,EAAE,oBAAoB,CAAC;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,sBAAsB,CAAC;IACrC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,UAAU,EAAE,qBAAqB,CAAC;CACnC;AAmCD,iGAAiG;AACjG,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAgC1C,CAAC"}

package/components/ModelLimitsSection/PeriodStatusIndicator.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { ModelLimitPeriodStatus } from '../../models/model-limits-props';
+interface PeriodStatusIndicatorProps {
+    periodStatus: ModelLimitPeriodStatus;
+}
+/** Focusable overall Cost-limit indicator shared by desktop and mobile period labels. */
+export declare const PeriodStatusIndicator: FC<PeriodStatusIndicatorProps>;
+export {};
+//# sourceMappingURL=PeriodStatusIndicator.d.ts.map

package/components/ModelLimitsSection/PeriodStatusIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PeriodStatusIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/ModelLimitsSection/PeriodStatusIndicator.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EACL,sBAAsB,EAEvB,MAAM,iCAAiC,CAAC;AAGzC,UAAU,0BAA0B;IAClC,YAAY,EAAE,sBAAsB,CAAC;CACtC;AAED,yFAAyF;AACzF,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAkChE,CAAC"}

package/components/UsageLimitCard/UsageLimitCard.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { UsageLimitCardProps } from '../../models/usage-limit-card-props';
+/** One aggregate cost-limit card, rendered as its own independent box: title, always-visible status badge, prominent used amount, progress bar, and remaining/percent captions (or an "unlimited" state with no ratio). */
+export declare const UsageLimitCard: FC<UsageLimitCardProps>;
+//# sourceMappingURL=UsageLimitCard.d.ts.map

package/components/UsageLimitCard/UsageLimitCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UsageLimitCard.d.ts","sourceRoot":"","sources":["../../../src/components/UsageLimitCard/UsageLimitCard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EACL,mBAAmB,EAEpB,MAAM,qCAAqC,CAAC;AAiB7C,2NAA2N;AAC3N,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA2IlD,CAAC"}

package/components/UsageLimitCardGroup/UsageLimitCardGroup.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { UsageLimitCardGroupProps } from '../../models/usage-limit-card-props';
+/** Renders each card as its own independent, equally-sized box: stacked on mobile, side by side on desktop. Renders nothing when `cards` is empty. */
+export declare const UsageLimitCardGroup: FC<UsageLimitCardGroupProps>;
+//# sourceMappingURL=UsageLimitCardGroup.d.ts.map

package/components/UsageLimitCardGroup/UsageLimitCardGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UsageLimitCardGroup.d.ts","sourceRoot":"","sources":["../../../src/components/UsageLimitCardGroup/UsageLimitCardGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,EAAE,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,wBAAwB,EAAE,MAAM,qCAAqC,CAAC;AAG/E,sJAAsJ;AACtJ,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAwB5D,CAAC"}

package/index.css

@@ -0,0 +1,2 @@
+._card_zvzky_1{background:var(--uld-card-bg,var(--bg-layer-raised,#fcfcfc))}._title_zvzky_5{color:var(--uld-title,var(--text-primary,#161b2d))}._secondaryAmount_zvzky_9{color:var(--uld-secondary-amount,var(--text-secondary,#57647a))}._usedPercentLabel_zvzky_13{color:var(--uld-used-percent-label,var(--text-secondary,#57647a))}._amount_zvzky_18._defaultAccent_zvzky_23{color:var(--uld-default-accent,var(--text-info,#1d4ed8))}._amount_zvzky_18._warningAccent_zvzky_27{color:var(--uld-warning-accent,var(--text-warning,#7f6300))}._amount_zvzky_18._errorAccent_zvzky_31{color:var(--uld-error-accent,var(--text-error,#ae2f2f))}._progressTrack_zvzky_37{background:var(--uld-progress-track,var(--bg-layer-sunken,#eef1f7))!important}._progressFillDefault_zvzky_42>div{background:var(--uld-default-progress,var(--text-control-accent-hover,#5976e9))!important}._progressFillWarning_zvzky_46>div{background:var(--uld-warning-progress,var(--text-warning-icon,#eec840))!important}._progressFillDanger_zvzky_50>div{background:var(--uld-error-progress,var(--bg-control-error-active,#cc4545))!important}._defaultBadge_zvzky_54{background:var(--uld-default-badge-bg,var(--bg-success,#dbf1eb));color:var(--uld-default-badge-text,var(--text-success,#007274))}._warningBadge_zvzky_59{background:var(--uld-warning-badge-bg,var(--bg-warning,#faf0cf));color:var(--uld-warning-badge-text,var(--text-warning,#7f6300))}._errorBadge_zvzky_64{background:var(--uld-error-badge-bg,var(--bg-error,#f3d6d8));color:var(--uld-error-badge-text,var(--text-error,#ae2f2f))}._container_1nr7x_1{background:var(--mls-container-bg,var(--bg-layer-raised,#fcfcfc))}._heading_1nr7x_5{color:var(--mls-heading,var(--text-primary,#161b2d))}._headingCount_1nr7x_9{color:var(--mls-heading-count,var(--text-tertiary,#9fa6bd))}._columnHeader_1nr7x_13{color:var(--mls-column-header,var(--text-secondary,#57647a))}._headerRow_1nr7x_17{border-block-end:1px solid var(--mls-row-divider,var(--stroke-tertiary,#e0e6f0))}._row_1nr7x_21{border-block-start:1px solid var(--mls-row-divider,var(--stroke-tertiary,#e0e6f0))}._row_1nr7x_21:first-child{border-block-start:none}._mobileColumnLabel_1nr7x_29{color:var(--mls-column-header,var(--text-secondary,#57647a))}._name_1nr7x_33{color:var(--mls-name,var(--text-primary,#161b2d))}._modelType_1nr7x_37{color:var(--mls-model-type,var(--text-accent,#1d4ed8))}._version_1nr7x_41{color:var(--mls-version,var(--text-secondary,#57647a))}._value_1nr7x_45{color:var(--mls-value,var(--text-primary,#161b2d))}._secondaryValue_1nr7x_49{color:var(--mls-secondary-value,var(--text-secondary,#57647a))}._progressTrack_1nr7x_55{background:var(--mls-progress-track,var(--bg-layer-sunken,#eef1f7))!important}._progressFillDefault_1nr7x_60>div{background:var(--mls-progress-default,var(--text-control-accent-hover,#5976e9))!important}._progressFillWarning_1nr7x_64>div{background:var(--mls-progress-warning,var(--text-warning-icon,#eec840))!important}._progressFillError_1nr7x_68>div{background:var(--mls-progress-error,var(--bg-control-error-active,#cc4545))!important}._warningIndicator_1nr7x_72{color:var(--mls-indicator-warning,var(--text-warning-icon,#eec840))}._errorIndicator_1nr7x_76{color:var(--mls-indicator-error,var(--text-error,#ae2f2f))}._defaultBadge_1nr7x_80{background:var(--mls-badge-default-bg,var(--bg-success,#dbf1eb));color:var(--mls-badge-default-text,var(--text-success,#007274))}._warningBadge_1nr7x_85{background:var(--mls-badge-warning-bg,var(--bg-warning,#faf0cf));color:var(--mls-badge-warning-text,var(--text-warning,#7f6300))}._errorBadge_1nr7x_90{background:var(--mls-badge-error-bg,var(--bg-error,#f3d6d8));color:var(--mls-badge-error-text,var(--text-error,#ae2f2f))}._neutralStatus_1nr7x_95{color:var(--mls-badge-neutral-text,var(--text-secondary,#57647a))}
+/*$vite$:1*/

package/index.d.ts

@@ -0,0 +1,8 @@
+export { UsageLimitCard } from './components/UsageLimitCard/UsageLimitCard';
+export { UsageLimitCardGroup } from './components/UsageLimitCardGroup/UsageLimitCardGroup';
+export { UsageLimitStatus } from './models/usage-limit-card-props';
+export type { UsageLimitCardData, UsageLimitCardGroupColors, UsageLimitCardGroupLabels, UsageLimitCardGroupProps, UsageLimitCardGroupStyles, UsageLimitCardGroupTypography, UsageLimitCardProps, } from './models/usage-limit-card-props';
+export { ModelLimitsSection } from './components/ModelLimitsSection/ModelLimitsSection';
+export { ModelLimitMetricKind, ModelLimitStatus, } from './models/model-limits-props';
+export type { ModelLimitMetricCell, ModelLimitPeriodCell, ModelLimitPeriodStatus, ModelLimitPeriodStatuses, ModelLimitRow, ModelLimitsColors, ModelLimitsLabels, ModelLimitsSectionProps, ModelLimitsStyles, ModelLimitsTypography, } from './models/model-limits-props';
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAC;AAC5E,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,YAAY,EACV,kBAAkB,EAClB,yBAAyB,EACzB,yBAAyB,EACzB,wBAAwB,EACxB,yBAAyB,EACzB,6BAA6B,EAC7B,mBAAmB,GACpB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,oDAAoD,CAAC;AACxF,OAAO,EACL,oBAAoB,EACpB,gBAAgB,GACjB,MAAM,6BAA6B,CAAC;AACrC,YAAY,EACV,oBAAoB,EACpB,oBAAoB,EACpB,sBAAsB,EACtB,wBAAwB,EACxB,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,iBAAiB,EACjB,qBAAqB,GACtB,MAAM,6BAA6B,CAAC"}

package/index.js

@@ -0,0 +1,511 @@
+import { DeploymentIcon as e, InitialsAvatar as t, PanelEmptyState as n, buildCssVars as r, mergeClasses as i } from "@epam/ai-dial-chat-shared";
+import { ElementSize as a, EllipsisTooltip as o, ProgressBar as s, Tooltip as c } from "@epam/ai-dial-ui-kit";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { createElement as f, forwardRef as p } from "react";
+//#region src/models/usage-limit-card-props.ts
+var m = /* @__PURE__ */ function(e) {
+	return e.Default = "default", e.RunningLow = "runningLow", e.LimitReached = "limitReached", e;
+}({}), h = {
+	card: "_card_zvzky_1",
+	title: "_title_zvzky_5",
+	secondaryAmount: "_secondaryAmount_zvzky_9",
+	usedPercentLabel: "_usedPercentLabel_zvzky_13",
+	amount: "_amount_zvzky_18",
+	defaultAccent: "_defaultAccent_zvzky_23",
+	warningAccent: "_warningAccent_zvzky_27",
+	errorAccent: "_errorAccent_zvzky_31",
+	progressTrack: "_progressTrack_zvzky_37",
+	progressFillDefault: "_progressFillDefault_zvzky_42",
+	progressFillWarning: "_progressFillWarning_zvzky_46",
+	progressFillDanger: "_progressFillDanger_zvzky_50",
+	defaultBadge: "_defaultBadge_zvzky_54",
+	warningBadge: "_warningBadge_zvzky_59",
+	errorBadge: "_errorBadge_zvzky_64"
+}, g = (e, t) => {
+	switch (e) {
+		case m.RunningLow: return t.runningLowBadgeLabel;
+		case m.LimitReached: return t.limitReachedBadgeLabel;
+		case m.Default: return t.defaultBadgeLabel;
+	}
+}, _ = ({ data: e, labels: t, styles: n }) => {
+	let { colors: o, typography: c } = n ?? {}, { titleClassName: f = "dial-body-semi-text", amountClassName: p = "dial-display1-text", secondaryAmountClassName: _ = "dial-small-text", badgeClassName: v = "dial-caption-lead-semi-text", usedPercentLabelClassName: y = "dial-small-text" } = c ?? {}, b = r({
+		"--uld-card-bg": o?.cardBackground,
+		"--uld-title": o?.titleColor,
+		"--uld-default-accent": o?.defaultAccentColor,
+		"--uld-default-progress": o?.defaultProgressColor,
+		"--uld-warning-accent": o?.warningAccentColor,
+		"--uld-warning-progress": o?.warningProgressColor,
+		"--uld-error-accent": o?.errorAccentColor,
+		"--uld-error-progress": o?.errorProgressColor,
+		"--uld-secondary-amount": o?.secondaryAmountColor,
+		"--uld-progress-track": o?.progressTrackColor,
+		"--uld-default-badge-bg": o?.defaultBadgeBackground,
+		"--uld-default-badge-text": o?.defaultBadgeColor,
+		"--uld-warning-badge-bg": o?.warningBadgeBackground,
+		"--uld-warning-badge-text": o?.warningBadgeColor,
+		"--uld-error-badge-bg": o?.errorBadgeBackground,
+		"--uld-error-badge-text": o?.errorBadgeColor,
+		"--uld-used-percent-label": o?.usedPercentLabelColor
+	}), x = g(e.status, t);
+	return /* @__PURE__ */ d("div", {
+		className: i("flex min-w-0 flex-col gap-4 rounded-xl px-6 py-5 shadow-md", h.card),
+		style: b,
+		role: "group",
+		"aria-label": `${e.title}, ${e.periodDescription}`,
+		children: [/* @__PURE__ */ d("div", {
+			className: "flex items-center justify-between gap-2",
+			children: [/* @__PURE__ */ u("p", {
+				className: i("m-0", f, h.title),
+				children: e.title
+			}), /* @__PURE__ */ u("span", {
+				className: i("shrink-0 rounded-full px-2 py-1", v, e.status === m.Default && h.defaultBadge, e.status === m.RunningLow && h.warningBadge, e.status === m.LimitReached && h.errorBadge),
+				children: x
+			})]
+		}), /* @__PURE__ */ d("div", {
+			className: "flex flex-col gap-2",
+			children: [/* @__PURE__ */ d("p", {
+				className: "m-0 flex flex-wrap items-baseline gap-2",
+				children: [/* @__PURE__ */ u("span", {
+					className: i(p, h.amount, e.status === m.Default && h.defaultAccent, e.status === m.RunningLow && h.warningAccent, e.status === m.LimitReached && h.errorAccent),
+					children: e.usedLabel
+				}), !e.isUnlimited && e.totalLabel != null && /* @__PURE__ */ u("span", {
+					className: i(_, h.secondaryAmount),
+					children: t.usedOfTotalLabel({ total: e.totalLabel })
+				})]
+			}), !e.isUnlimited && e.usedPercent != null && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(s, {
+				value: Math.min(e.usedPercent, 100),
+				max: 100,
+				size: a.Small,
+				className: i("!h-1 w-full", h.progressTrack, e.status === m.Default && h.progressFillDefault, e.status === m.RunningLow && h.progressFillWarning, e.status === m.LimitReached && h.progressFillDanger),
+				"aria-label": e.title,
+				"aria-valuetext": e.progressAriaLabel
+			}), /* @__PURE__ */ d("div", {
+				className: "flex items-center justify-between gap-2",
+				children: [e.remainingLabel != null && /* @__PURE__ */ u("span", {
+					className: i(_, h.secondaryAmount),
+					children: t.remainingCaptionLabel({ remaining: e.remainingLabel })
+				}), /* @__PURE__ */ u("span", {
+					className: i("ms-auto", y, h.usedPercentLabel),
+					children: t.usedPercentLabel({ percent: Math.min(Math.round(e.usedPercent), 100) })
+				})]
+			})] })]
+		})]
+	});
+}, v = ({ cards: e, labels: t, styles: n }) => e.length === 0 ? null : /* @__PURE__ */ u("div", {
+	className: "grid grid-cols-1 gap-4 desktop:grid-cols-[repeat(var(--uld-card-count),minmax(0,1fr))]",
+	style: { "--uld-card-count": e.length },
+	children: e.map((e) => /* @__PURE__ */ u(_, {
+		data: e,
+		labels: t,
+		styles: n
+	}, e.title))
+}), y = {
+	outline: {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: 24,
+		height: 24,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round"
+	},
+	filled: {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: 24,
+		height: 24,
+		viewBox: "0 0 24 24",
+		fill: "currentColor",
+		stroke: "none"
+	}
+}, b = (e, t, n, r) => {
+	let i = p(({ color: n = "currentColor", size: i = 24, stroke: a = 2, title: o, className: s, children: c, ...l }, u) => f("svg", {
+		ref: u,
+		...y[e],
+		width: i,
+		height: i,
+		className: [
+			"tabler-icon",
+			`tabler-icon-${t}`,
+			s
+		].join(" "),
+		...e === "filled" ? { fill: n } : {
+			strokeWidth: a,
+			stroke: n
+		},
+		...l
+	}, [
+		o && f("title", { key: "svg-title" }, o),
+		...r.map(([e, t]) => f(e, t)),
+		...Array.isArray(c) ? c : [c]
+	]));
+	return i.displayName = `${n}`, i;
+}, x = b("outline", "chart-bar", "ChartBar", [
+	["path", {
+		d: "M3 13a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -6",
+		key: "svg-0"
+	}],
+	["path", {
+		d: "M15 9a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -10",
+		key: "svg-1"
+	}],
+	["path", {
+		d: "M9 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -14",
+		key: "svg-2"
+	}],
+	["path", {
+		d: "M4 20h14",
+		key: "svg-3"
+	}]
+]), S = b("filled", "alert-circle-filled", "AlertCircleFilled", [["path", {
+	d: "M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1 -19.995 .324l-.005 -.324l.004 -.28c.148 -5.393 4.566 -9.72 9.996 -9.72zm.01 13l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -8a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z",
+	key: "svg-0"
+}]]), C = b("filled", "alert-triangle-filled", "AlertTriangleFilled", [["path", {
+	d: "M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z",
+	key: "svg-0"
+}]]), w = /* @__PURE__ */ function(e) {
+	return e.WithinLimits = "within-limits", e.RunningLow = "running-low", e.LimitReached = "limit-reached", e.NoLimit = "no-limit", e.Unavailable = "unavailable", e;
+}({}), T = /* @__PURE__ */ function(e) {
+	return e.Finite = "finite", e.Unlimited = "unlimited", e.Unavailable = "unavailable", e;
+}({}), E = {
+	container: "_container_1nr7x_1",
+	heading: "_heading_1nr7x_5",
+	headingCount: "_headingCount_1nr7x_9",
+	columnHeader: "_columnHeader_1nr7x_13",
+	headerRow: "_headerRow_1nr7x_17",
+	row: "_row_1nr7x_21",
+	mobileColumnLabel: "_mobileColumnLabel_1nr7x_29",
+	name: "_name_1nr7x_33",
+	modelType: "_modelType_1nr7x_37",
+	version: "_version_1nr7x_41",
+	value: "_value_1nr7x_45",
+	secondaryValue: "_secondaryValue_1nr7x_49",
+	progressTrack: "_progressTrack_1nr7x_55",
+	progressFillDefault: "_progressFillDefault_1nr7x_60",
+	progressFillWarning: "_progressFillWarning_1nr7x_64",
+	progressFillError: "_progressFillError_1nr7x_68",
+	warningIndicator: "_warningIndicator_1nr7x_72",
+	errorIndicator: "_errorIndicator_1nr7x_76",
+	defaultBadge: "_defaultBadge_1nr7x_80",
+	warningBadge: "_warningBadge_1nr7x_85",
+	errorBadge: "_errorBadge_1nr7x_90",
+	neutralStatus: "_neutralStatus_1nr7x_95"
+}, D = (e) => {
+	switch (e) {
+		case w.RunningLow: return E.progressFillWarning;
+		case w.LimitReached: return E.progressFillError;
+		default: return E.progressFillDefault;
+	}
+}, O = ({ cell: e, label: t, progressAriaLabel: n, showProgress: r, labels: o, typography: c }) => {
+	let { valueClassName: l = "dial-small-text", secondaryValueClassName: f = "dial-tiny-text" } = c, p = /* @__PURE__ */ u("span", {
+		className: i(l, E.value),
+		children: e.usedLabel
+	});
+	return /* @__PURE__ */ d("div", {
+		className: "flex min-w-0 flex-col gap-1",
+		children: [
+			/* @__PURE__ */ d("span", {
+				className: "sr-only",
+				children: [t, ": "]
+			}),
+			e.kind === T.Unlimited && /* @__PURE__ */ u("div", {
+				className: "flex min-w-0 items-start gap-2",
+				role: "group",
+				"aria-label": n,
+				children: /* @__PURE__ */ d("div", {
+					className: "flex min-w-0 flex-col gap-1",
+					children: [p, /* @__PURE__ */ u("span", {
+						className: i(f, E.secondaryValue),
+						children: e.supportingLabel ?? o.noLimitLabel
+					})]
+				})
+			}),
+			e.kind === T.Unavailable && /* @__PURE__ */ u("div", {
+				className: "flex min-w-0 items-baseline gap-2",
+				role: "group",
+				"aria-label": n,
+				children: /* @__PURE__ */ u("span", {
+					className: i(f, E.secondaryValue),
+					children: o.unavailableLabel
+				})
+			}),
+			e.kind === T.Finite && /* @__PURE__ */ d("div", {
+				className: "flex min-w-0 flex-col gap-2",
+				children: [/* @__PURE__ */ u("div", {
+					className: "flex min-w-0 items-baseline gap-2",
+					role: "group",
+					"aria-label": n,
+					children: /* @__PURE__ */ d("div", {
+						className: "flex min-w-0 items-baseline gap-1 whitespace-nowrap",
+						children: [p, /* @__PURE__ */ d("span", {
+							className: i(l, E.secondaryValue),
+							children: ["/ ", e.totalLabel]
+						})]
+					})
+				}), r && /* @__PURE__ */ u(s, {
+					value: Math.min(e.usedPercent ?? 0, 100),
+					max: 100,
+					size: a.Small,
+					className: i("!h-1 w-full", E.progressTrack, D(e.status)),
+					"aria-label": n,
+					"aria-valuetext": e.ariaLabel
+				})]
+			})
+		]
+	});
+}, k = ({ periodStatus: e }) => {
+	let { status: t, tooltipLabel: n } = e;
+	if (n == null || t !== w.RunningLow && t !== w.LimitReached) return null;
+	let r = t === w.LimitReached ? S : C;
+	return /* @__PURE__ */ u(c, {
+		tooltip: n,
+		asChild: !0,
+		children: /* @__PURE__ */ u("span", {
+			role: "img",
+			"aria-label": n,
+			tabIndex: 0,
+			className: i("inline-flex size-11 shrink-0 items-center justify-center desktop:size-4", t === w.LimitReached ? E.errorIndicator : E.warningIndicator),
+			children: /* @__PURE__ */ u(r, {
+				"aria-hidden": !0,
+				size: 16
+			})
+		})
+	});
+}, A = ({ cell: e, label: t, unavailableLabel: n, typography: r }) => {
+	let { secondaryValueClassName: a = "dial-tiny-text" } = r, o = e.kind === T.Unavailable;
+	return /* @__PURE__ */ d("div", {
+		className: "flex min-w-0 items-baseline gap-1",
+		children: [/* @__PURE__ */ d("span", {
+			className: "sr-only",
+			children: [t, ": "]
+		}), /* @__PURE__ */ u("span", {
+			className: i("min-w-0 break-words", a, E.secondaryValue),
+			title: o ? n : e.usedLabel,
+			children: o ? n : e.usedLabel
+		})]
+	});
+}, j = ({ cell: e, periodLabel: t, periodStatus: n, labels: r, typography: a }) => /* @__PURE__ */ d("div", {
+	role: "cell",
+	className: "flex min-w-0 flex-col gap-2 py-2 desktop:py-0",
+	children: [
+		/* @__PURE__ */ d("div", {
+			className: i("dial-caption-lead-semi-text flex min-h-11 items-center justify-between gap-2 desktop:hidden", E.mobileColumnLabel),
+			children: [/* @__PURE__ */ u("span", { children: t }), /* @__PURE__ */ u(k, { periodStatus: n })]
+		}),
+		/* @__PURE__ */ u(O, {
+			cell: e.tokens,
+			label: r.tokensLabel,
+			progressAriaLabel: `${t} ${r.tokensLabel}`,
+			showProgress: !0,
+			labels: r,
+			typography: a
+		}),
+		/* @__PURE__ */ u(A, {
+			cell: e.cost,
+			label: r.costLabel,
+			unavailableLabel: r.unavailableLabel,
+			typography: a
+		})
+	]
+}), M = "desktop:grid-cols-[minmax(12rem,1.25fr)_repeat(3,minmax(0,1fr))_minmax(8rem,10rem)]", N = (e) => {
+	switch (e) {
+		case w.WithinLimits: return E.defaultBadge;
+		case w.RunningLow: return E.warningBadge;
+		case w.LimitReached: return E.errorBadge;
+		case w.NoLimit:
+		case w.Unavailable: return;
+	}
+}, P = (e, t) => {
+	switch (e) {
+		case w.WithinLimits: return t.withinLimitsBadgeLabel;
+		case w.RunningLow: return t.runningLowBadgeLabel;
+		case w.LimitReached: return t.limitReachedBadgeLabel;
+		case w.NoLimit: return t.noLimitBadgeLabel;
+		case w.Unavailable: return t.unavailableBadgeLabel;
+	}
+}, F = ({ row: n, labels: r, periodStatuses: a, typography: s, avatarSize: c }) => {
+	let { nameClassName: l = "dial-small-semi-text", modelTypeClassName: f = "dial-caption-lead-semi-text", versionClassName: p = "dial-small-text", valueClassName: m = "dial-small-text", badgeClassName: h = "dial-caption-lead-semi-text" } = s, g = n.status !== w.NoLimit && n.status !== w.Unavailable;
+	return /* @__PURE__ */ d("div", {
+		role: "row",
+		className: i("grid grid-cols-1 gap-2 px-4 py-3 desktop:min-h-16 desktop:items-center desktop:gap-4 desktop:px-6", M, E.row),
+		children: [
+			/* @__PURE__ */ d("div", {
+				role: "cell",
+				className: "flex min-w-0 items-center gap-3 overflow-hidden",
+				children: [/* @__PURE__ */ u("div", {
+					className: "shrink-0",
+					children: /* @__PURE__ */ u(e, {
+						src: n.avatarSrc,
+						size: c,
+						initialsName: n.name,
+						fallback: /* @__PURE__ */ u(t, {
+							name: n.name,
+							size: c,
+							className: "!rounded-xl",
+							textClassName: "!text-lg"
+						}),
+						styles: { badgeClassName: "!rounded-xl" }
+					})
+				}), /* @__PURE__ */ d("div", {
+					className: "flex min-w-0 flex-1 flex-col gap-0.5 overflow-hidden",
+					children: [/* @__PURE__ */ u("span", {
+						className: i(f, E.modelType),
+						children: r.modelTypeLabel
+					}), /* @__PURE__ */ d("div", {
+						className: "flex min-w-0 items-center gap-1 overflow-hidden",
+						children: [/* @__PURE__ */ u("span", {
+							className: i("min-w-0 flex-1 truncate", l, E.name),
+							title: n.name,
+							children: n.name
+						}), n.version != null && /* @__PURE__ */ u(o, {
+							text: n.version,
+							className: i("max-w-[30%] shrink-0", p, E.version)
+						})]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ u(j, {
+				cell: n.last24Hours,
+				periodLabel: r.last24HoursColumnLabel,
+				periodStatus: a.last24Hours,
+				labels: r,
+				typography: s
+			}),
+			/* @__PURE__ */ u(j, {
+				cell: n.last7Days,
+				periodLabel: r.last7DaysColumnLabel,
+				periodStatus: a.last7Days,
+				labels: r,
+				typography: s
+			}),
+			/* @__PURE__ */ u(j, {
+				cell: n.last30Days,
+				periodLabel: r.last30DaysColumnLabel,
+				periodStatus: a.last30Days,
+				labels: r,
+				typography: s
+			}),
+			/* @__PURE__ */ d("div", {
+				role: "cell",
+				className: "flex min-w-0 flex-col gap-2 py-2 desktop:py-0",
+				children: [/* @__PURE__ */ u("span", {
+					className: i("dial-caption-lead-semi-text block desktop:hidden", E.mobileColumnLabel),
+					children: r.statusColumnLabel
+				}), g ? /* @__PURE__ */ u("span", {
+					className: i("inline-flex h-6 shrink-0 items-center rounded-full px-2", h, N(n.status)),
+					children: P(n.status, r)
+				}) : /* @__PURE__ */ u("span", {
+					className: i(m, E.neutralStatus),
+					children: P(n.status, r)
+				})]
+			})
+		]
+	});
+}, I = 40, L = ({ label: e, periodStatus: t, className: n }) => /* @__PURE__ */ d("span", {
+	role: "columnheader",
+	className: i("flex min-w-0 items-center justify-between gap-2", n, E.columnHeader),
+	children: [/* @__PURE__ */ u("span", {
+		className: "min-w-0 truncate",
+		children: e
+	}), /* @__PURE__ */ u(k, { periodStatus: t })]
+}), R = ({ rows: e, labels: t, periodStatuses: a, styles: o, emptyStateIconSize: s = 48 }) => {
+	let { colors: c, typography: f = {} } = o ?? {}, { headingClassName: p = "dial-body-semi-text", headingCountClassName: m = "dial-tiny-semi-text", columnHeaderClassName: h = "dial-caption-lead-semi-text" } = f, g = r({
+		"--mls-container-bg": c?.containerBackground,
+		"--mls-heading": c?.headingColor,
+		"--mls-heading-count": c?.headingCountColor,
+		"--mls-column-header": c?.columnHeaderColor,
+		"--mls-row-divider": c?.rowDividerColor,
+		"--mls-name": c?.nameColor,
+		"--mls-model-type": c?.modelTypeColor,
+		"--mls-version": c?.versionColor,
+		"--mls-value": c?.valueColor,
+		"--mls-secondary-value": c?.secondaryValueColor,
+		"--mls-progress-track": c?.progressTrackColor,
+		"--mls-progress-default": c?.defaultProgressColor,
+		"--mls-progress-warning": c?.warningProgressColor,
+		"--mls-progress-error": c?.errorProgressColor,
+		"--mls-indicator-warning": c?.warningIndicatorColor,
+		"--mls-indicator-error": c?.errorIndicatorColor,
+		"--mls-badge-default-bg": c?.defaultBadgeBackground,
+		"--mls-badge-default-text": c?.defaultBadgeColor,
+		"--mls-badge-warning-bg": c?.warningBadgeBackground,
+		"--mls-badge-warning-text": c?.warningBadgeColor,
+		"--mls-badge-error-bg": c?.errorBadgeBackground,
+		"--mls-badge-error-text": c?.errorBadgeColor,
+		"--mls-badge-neutral-text": c?.neutralBadgeColor
+	}), _ = `${t.headingLabel} ${e.length}`;
+	return /* @__PURE__ */ d("div", {
+		className: "flex flex-col gap-4",
+		style: g,
+		children: [/* @__PURE__ */ u("div", {
+			className: "flex min-h-10 items-center",
+			children: /* @__PURE__ */ d("h3", {
+				className: "m-0 flex items-center gap-2",
+				children: [/* @__PURE__ */ u("span", {
+					className: i(p, E.heading),
+					children: t.headingLabel
+				}), /* @__PURE__ */ u("span", {
+					className: i(m, E.headingCount),
+					children: e.length
+				})]
+			})
+		}), /* @__PURE__ */ u("div", {
+			role: "table",
+			"aria-label": _,
+			className: i("overflow-hidden rounded-xl shadow-md", E.container),
+			children: e.length === 0 ? /* @__PURE__ */ u("div", {
+				className: "flex items-center justify-center px-6 py-10",
+				children: /* @__PURE__ */ u(n, {
+					icon: /* @__PURE__ */ u(x, {
+						"aria-hidden": !0,
+						size: s,
+						stroke: 1
+					}),
+					label: t.emptyStateLabel
+				})
+			}) : /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ d("div", {
+				role: "row",
+				className: i("hidden gap-4 px-6 py-3 desktop:grid desktop:items-center", M, E.headerRow),
+				children: [
+					/* @__PURE__ */ u("span", {
+						role: "columnheader",
+						className: i(h, E.columnHeader),
+						children: t.itemColumnLabel
+					}),
+					/* @__PURE__ */ u(L, {
+						label: t.last24HoursColumnLabel,
+						periodStatus: a.last24Hours,
+						className: h
+					}),
+					/* @__PURE__ */ u(L, {
+						label: t.last7DaysColumnLabel,
+						periodStatus: a.last7Days,
+						className: h
+					}),
+					/* @__PURE__ */ u(L, {
+						label: t.last30DaysColumnLabel,
+						periodStatus: a.last30Days,
+						className: h
+					}),
+					/* @__PURE__ */ u("span", {
+						role: "columnheader",
+						className: i(h, E.columnHeader),
+						children: t.statusColumnLabel
+					})
+				]
+			}), /* @__PURE__ */ u("div", {
+				role: "rowgroup",
+				children: e.map((e) => /* @__PURE__ */ u(F, {
+					row: e,
+					labels: t,
+					periodStatuses: a,
+					typography: f,
+					avatarSize: I
+				}, e.id))
+			})] })
+		})]
+	});
+};
+//#endregion
+export { T as ModelLimitMetricKind, w as ModelLimitStatus, R as ModelLimitsSection, _ as UsageLimitCard, v as UsageLimitCardGroup, m as UsageLimitStatus };

package/models/model-limits-props.d.ts

@@ -0,0 +1,206 @@
+/** Overall or per-metric severity of a model's limit usage, derived by the host from its usage ratio. */
+export declare enum ModelLimitStatus {
+    /** Below the running-low threshold. Rendered with the default (blue) accent and a "within limits" badge. */
+    WithinLimits = "within-limits",
+    /** At or above the running-low threshold but below 100% used. Rendered with the warning (amber) accent and badge. */
+    RunningLow = "running-low",
+    /** At or above 100% used. Rendered with the error (red) accent and badge. */
+    LimitReached = "limit-reached",
+    /** Every supported metric on the row is unlimited. Rendered with a dedicated "No limit" badge. */
+    NoLimit = "no-limit",
+    /** No usable (finite or unlimited) metric exists on the row. Rendered with a dedicated "Unavailable" badge. */
+    Unavailable = "unavailable"
+}
+/** Which of the three normalized shapes a `ModelLimitMetricCell` carries. */
+export declare enum ModelLimitMetricKind {
+    /** A usable total exists — renders `used / total` with a progress bar. */
+    Finite = "finite",
+    /** The host detected the unlimited sentinel; the renderer decides whether its metric shows supporting limit text. */
+    Unlimited = "unlimited",
+    /** The metric could not be determined — renders an explicit unavailable state, no progress bar. */
+    Unavailable = "unavailable"
+}
+/** One normalized, preformatted Cost or Tokens value for one `ModelLimitRow`. */
+export interface ModelLimitMetricCell {
+    /** Which of the three rendering shapes this cell uses. */
+    kind: ModelLimitMetricKind;
+    /** Preformatted used amount, e.g. `'12,345'` or `'$3.60'`. Present for `Finite`/`Unlimited`. */
+    usedLabel?: string;
+    /** Preformatted total amount, e.g. `'50,000'`. Present for `Finite` only. */
+    totalLabel?: string;
+    /** Used percentage, not pre-clamped — may exceed 100. Present for `Finite` only; the cell clamps the visual progress fill at 100%, while `ariaLabel` conveys the real value. */
+    usedPercent?: number;
+    /** Status derived from `usedPercent` against the host's thresholds. Present for `Finite` only. */
+    status?: ModelLimitStatus;
+    /** Host-provided secondary text for an `Unlimited` metric, e.g. `'Follows cost limit'` or `'No limit'`. */
+    supportingLabel?: string;
+    /** Accessible text describing the cell's full value, present regardless of `kind` (e.g. `'12,345 of 50,000 tokens used'` or `'Not available'`). */
+    ariaLabel: string;
+}
+/** Normalized overall Cost status and optional explanatory tooltip for one period header. */
+export interface ModelLimitPeriodStatus {
+    /** Host-derived status of the matching overall Cost limit. */
+    status: ModelLimitStatus;
+    /** Complete tooltip/accessibility text for warning and error indicators. */
+    tooltipLabel?: string;
+}
+/** Overall Cost statuses aligned with the three fixed comparison periods. */
+export interface ModelLimitPeriodStatuses {
+    last24Hours: ModelLimitPeriodStatus;
+    last7Days: ModelLimitPeriodStatus;
+    last30Days: ModelLimitPeriodStatus;
+}
+/** Preformatted Cost and Tokens values for one rolling-period column. */
+export interface ModelLimitPeriodCell {
+    /** Tokens usage and limit for the period. */
+    tokens: ModelLimitMetricCell;
+    /** Attributed cost for the period. */
+    cost: ModelLimitMetricCell;
+}
+/** One row of the Model tokens limits table: model identity, three rolling-period comparisons, and overall status. */
+export interface ModelLimitRow {
+    /** Stable identifier for the row, e.g. the deployment ID. */
+    id: string;
+    /** Display name of the model. */
+    name: string;
+    /** Display version of the model, when known. */
+    version?: string;
+    /** Image URL for the model's avatar. When absent, an initials-based fallback derived from `name` is shown. */
+    avatarSrc?: string;
+    /** Cost and Tokens metrics for the rolling 24-hour period. */
+    last24Hours: ModelLimitPeriodCell;
+    /** Cost and Tokens metrics for the rolling 7-day period. */
+    last7Days: ModelLimitPeriodCell;
+    /** Cost and Tokens metrics for the rolling 30-day period. */
+    last30Days: ModelLimitPeriodCell;
+    /** Host-derived overall status across all model-token and overall Cost limit periods. */
+    status: ModelLimitStatus;
+}
+/** Localized strings shared by every row and by the section shell in `ModelLimitsSection`. */
+export interface ModelLimitsLabels {
+    /** Section heading text, e.g. `'Model tokens limits'`. The row count is rendered separately. */
+    headingLabel: string;
+    /** Column header text for the Item (identity) column. */
+    itemColumnLabel: string;
+    /** Column header text for the rolling 24-hour period. */
+    last24HoursColumnLabel: string;
+    /** Column header text for the rolling 7-day period. */
+    last7DaysColumnLabel: string;
+    /** Column header text for the rolling 30-day period. */
+    last30DaysColumnLabel: string;
+    /** Column header text for the Status column. */
+    statusColumnLabel: string;
+    /** Non-visual accessible label for Tokens values inside every period cell. */
+    tokensLabel: string;
+    /** Non-visual accessible label for the value-only Cost amount in every period cell. */
+    costLabel: string;
+    /** Entity type shown above each model name. */
+    modelTypeLabel: string;
+    /** Text shown after an unlimited Tokens value, e.g. `'No limit'`. */
+    noLimitLabel: string;
+    /** Text shown in place of a value when the metric is unavailable, e.g. `'Not available'`. Must read as distinct from `noLimitLabel`. */
+    unavailableLabel: string;
+    /** Status badge text for `ModelLimitStatus.WithinLimits`. */
+    withinLimitsBadgeLabel: string;
+    /** Status badge text for `ModelLimitStatus.RunningLow`. */
+    runningLowBadgeLabel: string;
+    /** Status badge text for `ModelLimitStatus.LimitReached`. */
+    limitReachedBadgeLabel: string;
+    /** Status badge text for `ModelLimitStatus.NoLimit`. */
+    noLimitBadgeLabel: string;
+    /** Status badge text for `ModelLimitStatus.Unavailable`. */
+    unavailableBadgeLabel: string;
+    /** Message shown in place of the table when `rows` is empty, e.g. `'No models to show yet.'`. */
+    emptyStateLabel: string;
+}
+/** Color overrides for `ModelLimitsSection`, applied as CSS custom properties. */
+export interface ModelLimitsColors {
+    /** Section container background. Fallback: `--bg-layer-raised`. */
+    containerBackground?: string;
+    /** Heading text color. Fallback: `--text-primary`. */
+    headingColor?: string;
+    /** Heading count color. Fallback: `--text-tertiary`. */
+    headingCountColor?: string;
+    /** Column header text color. Fallback: `--text-secondary`. */
+    columnHeaderColor?: string;
+    /** Row divider color. Fallback: `--stroke-secondary`. */
+    rowDividerColor?: string;
+    /** Model name text color. Fallback: `--text-primary`. */
+    nameColor?: string;
+    /** Model entity-type text color. Fallback: `--text-accent`. */
+    modelTypeColor?: string;
+    /** Model version text color. Fallback: `--text-secondary`. */
+    versionColor?: string;
+    /** Metric prominent used-value text color. Fallback: `--text-primary`. */
+    valueColor?: string;
+    /** Secondary metric text color (the "used of X" caption). Fallback: `--text-secondary`. */
+    secondaryValueColor?: string;
+    /** Progress-bar track color. Fallback: `--bg-layer-sunken`. */
+    progressTrackColor?: string;
+    /** Progress-fill / accent color for `WithinLimits`. Fallback: `--text-control-accent-hover`. */
+    defaultProgressColor?: string;
+    /** Progress-fill / accent color for `RunningLow`. Fallback: `--text-warning-icon`. */
+    warningProgressColor?: string;
+    /** Progress-fill / accent color for `LimitReached`. Fallback: `--bg-control-error-active`. */
+    errorProgressColor?: string;
+    /** Period-header indicator color for `RunningLow`. Fallback: `--text-warning-icon`. */
+    warningIndicatorColor?: string;
+    /** Period-header indicator color for `LimitReached`. Fallback: `--text-error`. */
+    errorIndicatorColor?: string;
+    /** `WithinLimits` badge background. Fallback: `--bg-success`. */
+    defaultBadgeBackground?: string;
+    /** `WithinLimits` badge text color. Fallback: `--text-success`. */
+    defaultBadgeColor?: string;
+    /** `RunningLow` badge background. Fallback: `--bg-warning`. */
+    warningBadgeBackground?: string;
+    /** `RunningLow` badge text color. Fallback: `--text-warning`. */
+    warningBadgeColor?: string;
+    /** `LimitReached` badge background. Fallback: `--bg-error`. */
+    errorBadgeBackground?: string;
+    /** `LimitReached` badge text color. Fallback: `--text-error`. */
+    errorBadgeColor?: string;
+    /** `NoLimit`/`Unavailable` status text color. Fallback: `--text-secondary`. */
+    neutralBadgeColor?: string;
+}
+/** Typography class overrides for `ModelLimitsSection`. */
+export interface ModelLimitsTypography {
+    /** CSS class for the section heading. Defaults to `'dial-body-semi-text'`. */
+    headingClassName?: string;
+    /** CSS class for the count next to the section heading. Defaults to `'dial-tiny-semi-text'`. */
+    headingCountClassName?: string;
+    /** CSS class for column headers. Defaults to `'dial-caption-lead-semi-text'`. */
+    columnHeaderClassName?: string;
+    /** CSS class for the model name. Defaults to `'dial-small-semi-text'`. */
+    nameClassName?: string;
+    /** CSS class for the model entity type. Defaults to `'dial-caption-lead-semi-text'`. */
+    modelTypeClassName?: string;
+    /** CSS class for the model version. Defaults to `'dial-small-text'`. */
+    versionClassName?: string;
+    /** CSS class for a metric's prominent used value. Defaults to `'dial-small-text'`. */
+    valueClassName?: string;
+    /** CSS class for a metric's secondary caption (total / "No limit" / "Not available"). Defaults to `'dial-tiny-text'`. */
+    secondaryValueClassName?: string;
+    /** CSS class for status badge text. Defaults to `'dial-caption-lead-semi-text'`. */
+    badgeClassName?: string;
+}
+/** Style overrides accepted by `ModelLimitsSection`. */
+export interface ModelLimitsStyles {
+    /** Color overrides applied as CSS custom properties. */
+    colors?: ModelLimitsColors;
+    /** Typography class overrides. */
+    typography?: ModelLimitsTypography;
+}
+/** Props for `ModelLimitsSection`. */
+export interface ModelLimitsSectionProps {
+    /** Rows to render, in display order. Each renders as one table row. */
+    rows: ModelLimitRow[];
+    /** Localized strings shared by the section shell and every row. */
+    labels: ModelLimitsLabels;
+    /** Host-derived overall Cost statuses/tooltips for the three fixed period headers. */
+    periodStatuses: ModelLimitPeriodStatuses;
+    /** Style overrides applied as CSS custom properties and typography class overrides. */
+    styles?: ModelLimitsStyles;
+    /** Size (px) of the empty-state icon, shown when `rows` is empty. Defaults to `48`. */
+    emptyStateIconSize?: number;
+}
+//# sourceMappingURL=model-limits-props.d.ts.map

package/models/model-limits-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"model-limits-props.d.ts","sourceRoot":"","sources":["../../src/models/model-limits-props.ts"],"names":[],"mappings":"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"}

package/models/usage-limit-card-props.d.ts

@@ -0,0 +1,131 @@
+/** Visual/semantic status of one aggregate cost-limit card, derived by the host from its usage ratio. Every status renders a badge. */
+export declare enum UsageLimitStatus {
+    /** Below the running-low threshold. Rendered with the default (blue) accent and a "within limits" badge. */
+    Default = "default",
+    /** At or above the running-low threshold but below 100% used. Rendered with the warning (amber) accent and badge. */
+    RunningLow = "runningLow",
+    /** At or above 100% used. Rendered with the error (red) accent and badge. */
+    LimitReached = "limitReached"
+}
+/** One aggregate cost-budget card's fully normalized, preformatted data. The host owns all DTO interpretation, currency formatting, and threshold derivation. */
+export interface UsageLimitCardData {
+    /** Card title, e.g. `'Today'` / `'This week'` / `'This month'`. */
+    title: string;
+    /** Accessible description of the rolling window, e.g. `'Last 24 hours'`, appended to the card's accessible group name. */
+    periodDescription: string;
+    /** Raw used amount, already clamped to `>= 0` by the host. Used only to drive `progressAriaLabel`/text — the library never recomputes it. */
+    used: number;
+    /** Raw total amount. Ignored when `isUnlimited` is `true`. */
+    total: number;
+    /** Preformatted used amount, e.g. `'$3.60'`. Always the card's prominent figure. */
+    usedLabel: string;
+    /** Preformatted total amount, e.g. `'$4.00'`, passed to `labels.usedOfTotalLabel`. Omitted when `isUnlimited` is `true`. */
+    totalLabel?: string;
+    /** Preformatted remaining amount, e.g. `'$0.40'`, passed to `labels.remainingCaptionLabel`. Omitted when `isUnlimited` is `true`. */
+    remainingLabel?: string;
+    /** Whether the host detected the unlimited sentinel or an otherwise-unusable total. When `true`, only `usedLabel` is shown — no progress bar, ratio, or badge. */
+    isUnlimited?: boolean;
+    /** Used percentage, not pre-clamped — may exceed 100. The card clamps both the progress-bar fill and the visible percent label at 100%; only `progressAriaLabel` conveys the real, uncapped value. Ignored when `isUnlimited` is `true`. */
+    usedPercent?: number;
+    /** Status the host derived from `usedPercent` against its own thresholds. */
+    status: UsageLimitStatus;
+    /** Accessible value text for the progress bar (`aria-valuetext`), e.g. `'$3.60 of $4.00, 90% used'`. */
+    progressAriaLabel: string;
+}
+/** Localized strings shared by every card in a `UsageLimitCardGroup`/`UsageLimitCard`, independent of any single card's data. */
+export interface UsageLimitCardGroupLabels {
+    /** Status badge text for `UsageLimitStatus.Default`, e.g. `'Within limits'`. */
+    defaultBadgeLabel: string;
+    /** Status badge text for `UsageLimitStatus.RunningLow`, e.g. `'Running low'`. */
+    runningLowBadgeLabel: string;
+    /** Status badge text for `UsageLimitStatus.LimitReached`, e.g. `'Limit reached'`. */
+    limitReachedBadgeLabel: string;
+    /** Builds the caption next to the prominent used amount, e.g. `({ total }) => \`used of ${total}\`` . Not shown when `isUnlimited` is `true`. */
+    usedOfTotalLabel: (params: {
+        total: string;
+    }) => string;
+    /** Builds the remaining-amount caption below the progress bar, e.g. `({ remaining }) => \`${remaining} left\`` . Not shown when `isUnlimited` is `true`. */
+    remainingCaptionLabel: (params: {
+        remaining: string;
+    }) => string;
+    /** Builds the trailing used-percent label, e.g. `({ percent }) => \`${percent}%\`` . */
+    usedPercentLabel: (params: {
+        percent: number;
+    }) => string;
+}
+/** Color overrides for `UsageLimitCardGroup`/`UsageLimitCard`, applied as CSS custom properties. */
+export interface UsageLimitCardGroupColors {
+    /** Individual card background. Fallback: `--bg-layer-raised`. */
+    cardBackground?: string;
+    /** Title text color. Fallback: `--text-primary`. */
+    titleColor?: string;
+    /** Prominent amount text color in the default status. Fallback: `--text-info` (`#1D4ED8`). */
+    defaultAccentColor?: string;
+    /** Progress-fill color in the default status. Fallback: `--text-control-accent-hover` (`#5976E9`). */
+    defaultProgressColor?: string;
+    /** Prominent amount text color in the running-low status. Fallback: `--text-warning` (`#7F6300`). */
+    warningAccentColor?: string;
+    /** Progress-fill color in the running-low status. Fallback: `--text-warning-icon` (`#EEC840`). */
+    warningProgressColor?: string;
+    /** Prominent amount text color in the limit-reached status. Fallback: `--text-error` (`#AE2F2F`). */
+    errorAccentColor?: string;
+    /** Progress-fill color in the limit-reached status. Fallback: `--bg-control-error-active` (`#CC4545`). */
+    errorProgressColor?: string;
+    /** Secondary amount/caption text color (the "used of $X.XX" and "$X.XX left" portions). Fallback: `--text-secondary`. */
+    secondaryAmountColor?: string;
+    /** Progress-bar track color. Fallback: `--bg-layer-sunken`. */
+    progressTrackColor?: string;
+    /** Default-status badge background. Fallback: `--bg-success` (`#DBF1EB`). */
+    defaultBadgeBackground?: string;
+    /** Default-status badge text color. Fallback: `--text-success` (`#007274`). */
+    defaultBadgeColor?: string;
+    /** Running-low badge background. Fallback: `--bg-warning` (`#FAF0CF`). */
+    warningBadgeBackground?: string;
+    /** Running-low badge text color. Fallback: `--text-warning` (`#7F6300`). */
+    warningBadgeColor?: string;
+    /** Limit-reached badge background. Fallback: `--bg-error` (`#F3D6D8`). */
+    errorBadgeBackground?: string;
+    /** Limit-reached badge text color. Fallback: `--text-error` (`#AE2F2F`). */
+    errorBadgeColor?: string;
+    /** Used-percent trailing label color. Fallback: `--text-secondary`. */
+    usedPercentLabelColor?: string;
+}
+/** Typography class overrides for `UsageLimitCardGroup`/`UsageLimitCard`. */
+export interface UsageLimitCardGroupTypography {
+    /** CSS class for the card title. Defaults to `'dial-body-semi-text'`. */
+    titleClassName?: string;
+    /** CSS class for the prominent used-amount figure. Defaults to `'dial-display1-text'`. */
+    amountClassName?: string;
+    /** CSS class for the secondary ("used of $X.XX" / "$X.XX left") caption text. Defaults to `'dial-small-text'`. */
+    secondaryAmountClassName?: string;
+    /** CSS class for the status badge text. Defaults to `'dial-caption-lead-semi-text'`. */
+    badgeClassName?: string;
+    /** CSS class for the trailing used-percent label. Defaults to `'dial-small-text'`. */
+    usedPercentLabelClassName?: string;
+}
+/** Style overrides accepted by `UsageLimitCardGroup` and `UsageLimitCard`. */
+export interface UsageLimitCardGroupStyles {
+    /** Color overrides applied as CSS custom properties. */
+    colors?: UsageLimitCardGroupColors;
+    /** Typography class overrides. */
+    typography?: UsageLimitCardGroupTypography;
+}
+/** Props for `UsageLimitCardGroup`. */
+export interface UsageLimitCardGroupProps {
+    /** Cards to render, in display order (e.g. Today, This week, This month). Each renders as its own independent, equally-sized box. Empty array renders nothing. */
+    cards: UsageLimitCardData[];
+    /** Localized strings shared by every card. */
+    labels: UsageLimitCardGroupLabels;
+    /** Style overrides applied as CSS custom properties and typography class overrides. */
+    styles?: UsageLimitCardGroupStyles;
+}
+/** Props for `UsageLimitCard`. */
+export interface UsageLimitCardProps {
+    /** The card's normalized data. */
+    data: UsageLimitCardData;
+    /** Localized strings shared by every card. */
+    labels: UsageLimitCardGroupLabels;
+    /** Style overrides applied as CSS custom properties and typography class overrides. */
+    styles?: UsageLimitCardGroupStyles;
+}
+//# sourceMappingURL=usage-limit-card-props.d.ts.map

package/models/usage-limit-card-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usage-limit-card-props.d.ts","sourceRoot":"","sources":["../../src/models/usage-limit-card-props.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@epam/ai-dial-usage-dashboard",
+  "description": "Presentational aggregate cost-limit cards for the Usage settings dashboard",
+  "version": "1.0.0-rc.7",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    }
+  },
+  "peerDependencies": {
+    "@epam/ai-dial-chat-shared": "1.0.0-rc.7",
+    "@epam/ai-dial-ui-kit": "^0.14.0-dev.6",
+    "@tabler/icons-react": "^3.44.0",
+    "react": "^19.2.7"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/epam/ai-dial-chat.git",
+    "directory": "libs/usage-dashboard"
+  }
+}