@weavix/tracker-components 0.1.2 → 0.1.4

package/README.md

@@ -1,6 +1,6 @@
 # @weavix/tracker-components
 
-Shared UI component library for **Yandex Tracker plugins**. Provides ready-made React components for selecting queues, fields, and meta entities (projects, portfolios, goals), displaying issue-type and entity icons, and building collapsible sections — all styled to match the Tracker design system.
+Shared UI component library for **Yandex Tracker plugins**. Provides ready-made React components for selecting queues, fields, and meta entities (projects, portfolios, goals), displaying issue-type, priority, status, and entity icons, and building collapsible sections — all styled to match the Tracker design system.
 
 ---
 
@@ -35,6 +35,8 @@ pnpm add @weavix/tracker-components
 | Component | Description | README |
 |---|---|---|
 | [`IssueTypeIcon`](#issuetypeicon) | Icon for a Tracker issue type (task, bug, epic, …). | [→ README](src/components/Icon/IssueTypeIcon/README.md) |
+| [`PriorityIcon`](#priorityicon) | Icon for an issue priority level (blocker, critical, normal, …). Supports optional colored background. | [→ README](src/components/Icon/PriorityIcon/README.md) |
+| [`StatusIcon`](#statusicon) | Icon for a Tracker issue status. Maps `IssueStatus` values to distinct icons and colors. | [→ README](src/components/Icon/StatusIcon/README.md) |
 | [`MetaEntityIcon`](#metaentityicon) | Dispatcher icon that renders the correct icon for any meta entity type (project, portfolio, goal, key result). | [→ README](src/components/Icon/MetaEntityIcon/README.md) |
 | [`ProjectIcon`](#projecticon) | Colored icon for a project entity. Color is deterministically derived from the project ID. | [→ README](src/components/Icon/ProjectIcon/README.md) |
 | [`PortfolioIcon`](#portfolioicon) | Colored icon for a portfolio entity. Color is deterministically derived from the portfolio ID. | [→ README](src/components/Icon/PortfolioIcon/README.md) |
@@ -125,6 +127,32 @@ import {IssueTypeIcon} from '@weavix/tracker-components';
 
 ---
 
+### PriorityIcon
+
+```tsx
+import {PriorityIcon} from '@weavix/tracker-components';
+
+<PriorityIcon priority="critical" />
+<PriorityIcon priority="blocker" showBackground backgroundSize={32} />
+```
+
+→ Full documentation: [src/components/Icon/PriorityIcon/README.md](src/components/Icon/PriorityIcon/README.md)
+
+---
+
+### StatusIcon
+
+```tsx
+import {StatusIcon} from '@weavix/tracker-components';
+
+<StatusIcon statusType="inProgress" />
+<StatusIcon statusType="done" size={24} title="Done" />
+```
+
+→ Full documentation: [src/components/Icon/StatusIcon/README.md](src/components/Icon/StatusIcon/README.md)
+
+---
+
 ### MetaEntityIcon
 
 ```tsx

package/build/cjs/components/Icon/PriorityIcon/PriorityIcon.classname.d.ts

@@ -0,0 +1 @@
+export declare const cnPriorityIcon: import("@bem-react/classname").ClassNameFormatter;

package/build/cjs/components/Icon/PriorityIcon/PriorityIcon.classname.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cnPriorityIcon = void 0;
+var _cn = require("./../../cn");
+var cnPriorityIcon = exports.cnPriorityIcon = (0, _cn.block)('priority-icon');
+// #sourceMappingURL=PriorityIcon.classname.js.map

package/build/cjs/components/Icon/PriorityIcon/PriorityIcon.classname.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_cn","require","cnPriorityIcon","exports","block"],"sources":["PriorityIcon.classname.ts"],"sourcesContent":["import {block} from '~/src/components/cn';\n\nexport const cnPriorityIcon = block('priority-icon');\n"],"mappings":";;;;;;AAAA,IAAAA,GAAA,GAAAC,OAAA;AAEO,IAAMC,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAG,IAAAE,SAAK,EAAC,eAAe,CAAC","ignoreList":[]}

package/build/cjs/components/Icon/PriorityIcon/PriorityIcon.css

@@ -0,0 +1,45 @@
+.tpc-priority-icon_priority_blocker {
+  color: var(--g-color-text-danger);
+}
+.tpc-priority-icon_priority_critical {
+  color: var(--g-color-text-warning-heavy);
+}
+.tpc-priority-icon_priority_critical.tpc-priority-icon_metaEntity {
+  color: var(--g-color-text-danger-heavy);
+}
+.tpc-priority-icon_priority_important {
+  color: var(--g-color-text-warning);
+}
+.tpc-priority-icon_priority_trivial {
+  color: var(--g-color-text-hint);
+}
+.tpc-priority-icon_priority_normal, .tpc-priority-icon_priority_minor, .tpc-priority-icon_priority_minimal {
+  color: var(--g-color-text-secondary);
+}
+.tpc-priority-icon__background {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+.tpc-priority-icon__background_priority_blocker {
+  background: var(--g-color-base-danger-light);
+}
+.tpc-priority-icon__background_priority_critical {
+  background: var(--g-color-base-warning-light);
+}
+.tpc-priority-icon__background_priority_critical.tpc-priority-icon-background_metaEntity {
+  background: var(--g-color-base-danger-light);
+}
+.tpc-priority-icon__background_priority_important {
+  background: var(--g-color-base-warning-light);
+}
+.tpc-priority-icon__background_priority_trivial {
+  background: var(--g-color-base-neutral-light);
+}
+.tpc-priority-icon__background_priority_normal, .tpc-priority-icon__background_priority_minor, .tpc-priority-icon__background_priority_minimal {
+  background: var(--g-color-base-neutral-light);
+}
+/*# sourceMappingURL=PriorityIcon.css.map */

package/build/cjs/components/Icon/PriorityIcon/PriorityIcon.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PriorityIcon.scss"],"names":[],"mappings":"AACI;EACI,iCAAA;AAAR;AAGI;EACI,wCAAA;AADR;AAGQ;EACI,uCAAA;AADZ;AAKI;EACI,kCAAA;AAHR;AAMI;EACI,+BAAA;AAJR;AAOI;EAGI,oCAAA;AAPR;AAUI;EACI,aAAA;EACA,mBAAA;EACA,uBAAA;EAEA,WAAA;EACA,YAAA;EAEA,kBAAA;AAVR;AAaI;EACI,4CAAA;AAXR;AAcI;EACI,6CAAA;AAZR;AAcQ;EACI,4CAAA;AAZZ;AAgBI;EACI,6CAAA;AAdR;AAiBI;EACI,6CAAA;AAfR;AAkBI;EAGI,6CAAA;AAlBR","file":"PriorityIcon.css","sourcesContent":[".tpc-priority-icon {\n    &_priority_blocker {\n        color: var(--g-color-text-danger);\n    }\n\n    &_priority_critical {\n        color: var(--g-color-text-warning-heavy);\n\n        &.tpc-priority-icon_metaEntity {\n            color: var(--g-color-text-danger-heavy);\n        }\n    }\n\n    &_priority_important {\n        color: var(--g-color-text-warning);\n    }\n\n    &_priority_trivial {\n        color: var(--g-color-text-hint);\n    }\n\n    &_priority_normal,\n    &_priority_minor,\n    &_priority_minimal {\n        color: var(--g-color-text-secondary);\n    }\n\n    &__background {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        width: 100%;\n        height: 100%;\n\n        border-radius: 50%;\n    }\n\n    &__background_priority_blocker {\n        background: var(--g-color-base-danger-light);\n    }\n\n    &__background_priority_critical {\n        background: var(--g-color-base-warning-light);\n\n        &.tpc-priority-icon-background_metaEntity {\n            background: var(--g-color-base-danger-light);\n        }\n    }\n\n    &__background_priority_important {\n        background: var(--g-color-base-warning-light);\n    }\n\n    &__background_priority_trivial {\n        background: var(--g-color-base-neutral-light);\n    }\n\n    &__background_priority_normal,\n    &__background_priority_minor,\n    &__background_priority_minimal {\n        background: var(--g-color-base-neutral-light);\n    }\n}\n"],"sourceRoot":""}

package/build/cjs/components/Icon/PriorityIcon/PriorityIcon.d.ts

@@ -0,0 +1,13 @@
+import { type FC } from 'react';
+import type { IconRefugeProps } from '../IconRefuge';
+import type { Priority } from './types';
+import './PriorityIcon.scss';
+export type PriorityIconProps = Partial<Pick<IconRefugeProps, 'containerClassName' | 'title'>> & {
+    className?: string;
+    size?: number;
+    priority?: Priority;
+    showBackground?: boolean;
+    backgroundSize?: number;
+    metaEntity?: boolean;
+};
+export declare const PriorityIcon: FC<PriorityIconProps>;

package/build/cjs/components/Icon/PriorityIcon/PriorityIcon.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PriorityIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _icons = require("@gravity-ui/icons");
+var _uikit = require("@gravity-ui/uikit");
+var _useLocalizedString2 = require("./../../../hooks/useLocalizedString");
+var _IconRefuge = require("../IconRefuge");
+var _PriorityIcon = require("./PriorityIcon.classname");
+var _i18n = require("./i18n");
+require("./PriorityIcon.css");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var getIconData = function getIconData(priority, metaEntity) {
+  switch (priority) {
+    case 'blocker':
+      return _icons.CircleExclamation;
+    case 'critical':
+      return metaEntity ? _icons.CircleExclamation : _icons.ChevronsUpWide;
+    case 'minor':
+      return _icons.ChevronDownWide;
+    case 'trivial':
+    case 'minimal':
+      return _icons.ChevronsDownWide;
+    case 'important':
+      return _icons.ChevronUpWide;
+    default:
+      return _icons.Equal;
+  }
+};
+var PriorityIcon = exports.PriorityIcon = function PriorityIcon(_ref) {
+  var className = _ref.className,
+    containerClassName = _ref.containerClassName,
+    _ref$priority = _ref.priority,
+    priority = _ref$priority === void 0 ? 'normal' : _ref$priority,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    title = _ref.title,
+    showBackground = _ref.showBackground,
+    backgroundSize = _ref.backgroundSize,
+    metaEntity = _ref.metaEntity;
+  var config = (0, _uikit.getConfig)();
+  var _useLocalizedString = (0, _useLocalizedString2.useLocalizedString)(_i18n.defaultMessages, config.lang),
+    t = _useLocalizedString.t;
+  var ariaLabel = title ? t('priority-label', {
+    priority: title
+  }) : undefined;
+  var iconNode = /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconRefuge.IconRefuge, {
+    containerClassName: containerClassName,
+    className: (0, _PriorityIcon.cnPriorityIcon)({
+      priority: priority,
+      metaEntity: metaEntity
+    }, className),
+    data: getIconData(priority, metaEntity),
+    refugeSize: size,
+    title: title,
+    "aria-label": ariaLabel,
+    "aria-hidden": !title || undefined
+  });
+  if (!showBackground) {
+    return iconNode;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _PriorityIcon.cnPriorityIcon)('background', {
+      priority: priority,
+      metaEntity: metaEntity
+    }),
+    style: backgroundSize ? {
+      width: backgroundSize,
+      height: backgroundSize,
+      minWidth: backgroundSize
+    } : undefined,
+    children: iconNode
+  });
+};
+PriorityIcon.displayName = 'PriorityIcon';
+// #sourceMappingURL=PriorityIcon.js.map

package/build/cjs/components/Icon/PriorityIcon/PriorityIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_icons","_uikit","_useLocalizedString2","_IconRefuge","_PriorityIcon","_i18n","_jsxRuntime","e","__esModule","default","getIconData","priority","metaEntity","CircleExclamation","ChevronsUpWide","ChevronDownWide","ChevronsDownWide","ChevronUpWide","Equal","PriorityIcon","exports","_ref","className","containerClassName","_ref$priority","_ref$size","size","title","showBackground","backgroundSize","config","getConfig","_useLocalizedString","useLocalizedString","defaultMessages","lang","t","ariaLabel","undefined","iconNode","_jsx","IconRefuge","cnPriorityIcon","data","refugeSize","style","width","height","minWidth","children","displayName"],"sources":["PriorityIcon.tsx"],"sourcesContent":["import React, {type FC} from 'react';\n\nimport {\n    ChevronDownWide,\n    ChevronUpWide,\n    ChevronsDownWide,\n    ChevronsUpWide,\n    CircleExclamation,\n    Equal,\n} from '@gravity-ui/icons';\nimport {type IconData, getConfig} from '@gravity-ui/uikit';\n\nimport {useLocalizedString} from '~/src/hooks/useLocalizedString';\n\nimport type {IconRefugeProps} from '../IconRefuge';\nimport {IconRefuge} from '../IconRefuge';\n\nimport {cnPriorityIcon} from './PriorityIcon.classname';\nimport {defaultMessages} from './i18n';\nimport type {Priority} from './types';\n\nimport './PriorityIcon.scss';\n\nexport type PriorityIconProps = Partial<Pick<IconRefugeProps, 'containerClassName' | 'title'>> & {\n    className?: string;\n    size?: number;\n    priority?: Priority;\n    showBackground?: boolean;\n    backgroundSize?: number;\n    metaEntity?: boolean;\n};\n\nconst getIconData = (priority: Priority, metaEntity?: boolean): IconData => {\n    switch (priority) {\n        case 'blocker':\n            return CircleExclamation;\n        case 'critical':\n            return metaEntity ? CircleExclamation : ChevronsUpWide;\n        case 'minor':\n            return ChevronDownWide;\n        case 'trivial':\n        case 'minimal':\n            return ChevronsDownWide;\n        case 'important':\n            return ChevronUpWide;\n        default:\n            return Equal;\n    }\n};\n\nexport const PriorityIcon: FC<PriorityIconProps> = ({\n    className,\n    containerClassName,\n    priority = 'normal',\n    size = 16,\n    title,\n    showBackground,\n    backgroundSize,\n    metaEntity,\n}) => {\n    const config = getConfig();\n    const {t} = useLocalizedString(defaultMessages, config.lang);\n    const ariaLabel = title ? t('priority-label', {priority: title}) : undefined;\n\n    const iconNode = (\n        <IconRefuge\n            containerClassName={containerClassName}\n            className={cnPriorityIcon({priority, metaEntity}, className)}\n            data={getIconData(priority, metaEntity)}\n            refugeSize={size}\n            title={title}\n            aria-label={ariaLabel}\n            aria-hidden={!title || undefined}\n        />\n    );\n\n    if (!showBackground) {\n        return iconNode;\n    }\n\n    return (\n        <div\n            className={cnPriorityIcon('background', {priority, metaEntity})}\n            style={\n                backgroundSize\n                    ? {\n                          width: backgroundSize,\n                          height: backgroundSize,\n                          minWidth: backgroundSize,\n                      }\n                    : undefined\n            }\n        >\n            {iconNode}\n        </div>\n    );\n};\n\nPriorityIcon.displayName = 'PriorityIcon';\n"],"mappings":"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","ignoreList":[]}

package/build/cjs/components/Icon/PriorityIcon/README.md

@@ -0,0 +1,172 @@
+# PriorityIcon
+
+<!-- description:start -->
+Displays the icon for a Tracker issue priority level (blocker, critical, normal, minor, etc.). Each priority maps to a distinct icon and color. Unknown priority keys fall back to the normal icon.
+<!-- description:end -->
+
+## Usage
+
+```tsx
+import {PriorityIcon} from '@weavix/tracker-components';
+
+<PriorityIcon priority="critical" />
+```
+
+## Component props
+
+<!-- props:start -->
+```ts
+{
+    /**
+     * Priority key. Known values are listed below; any other string is
+     * accepted and falls back to the normal icon.
+     */
+    priority?:
+        | 'blocker'
+        | 'critical'
+        | 'important'
+        | 'minor'
+        | 'minimal'
+        | 'normal'
+        | 'trivial'
+        | string;
+
+    /**
+     * Size of the icon in pixels.
+     * @default 16
+     */
+    size?: number;
+
+    /**
+     * Additional CSS class applied to the icon element.
+     */
+    className?: string;
+
+    /**
+     * Additional CSS class applied to the outer container element.
+     */
+    containerClassName?: string;
+
+    /**
+     * Human-readable display name for the priority (e.g. `"Critical"`, `"Normal"`).
+     * When provided, an accessible label `"Priority: <title>"` is rendered for
+     * screen readers. When omitted, the icon is treated as decorative (`aria-hidden`).
+     */
+    title?: string;
+
+    /**
+     * When true, renders a circular colored background behind the icon.
+     */
+    showBackground?: boolean;
+
+    /**
+     * Size of the background circle in pixels. Only used when `showBackground` is true.
+     */
+    backgroundSize?: number;
+
+    /**
+     * When true, applies meta-entity color variants (e.g. `critical` uses
+     * the blocker icon and danger color instead of warning).
+     */
+    metaEntity?: boolean;
+}
+```
+<!-- props:end -->
+
+---
+
+## Examples
+
+### Single icon
+
+```tsx
+import {PriorityIcon} from '@weavix/tracker-components';
+
+<PriorityIcon priority="blocker" />
+<PriorityIcon priority="critical" />
+<PriorityIcon priority="normal" />
+```
+
+### Custom size
+
+```tsx
+<PriorityIcon priority="critical" size={24} />
+<PriorityIcon priority="critical" size={32} />
+```
+
+### With background
+
+```tsx
+<PriorityIcon priority="blocker" showBackground backgroundSize={32} />
+```
+
+### Alongside issue summary
+
+```tsx
+import {PriorityIcon} from '@weavix/tracker-components';
+
+export const IssueRow = ({issue}: {issue: {priority: string; summary: string}}) => (
+    <div style={{display: 'flex', alignItems: 'center', gap: 8}}>
+        <PriorityIcon priority={issue.priority} size={16} />
+        <span>{issue.summary}</span>
+    </div>
+);
+```
+
+### All known priorities
+
+```tsx
+import {PriorityIcon} from '@weavix/tracker-components';
+
+const PRIORITIES = [
+    'blocker', 'critical', 'important', 'normal', 'minor', 'minimal', 'trivial',
+] as const;
+
+export const PriorityGallery = () => (
+    <div style={{display: 'flex', flexWrap: 'wrap', gap: 16}}>
+        {PRIORITIES.map((p) => (
+            <div key={p} style={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4}}>
+                <PriorityIcon priority={p} size={24} />
+                <span style={{fontSize: 11}}>{p}</span>
+            </div>
+        ))}
+    </div>
+);
+```
+
+### From Tracker API
+
+Requires the `"tracker:issues:read"` permission in your plugin's `manifest.json`:
+
+```json
+{
+    "permissions": {
+        "data": ["tracker:issues:read"]
+    }
+}
+```
+
+```tsx
+import {PriorityIcon} from '@weavix/tracker-components';
+
+const priority = await trackerApi.v3.get['/issues/{id}/{field}']({
+    pathParams: {
+        id: 'ISSUEKEY-1',
+        field: 'priority',
+    },
+});
+
+<PriorityIcon
+    priority={priority.data.key}
+    title={priority.data.display}
+/>
+```
+
+---
+
+## Notes
+
+- The `priority` value is matched case-sensitively against the known keys. Values returned by the Tracker API (e.g. `"blocker"`, `"critical"`) match directly without transformation.
+- Passing an unknown string does not throw — the component renders the normal (default) icon.
+- When `title` is omitted the icon is treated as decorative and gets `aria-hidden="true"`. Pass `title` (e.g. `priority.display` from the API) to make the icon accessible.
+- The `metaEntity` prop changes the icon and color for `critical` priority to match the blocker appearance, used in meta-entity contexts like goals and projects.

package/build/cjs/components/Icon/PriorityIcon/i18n.d.ts

@@ -0,0 +1,6 @@
+export declare const defaultMessages: {
+    'priority-label': {
+        ru: string;
+        en: string;
+    };
+};

package/build/cjs/components/Icon/PriorityIcon/i18n.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultMessages = void 0;
+var defaultMessages = exports.defaultMessages = {
+  'priority-label': {
+    ru: 'Приоритет: {priority}',
+    en: 'Priority: {priority}'
+  }
+};
+// #sourceMappingURL=i18n.js.map

package/build/cjs/components/Icon/PriorityIcon/i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["defaultMessages","exports","ru","en"],"sources":["i18n.ts"],"sourcesContent":["export const defaultMessages = {\n    'priority-label': {\n        ru: 'Приоритет: {priority}',\n        en: 'Priority: {priority}',\n    },\n};\n"],"mappings":";;;;;;AAAO,IAAMA,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG;EAC3B,gBAAgB,EAAE;IACdE,EAAE,EAAE,uBAAuB;IAC3BC,EAAE,EAAE;EACR;AACJ,CAAC","ignoreList":[]}

package/build/cjs/components/Icon/PriorityIcon/index.d.ts

@@ -0,0 +1,3 @@
+export { PriorityIcon } from './PriorityIcon';
+export type { PriorityIconProps } from './PriorityIcon';
+export type { Priority } from './types';

package/build/cjs/components/Icon/PriorityIcon/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "PriorityIcon", {
+  enumerable: true,
+  get: function () {
+    return _PriorityIcon.PriorityIcon;
+  }
+});
+var _PriorityIcon = require("./PriorityIcon");
+// #sourceMappingURL=index.js.map

package/build/cjs/components/Icon/PriorityIcon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_PriorityIcon","require"],"sources":["index.ts"],"sourcesContent":["export {PriorityIcon} from './PriorityIcon';\nexport type {PriorityIconProps} from './PriorityIcon';\nexport type {Priority} from './types';\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA","ignoreList":[]}

package/build/cjs/components/Icon/PriorityIcon/types.d.ts

@@ -0,0 +1 @@
+export type Priority = 'blocker' | 'critical' | 'important' | 'minor' | 'minimal' | 'normal' | 'trivial';

package/build/cjs/components/Icon/PriorityIcon/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+// #sourceMappingURL=types.js.map

package/build/cjs/components/Icon/PriorityIcon/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["export type Priority =\n    | 'blocker'\n    | 'critical'\n    | 'important'\n    | 'minor'\n    | 'minimal'\n    | 'normal'\n    | 'trivial';\n"],"mappings":"","ignoreList":[]}

package/build/cjs/components/Icon/StatusIcon/README.md

@@ -0,0 +1,128 @@
+# StatusIcon
+
+<!-- description:start -->
+Displays the icon for a Tracker issue status. Each status type maps to a distinct SVG icon and color. Unknown status keys fall back to a question-mark icon.
+<!-- description:end -->
+
+## Usage
+
+```tsx
+import {StatusIcon} from '@weavix/tracker-components';
+
+<StatusIcon statusType="inProgress" />
+```
+
+## Component props
+
+<!-- props:start -->
+```ts
+{
+    /**
+     * Status type/key from the Tracker API. Accepts `IssueStatus` values.
+     * Unknown values fall back to a question-mark icon.
+     */
+    statusType?:
+        | 'new'
+        | 'inProgress'
+        | 'paused'
+        | 'done'
+        | 'cancelled'
+        | 'unknown'
+        | string;
+
+    /**
+     * Size of the icon in pixels.
+     * @default 16
+     */
+    size?: number;
+
+    /**
+     * Additional CSS class applied to the icon element.
+     */
+    className?: string;
+
+    /**
+     * Additional CSS class applied to the outer container element.
+     */
+    containerClassName?: string;
+
+    /**
+     * Human-readable status name (e.g. `"In progress"`, `"Done"`).
+     * When provided, an accessible label `"Status: <title>"` is rendered for
+     * screen readers. When omitted, the icon is treated as decorative (`aria-hidden`).
+     */
+    title?: string;
+}
+```
+<!-- props:end -->
+
+---
+
+## Examples
+
+### Single icon
+
+```tsx
+import {StatusIcon} from '@weavix/tracker-components';
+
+<StatusIcon statusType="new" />
+<StatusIcon statusType="inProgress" />
+<StatusIcon statusType="done" />
+```
+
+### Custom size
+
+```tsx
+<StatusIcon statusType="inProgress" size={24} />
+<StatusIcon statusType="inProgress" size={32} />
+```
+
+### Alongside issue summary
+
+```tsx
+import {StatusIcon} from '@weavix/tracker-components';
+
+export const IssueRow = ({issue}: {issue: {statusType: string; summary: string}}) => (
+    <div style={{display: 'flex', alignItems: 'center', gap: 8}}>
+        <StatusIcon statusType={issue.statusType} size={16} />
+        <span>{issue.summary}</span>
+    </div>
+);
+```
+
+### From Tracker API — issue status
+
+Requires the `"tracker:issues:read"` permission in your plugin's `manifest.json`:
+
+```json
+{
+    "permissions": {
+        "data": ["tracker:issues:read"]
+    }
+}
+```
+
+```tsx
+import {StatusIcon} from '@weavix/tracker-components';
+
+const status = await trackerApi.v3.get['/issues/{id}/{field}']({
+    pathParams: {
+        id: 'ISSUEKEY-1',
+        field: 'status',
+    },
+});
+
+<StatusIcon
+    statusType={status.data.key}
+    title={status.data.display}
+/>
+```
+
+---
+
+## Notes
+
+- The `statusType` value is matched case-sensitively. Values returned by the Tracker API match directly without transformation.
+- Passing an unknown string does not throw — the component renders a question-mark fallback icon.
+- When `title` is omitted the icon is treated as decorative and gets `aria-hidden="true"`. Pass `title` (e.g. `status.display` from the API) to make the icon accessible.
+- The component accepts the `IssueStatus` type union (issue statuses), which is exported from the package.

package/build/cjs/components/Icon/StatusIcon/StatusIcon.classname.d.ts

@@ -0,0 +1 @@
+export declare const cnStatusIcon: import("@bem-react/classname").ClassNameFormatter;

package/build/cjs/components/Icon/StatusIcon/StatusIcon.classname.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cnStatusIcon = void 0;
+var _cn = require("./../../cn");
+var cnStatusIcon = exports.cnStatusIcon = (0, _cn.block)('status-icon');
+// #sourceMappingURL=StatusIcon.classname.js.map

package/build/cjs/components/Icon/StatusIcon/StatusIcon.classname.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_cn","require","cnStatusIcon","exports","block"],"sources":["StatusIcon.classname.ts"],"sourcesContent":["import {block} from '~/src/components/cn';\n\nexport const cnStatusIcon = block('status-icon');\n"],"mappings":";;;;;;AAAA,IAAAA,GAAA,GAAAC,OAAA;AAEO,IAAMC,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,IAAAE,SAAK,EAAC,aAAa,CAAC","ignoreList":[]}

package/build/cjs/components/Icon/StatusIcon/StatusIcon.css

@@ -0,0 +1,28 @@
+.tpc-status-icon_status_new, .tpc-status-icon_status_draft {
+  color: var(--g-color-text-misc-heavy);
+}
+.tpc-status-icon_status_inProgress, .tpc-status-icon_status_in_progress {
+  color: var(--g-color-text-info);
+}
+.tpc-status-icon_status_paused, .tpc-status-icon_status_at_risk {
+  color: var(--g-color-text-warning-heavy);
+}
+.tpc-status-icon_status_postponed, .tpc-status-icon_status_draft2 {
+  color: var(--g-color-base-neutral-heavy);
+}
+.tpc-status-icon_status_done, .tpc-status-icon_status_launched, .tpc-status-icon_status_achieved, .tpc-status-icon_status_partially_achieved, .tpc-status-icon_status_according_to_plan {
+  color: var(--g-color-text-positive);
+}
+.tpc-status-icon_status_cancelled {
+  color: var(--g-color-text-complementary);
+}
+.tpc-status-icon_status_blocked, .tpc-status-icon_status_not_achieved {
+  color: var(--g-color-text-danger-heavy);
+}
+.tpc-status-icon_status_exceeded {
+  color: var(--g-color-text-utility);
+}
+.tpc-status-icon_status_unknown {
+  color: var(--g-color-text-misc-heavy);
+}
+/*# sourceMappingURL=StatusIcon.css.map */

package/build/cjs/components/Icon/StatusIcon/StatusIcon.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["StatusIcon.scss"],"names":[],"mappings":"AACI;EAEI,qCAAA;AADR;AAII;EAEI,+BAAA;AAHR;AAMI;EAEI,wCAAA;AALR;AAQI;EAEI,wCAAA;AAPR;AAUI;EAKI,mCAAA;AAZR;AAeI;EACI,wCAAA;AAbR;AAgBI;EAEI,uCAAA;AAfR;AAkBI;EACI,kCAAA;AAhBR;AAmBI;EACI,qCAAA;AAjBR","file":"StatusIcon.css","sourcesContent":[".tpc-status-icon {\n    &_status_new,\n    &_status_draft {\n        color: var(--g-color-text-misc-heavy);\n    }\n\n    &_status_inProgress,\n    &_status_in_progress {\n        color: var(--g-color-text-info);\n    }\n\n    &_status_paused,\n    &_status_at_risk {\n        color: var(--g-color-text-warning-heavy);\n    }\n\n    &_status_postponed,\n    &_status_draft2 {\n        color: var(--g-color-base-neutral-heavy);\n    }\n\n    &_status_done,\n    &_status_launched,\n    &_status_achieved,\n    &_status_partially_achieved,\n    &_status_according_to_plan {\n        color: var(--g-color-text-positive);\n    }\n\n    &_status_cancelled {\n        color: var(--g-color-text-complementary);\n    }\n\n    &_status_blocked,\n    &_status_not_achieved {\n        color: var(--g-color-text-danger-heavy);\n    }\n\n    &_status_exceeded {\n        color: var(--g-color-text-utility);\n    }\n\n    &_status_unknown {\n        color: var(--g-color-text-misc-heavy);\n    }\n}\n"],"sourceRoot":""}

package/build/cjs/components/Icon/StatusIcon/StatusIcon.d.ts

@@ -0,0 +1,10 @@
+import { type FC } from 'react';
+import { type IconRefugeProps } from '../IconRefuge';
+import type { GoalStatus, IssueStatus, MetaEntityStatus } from './types';
+import './StatusIcon.scss';
+export type StatusIconProps = Partial<Pick<IconRefugeProps, 'containerClassName' | 'title'>> & {
+    statusType?: IssueStatus | MetaEntityStatus | GoalStatus;
+    size?: number;
+    className?: string;
+};
+export declare const StatusIcon: FC<StatusIconProps>;