{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-ring",
  "title": "Progress ring",
  "description": "circular determinate progress",
  "dependencies": [
    "react-native-svg@15.15.4"
  ],
  "registryDependencies": [
    "@kit-native/lib-palette-context",
    "@kit-native/lib-utils"
  ],
  "files": [
    {
      "path": "components/kit/progress-ring.tsx",
      "content": "import { usePalette } from '@/lib/palette-context';\nimport { cn } from '@/lib/utils';\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport Svg, { Circle } from 'react-native-svg';\n\ntype Props = {\n  /** 0–100 */\n  value: number;\n  size?: number;\n  strokeWidth?: number;\n  tone?: 'primary' | 'success' | 'warning' | 'destructive' | 'info';\n  /** Centre content, e.g. a percentage Text. */\n  children?: React.ReactNode;\n  /** What the ring measures, e.g. \"Today's habits\". Read with the percentage. */\n  accessibilityLabel?: string;\n  className?: string;\n};\n\n/** Circular determinate progress — goals, storage, step completion. */\nexport function ProgressRing({ value, size = 64, strokeWidth = 6, tone = 'primary', children, accessibilityLabel = 'Progress', className }: Props) {\n  const colors = usePalette();\n  const r = (size - strokeWidth) / 2;\n  const c = 2 * Math.PI * r;\n  const pct = Math.max(0, Math.min(100, value));\n  return (\n    <View\n      className={cn('items-center justify-center', className)}\n      style={{ width: size, height: size }}\n      role=\"progressbar\"\n      aria-label={accessibilityLabel}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={Math.round(pct)}>\n      <Svg width={size} height={size} style={{ position: 'absolute' }}>\n        <Circle cx={size / 2} cy={size / 2} r={r} stroke={colors.muted} strokeWidth={strokeWidth} fill=\"none\" />\n        <Circle\n          cx={size / 2}\n          cy={size / 2}\n          r={r}\n          stroke={colors[tone]}\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          fill=\"none\"\n          strokeDasharray={`${(pct / 100) * c} ${c}`}\n          transform={`rotate(-90 ${size / 2} ${size / 2})`}\n        />\n      </Svg>\n      {children}\n    </View>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/progress-ring.tsx"
    }
  ],
  "meta": {
    "exports": [
      "ProgressRing"
    ],
    "api": "<ProgressRing value size? tone? accessibilityLabel?>{centre}</ProgressRing>"
  },
  "docs": "Run `npx expo install --fix` afterwards so Expo SDK packages match your SDK. Needs the kit theme (`@kit-native/theme`) and `KitThemeProvider` from `@kit-native/lib-theme-context` at the root.",
  "categories": [
    "data"
  ],
  "type": "registry:component"
}