{"success":true,"data":{"block":{"id":"stats-circular-progress","name":"Stats Circular Progress","title":"Stats Circular Progress","category":"Stats","categorySlug":"stats","description":"A tabbed stats display featuring circular progress indicators organized by category (Business, Technical, Customer). Each stat shows a visual circular progress ring with the value centered inside, along with a label and additional info. Includes both desktop tabs and mobile dropdown for category selection. Ideal for KPI dashboards, performance reports, or multi-dimensional metrics visualization.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/288934/fmr3zi2q1zsd628mldxv04exv2s6/stats-circular-progress-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/288935/xn1o1ztka52gs1lb7m18cc0rnvnk/stats-circular-progress-mobile.jpg"},"componentPath":"blocks/stats/stats-circular-progress.tsx","code":"import { StatsCircularProgress } from \"@opensite/ui/blocks/stats/stats-circular-progress\";\n\nexport default function Demo() {\n  return (\n    <StatsCircularProgress\n      badge=\"Performance\"\n      heading=\"Key Performance Indicators\"\n      description=\"Track our progress across business, technical, and customer success metrics\"\n      defaultCategory=\"business\"\n      categories={[\n        {\n          id: \"business\",\n          name: \"Business\",\n          stats: [\n            {\n              label: \"Revenue Growth\",\n              value: 84,\n              suffix: \"%\",\n              info: \"Year over year\",\n            },\n            {\n              label: \"Market Share\",\n              value: 67,\n              suffix: \"%\",\n              info: \"In target segment\",\n            },\n            {\n              label: \"Profit Margin\",\n              value: 42,\n              suffix: \"%\",\n              info: \"Net margin\",\n            },\n            {\n              label: \"Customer LTV\",\n              value: 91,\n              suffix: \"%\",\n              info: \"Above industry avg\",\n            },\n          ],\n        },\n        {\n          id: \"technical\",\n          name: \"Technical\",\n          stats: [\n            {\n              label: \"System Uptime\",\n              value: 99,\n              suffix: \"%\",\n              info: \"Last 12 months\",\n            },\n            {\n              label: \"API Response\",\n              value: 95,\n              suffix: \"%\",\n              info: \"Under 100ms\",\n            },\n            {\n              label: \"Code Coverage\",\n              value: 88,\n              suffix: \"%\",\n              info: \"Unit tests\",\n            },\n            {\n              label: \"Security Score\",\n              value: 96,\n              suffix: \"%\",\n              info: \"SOC 2 compliant\",\n            },\n          ],\n        },\n        {\n          id: \"customer\",\n          name: \"Customer\",\n          stats: [\n            {\n              label: \"Satisfaction\",\n              value: 92,\n              suffix: \"%\",\n              info: \"CSAT score\",\n            },\n            {\n              label: \"Retention Rate\",\n              value: 89,\n              suffix: \"%\",\n              info: \"Annual retention\",\n            },\n            {\n              label: \"NPS Score\",\n              value: 78,\n              suffix: \"\",\n              info: \"Net promoter\",\n            },\n            {\n              label: \"Support Rating\",\n              value: 94,\n              suffix: \"%\",\n              info: \"5-star reviews\",\n            },\n          ],\n        },\n      ]}\n      spacing=\"lg\"\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge content above the heading","typeLabel":"React.ReactNode","required":false},"badgeSlot":{"type":"object","description":"Custom badge slot (overrides badge)","typeLabel":"React.ReactNode","required":false},"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description content below the heading","typeLabel":"React.ReactNode","required":false},"categories":{"type":"array","description":"Array of stat categories","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"Unique identifier for the category","required":true},"name":{"type":"object","description":"Display name for the category","typeLabel":"React.ReactNode","required":true},"stats":{"type":"array","description":"Stats for this category","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"The label for the stat","typeLabel":"React.ReactNode","required":true},"value":{"type":"number","description":"The stat value (0-100 for percentage display)","required":true},"suffix":{"type":"string","description":"Suffix for the value (e.g., \"%\", \"\")","required":false},"info":{"type":"object","description":"Additional info text","typeLabel":"React.ReactNode","required":true},"className":{"type":"string","description":"Additional CSS classes for the stat card","required":false}},"typeLabel":"CircularStat"},"typeLabel":"CircularStat[]","required":true},"className":{"type":"string","description":"Additional CSS classes for the category","required":false}},"typeLabel":"StatCategory"},"typeLabel":"StatCategory[]","required":false},"categoriesSlot":{"type":"object","description":"Custom slot for rendering categories (overrides categories array)","typeLabel":"React.ReactNode","required":false},"defaultCategory":{"type":"string","description":"Default selected category ID","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"tabsClassName":{"type":"string","description":"Additional CSS classes for the tabs","required":false},"statsClassName":{"type":"string","description":"Additional CSS classes for the stats grid","required":false},"statCardClassName":{"type":"string","description":"Additional CSS classes for stat cards","required":false},"statValueClassName":{"type":"string","description":"Additional CSS classes for stat values","required":false},"statLabelClassName":{"type":"string","description":"Additional CSS classes for stat labels","required":false},"statInfoClassName":{"type":"string","description":"Additional CSS classes for stat info","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["stats","circular","progress","tabs","categories","kpi","dashboard","visualization"],"performance":{},"importantUsageNotes":"Organize 'categories' into 2–4 named groups, each containing exactly 4 'stats' to fill the circular progress grid per category. Only use real, verifiable stat values (0–100 numeric values representing actual percentages) from the system — do not invent KPI scores or performance percentages. Each stat's 'info' field should reflect a genuine measurement context (e.g., 'Year over year', 'Last 12 months'). Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:38:35.375Z"}