@rio-cloud/uikit-mcp 1.1.5 → 1.1.7

package/dist/docs/components/tracker.md

@@ -0,0 +1,631 @@
+# Tracker
+
+*Category:* Components
+*Section:* Progress
+*Source:* https://uikit.developers.rio.cloud/#/components/tracker
+*Captured:* 2026-02-23T15:48:36.501Z
+
+Compact visual tracker component for status indicators with optional per-block color and tooltip support.
+
+## Tracker
+
+### Example: Example 1
+
+Default Tracker
+
+Collapse when custom min width is reached, showing last items
+
+Compression without collapsing - overflowing content
+
+#### Summary
+
+Default Tracker
+
+Collapse when custom min width is reached, showing last items
+
+Compression without collapsing - overflowing content
+
+#### React (tsx)
+
+```tsx
+import Tracker from '@rio-cloud/rio-uikit/Tracker';
+import Notification from '@rio-cloud/rio-uikit/Notification';
+
+const data = [
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    {
+        id: '12345',
+        color: 'bg-danger',
+        tooltip: 'Error',
+        onClick: (id: string) => Notification.info(`Tracker block "${id}" clicked`),
+    },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    {
+        id: '134565',
+        color: 'bg-danger',
+        tooltip: 'Error',
+        onClick: (id: string) => Notification.info(`Tracker block "${id}" clicked`),
+    },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    {
+        id: '45678',
+        color: 'bg-warning',
+        tooltip: 'Warn',
+        onClick: (id: string) => Notification.info(`Tracker block "${id}" clicked`),
+    },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { color: 'bg-gray', tooltip: 'Tracker Info' },
+    { color: 'bg-gray', tooltip: 'Tracker Info' },
+    { color: 'bg-gray', tooltip: 'Tracker Info' },
+    { color: 'bg-gray', tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+    { tooltip: 'Tracker Info' },
+];
+
+export default () => (
+    <div>
+        <div className='margin-bottom-15'>
+            <label>Default Tracker</label>
+            <Tracker data={data} hoverEffect />
+        </div>
+
+        <div className='margin-bottom-15'>
+            <label>Collapse when custom min width is reached, showing last items</label>
+            <Tracker data={data} hoverEffect minBlockWidth={8} collapseShowLastBlocks />
+        </div>
+
+        <div className='margin-bottom-15'>
+            <label>Compression without collapsing - overflowing content</label>
+            <Tracker data={data} hoverEffect collapseOnMinBlockWidth={false} />
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="margin-bottom-15">
+        <label>Default Tracker</label>
+        <div class="tracker" style="gap: 2px;">
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-danger tracker-block-hover cursor-pointer" role="button" tabindex="0" aria-label="Error" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-danger tracker-block-hover cursor-pointer" role="button" tabindex="0" aria-label="Error" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-warning tracker-block-hover cursor-pointer" role="button" tabindex="0" aria-label="Warn" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-gray tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-gray tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-gray tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-gray tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+        </div>
+    </div>
+    <div class="margin-bottom-15">
+        <label>Collapse when custom min width is reached, showing last items</label>
+        <div class="tracker" style="gap: 2px;">
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-danger tracker-block-hover cursor-pointer" role="button" tabindex="0" aria-label="Error" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-danger tracker-block-hover cursor-pointer" role="button" tabindex="0" aria-label="Error" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-warning tracker-block-hover cursor-pointer" role="button" tabindex="0" aria-label="Warn" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-gray tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-gray tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-gray tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-gray tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+        </div>
+    </div>
+    <div class="margin-bottom-15">
+        <label>Compression without collapsing - overflowing content</label>
+        <div class="tracker" style="gap: 2px;">
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-danger tracker-block-hover cursor-pointer" role="button" tabindex="0" aria-label="Error" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-danger tracker-block-hover cursor-pointer" role="button" tabindex="0" aria-label="Error" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-warning tracker-block-hover cursor-pointer" role="button" tabindex="0" aria-label="Warn" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-gray tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-gray tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-gray tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-gray tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| data | TrackerBlock[] | — | Array of block objects. |
+| └id | string | — | Unique identifier for a block. |
+| └color | string | — | Defines the block color by setting a UIKIT bg-<name> class. |
+| └tooltip | ReactNode | — | Tooltip content shown on hover. |
+| └onClick | (id: string) => void | — | Called when clicking the block. |
+| └className | string | — | Additional class names for the block. |
+| defaultBackgroundColor | string | 'bg-success' | Background color of a block, when no color is provided in data. |
+| hoverEffect | boolean | false | Add a hover effect to the tracker blocks. |
+| minBlockWidth | number | 5 | Minimum width per tracker block in pixels. The tracker compresses blocks automatically down to this value. |
+| maxBlockWidth | number | 10 | Maximum width per tracker block in pixels. |
+| blockGap | number | 2 | Gap between tracker blocks in pixels. |
+| blockHeight | number | 30 | Height per tracker block in pixels. |
+| collapseOnMinBlockWidth | boolean | true | When enabled, the tracker shows fewer blocks once minBlockWidth is reached. |
+| collapseShowLastBlocks | boolean | false | Show the last blocks instead of the first blocks when collapsing due to width. |
+| className | string | — | Additional class names on the wrapper element. |
+
+### Example: credit score
+
+Credit Score
+Details
+
+Your credit score is 710
+This score is considered to be Excellent.
+
+#### Summary
+
+Credit Score
+Details
+
+Your credit score is 710
+This score is considered to be Excellent.
+
+#### React (tsx)
+
+```tsx
+import Button from '@rio-cloud/rio-uikit/Button';
+import Tracker from '@rio-cloud/rio-uikit/Tracker';
+
+const creditScoreData = Array.from({ length: 50 }, (_, index) => ({
+    color: index < 40 ? 'bg-success' : 'bg-light',
+    tooltip: index < 40 ? 'Good score range' : 'Remaining range',
+}));
+
+export const TrackerCreditScoreExample = () => (
+    <div className='padding-25 max-width-600'>
+        <div className='border rounded-large bg-white padding-20 shadow-default'>
+            <div className='display-flex align-items-center justify-content-between gap-10'>
+                <div className='display-flex align-items-center gap-10'>
+                    <span className='rioglyph rioglyph-dashboard text-size-h2 text-color-gray' />
+                    <span className='text-size-h3 text-color-darker'>Credit Score</span>
+                </div>
+                <Button>Details</Button>
+            </div>
+
+            <div className='border border-top-only border-color-lighter margin-y-20' />
+
+            <div className='display-flex align-items-center justify-content-between gap-15 margin-bottom-20'>
+                <div>
+                    <div className='text-size-18 text-color-darker margin-bottom-5'>
+                        Your <strong>credit score</strong> is <strong>710</strong>
+                    </div>
+                    <div className='text-size-16 text-color-gray'>This score is considered to be Excellent.</div>
+                </div>
+                <div className='height-60 width-60 rounded-circle bg-lightest display-grid place-items-center flex-0'>
+                    <span className='rioglyph rioglyph-face-smile text-color-success text-size-h1' />
+                </div>
+            </div>
+
+            <Tracker data={creditScoreData} blockHeight={20} minBlockWidth={3} maxBlockWidth={10} blockGap={3} />
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="padding-25 max-width-600">
+    <div class="border rounded-large bg-white padding-20 shadow-default">
+        <div class="display-flex align-items-center justify-content-between gap-10">
+            <div class="display-flex align-items-center gap-10">
+                <span class="rioglyph rioglyph-dashboard text-size-h2 text-color-gray">
+                </span>
+                <span class="text-size-h3 text-color-darker">Credit Score</span>
+            </div>
+            <button type="button" class="btn btn-default btn-component" tabindex="0">Details</button>
+        </div>
+        <div class="border border-top-only border-color-lighter margin-y-20">
+        </div>
+        <div class="display-flex align-items-center justify-content-between gap-15 margin-bottom-20">
+            <div>
+                <div class="text-size-18 text-color-darker margin-bottom-5">Your <strong>credit score</strong> is <strong>710</strong>
+                </div>
+                <div class="text-size-16 text-color-gray">This score is considered to be Excellent.</div>
+            </div>
+            <div class="height-60 width-60 rounded-circle bg-lightest display-grid place-items-center flex-0">
+                <span class="rioglyph rioglyph-face-smile text-color-success text-size-h1">
+                </span>
+            </div>
+        </div>
+        <div class="tracker" style="gap: 3px;">
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-light" aria-label="Remaining range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-light" aria-label="Remaining range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-light" aria-label="Remaining range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-light" aria-label="Remaining range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-light" aria-label="Remaining range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-light" aria-label="Remaining range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-light" aria-label="Remaining range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-light" aria-label="Remaining range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-light" aria-label="Remaining range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+            <div class="tracker-block bg-light" aria-label="Remaining range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
+            </div>
+        </div>
+    </div>
+</div>
+```