{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "thinking-indicator",
  "title": "Thinking indicator",
  "description": "the model is working · say what it is doing when you can · still dots under reduced motion",
  "dependencies": [],
  "registryDependencies": [
    "@kit-native/lib-reduced-motion",
    "@kit-native/lib-utils",
    "@kit-native/text"
  ],
  "files": [
    {
      "path": "components/kit/thinking-indicator.tsx",
      "content": "import { Text } from '@/components/ui/text';\nimport { useReducedMotion } from '@/lib/reduced-motion';\nimport { cn } from '@/lib/utils';\nimport * as React from 'react';\nimport { Animated, Easing, View } from 'react-native';\n\ntype Props = { label?: string; className?: string };\n\nfunction Dot({ delay, still }: { delay: number; still: boolean }) {\n  const [y] = React.useState(() => new Animated.Value(0));\n  React.useEffect(() => {\n    if (still) return;\n    const bounce = Animated.loop(\n      Animated.sequence([\n        Animated.delay(delay),\n        Animated.timing(y, { toValue: -4, duration: 280, easing: Easing.out(Easing.quad), useNativeDriver: true }),\n        Animated.timing(y, { toValue: 0, duration: 280, easing: Easing.in(Easing.quad), useNativeDriver: true }),\n        Animated.delay(450 - delay),\n      ])\n    );\n    bounce.start();\n    return () => {\n      bounce.stop();\n      y.setValue(0);\n    };\n  }, [delay, still, y]);\n  // The fill sits on a plain View: NativeWind classNames are dropped on Animated.View on web.\n  return (\n    <Animated.View style={{ transform: [{ translateY: y }] }}>\n      <View className=\"bg-muted-foreground size-1.5 rounded-full\" />\n    </Animated.View>\n  );\n}\n\n/** \"The model is working\": three dots and a label. Still dots under reduced motion. */\nexport function ThinkingIndicator({ label = 'Thinking', className }: Props) {\n  const reduced = useReducedMotion();\n  return (\n    <View accessibilityRole=\"progressbar\" accessibilityLabel={label} accessibilityLiveRegion=\"polite\" className={cn('flex-row items-center gap-2 self-start', className)}>\n      <View className=\"flex-row gap-1\" importantForAccessibility=\"no-hide-descendants\" accessibilityElementsHidden>\n        {[0, 150, 300].map((d) => (\n          <Dot key={d} delay={d} still={reduced} />\n        ))}\n      </View>\n      <Text className=\"text-muted-foreground text-sm\">{label}</Text>\n    </View>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/thinking-indicator.tsx"
    }
  ],
  "meta": {
    "exports": [
      "ThinkingIndicator"
    ],
    "api": "<ThinkingIndicator label? />"
  },
  "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": [
    "ai"
  ],
  "type": "registry:component"
}