{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "promo-card",
  "title": "Promo card",
  "description": "tinted offer/nudge card · circular arrow CTA, dismiss X, generated art · one per screen",
  "dependencies": [
    "lucide-react-native@^1.21.0"
  ],
  "registryDependencies": [
    "@kit-native/icon",
    "@kit-native/lib-haptics",
    "@kit-native/lib-utils",
    "@kit-native/placeholder",
    "@kit-native/text"
  ],
  "files": [
    {
      "path": "components/kit/promo-card.tsx",
      "content": "import { Placeholder } from '@/components/kit/placeholder';\nimport { Icon } from '@/components/ui/icon';\nimport { Text } from '@/components/ui/text';\nimport { haptic } from '@/lib/haptics';\nimport { cn } from '@/lib/utils';\nimport { ArrowRightIcon, XIcon, type LucideIcon } from 'lucide-react-native';\nimport { Pressable, View } from 'react-native';\n\nexport type PromoTone = 'primary' | 'success' | 'info' | 'warning' | 'muted';\n\ntype Props = {\n  title: string;\n  body?: string;\n  /** The circular arrow button. `label` is its accessible name. */\n  action?: { label?: string; onPress: () => void };\n  /** Adds the dismiss X. */\n  onDismiss?: () => void;\n  tone?: PromoTone;\n  /** Seed for the generated art on the right. Defaults to the title. */\n  seed?: string;\n  /** Show an icon instead of the generated art. */\n  icon?: LucideIcon;\n  className?: string;\n};\n\nconst SURFACE: Record<PromoTone, string> = {\n  primary: 'bg-primary/10',\n  success: 'bg-success/10',\n  info: 'bg-info/10',\n  warning: 'bg-warning/10',\n  muted: 'bg-muted',\n};\n\nconst BUTTON: Record<PromoTone, string> = {\n  primary: 'bg-primary',\n  success: 'bg-success',\n  info: 'bg-info',\n  warning: 'bg-warning',\n  muted: 'bg-foreground',\n};\n\nconst GLYPH: Record<PromoTone, string> = {\n  primary: 'text-primary-foreground',\n  success: 'text-success-foreground',\n  info: 'text-info-foreground',\n  warning: 'text-warning-foreground',\n  muted: 'text-background',\n};\n\n/**\n * The tinted offer card — an upsell, a nudge, a feature announcement.\n *\n * At most one per screen, and always dismissible when it is promotional rather than\n * required. The art bleeds off the right edge; it is generated, so it needs no asset.\n */\nexport function PromoCard({ title, body, action, onDismiss, tone = 'primary', seed, icon, className }: Props) {\n  return (\n    <View className={cn('overflow-hidden rounded-2xl', SURFACE[tone], className)}>\n      <View className=\"flex-row\">\n        <View className=\"flex-1 gap-2 p-5\">\n          <Text className=\"pr-6 text-base font-semibold\">{title}</Text>\n          {body ? <Text className=\"text-muted-foreground text-sm leading-5\">{body}</Text> : null}\n          {action ? (\n            <Pressable\n              onPress={() => {\n                haptic('selection');\n                action.onPress();\n              }}\n              accessibilityRole=\"button\"\n              accessibilityLabel={action.label ?? title}\n              className={cn('mt-2 size-11 items-center justify-center rounded-full active:opacity-80', BUTTON[tone])}>\n              <Icon as={ArrowRightIcon} size={18} className={GLYPH[tone]} />\n            </Pressable>\n          ) : null}\n        </View>\n        <View className=\"w-28 justify-end\">\n          {icon ? (\n            <View className=\"flex-1 items-center justify-center\">\n              <Icon as={icon} size={44} className=\"text-foreground opacity-20\" />\n            </View>\n          ) : (\n            <View className=\"-mb-6 -mr-6 h-32 w-32 opacity-70\">\n              <Placeholder seed={seed ?? title} ratio={1} className=\"rounded-full bg-transparent\" />\n            </View>\n          )}\n        </View>\n      </View>\n      {onDismiss ? (\n        <Pressable\n          onPress={onDismiss}\n          hitSlop={8}\n          accessibilityRole=\"button\"\n          accessibilityLabel=\"Dismiss\"\n          className=\"absolute right-2 top-2 size-11 items-center justify-center rounded-full active:opacity-70\">\n          <Icon as={XIcon} size={18} className=\"text-muted-foreground\" />\n        </Pressable>\n      ) : null}\n    </View>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/promo-card.tsx"
    }
  ],
  "meta": {
    "exports": [
      "PromoCard"
    ],
    "api": "<PromoCard title body? action? onDismiss? tone? seed? icon? />"
  },
  "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": [
    "layout"
  ],
  "type": "registry:component"
}