@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/package.json

@@ -1,38 +1,42 @@
 {
   "name": "@rio-cloud/uikit-mcp",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "MCP server that serves the captured RIO UI Kit documentation to Model Context Protocol clients.",
   "publishConfig": {
-        "access": "public"
-    },
+    "access": "public"
+  },
   "type": "module",
   "author": "TB Digital Services GmbH",
   "license": "Apache-2.0",
   "bin": {
-    "uikit-mcp": "./bin/uikit-mcp.mjs"
+    "uikit-mcp": "./dist/index.mjs"
   },
   "files": [
-    "bin/",
-    "server/",
-    "data/",
-    "docs/",
-    "package.json",
-    "README.md",
-    "LICENSE"
+    "dist/"
   ],
   "scripts": {
-    "test": "node --test",
+    "build:server": "tsdown",
+    "typecheck": "tsc --noEmit",
+    "pretest": "npm run build:server",
+    "test": "npm run typecheck && node --test --import tsx test/**/*.ts",
+    "prepack": "npm test",
     "setup:crawler": "npx playwright install chromium",
-    "crawl:full": "node tools/crawl-full.mjs",
-    "crawl:navigation": "node crawler/cli/crawl-navigation.mjs",
-    "capture:all": "node crawler/cli/capture-all.mjs",
-    "mcp:server": "node server/index.mjs",
-    "link:global": "npm link"
+    "crawl:full": "tsx tools/crawl-full.ts",
+    "crawl:navigation": "tsx crawler/cli/crawl-navigation.ts",
+    "capture:all": "tsx crawler/cli/capture-all.ts",
+    "mcp:demo-client": "npm run build:server && tsx tools/demo-client.ts",
+    "mcp:server": "npm run build:server && node dist/index.mjs"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.20.2",
+    "@modelcontextprotocol/sdk": "^1.24.3",
     "flexsearch": "^0.8.212",
-    "playwright": "^1.45.0",
     "zod": "^3.25.76"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.10",
+    "playwright": "^1.45.0",
+    "tsdown": "^0.17.0",
+    "tsx": "^4.15.7",
+    "typescript": "^5.5.4"
   }
 }

package/bin/uikit-mcp.mjs

@@ -1,23 +0,0 @@
-#!/usr/bin/env node
-
-import { fileURLToPath, pathToFileURL } from 'node:url';
-import path from 'node:path';
-
-async function main() {
-  const __filename = fileURLToPath(import.meta.url);
-  const projectRoot = path.resolve(path.dirname(__filename), '..');
-
-  process.chdir(projectRoot);
-
-  const serverPath = path.join(projectRoot, 'server', 'index.mjs');
-  const serverUrl = pathToFileURL(serverPath).href;
-
-  try {
-    await import(serverUrl);
-  } catch (error) {
-    console.error('Failed to start uikit MCP server:', error);
-    process.exitCode = 1;
-  }
-}
-
-main();

package/data/pages/Components/components/accentbar.json

@@ -1,207 +0,0 @@
-{
-  "metadata": {
-    "captured_at": "2025-11-21T12:07:48.672Z",
-    "source": "https://uikit.developers.rio.cloud/#components/accentBar",
-    "category": "Components",
-    "section": "Misc",
-    "slug": "components/accentbar",
-    "version": "v1.13.2",
-    "hash_algorithm": "sha256",
-    "hash": "72f34e23f95ddb28f9bbaae2757ae001a15fb7381c08ba1d171d96994626728d"
-  },
-  "title": "AccentBar",
-  "lead": "The AccentBar component is a small, colored vertical bar (typically a few pixels wide) used to visually highlight or categorize rows in lists, tables, or cards. It helps improve readability by providing a quick visual cue for different statuses, categories, or priorities.",
-  "content": [
-    {
-      "heading": "AccentBar",
-      "body": "Use it to indicate status or priority in a table, as a category marker in list-based layouts where items belong to different groups, or to subtly enhance visual hierarchy in a UI without overwhelming the content. Additionally, it can be used to describe values in a chart, acting as a color-coded reference for data representation.",
-      "examples": [
-        {
-          "caption": "Example 1",
-          "rendered_html": "<div class=\"playground-content  bg-lightest padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex flex-column gap-15 max-width-400\"><div class=\"bg-white rounded border shadow-default padding-15\"><div class=\"display-flex align-items-stretch\"><div class=\"AccentBar bg-secondary\"></div>Lorem ipsum dolor sit amet</div></div><div class=\"bg-white rounded border shadow-default padding-15\"><div class=\"display-flex align-items-stretch\"><div class=\"AccentBar bg-info\"></div>Lorem ipsum dolor sit amet</div></div><div class=\"bg-white rounded border shadow-default padding-15\"><div class=\"display-flex align-items-stretch\"><div class=\"AccentBar bg-warning\"></div>\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</div></div></div></div>",
-          "tabs": [
-            {
-              "label": "React",
-              "language": "tsx",
-              "code": "import AccentBar from '@rio-cloud/rio-uikit/AccentBar';\nimport Card from '@rio-cloud/rio-uikit/Card';\nimport { dummyTextShort } from '../../../utils/data';\n\nexport default () => (\n    <div className='display-flex flex-column gap-15 max-width-400'>\n        <Card>\n            <AccentBar>Lorem ipsum dolor sit amet</AccentBar>\n        </Card>\n        <Card>\n            <AccentBar color='bg-info'>Lorem ipsum dolor sit amet</AccentBar>\n        </Card>\n        <Card>\n            <AccentBar color='bg-warning'>{dummyTextShort}</AccentBar>\n        </Card>\n    </div>\n);"
-            },
-            {
-              "label": "HTML",
-              "language": "html",
-              "code": "<div class=\"display-flex flex-column gap-15 max-width-400\">\n    <div class=\"bg-white rounded border shadow-default padding-15\">\n        <div class=\"display-flex align-items-stretch\">\n            <div class=\"AccentBar bg-secondary\">\n            </div>Lorem ipsum dolor sit amet\n        </div>\n    </div>\n    <div class=\"bg-white rounded border shadow-default padding-15\">\n        <div class=\"display-flex align-items-stretch\">\n            <div class=\"AccentBar bg-info\">\n            </div>Lorem ipsum dolor sit amet\n        </div>\n    </div>\n    <div class=\"bg-white rounded border shadow-default padding-15\">\n        <div class=\"display-flex align-items-stretch\">\n            <div class=\"AccentBar bg-warning\">\n            </div>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\n        </div>\n    </div>\n</div>"
-            },
-            {
-              "label": "Props",
-              "language": "json",
-              "code": null,
-              "props": [
-                {
-                  "heading": null,
-                  "rows": [
-                    {
-                      "name": "color",
-                      "type": "string",
-                      "default": "bg-secondary",
-                      "description": "Defines the color by setting it to a UIKIT bg-<name> class name."
-                    },
-                    {
-                      "name": "circle",
-                      "type": "boolean",
-                      "default": "false",
-                      "description": "Defines if the element is rendered as a stretching bar or just a centered circle."
-                    },
-                    {
-                      "name": "className",
-                      "type": "string",
-                      "default": "",
-                      "description": "Additional class names passed to the actual element."
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "caption": "Example 2",
-          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"table-responsive\"><table class=\"table\"><thead><tr><th>Status</th><th>Location</th><th>ETA</th></tr></thead><tbody><tr><td><div class=\"display-flex align-items-stretch\"><div class=\"AccentBar bg-warning\"></div>In transit</div></td><td>Hamburg, DE</td><td>2024-02-02</td></tr><tr><td><div class=\"display-flex align-items-stretch\"><div class=\"AccentBar bg-success\"></div>Delivered</div></td><td>Rotterdam, NL</td><td>2024-01-29</td></tr><tr><td><div class=\"display-flex align-items-stretch\"><div class=\"AccentBar bg-info\"></div>Awaiting pickup</div></td><td>Warsaw, PL</td><td>2024-02-05</td></tr><tr><td><div class=\"display-flex align-items-stretch\"><div class=\"AccentBar bg-danger\"></div>Customs clearance</div></td><td>Antwerp, BE</td><td>2024-02-03</td></tr></tbody></table></div></div>",
-          "tabs": [
-            {
-              "label": "React",
-              "language": "tsx",
-              "code": "import AccentBar from '@rio-cloud/rio-uikit/AccentBar';\n\nconst data = [\n    { id: 1, status: 'In transit', location: 'Hamburg, DE', eta: '2024-02-02' },\n    { id: 2, status: 'Delivered', location: 'Rotterdam, NL', eta: '2024-01-29' },\n    { id: 3, status: 'Awaiting pickup', location: 'Warsaw, PL', eta: '2024-02-05' },\n    { id: 4, status: 'Customs clearance', location: 'Antwerp, BE', eta: '2024-02-03' },\n];\n\nexport default () => {\n    return (\n        <div className='table-responsive'>\n            <table className='table'>\n                <thead>\n                    <tr>\n                        <th>Status</th>\n                        <th>Location</th>\n                        <th>ETA</th>\n                    </tr>\n                </thead>\n                <tbody>\n                    {data.map(row => (\n                        <tr key={row.id}>\n                            <td>\n                                <AccentBar color={getStatusColor(row.status)}>{row.status}</AccentBar>\n                            </td>\n                            <td>{row.location}</td>\n                            <td>{row.eta}</td>\n                        </tr>\n                    ))}\n                </tbody>\n            </table>\n        </div>\n    );\n};\n\nconst getStatusColor = (status: string) => {\n    switch (status) {\n        case 'In transit':\n            return 'bg-warning';\n        case 'Delivered':\n            return 'bg-success';\n        case 'Awaiting pickup':\n            return 'bg-info';\n        case 'Customs clearance':\n            return 'bg-danger';\n        default:\n            return 'bg-primary';\n    }\n};"
-            },
-            {
-              "label": "HTML",
-              "language": "html",
-              "code": "<div class=\"table-responsive\">\n    <table class=\"table\">\n        <thead>\n            <tr>\n                <th>Status</th>\n                <th>Location</th>\n                <th>ETA</th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr>\n                <td>\n                    <div class=\"display-flex align-items-stretch\">\n                        <div class=\"AccentBar bg-warning\">\n                        </div>In transit\n                    </div>\n                </td>\n                <td>Hamburg, DE</td>\n                <td>2024-02-02</td>\n            </tr>\n            <tr>\n                <td>\n                    <div class=\"display-flex align-items-stretch\">\n                        <div class=\"AccentBar bg-success\">\n                        </div>Delivered\n                    </div>\n                </td>\n                <td>Rotterdam, NL</td>\n                <td>2024-01-29</td>\n            </tr>\n            <tr>\n                <td>\n                    <div class=\"display-flex align-items-stretch\">\n                        <div class=\"AccentBar bg-info\">\n                        </div>Awaiting pickup\n                    </div>\n                </td>\n                <td>Warsaw, PL</td>\n                <td>2024-02-05</td>\n            </tr>\n            <tr>\n                <td>\n                    <div class=\"display-flex align-items-stretch\">\n                        <div class=\"AccentBar bg-danger\">\n                        </div>Customs clearance\n                    </div>\n                </td>\n                <td>Antwerp, BE</td>\n                <td>2024-02-03</td>\n            </tr>\n        </tbody>\n    </table>\n</div>"
-            },
-            {
-              "label": "Props",
-              "language": "json",
-              "code": null,
-              "props": [
-                {
-                  "heading": null,
-                  "rows": [
-                    {
-                      "name": "color",
-                      "type": "string",
-                      "default": "bg-secondary",
-                      "description": "Defines the color by setting it to a UIKIT bg-<name> class name."
-                    },
-                    {
-                      "name": "circle",
-                      "type": "boolean",
-                      "default": "false",
-                      "description": "Defines if the element is rendered as a stretching bar or just a centered circle."
-                    },
-                    {
-                      "name": "className",
-                      "type": "string",
-                      "default": "",
-                      "description": "Additional class names passed to the actual element."
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "caption": "Example 3",
-          "rendered_html": "<div class=\"playground-content  bg-lightest padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"bg-white rounded border shadow-default padding-15 max-width-500 padding-25\"><div class=\"text-size-h5 text-medium text-color darker margin-bottom-25\">Visualizing rating distribution</div><div class=\"margin-bottom-25\"><div class=\"progress\"><div class=\"progress-bar bg-rating-1 progress-divider\" style=\"width: 15%;\"></div><div class=\"progress-bar bg-rating-2 progress-divider\" style=\"width: 20%;\"></div><div class=\"progress-bar bg-rating-3 progress-divider\" style=\"width: 25%;\"></div><div class=\"progress-bar bg-rating-4 progress-divider\" style=\"width: 15%;\"></div><div class=\"progress-bar bg-rating-5 progress-divider\" style=\"width: 25%;\"></div></div></div><table class=\"table table-compact\"><thead><tr><th class=\"width-10\"></th><th>Category</th><th>Percentage</th></tr></thead><tbody><tr><td class=\"align-center width-5 padding-right-0\"><div class=\"AccentBar bg-rating-1\"></div></td><td>Poor</td><td>15%</td></tr><tr><td class=\"align-center width-5 padding-right-0\"><div class=\"AccentBar bg-rating-2\"></div></td><td>Below Average</td><td>20%</td></tr><tr><td class=\"align-center width-5 padding-right-0\"><div class=\"AccentBar bg-rating-3\"></div></td><td>Average</td><td>25%</td></tr><tr><td class=\"align-center width-5 padding-right-0\"><div class=\"AccentBar bg-rating-4\"></div></td><td>Good</td><td>15%</td></tr><tr><td class=\"align-center width-5 padding-right-0\"><div class=\"AccentBar bg-rating-5\"></div></td><td>Excellent</td><td>25%</td></tr></tbody></table></div></div>",
-          "tabs": [
-            {
-              "label": "React",
-              "language": "tsx",
-              "code": "import AccentBar from '@rio-cloud/rio-uikit/AccentBar';\nimport Card from '@rio-cloud/rio-uikit/Card';\n\nconst data = [\n    { id: 1, status: 'In transit', location: 'Hamburg, DE', eta: '2024-02-02' },\n    { id: 2, status: 'Delivered', location: 'Rotterdam, NL', eta: '2024-01-29' },\n    { id: 3, status: 'Awaiting pickup', location: 'Warsaw, PL', eta: '2024-02-05' },\n    { id: 4, status: 'Customs clearance', location: 'Antwerp, BE', eta: '2024-02-03' },\n];\n\nexport default () => {\n    return (\n        <Card className='max-width-500 padding-25'>\n            <div className='text-size-h5 text-medium text-color darker margin-bottom-25'>\n                Visualizing rating distribution\n            </div>\n            <div className='margin-bottom-25'>\n                <div className='progress'>\n                    <div className='progress-bar bg-rating-1 progress-divider' style={{ width: '15%' }} />\n                    <div className='progress-bar bg-rating-2 progress-divider' style={{ width: '20%' }} />\n                    <div className='progress-bar bg-rating-3 progress-divider' style={{ width: '25%' }} />\n                    <div className='progress-bar bg-rating-4 progress-divider' style={{ width: '15%' }} />\n                    <div className='progress-bar bg-rating-5 progress-divider' style={{ width: '25%' }} />\n                </div>\n            </div>\n\n            <table className='table table-compact'>\n                <thead>\n                    <tr>\n                        <th className='width-10' />\n                        <th>Category</th>\n                        <th>Percentage</th>\n                    </tr>\n                </thead>\n                <tbody>\n                    <tr>\n                        <td className='align-center width-5 padding-right-0'>\n                            <AccentBar color='bg-rating-1' />\n                        </td>\n                        <td>Poor</td>\n                        <td>15%</td>\n                    </tr>\n                    <tr>\n                        <td className='align-center width-5 padding-right-0'>\n                            <AccentBar color='bg-rating-2' />\n                        </td>\n                        <td>Below Average</td>\n                        <td>20%</td>\n                    </tr>\n                    <tr>\n                        <td className='align-center width-5 padding-right-0'>\n                            <AccentBar color='bg-rating-3' />\n                        </td>\n                        <td>Average</td>\n                        <td>25%</td>\n                    </tr>\n                    <tr>\n                        <td className='align-center width-5 padding-right-0'>\n                            <AccentBar color='bg-rating-4' />\n                        </td>\n                        <td>Good</td>\n                        <td>15%</td>\n                    </tr>\n                    <tr>\n                        <td className='align-center width-5 padding-right-0'>\n                            <AccentBar color='bg-rating-5' />\n                        </td>\n                        <td>Excellent</td>\n                        <td>25%</td>\n                    </tr>\n                </tbody>\n            </table>\n        </Card>\n    );\n};\n\nconst getStatusColor = (status: string) => {\n    switch (status) {\n        case 'In transit':\n            return 'bg-warning';\n        case 'Delivered':\n            return 'bg-success';\n        case 'Awaiting pickup':\n            return 'bg-info';\n        case 'Customs clearance':\n            return 'bg-danger';\n        default:\n            return 'bg-primary';\n    }\n};"
-            },
-            {
-              "label": "HTML",
-              "language": "html",
-              "code": "<div class=\"bg-white rounded border shadow-default padding-15 max-width-500 padding-25\">\n    <div class=\"text-size-h5 text-medium text-color darker margin-bottom-25\">Visualizing rating distribution</div>\n    <div class=\"margin-bottom-25\">\n        <div class=\"progress\">\n            <div class=\"progress-bar bg-rating-1 progress-divider\" style=\"width: 15%;\">\n            </div>\n            <div class=\"progress-bar bg-rating-2 progress-divider\" style=\"width: 20%;\">\n            </div>\n            <div class=\"progress-bar bg-rating-3 progress-divider\" style=\"width: 25%;\">\n            </div>\n            <div class=\"progress-bar bg-rating-4 progress-divider\" style=\"width: 15%;\">\n            </div>\n            <div class=\"progress-bar bg-rating-5 progress-divider\" style=\"width: 25%;\">\n            </div>\n        </div>\n    </div>\n    <table class=\"table table-compact\">\n        <thead>\n            <tr>\n                <th class=\"width-10\">\n                </th>\n                <th>Category</th>\n                <th>Percentage</th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr>\n                <td class=\"align-center width-5 padding-right-0\">\n                    <div class=\"AccentBar bg-rating-1\">\n                    </div>\n                </td>\n                <td>Poor</td>\n                <td>15%</td>\n            </tr>\n            <tr>\n                <td class=\"align-center width-5 padding-right-0\">\n                    <div class=\"AccentBar bg-rating-2\">\n                    </div>\n                </td>\n                <td>Below Average</td>\n                <td>20%</td>\n            </tr>\n            <tr>\n                <td class=\"align-center width-5 padding-right-0\">\n                    <div class=\"AccentBar bg-rating-3\">\n                    </div>\n                </td>\n                <td>Average</td>\n                <td>25%</td>\n            </tr>\n            <tr>\n                <td class=\"align-center width-5 padding-right-0\">\n                    <div class=\"AccentBar bg-rating-4\">\n                    </div>\n                </td>\n                <td>Good</td>\n                <td>15%</td>\n            </tr>\n            <tr>\n                <td class=\"align-center width-5 padding-right-0\">\n                    <div class=\"AccentBar bg-rating-5\">\n                    </div>\n                </td>\n                <td>Excellent</td>\n                <td>25%</td>\n            </tr>\n        </tbody>\n    </table>\n</div>"
-            },
-            {
-              "label": "Props",
-              "language": "json",
-              "code": null,
-              "props": [
-                {
-                  "heading": null,
-                  "rows": [
-                    {
-                      "name": "color",
-                      "type": "string",
-                      "default": "bg-secondary",
-                      "description": "Defines the color by setting it to a UIKIT bg-<name> class name."
-                    },
-                    {
-                      "name": "circle",
-                      "type": "boolean",
-                      "default": "false",
-                      "description": "Defines if the element is rendered as a stretching bar or just a centered circle."
-                    },
-                    {
-                      "name": "className",
-                      "type": "string",
-                      "default": "",
-                      "description": "Additional class names passed to the actual element."
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "caption": "Example 4",
-          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"table-responsive max-width-600\"><table class=\"table\"><thead><tr><th>Risk level</th><th>Reason</th><th>Suggested action</th></tr></thead><tbody><tr><td><div class=\"display-flex align-items-center\"><div class=\"AccentBar AccentBarCircle bg-success\"></div>Low risk</div></td><td>Stable weather conditions</td><td>Monitor</td></tr><tr><td><div class=\"display-flex align-items-center\"><div class=\"AccentBar AccentBarCircle bg-warning\"></div>High risk</div></td><td>Labor strike at destination</td><td>Reroute shipment</td></tr><tr><td><div class=\"display-flex align-items-center\"><div class=\"AccentBar AccentBarCircle bg-danger\"></div>Critical risk</div></td><td>Customs hold &amp; inspection</td><td>Expedite clearance</td></tr></tbody></table></div></div>",
-          "tabs": [
-            {
-              "label": "React",
-              "language": "tsx",
-              "code": "import AccentBar from '@rio-cloud/rio-uikit/AccentBar';\n\nconst data = [\n    { id: 1, riskLevel: 'Low risk', reason: 'Stable weather conditions', action: 'Monitor' },\n    { id: 3, riskLevel: 'High risk', reason: 'Labor strike at destination', action: 'Reroute shipment' },\n    { id: 4, riskLevel: 'Critical risk', reason: 'Customs hold & inspection', action: 'Expedite clearance' },\n];\n\nexport default () => {\n    return (\n        <div className='table-responsive max-width-600'>\n            <table className='table'>\n                <thead>\n                    <tr>\n                        <th>Risk level</th>\n                        <th>Reason</th>\n                        <th>Suggested action</th>\n                    </tr>\n                </thead>\n                <tbody>\n                    {data.map(row => (\n                        <tr key={row.id}>\n                            <td>\n                                <AccentBar color={getRiskColor(row.riskLevel)} circle>\n                                    {row.riskLevel}\n                                </AccentBar>\n                            </td>\n                            <td>{row.reason}</td>\n                            <td>{row.action}</td>\n                        </tr>\n                    ))}\n                </tbody>\n            </table>\n        </div>\n    );\n};\n\nconst getRiskColor = (riskLevel: string) => {\n    switch (riskLevel) {\n        case 'Low risk':\n            return 'bg-success';\n        case 'High risk':\n            return 'bg-warning';\n        case 'Critical risk':\n            return 'bg-danger';\n        default:\n            return 'bg-secondary';\n    }\n};"
-            },
-            {
-              "label": "HTML",
-              "language": "html",
-              "code": "<div class=\"table-responsive max-width-600\">\n    <table class=\"table\">\n        <thead>\n            <tr>\n                <th>Risk level</th>\n                <th>Reason</th>\n                <th>Suggested action</th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr>\n                <td>\n                    <div class=\"display-flex align-items-center\">\n                        <div class=\"AccentBar AccentBarCircle bg-success\">\n                        </div>Low risk\n                    </div>\n                </td>\n                <td>Stable weather conditions</td>\n                <td>Monitor</td>\n            </tr>\n            <tr>\n                <td>\n                    <div class=\"display-flex align-items-center\">\n                        <div class=\"AccentBar AccentBarCircle bg-warning\">\n                        </div>High risk\n                    </div>\n                </td>\n                <td>Labor strike at destination</td>\n                <td>Reroute shipment</td>\n            </tr>\n            <tr>\n                <td>\n                    <div class=\"display-flex align-items-center\">\n                        <div class=\"AccentBar AccentBarCircle bg-danger\">\n                        </div>Critical risk\n                    </div>\n                </td>\n                <td>Customs hold &amp; inspection</td>\n                <td>Expedite clearance</td>\n            </tr>\n        </tbody>\n    </table>\n</div>"
-            },
-            {
-              "label": "Props",
-              "language": "json",
-              "code": null,
-              "props": [
-                {
-                  "heading": null,
-                  "rows": [
-                    {
-                      "name": "color",
-                      "type": "string",
-                      "default": "bg-secondary",
-                      "description": "Defines the color by setting it to a UIKIT bg-<name> class name."
-                    },
-                    {
-                      "name": "circle",
-                      "type": "boolean",
-                      "default": "false",
-                      "description": "Defines if the element is rendered as a stretching bar or just a centered circle."
-                    },
-                    {
-                      "name": "className",
-                      "type": "string",
-                      "default": "",
-                      "description": "Additional class names passed to the actual element."
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ],
-  "see_also": []
-}

package/data/pages/Components/components/activity.json

@@ -1,87 +0,0 @@
-{
-  "metadata": {
-    "captured_at": "2025-11-21T12:07:46.757Z",
-    "source": "https://uikit.developers.rio.cloud/#components/activity",
-    "category": "Components",
-    "section": "Misc",
-    "slug": "components/activity",
-    "version": "v1.13.2",
-    "hash_algorithm": "sha256",
-    "hash": "b5b1a1375c8f26a53370e1d61c2c7599b764e70ec8cb8f5c13f5333b50327ce9"
-  },
-  "title": "Activity",
-  "lead": null,
-  "content": [
-    {
-      "heading": "Activity",
-      "body": "",
-      "examples": [
-        {
-          "caption": "Example 1",
-          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><label>Small size:</label><div class=\"display-flex flex-wrap gap-5 margin-bottom-25\"><div class=\"activity activity-available activity-sm\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-available\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-driving activity-sm\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-driving\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-resting activity-sm\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-resting\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-working activity-sm\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-working\"></span></span><span class=\"activity-text\">0:24 h</span></div><span class=\"badge padding-y-4 badge-danger\">1</span><span class=\"badge padding-y-4 badge-warning\">3</span></div><label>Default size:</label><div class=\"display-flex flex-wrap gap-5 margin-bottom-25\"><div class=\"activity activity-available\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-available\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-driving\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-driving\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-resting\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-resting\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-working\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-working\"></span></span><span class=\"activity-text\">0:24 h</span></div></div><label>Default size without duration:</label><div class=\"display-flex flex-wrap gap-5 margin-bottom-25\"><div class=\"activity activity-available\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-available\"></span></span></div><div class=\"activity activity-driving\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-driving\"></span></span></div><div class=\"activity activity-resting\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-resting\"></span></span></div><div class=\"activity activity-working\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-working\"></span></span></div></div><label>Outdated activities:</label><div class=\"display-flex flex-wrap gap-5 margin-bottom-25\"><div class=\"activity activity-available opacity-50\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-available\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-driving opacity-50\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-driving\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-resting opacity-50\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-resting\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-working opacity-50\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-working\"></span></span><span class=\"activity-text\">0:24 h</span></div></div><label>Large size:</label><div class=\"display-flex flex-wrap gap-5 margin-bottom-25\"><div class=\"activity activity-available activity-lg\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-available\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-driving activity-lg\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-driving\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-resting activity-lg\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-resting\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-working activity-lg\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-working\"></span></span><span class=\"activity-text\">0:24 h</span></div></div><label>Extra large size:</label><div class=\"display-flex flex-wrap gap-5 margin-bottom-25\"><div class=\"activity activity-available activity-xl\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-available\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-driving activity-xl\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-driving\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-resting activity-xl\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-resting\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-working activity-xl\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-working\"></span></span><span class=\"activity-text\">0:24 h</span></div></div></div></div>",
-          "tabs": [
-            {
-              "label": "React",
-              "language": "tsx",
-              "code": "import React from 'react';\n\nimport Activity from '@rio-cloud/rio-uikit/Activity';\n\nconst duration = '0:24 h';\n\nexport default () => (\n    <div>\n        <label>Small size:</label>\n        <div className='display-flex flex-wrap gap-5 margin-bottom-25'>\n            <Activity activity={Activity.AVAILABLE} duration={duration} bsSize={Activity.SIZE_SM} />\n            <Activity activity={Activity.DRIVING} duration={duration} bsSize={Activity.SIZE_SM} />\n            <Activity activity={Activity.RESTING} duration={duration} bsSize={Activity.SIZE_SM} />\n            <Activity activity={Activity.WORKING} duration={duration} bsSize={Activity.SIZE_SM} />\n            <span className='badge padding-y-4 badge-danger'>1</span>\n            <span className='badge padding-y-4 badge-warning'>3</span>\n        </div>\n\n        <label>Default size:</label>\n        <div className='display-flex flex-wrap gap-5 margin-bottom-25'>\n            <Activity activity={Activity.AVAILABLE} duration={duration} />\n            <Activity activity={Activity.DRIVING} duration={duration} />\n            <Activity activity={Activity.RESTING} duration={duration} />\n            <Activity activity={Activity.WORKING} duration={duration} />\n        </div>\n\n        <label>Default size without duration:</label>\n        <div className='display-flex flex-wrap gap-5 margin-bottom-25'>\n            <Activity activity={Activity.AVAILABLE} />\n            <Activity activity={Activity.DRIVING} />\n            <Activity activity={Activity.RESTING} />\n            <Activity activity={Activity.WORKING} />\n        </div>\n\n        <label>Outdated activities:</label>\n        <div className='display-flex flex-wrap gap-5 margin-bottom-25'>\n            <Activity activity={Activity.AVAILABLE} duration={duration} isOutdated />\n            <Activity activity={Activity.DRIVING} duration={duration} isOutdated />\n            <Activity activity={Activity.RESTING} duration={duration} isOutdated />\n            <Activity activity={Activity.WORKING} duration={duration} isOutdated />\n        </div>\n\n        <label>Large size:</label>\n        <div className='display-flex flex-wrap gap-5 margin-bottom-25'>\n            <Activity activity={Activity.AVAILABLE} duration={duration} bsSize={Activity.SIZE_LG} />\n            <Activity activity={Activity.DRIVING} duration={duration} bsSize={Activity.SIZE_LG} />\n            <Activity activity={Activity.RESTING} duration={duration} bsSize={Activity.SIZE_LG} />\n            <Activity activity={Activity.WORKING} duration={duration} bsSize={Activity.SIZE_LG} />\n        </div>\n\n        <label>Extra large size:</label>\n        <div className='display-flex flex-wrap gap-5 margin-bottom-25'>\n            <Activity activity={Activity.AVAILABLE} duration={duration} bsSize={Activity.SIZE_XL} />\n            <Activity activity={Activity.DRIVING} duration={duration} bsSize={Activity.SIZE_XL} />\n            <Activity activity={Activity.RESTING} duration={duration} bsSize={Activity.SIZE_XL} />\n            <Activity activity={Activity.WORKING} duration={duration} bsSize={Activity.SIZE_XL} />\n        </div>\n    </div>\n);"
-            },
-            {
-              "label": "HTML",
-              "language": "html",
-              "code": "<div>\n    <label>Small size:</label>\n    <div class=\"display-flex flex-wrap gap-5 margin-bottom-25\">\n        <div class=\"activity activity-available activity-sm\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-available\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-driving activity-sm\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-driving\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-resting activity-sm\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-resting\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-working activity-sm\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-working\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <span class=\"badge padding-y-4 badge-danger\">1</span>\n        <span class=\"badge padding-y-4 badge-warning\">3</span>\n    </div>\n    <label>Default size:</label>\n    <div class=\"display-flex flex-wrap gap-5 margin-bottom-25\">\n        <div class=\"activity activity-available\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-available\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-driving\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-driving\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-resting\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-resting\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-working\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-working\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n    </div>\n    <label>Default size without duration:</label>\n    <div class=\"display-flex flex-wrap gap-5 margin-bottom-25\">\n        <div class=\"activity activity-available\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-available\">\n                </span>\n            </span>\n        </div>\n        <div class=\"activity activity-driving\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-driving\">\n                </span>\n            </span>\n        </div>\n        <div class=\"activity activity-resting\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-resting\">\n                </span>\n            </span>\n        </div>\n        <div class=\"activity activity-working\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-working\">\n                </span>\n            </span>\n        </div>\n    </div>\n    <label>Outdated activities:</label>\n    <div class=\"display-flex flex-wrap gap-5 margin-bottom-25\">\n        <div class=\"activity activity-available opacity-50\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-available\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-driving opacity-50\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-driving\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-resting opacity-50\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-resting\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-working opacity-50\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-working\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n    </div>\n    <label>Large size:</label>\n    <div class=\"display-flex flex-wrap gap-5 margin-bottom-25\">\n        <div class=\"activity activity-available activity-lg\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-available\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-driving activity-lg\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-driving\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-resting activity-lg\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-resting\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-working activity-lg\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-working\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n    </div>\n    <label>Extra large size:</label>\n    <div class=\"display-flex flex-wrap gap-5 margin-bottom-25\">\n        <div class=\"activity activity-available activity-xl\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-available\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-driving activity-xl\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-driving\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-resting activity-xl\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-resting\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-working activity-xl\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-working\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n    </div>\n</div>"
-            },
-            {
-              "label": "Props",
-              "language": "json",
-              "code": null,
-              "props": [
-                {
-                  "heading": null,
-                  "rows": [
-                    {
-                      "name": "activity",
-                      "type": "String",
-                      "default": "",
-                      "description": "Defines the type of activity. Possible values are: Activity.AVAILABLE, Activity.DRIVING, Activity.RESTING or Activity.WORKING."
-                    },
-                    {
-                      "name": "duration",
-                      "type": "String / Node",
-                      "default": "",
-                      "description": "The actual duration value to be shown."
-                    },
-                    {
-                      "name": "isOutdated",
-                      "type": "Boolean",
-                      "default": "false",
-                      "description": "Indicated whether the activity is outdated."
-                    },
-                    {
-                      "name": "bsSize",
-                      "type": "String",
-                      "default": "",
-                      "description": "Define how large the component should be rendered. Possible values are: Activity.SIZE_SM, Activity.SIZE_LG or Activity.SIZE_XL."
-                    },
-                    {
-                      "name": "onClick",
-                      "type": "Function",
-                      "default": "() => {}",
-                      "description": "Callback function for when the component is clicked."
-                    },
-                    {
-                      "name": "className",
-                      "type": "String",
-                      "default": "",
-                      "description": "Additional classes for the wrapper element."
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ],
-  "see_also": []
-}

package/data/pages/Components/components/animatednumber.json

@@ -1,99 +0,0 @@
-{
-  "metadata": {
-    "captured_at": "2025-11-21T12:07:32.241Z",
-    "source": "https://uikit.developers.rio.cloud/#components/animatedNumber",
-    "category": "Components",
-    "section": "Content",
-    "slug": "components/animatednumber",
-    "version": "v1.13.2",
-    "hash_algorithm": "sha256",
-    "hash": "b4b2ab874685109b180f4bc11c4a86d4fe1686360e07b3ea9dbc9eccab0da001"
-  },
-  "title": "AnimatedNumber",
-  "lead": null,
-  "content": [
-    {
-      "heading": "AnimatedNumber",
-      "body": "",
-      "examples": [
-        {
-          "caption": "Example 1",
-          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><label>Default AnimatedNumber</label><div class=\"width-60 margin-bottom-20 text-right text-size-h1 text-color-info\"><span class=\"\">0</span></div><label>AnimatedNumber with prefix and unit</label><div class=\"width-100 margin-bottom-20 text-right text-size-h1 text-color-primary\"><span class=\"\">+0%</span></div><label>AnimatedNumber as simple timer</label><div class=\"text-color-danger\"><span class=\"margin-right-3\">Hurry up! Only</span><span class=\"\">60s</span><span class=\"margin-left-3\">remaining.</span></div></div></div>",
-          "tabs": [
-            {
-              "label": "React",
-              "language": "tsx",
-              "code": "import React from 'react';\n\nimport AnimatedNumber from '@rio-cloud/rio-uikit/AnimatedNumber';\n\nexport default () => (\n    <div>\n        <label>Default AnimatedNumber</label>\n        <div className='width-60 margin-bottom-20 text-right text-size-h1 text-color-info'>\n            <AnimatedNumber start={0} end={100} />\n        </div>\n\n        <label>AnimatedNumber with prefix and unit</label>\n        <div className='width-100 margin-bottom-20 text-right text-size-h1 text-color-primary'>\n            <AnimatedNumber start={0} end={100} unit='%' prefix='+' speed={50} />\n        </div>\n\n        <label>AnimatedNumber as simple timer</label>\n        <div className='text-color-danger'>\n            <span className='margin-right-3'>Hurry up! Only</span>\n            <AnimatedNumber\n                start={60}\n                end={0}\n                decreasing\n                unit='s'\n                speed={1000}\n                onEnd={() => console.log('Time is up')}\n            />\n            <span className='margin-left-3'>remaining.</span>\n        </div>\n    </div>\n);"
-            },
-            {
-              "label": "HTML",
-              "language": "html",
-              "code": "<div>\n    <label>Default AnimatedNumber</label>\n    <div class=\"width-60 margin-bottom-20 text-right text-size-h1 text-color-info\">\n        <span class=\"\">23</span>\n    </div>\n    <label>AnimatedNumber with prefix and unit</label>\n    <div class=\"width-100 margin-bottom-20 text-right text-size-h1 text-color-primary\">\n        <span class=\"\">+5%</span>\n    </div>\n    <label>AnimatedNumber as simple timer</label>\n    <div class=\"text-color-danger\">\n        <span class=\"margin-right-3\">Hurry up! Only</span>\n        <span class=\"\">60s</span>\n        <span class=\"margin-left-3\">remaining.</span>\n    </div>\n</div>"
-            },
-            {
-              "label": "Props",
-              "language": "json",
-              "code": null,
-              "props": [
-                {
-                  "heading": null,
-                  "rows": [
-                    {
-                      "name": "start",
-                      "type": "Number",
-                      "default": "",
-                      "description": "The start value."
-                    },
-                    {
-                      "name": "end",
-                      "type": "Number",
-                      "default": "",
-                      "description": "The end value."
-                    },
-                    {
-                      "name": "prefix",
-                      "type": "String",
-                      "default": "",
-                      "description": "A prefix to be added to the final string."
-                    },
-                    {
-                      "name": "unit",
-                      "type": "String",
-                      "default": "",
-                      "description": "A unit suffix to be added to the final string."
-                    },
-                    {
-                      "name": "speed",
-                      "type": "Number",
-                      "default": "10",
-                      "description": "The speed in milliseconds to count up or down."
-                    },
-                    {
-                      "name": "decreasing",
-                      "type": "Boolean",
-                      "default": "false",
-                      "description": "Enables to count backwards."
-                    },
-                    {
-                      "name": "onEnd",
-                      "type": "Function",
-                      "default": "",
-                      "description": "Callback function to be invoked when the end value is reached."
-                    },
-                    {
-                      "name": "className",
-                      "type": "String",
-                      "default": "",
-                      "description": "Additional classes to be set on the wrapping element."
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ],
-  "see_also": []
-}