{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "empty-state",
  "title": "Empty state",
  "description": "`default` / `compact`",
  "dependencies": [
    "lucide-react-native@^1.21.0"
  ],
  "registryDependencies": [
    "@kit-native/button",
    "@kit-native/icon",
    "@kit-native/lib-utils",
    "@kit-native/spot",
    "@kit-native/text"
  ],
  "files": [
    {
      "path": "components/kit/empty-state.tsx",
      "content": "import { Spot } from '@/components/kit/spot';\nimport { Button } from '@/components/ui/button';\nimport { Icon } from '@/components/ui/icon';\nimport { Text } from '@/components/ui/text';\nimport { cn } from '@/lib/utils';\nimport type { LucideIcon } from 'lucide-react-native';\nimport { Pressable, View } from 'react-native';\n\ntype Props = {\n  icon?: LucideIcon;\n  title: string;\n  subtitle?: string;\n  action?: { label: string; onPress: () => void };\n  /** `default` is the full-section hero; `compact` fits inside a card. */\n  variant?: 'default' | 'compact';\n  className?: string;\n};\n\n/** Standard empty state: icon, title, subtitle, optional action. */\nexport function EmptyState({ icon, title, subtitle, action, variant = 'default', className }: Props) {\n  if (variant === 'compact') {\n    return (\n      <View className={cn('items-center px-5 py-6', className)}>\n        {icon ? <Icon as={icon} size={28} className=\"text-muted-foreground mb-2\" /> : null}\n        <Text className=\"text-muted-foreground text-center text-sm font-medium\">{title}</Text>\n        {subtitle ? <Text className=\"text-muted-foreground mt-1 text-center text-sm\">{subtitle}</Text> : null}\n        {action ? (\n          <Pressable onPress={action.onPress} accessibilityRole=\"button\" className=\"mt-3 min-h-11 justify-center\">\n            <Text className=\"text-primary text-sm font-semibold\">{action.label}</Text>\n          </Pressable>\n        ) : null}\n      </View>\n    );\n  }\n  return (\n    <View className={cn('items-center justify-center px-6 py-12', className)}>\n      {icon ? <Spot icon={icon} size=\"lg\" className=\"mb-6\" /> : null}\n      <View className=\"w-full max-w-xs items-center gap-2\">\n        <Text variant=\"h4\" className=\"text-center\">\n          {title}\n        </Text>\n        {subtitle ? <Text className=\"text-muted-foreground text-center\">{subtitle}</Text> : null}\n        {action ? (\n          <Button onPress={action.onPress} className=\"mt-4 w-full\">\n            <Text>{action.label}</Text>\n          </Button>\n        ) : null}\n      </View>\n    </View>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/empty-state.tsx"
    }
  ],
  "meta": {
    "exports": [
      "EmptyState"
    ],
    "api": "<EmptyState icon title subtitle? action? variant=\"default|compact\" />"
  },
  "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": [
    "feedback"
  ],
  "type": "registry:component"
}