{"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":true,"minItems":2,"maxItems":5},"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},"categories[].id":{"type":"object","description":"","required":true},"categories[].name":{"type":"object","description":"","required":true},"categories[].stats":{"type":"object","description":"","required":true,"minItems":2,"maxItems":6},"categories[].stats[].value":{"type":"object","description":"","required":true},"categories[].stats[].label":{"type":"object","description":"","required":true},"categories[].stats[].info":{"type":"object","description":"","required":true}},"exampleProps":{"badge":"Performance","heading":"Key Performance Indicators","description":"Track our progress across business, technical, and customer success metrics","defaultCategory":"business","categories":[{"id":"business","name":"Business","stats":[{"label":"Revenue Growth","value":84,"suffix":"%","info":"Year over year"},{"label":"Market Share","value":67,"suffix":"%","info":"In target segment"},{"label":"Profit Margin","value":42,"suffix":"%","info":"Net margin"},{"label":"Customer LTV","value":91,"suffix":"%","info":"Above industry avg"}]},{"id":"technical","name":"Technical","stats":[{"label":"System Uptime","value":99,"suffix":"%","info":"Last 12 months"},{"label":"API Response","value":95,"suffix":"%","info":"Under 100ms"},{"label":"Code Coverage","value":88,"suffix":"%","info":"Unit tests"},{"label":"Security Score","value":96,"suffix":"%","info":"SOC 2 compliant"}]}]},"dependencies":["@opensite/ui"],"tags":["stats","circular","progress","tabs","categories","kpi","dashboard","visualization"],"performance":{},"importantUsageNotes":"Stat values and labels must come from real, source-backed data. Do not fabricate metrics. Each stat's 'value' is a NUMBER (0–100) used both for the circular progress ring and for display. The 'info' field provides brief context below the label. Provide at least 2 categories; each category should have 3–4 stats for a balanced 4-column grid. The defaultCategory must match an existing category id.","usageRequirements":{"requiredProps":["categories"],"propConstraints":{"categories":{"required":true,"minItems":2,"maxItems":5},"categories[].id":{"required":true,"note":"Unique identifier string."},"categories[].name":{"required":true,"note":"Display name for the tab."},"categories[].stats":{"required":true,"minItems":2,"maxItems":6,"note":"4 items recommended for the 4-column grid."},"categories[].stats[].value":{"required":true,"note":"Number 0–100 used for the SVG progress ring."},"categories[].stats[].label":{"required":true,"note":"Metric label."},"categories[].stats[].info":{"required":true,"note":"Short context string displayed below the label."}},"mediaSlots":{},"requiresSiteCapabilities":["stats_or_metrics"]}}},"timestamp":"2026-06-27T19:55:36.979Z"}