{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "approval-card",
  "title": "Approval card",
  "description": "consent before consequence · says what changes and whether it can be undone",
  "dependencies": [
    "lucide-react-native@^1.21.0"
  ],
  "registryDependencies": [
    "@kit-native/button",
    "@kit-native/icon",
    "@kit-native/lib-haptics",
    "@kit-native/lib-utils",
    "@kit-native/summary-card",
    "@kit-native/text"
  ],
  "files": [
    {
      "path": "components/kit/approval-card.tsx",
      "content": "import { KeyValueList } from '@/components/kit/key-value-list';\nimport { Button } from '@/components/ui/button';\nimport { Icon } from '@/components/ui/icon';\nimport { Text } from '@/components/ui/text';\nimport { haptic } from '@/lib/haptics';\nimport { cn } from '@/lib/utils';\nimport { ShieldAlertIcon } from 'lucide-react-native';\nimport * as React from 'react';\nimport { View } from 'react-native';\n\ntype Props = {\n  /** The action, as a sentence the person can say yes to: \"Refund £48.00 to Alex Morgan\". */\n  title: string;\n  /** The consequence: what changes, and whether it can be undone. */\n  description?: string;\n  /** Read-only details that matter for the decision. */\n  details?: { label: string; value: string }[];\n  onApprove: () => void;\n  onDeny: () => void;\n  approveLabel?: string;\n  denyLabel?: string;\n  className?: string;\n};\n\n/**\n * Consent before consequence: the assistant asks before it does something irreversible or costly. Once\n * answered it shows the decision instead of the buttons.\n */\nexport function ApprovalCard({ title, description, details, onApprove, onDeny, approveLabel = 'Approve', denyLabel = 'Not now', className }: Props) {\n  const [decision, setDecision] = React.useState<'approved' | 'denied' | null>(null);\n  return (\n    <View className={cn('border-warning/40 bg-warning/10 gap-3 rounded-xl border p-4', className)}>\n      <View className=\"flex-row gap-3\">\n        <Icon as={ShieldAlertIcon} size={20} className=\"text-warning mt-0.5\" />\n        <View className=\"flex-1 gap-1\">\n          <Text className=\"font-semibold\">{title}</Text>\n          {description ? <Text className=\"text-muted-foreground text-sm\">{description}</Text> : null}\n        </View>\n      </View>\n      {details?.length ? <KeyValueList rows={details} className=\"bg-card rounded-lg p-3\" /> : null}\n      {decision ? (\n        <Text accessibilityLiveRegion=\"polite\" className=\"text-sm font-medium\">\n          {decision === 'approved' ? 'Approved. The assistant will go ahead.' : 'Declined. Nothing was changed.'}\n        </Text>\n      ) : (\n        <View className=\"flex-row flex-wrap gap-2\">\n          <Button\n            size=\"sm\"\n            onPress={() => {\n              haptic('success');\n              setDecision('approved');\n              onApprove();\n            }}>\n            <Text>{approveLabel}</Text>\n          </Button>\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            onPress={() => {\n              setDecision('denied');\n              onDeny();\n            }}>\n            <Text>{denyLabel}</Text>\n          </Button>\n        </View>\n      )}\n    </View>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/approval-card.tsx"
    }
  ],
  "meta": {
    "exports": [
      "ApprovalCard"
    ],
    "api": "<ApprovalCard title description? details? onApprove onDeny />"
  },
  "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"
}