@salutejs/plasma-sb-utils 0.246.0-next-sbcom.0 → 0.246.0

package/lib/components/TokenUsage/stories.js

@@ -0,0 +1,181 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { IconSearch } from '@salutejs/plasma-icons';
+import { collapseTypographyProperty, getTokenInfo, getTypographyStyle, getUsageCount, groupUsagesByComponent, groupUsagesByVariation, plural, searchTokens, } from '../../helpers';
+import { ColorCircle, ComponentCount, ComponentTitle, Details, DetailsHeader, DetailsTitle, EmptyDetails, Hint, Layout, MetaInfo, PropertyList, PropertyName, PropertyRow, ShadowBox, Sidebar, SidebarHead, TokenGlyph, TokenList, TokenListCount, TokenListItem, TokenListName, TokenName, TokenValue, TypographyPreview, UsageGroup, VariationName, Via, createStyledAccordion, } from './styles';
+var createTokenPreview = function (usageIndex, themeTokens) { return function (_a) {
+    var token = _a.token, size = _a.size;
+    var _b = getTokenInfo(usageIndex, themeTokens, token), cssVars = _b.cssVars, kind = _b.kind, value = _b.value;
+    if (kind === 'color') {
+        return React.createElement(ColorCircle, { "$size": size, "$background": value });
+    }
+    if (kind === 'shadow') {
+        return React.createElement(ShadowBox, { "$size": size, "$boxShadow": value });
+    }
+    if (kind === 'typography') {
+        return (React.createElement(TokenGlyph, { "$size": size, style: { fontFamily: getTypographyStyle(cssVars).fontFamily } }, "Aa"));
+    }
+    return React.createElement(TokenGlyph, null, "#");
+}; };
+var Highlighted = function (_a) {
+    var value = _a.value, query = _a.query;
+    var search = query.replace(/^--/, '').toLowerCase();
+    var position = search ? value.toLowerCase().indexOf(search) : -1;
+    if (position === -1) {
+        return React.createElement(React.Fragment, null, value);
+    }
+    return (React.createElement(React.Fragment, null,
+        value.slice(0, position),
+        React.createElement("mark", null, value.slice(position, position + search.length)),
+        value.slice(position + search.length)));
+};
+export var createTokenUsageStory = function (_a) {
+    var themeTokens = _a.themeTokens, usageIndex = _a.usageIndex, components = _a.components, useNotify = _a.useNotify;
+    var AccordionItem = components.accordionItem, TextField = components.textField, accordion = components.accordion;
+    var StyledAccordion = createStyledAccordion(accordion);
+    var TokenPreview = createTokenPreview(usageIndex, themeTokens);
+    var UsageDetails = function (_a) {
+        var token = _a.token, copyToClipboard = _a.copyToClipboard;
+        var usages = usageIndex.byToken[token] || [];
+        var byComponent = groupUsagesByComponent(usages);
+        var _b = getTokenInfo(usageIndex, themeTokens, token), cssVars = _b.cssVars, kind = _b.kind;
+        var cssVarLabel = kind === 'typography' ? collapseTypographyProperty(cssVars[0]) : cssVars[0];
+        return (React.createElement(Details, null,
+            React.createElement(DetailsHeader, null,
+                React.createElement(DetailsTitle, null,
+                    React.createElement(TokenPreview, { token: token, size: "1.25rem" }),
+                    React.createElement(TokenName, { onClick: function () { return copyToClipboard(token); } }, token),
+                    React.createElement(TokenValue, { onClick: function () { return copyToClipboard(cssVarLabel); } },
+                        "\u00B7 ",
+                        cssVarLabel)),
+                kind === 'typography' && (React.createElement(TypographyPreview, { style: getTypographyStyle(cssVars) }, "\u0421\u044A\u0435\u0448\u044C \u0435\u0449\u0451 \u044D\u0442\u0438\u0445 \u043C\u044F\u0433\u043A\u0438\u0445 \u0444\u0440\u0430\u043D\u0446\u0443\u0437\u0441\u043A\u0438\u0445 \u0431\u0443\u043B\u043E\u043A, \u0434\u0430 \u0432\u044B\u043F\u0435\u0439 \u0447\u0430\u044E")),
+                React.createElement(MetaInfo, null, usages.length
+                    ? "".concat(usages.length, " ").concat(plural(usages.length, [
+                        'использование',
+                        'использования',
+                        'использований',
+                    ]), " \u00B7 ").concat(byComponent.length, " ").concat(plural(byComponent.length, [
+                        'компонент',
+                        'компонента',
+                        'компонентов',
+                    ]))
+                    : 'Не используется в компонентах')),
+            usages.length > 0 && (React.createElement(StyledAccordion, { key: token, view: "clear", size: "s", stretching: "filled" }, byComponent.map(function (_a, position) {
+                var component = _a[0], componentUsages = _a[1];
+                return (React.createElement(AccordionItem, { key: component, eventKey: position, type: "arrow", title: React.createElement(ComponentTitle, null,
+                        component,
+                        React.createElement(ComponentCount, null, componentUsages.length)) }, groupUsagesByVariation(componentUsages).map(function (_a) {
+                    var variation = _a[0], variationUsages = _a[1];
+                    return (React.createElement(UsageGroup, { key: variation },
+                        React.createElement(VariationName, null, variation),
+                        React.createElement(PropertyList, null, variationUsages.map(function (usage, usagePosition) { return (React.createElement(PropertyRow, { key: "".concat(usage.property, "_").concat(usagePosition), title: "\u0421\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C css-\u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u0443\u044E", onClick: function () { return copyToClipboard(usage.property); } },
+                            React.createElement(PropertyName, null, usage.property),
+                            usage.via.length > 0 && React.createElement(Via, null,
+                                "\u0447\u0435\u0440\u0435\u0437 ",
+                                usage.via.join(' → ')))); }))));
+                })));
+            })))));
+    };
+    return function () {
+        var _a = useState(''), query = _a[0], setQuery = _a[1];
+        var _b = useState(null), selected = _b[0], setSelected = _b[1];
+        var listRef = useRef(null);
+        var notify = useNotify();
+        var matched = useMemo(function () { return searchTokens(usageIndex, query); }, [query]);
+        var activeToken = selected && matched.includes(selected) ? selected : matched[0];
+        useEffect(function () {
+            var _a, _b;
+            (_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[data-selected="true"]')) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: 'nearest' });
+        }, [activeToken]);
+        var copyToClipboard = function (value) { return __awaiter(void 0, void 0, void 0, function () {
+            var error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, navigator.clipboard.writeText(value)];
+                    case 1:
+                        _a.sent();
+                        notify('Скопировано');
+                        return [3 /*break*/, 3];
+                    case 2:
+                        error_1 = _a.sent();
+                        notify('Ошибка при копировании текста', true);
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        }); };
+        var onKeyDown = function (event) {
+            if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
+                return;
+            }
+            event.preventDefault();
+            var position = matched.indexOf(activeToken);
+            var next = event.key === 'ArrowDown' ? position + 1 : position - 1;
+            if (matched[next]) {
+                setSelected(matched[next]);
+            }
+        };
+        return (React.createElement(Layout, null,
+            React.createElement(Sidebar, null,
+                React.createElement(SidebarHead, null,
+                    React.createElement(TextField, { autoFocus: true, placeholder: "\u041F\u043E\u0438\u0441\u043A \u0442\u043E\u043A\u0435\u043D\u0430", value: query, contentLeft: React.createElement(IconSearch, { size: "xs", color: "inherit" }), onChange: function (event) {
+                            setQuery(event.target.value);
+                            setSelected(null);
+                        }, onKeyDown: onKeyDown }),
+                    React.createElement(Hint, null, query
+                        ? "".concat(matched.length, " ").concat(plural(matched.length, ['токен', 'токена', 'токенов']))
+                        : "".concat(usageIndex.stats.tokens, " ").concat(plural(usageIndex.stats.tokens, [
+                            'токен',
+                            'токена',
+                            'токенов',
+                        ])))),
+                React.createElement(TokenList, { ref: listRef }, matched.map(function (token) {
+                    var count = getUsageCount(usageIndex, token);
+                    return (React.createElement(TokenListItem, { key: token, type: "button", "data-selected": token === activeToken, "$isSelected": token === activeToken, "$isUnused": count === 0, title: count === 0 ? 'Не используется ни одним компонентом' : undefined, onClick: function () { return setSelected(token); } },
+                        React.createElement(TokenPreview, { token: token }),
+                        React.createElement(TokenListName, null,
+                            React.createElement(Highlighted, { value: token, query: query })),
+                        React.createElement(TokenListCount, { "$isSelected": token === activeToken }, count || '—')));
+                }))),
+            activeToken ? (React.createElement(UsageDetails, { token: activeToken, copyToClipboard: copyToClipboard })) : (React.createElement(EmptyDetails, null,
+                React.createElement("div", null, "\u0412 \u0442\u0435\u043C\u0435 \u043D\u0435\u0442 \u0442\u0430\u043A\u043E\u0433\u043E \u0442\u043E\u043A\u0435\u043D\u0430")))));
+    };
+};
+//# sourceMappingURL=stories.js.map

package/lib/components/TokenUsage/stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/TokenUsage/stories.tsx"],"names":[],"mappings":"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"}

package/lib/components/TokenUsage/styles.d.ts

@@ -0,0 +1,41 @@
+export declare const Layout: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Sidebar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SidebarHead: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Hint: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TokenList: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TokenListItem: import("styled-components").StyledComponent<"button", any, {
+    $isSelected?: boolean;
+    $isUnused?: boolean;
+}, never>;
+export declare const TokenListName: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const TokenListCount: import("styled-components").StyledComponent<"span", any, {
+    $isSelected?: boolean;
+}, never>;
+export declare const ColorCircle: import("styled-components").StyledComponent<"div", any, {
+    $background?: string;
+    $size?: string;
+}, never>;
+export declare const ShadowBox: import("styled-components").StyledComponent<"div", any, {
+    $boxShadow?: string;
+    $size?: string;
+}, never>;
+export declare const TokenGlyph: import("styled-components").StyledComponent<"div", any, {
+    $size?: string;
+}, never>;
+export declare const Details: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DetailsHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DetailsTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TokenName: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const TokenValue: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const MetaInfo: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TypographyPreview: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ComponentTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ComponentCount: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const UsageGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const VariationName: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PropertyList: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PropertyRow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PropertyName: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const Via: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const EmptyDetails: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const createStyledAccordion: (Accordion: any) => import("styled-components").StyledComponent<any, any, object, string | number | symbol>;

package/lib/components/TokenUsage/styles.js

@@ -0,0 +1,71 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from 'styled-components';
+export var Layout = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    box-sizing: border-box;\n\n    display: grid;\n    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);\n    gap: 2rem;\n\n    width: 100%;\n    max-width: 100%;\n    height: calc(100vh - 5rem);\n    padding-top: 1rem;\n\n    overflow: hidden;\n"], ["\n    box-sizing: border-box;\n\n    display: grid;\n    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);\n    gap: 2rem;\n\n    width: 100%;\n    max-width: 100%;\n    height: calc(100vh - 5rem);\n    padding-top: 1rem;\n\n    overflow: hidden;\n"])));
+export var Sidebar = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    gap: 0.75rem;\n\n    min-width: 0;\n    min-height: 0;\n"], ["\n    display: flex;\n    flex-direction: column;\n    gap: 0.75rem;\n\n    min-width: 0;\n    min-height: 0;\n"])));
+export var SidebarHead = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    gap: 0.375rem;\n"], ["\n    display: flex;\n    flex-direction: column;\n    gap: 0.375rem;\n"])));
+export var Hint = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    color: var(--text-tertiary);\n    font-family: var(--plasma-typo-body-xxs-font-family);\n    font-size: var(--plasma-typo-body-xxs-font-size);\n    line-height: var(--plasma-typo-body-xxs-line-height);\n"], ["\n    color: var(--text-tertiary);\n    font-family: var(--plasma-typo-body-xxs-font-family);\n    font-size: var(--plasma-typo-body-xxs-font-size);\n    line-height: var(--plasma-typo-body-xxs-line-height);\n"])));
+export var TokenList = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n\n    overflow-x: hidden;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    scrollbar-gutter: stable;\n\n    margin: 0 -0.5rem;\n    padding: 0 0.5rem 1rem;\n"], ["\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n\n    overflow-x: hidden;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    scrollbar-gutter: stable;\n\n    margin: 0 -0.5rem;\n    padding: 0 0.5rem 1rem;\n"])));
+export var TokenListItem = styled.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: 0.875rem minmax(0, 1fr) auto;\n    align-items: center;\n    gap: 0.5rem;\n\n    padding: 0.3125rem 0.5rem;\n\n    color: ", ";\n    background: ", ";\n    border: none;\n    border-radius: var(--border-radius-xxs);\n    box-shadow: ", ";\n\n    font-family: var(--plasma-typo-body-xs-font-family);\n    font-size: var(--plasma-typo-body-xs-font-size);\n    line-height: var(--plasma-typo-body-xs-line-height);\n    text-align: left;\n    cursor: pointer;\n\n    &:hover {\n        background: var(--surface-transparent-secondary);\n    }\n\n    mark {\n        color: inherit;\n        background: transparent;\n        font-weight: var(--plasma-typo-body-xs-bold-font-weight);\n    }\n"], ["\n    display: grid;\n    grid-template-columns: 0.875rem minmax(0, 1fr) auto;\n    align-items: center;\n    gap: 0.5rem;\n\n    padding: 0.3125rem 0.5rem;\n\n    color: ", ";\n    background: ", ";\n    border: none;\n    border-radius: var(--border-radius-xxs);\n    box-shadow: ", ";\n\n    font-family: var(--plasma-typo-body-xs-font-family);\n    font-size: var(--plasma-typo-body-xs-font-size);\n    line-height: var(--plasma-typo-body-xs-line-height);\n    text-align: left;\n    cursor: pointer;\n\n    &:hover {\n        background: var(--surface-transparent-secondary);\n    }\n\n    mark {\n        color: inherit;\n        background: transparent;\n        font-weight: var(--plasma-typo-body-xs-bold-font-weight);\n    }\n"])), function (_a) {
+    var $isUnused = _a.$isUnused;
+    return ($isUnused ? 'var(--text-tertiary)' : 'var(--text-primary)');
+}, function (_a) {
+    var $isSelected = _a.$isSelected;
+    return ($isSelected ? 'var(--surface-transparent-secondary)' : 'transparent');
+}, function (_a) {
+    var $isSelected = _a.$isSelected;
+    return ($isSelected ? 'inset 0.125rem 0 0 var(--surface-accent)' : 'none');
+});
+export var TokenListName = styled.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n"], ["\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n"])));
+export var TokenListCount = styled.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    color: ", ";\n    font-size: 0.6875rem;\n    font-variant-numeric: tabular-nums;\n"], ["\n    color: ", ";\n    font-size: 0.6875rem;\n    font-variant-numeric: tabular-nums;\n"])), function (_a) {
+    var $isSelected = _a.$isSelected;
+    return ($isSelected ? 'var(--text-secondary)' : 'var(--text-tertiary)');
+});
+export var ColorCircle = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    box-sizing: border-box;\n    flex-shrink: 0;\n\n    width: ", ";\n    height: ", ";\n\n    background: ", ";\n    border-radius: 50%;\n    box-shadow: inset 0 0 0 1px var(--outline-solid-primary);\n"], ["\n    box-sizing: border-box;\n    flex-shrink: 0;\n\n    width: ", ";\n    height: ", ";\n\n    background: ", ";\n    border-radius: 50%;\n    box-shadow: inset 0 0 0 1px var(--outline-solid-primary);\n"])), function (_a) {
+    var $size = _a.$size;
+    return $size || '0.875rem';
+}, function (_a) {
+    var $size = _a.$size;
+    return $size || '0.875rem';
+}, function (_a) {
+    var $background = _a.$background;
+    return $background || 'transparent';
+});
+export var ShadowBox = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    box-sizing: border-box;\n    flex-shrink: 0;\n\n    width: ", ";\n    height: ", ";\n\n    background: var(--surface-solid-card);\n    border-radius: var(--border-radius-xxs);\n    box-shadow: ", ";\n"], ["\n    box-sizing: border-box;\n    flex-shrink: 0;\n\n    width: ", ";\n    height: ", ";\n\n    background: var(--surface-solid-card);\n    border-radius: var(--border-radius-xxs);\n    box-shadow: ", ";\n"])), function (_a) {
+    var $size = _a.$size;
+    return $size || '0.875rem';
+}, function (_a) {
+    var $size = _a.$size;
+    return $size || '0.875rem';
+}, function (_a) {
+    var $boxShadow = _a.$boxShadow;
+    return $boxShadow || 'none';
+});
+export var TokenGlyph = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    display: flex;\n    align-items: baseline;\n    justify-content: center;\n    flex-shrink: 0;\n\n    min-width: ", ";\n\n    color: var(--text-tertiary);\n    font-size: ", ";\n    line-height: 1;\n    white-space: nowrap;\n"], ["\n    display: flex;\n    align-items: baseline;\n    justify-content: center;\n    flex-shrink: 0;\n\n    min-width: ", ";\n\n    color: var(--text-tertiary);\n    font-size: ", ";\n    line-height: 1;\n    white-space: nowrap;\n"])), function (_a) {
+    var $size = _a.$size;
+    return $size || '0.875rem';
+}, function (_a) {
+    var $size = _a.$size;
+    return $size || '0.625rem';
+});
+export var Details = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    min-height: 0;\n\n    overflow-x: hidden;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    scrollbar-gutter: stable;\n\n    padding-right: 0.5rem;\n"], ["\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    min-height: 0;\n\n    overflow-x: hidden;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    scrollbar-gutter: stable;\n\n    padding-right: 0.5rem;\n"])));
+export var DetailsHeader = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    position: sticky;\n    top: 0;\n    z-index: 1;\n\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem;\n    min-width: 0;\n\n    padding: 0.5rem 0 0.75rem;\n    margin: -0.5rem 0 0.25rem;\n\n    background: var(--surface-solid-primary);\n    border-bottom: 1px solid var(--outline-solid-secondary);\n"], ["\n    position: sticky;\n    top: 0;\n    z-index: 1;\n\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem;\n    min-width: 0;\n\n    padding: 0.5rem 0 0.75rem;\n    margin: -0.5rem 0 0.25rem;\n\n    background: var(--surface-solid-primary);\n    border-bottom: 1px solid var(--outline-solid-secondary);\n"])));
+export var DetailsTitle = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    display: flex;\n    align-items: baseline;\n    gap: 0.375rem;\n    flex-wrap: wrap;\n    min-width: 0;\n"], ["\n    display: flex;\n    align-items: baseline;\n    gap: 0.375rem;\n    flex-wrap: wrap;\n    min-width: 0;\n"])));
+export var TokenName = styled.span(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    font-family: var(--plasma-typo-body-l-font-family);\n    font-size: var(--plasma-typo-body-l-font-size);\n    font-weight: var(--plasma-typo-body-l-bold-font-weight);\n    line-height: var(--plasma-typo-body-l-line-height);\n\n    cursor: pointer;\n"], ["\n    font-family: var(--plasma-typo-body-l-font-family);\n    font-size: var(--plasma-typo-body-l-font-size);\n    font-weight: var(--plasma-typo-body-l-bold-font-weight);\n    line-height: var(--plasma-typo-body-l-line-height);\n\n    cursor: pointer;\n"])));
+export var TokenValue = styled.span(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    color: var(--text-secondary);\n\n    font-family: 'SB Sans Mono', monospace;\n    font-size: 0.75rem;\n\n    cursor: pointer;\n"], ["\n    color: var(--text-secondary);\n\n    font-family: 'SB Sans Mono', monospace;\n    font-size: 0.75rem;\n\n    cursor: pointer;\n"])));
+export var MetaInfo = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    display: flex;\n    align-items: baseline;\n    gap: 0.5rem;\n    flex-wrap: wrap;\n\n    color: var(--text-tertiary);\n    font-family: var(--plasma-typo-body-xs-font-family);\n    font-size: var(--plasma-typo-body-xs-font-size);\n    line-height: var(--plasma-typo-body-xs-line-height);\n"], ["\n    display: flex;\n    align-items: baseline;\n    gap: 0.5rem;\n    flex-wrap: wrap;\n\n    color: var(--text-tertiary);\n    font-family: var(--plasma-typo-body-xs-font-family);\n    font-size: var(--plasma-typo-body-xs-font-size);\n    line-height: var(--plasma-typo-body-xs-line-height);\n"])));
+export var TypographyPreview = styled.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    overflow: hidden;\n\n    min-width: 0;\n    max-width: 100%;\n    padding: 0.25rem 0;\n\n    color: var(--text-primary);\n    white-space: nowrap;\n    text-overflow: ellipsis;\n"], ["\n    overflow: hidden;\n\n    min-width: 0;\n    max-width: 100%;\n    padding: 0.25rem 0;\n\n    color: var(--text-primary);\n    white-space: nowrap;\n    text-overflow: ellipsis;\n"])));
+export var ComponentTitle = styled.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n    display: flex;\n    align-items: baseline;\n    gap: 0.5rem;\n    min-width: 0;\n"], ["\n    display: flex;\n    align-items: baseline;\n    gap: 0.5rem;\n    min-width: 0;\n"])));
+export var ComponentCount = styled.span(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n    color: var(--text-tertiary);\n    font-size: 0.6875rem;\n    font-variant-numeric: tabular-nums;\n    font-weight: var(--plasma-typo-body-xs-font-weight);\n"], ["\n    color: var(--text-tertiary);\n    font-size: 0.6875rem;\n    font-variant-numeric: tabular-nums;\n    font-weight: var(--plasma-typo-body-xs-font-weight);\n"])));
+export var UsageGroup = styled.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: 10rem minmax(0, 1fr);\n    align-items: baseline;\n    gap: 0.5rem;\n\n    padding: 0.1875rem 0;\n"], ["\n    display: grid;\n    grid-template-columns: 10rem minmax(0, 1fr);\n    align-items: baseline;\n    gap: 0.5rem;\n\n    padding: 0.1875rem 0;\n"])));
+export var VariationName = styled.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n    overflow: hidden;\n\n    color: var(--text-secondary);\n    white-space: nowrap;\n    text-overflow: ellipsis;\n\n    font-family: var(--plasma-typo-body-xs-font-family);\n    font-size: var(--plasma-typo-body-xs-font-size);\n    line-height: 1.5rem;\n"], ["\n    overflow: hidden;\n\n    color: var(--text-secondary);\n    white-space: nowrap;\n    text-overflow: ellipsis;\n\n    font-family: var(--plasma-typo-body-xs-font-family);\n    font-size: var(--plasma-typo-body-xs-font-size);\n    line-height: 1.5rem;\n"])));
+export var PropertyList = styled.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    min-width: 0;\n"], ["\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    min-width: 0;\n"])));
+export var PropertyRow = styled.div(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n    display: flex;\n    align-items: baseline;\n    gap: 0.5rem;\n    flex-wrap: wrap;\n\n    max-width: 100%;\n    padding: 0 0.25rem;\n    margin-left: -0.25rem;\n\n    border-radius: var(--border-radius-xxs);\n\n    min-width: 0;\n\n    font-family: 'SB Sans Mono', monospace;\n    font-size: 0.75rem;\n    line-height: 1.5rem;\n    word-break: break-all;\n    cursor: pointer;\n\n    &:hover {\n        background: var(--surface-transparent-secondary);\n    }\n"], ["\n    display: flex;\n    align-items: baseline;\n    gap: 0.5rem;\n    flex-wrap: wrap;\n\n    max-width: 100%;\n    padding: 0 0.25rem;\n    margin-left: -0.25rem;\n\n    border-radius: var(--border-radius-xxs);\n\n    min-width: 0;\n\n    font-family: 'SB Sans Mono', monospace;\n    font-size: 0.75rem;\n    line-height: 1.5rem;\n    word-break: break-all;\n    cursor: pointer;\n\n    &:hover {\n        background: var(--surface-transparent-secondary);\n    }\n"])));
+export var PropertyName = styled.span(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n    color: var(--text-primary);\n"], ["\n    color: var(--text-primary);\n"])));
+export var Via = styled.span(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n    color: var(--text-tertiary);\n\n    font-family: var(--plasma-typo-body-xxs-font-family);\n    font-size: var(--plasma-typo-body-xxs-font-size);\n"], ["\n    color: var(--text-tertiary);\n\n    font-family: var(--plasma-typo-body-xxs-font-family);\n    font-size: var(--plasma-typo-body-xxs-font-size);\n"])));
+export var EmptyDetails = styled.div(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    gap: 0.75rem;\n    align-items: center;\n    justify-content: center;\n\n    height: 100%;\n    padding-bottom: 6rem;\n\n    color: var(--text-secondary);\n    text-align: center;\n"], ["\n    display: flex;\n    flex-direction: column;\n    gap: 0.75rem;\n    align-items: center;\n    justify-content: center;\n\n    height: 100%;\n    padding-bottom: 6rem;\n\n    color: var(--text-secondary);\n    text-align: center;\n"])));
+export var createStyledAccordion = function (Accordion) { return styled(Accordion)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n    --plasma-accordion-item-padding-vertical: 0.5rem;\n    --plasma-accordion-item-padding-horizontal: 0;\n    --plasma-accordion-item-padding-horizontal-left: 0;\n    --plasma-accordion-item-body-padding-bottom: 0.75rem;\n    --plasma-accordion-item-title-font-size: var(--plasma-typo-body-s-font-size);\n    --plasma-accordion-item-title-font-weight: var(--plasma-typo-body-s-bold-font-weight);\n    --plasma-accordion-item-title-line-height: var(--plasma-typo-body-s-line-height);\n    --plasma-accordion-item-icon-size: 0.75rem;\n"], ["\n    --plasma-accordion-item-padding-vertical: 0.5rem;\n    --plasma-accordion-item-padding-horizontal: 0;\n    --plasma-accordion-item-padding-horizontal-left: 0;\n    --plasma-accordion-item-body-padding-bottom: 0.75rem;\n    --plasma-accordion-item-title-font-size: var(--plasma-typo-body-s-font-size);\n    --plasma-accordion-item-title-font-weight: var(--plasma-typo-body-s-bold-font-weight);\n    --plasma-accordion-item-title-line-height: var(--plasma-typo-body-s-line-height);\n    --plasma-accordion-item-icon-size: 0.75rem;\n"]))); };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28;
+//# sourceMappingURL=styles.js.map

package/lib/components/TokenUsage/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/TokenUsage/styles.ts"],"names":[],"mappings":"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"}

package/lib/components/TokenUsage/types.d.ts

@@ -0,0 +1,6 @@
+export type TokenUsageComponents = {
+    accordion: any;
+    accordionItem: any;
+    textField: any;
+};
+export type NotifyHook = () => (text: string, isError?: boolean) => void;

package/lib/components/TokenUsage/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/lib/components/TokenUsage/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/TokenUsage/types.ts"],"names":[],"mappings":""}

package/lib/components/index.d.ts

@@ -6,6 +6,7 @@ export { ThemeColors } from './ThemeColors';
 export { withReactStrictMode, reactStrictModePreviewOption } from './ReactStrictModeDecorator';
 export { disabledToolsParameters } from './disabledToolsParameters';
 export * from './Accordion';
+export * from './Breadcrumbs';
 export * from './Button';
 export * from './EmbeddedButton';
 export * from './TextField';
@@ -42,10 +43,10 @@ export * from './Progress';
 export * from './Steps';
 export * from './Attach';
 export * from './Badge';
-export * from './Spinner';
 export * from './CodeField';
 export * from './CodeInput';
 export * from './CodeArea';
 export * from './Rating';
 export * from './Tabs';
 export * from './_ai';
+export * from './TokenUsage';

package/lib/components/index.js

@@ -6,6 +6,7 @@ export { ThemeColors } from './ThemeColors';
 export { withReactStrictMode, reactStrictModePreviewOption } from './ReactStrictModeDecorator';
 export { disabledToolsParameters } from './disabledToolsParameters';
 export * from './Accordion';
+export * from './Breadcrumbs';
 export * from './Button';
 export * from './EmbeddedButton';
 export * from './TextField';
@@ -42,11 +43,11 @@ export * from './Progress';
 export * from './Steps';
 export * from './Attach';
 export * from './Badge';
-export * from './Spinner';
 export * from './CodeField';
 export * from './CodeInput';
 export * from './CodeArea';
 export * from './Rating';
 export * from './Tabs';
 export * from './_ai';
+export * from './TokenUsage';
 //# sourceMappingURL=index.js.map

package/lib/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,4BAA4B,EAAE,MAAM,4BAA4B,CAAC;AAC/F,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AACxC,cAAc,YAAY,CAAC;AAC3B,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AACtD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,4BAA4B,EAAE,MAAM,4BAA4B,CAAC;AAC/F,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AACxC,cAAc,YAAY,CAAC;AAC3B,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AACtD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC"}

package/lib/helpers/index.d.ts

@@ -5,6 +5,9 @@ export { getGroupedCornerRadiusTokens, getGroupedSpacingTokens } from './numberT
 export { getOpacityFromHex, getGroupedTokens, upperFirstLetter } from './colorTokens';
 export { getGroupedTypographyTokens, typographyPangrams, typographyToCssMap } from './typographyTokens';
 export { getConfigVariations } from './getConfigVariations';
+export { collectTokenUsage, searchTokens, getUsageCount, groupUsagesByComponent, groupUsagesByVariation, getTokenInfo, getTokenKind, getComputedTokenValue, collapseTypographyProperty, getTypographyStyle, plural, } from './tokenUsage';
+export { convertTheme } from './convertTheme';
 export type { GroupedTokens, TokenData } from './colorTokens';
 export type { GroupedNumberTokens } from './numberTokens';
 export type { TypographyStructure, TypographyProperties, Breakpoint, TypographyWeight } from './typographyTokens';
+export type { TokenUsageEntry, TokenUsageIndex, TokenKind } from './tokenUsage';

package/lib/helpers/index.js

@@ -5,4 +5,6 @@ export { getGroupedCornerRadiusTokens, getGroupedSpacingTokens } from './numberT
 export { getOpacityFromHex, getGroupedTokens, upperFirstLetter } from './colorTokens';
 export { getGroupedTypographyTokens, typographyPangrams, typographyToCssMap } from './typographyTokens';
 export { getConfigVariations } from './getConfigVariations';
+export { collectTokenUsage, searchTokens, getUsageCount, groupUsagesByComponent, groupUsagesByVariation, getTokenInfo, getTokenKind, getComputedTokenValue, collapseTypographyProperty, getTypographyStyle, plural, } from './tokenUsage';
+export { convertTheme } from './convertTheme';
 //# sourceMappingURL=index.js.map

package/lib/helpers/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/helpers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,4BAA4B,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AACvF,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtF,OAAO,EAAE,0BAA0B,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxG,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/helpers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,4BAA4B,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AACvF,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtF,OAAO,EAAE,0BAA0B,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxG,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EACH,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,sBAAsB,EACtB,sBAAsB,EACtB,YAAY,EACZ,YAAY,EACZ,qBAAqB,EACrB,0BAA0B,EAC1B,kBAAkB,EAClB,MAAM,GACT,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/lib/helpers/tokenUsage.d.ts

@@ -0,0 +1,56 @@
+type ThemeTokens = Record<string, string>;
+export type TokenUsageEntry = {
+    component: string;
+    /** Конфигурация компонента: `clear` */
+    variant: string;
+    /** `view`, `size`, `disabled` */
+    variation: string;
+    /** `accent`, `m` */
+    value: string;
+    /** Куда попал токен: `--plasma-button-text-color` */
+    property: string;
+    /** Промежуточные переменные компонента, если токен пришёл через алиас */
+    via: string[];
+};
+export type TokenUsageIndex = {
+    /** имя токена -> где используется */
+    byToken: Record<string, TokenUsageEntry[]>;
+    /** Токен -> его css-переменные */
+    cssVarsByToken: Record<string, string[]>;
+    /** Все токены темы, включая неиспользуемые */
+    tokenKeys: string[];
+    usedTokenKeys: string[];
+    stats: {
+        components: number;
+        tokens: number;
+        usedTokens: number;
+        usages: number;
+    };
+};
+export declare const getTokenKey: (cssVar: string) => string;
+export declare const collapseTypographyProperty: (property: string) => string;
+export declare const stringifyCss: (value: unknown, depth?: number) => string;
+/**
+ * @param configModules результат `import.meta.glob` по конфигам пакета, `{ eager: true }`
+ * @param themeTokens результат `convertTheme(theme[0])`
+ */
+export declare const collectTokenUsage: (configModules: Record<string, unknown>, themeTokens: ThemeTokens) => TokenUsageIndex;
+export declare const getUsageCount: (index: TokenUsageIndex, token: string) => number;
+/**
+ * Поиск по всей теме, неиспользуемые токены в конце.
+ */
+export declare const searchTokens: (index: TokenUsageIndex, query: string) => string[];
+export declare const groupUsagesByComponent: (usages: TokenUsageEntry[]) => [string, TokenUsageEntry[]][];
+export declare const groupUsagesByVariation: (usages: TokenUsageEntry[]) => [string, TokenUsageEntry[]][];
+export type TokenKind = 'color' | 'typography' | 'shadow' | 'number' | 'other';
+export declare const getTokenKind: (cssVar?: string) => TokenKind;
+export declare const getTypographyStyle: (cssVars?: string[]) => Record<string, string>;
+/** `plural(2, ['токен', 'токена', 'токенов'])` -> `токена` */
+export declare const plural: (count: number, forms: [string, string, string]) => string;
+export declare const getComputedTokenValue: (cssVar: string | undefined, themeTokens: ThemeTokens) => string | undefined;
+export declare const getTokenInfo: (index: TokenUsageIndex, themeTokens: ThemeTokens, token: string) => {
+    cssVars: string[];
+    kind: TokenKind;
+    value: string | undefined;
+};
+export {};