{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "native-delete-baseui",
  "type": "registry:component",
  "title": "Native Delete",
  "description": "Delete button that expands to show a confirmation button with smooth animations. (Base UI)",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-baseui/src/components/native/native-delete-baseui.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@base-ui/react/button\";\nimport { AnimatePresence, motion, MotionConfig } from \"framer-motion\";\nimport { Check, Trash2, X } from \"lucide-react\";\nimport { useState } from \"react\";\n\nexport interface NativeDeleteProps {\n  /**\n   * Callback when delete button is first clicked (shows confirmation)\n   */\n  onConfirm: () => void;\n  /**\n   * Callback when delete is confirmed\n   */\n  onDelete: () => void;\n  /**\n   * Text to show on the delete button\n   * Default: \"Delete\"\n   */\n  buttonText?: string;\n  /**\n   * Text to show on the confirm button\n   * Default: \"Confirm\"\n   */\n  confirmText?: string;\n  /**\n   * Size variant\n   * Default: \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Show icon in button\n   * Default: true\n   */\n  showIcon?: boolean;\n  /**\n   * Additional class names for the container\n   */\n  className?: string;\n  /**\n   * Disable the button\n   */\n  disabled?: boolean;\n}\n\nconst sizeVariants = {\n  sm: \"h-8 text-xs px-3\",\n  md: \"h-10 text-sm px-4\",\n  lg: \"h-12 text-base px-6\",\n};\n\nconst iconSizeVariants = {\n  sm: \"h-3 w-3\",\n  md: \"h-4 w-4\",\n  lg: \"h-5 w-5\",\n};\n\nconst cancelButtonSizes = {\n  sm: \"h-8 w-8\",\n  md: \"h-10 w-10\",\n  lg: \"h-12 w-12\",\n};\n\n// Smooth spring preset for natural feel\nconst smoothSpring = {\n  type: \"spring\" as const,\n  bounce: 0,\n  duration: 0.35,\n};\n\nexport function NativeDelete({\n  onConfirm,\n  onDelete,\n  buttonText = \"Delete\",\n  confirmText = \"Confirm\",\n  size = \"md\",\n  showIcon = true,\n  className,\n  disabled = false,\n}: NativeDeleteProps) {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const handleDeleteClick = () => {\n    if (!disabled) {\n      setIsExpanded(true);\n      onConfirm();\n    }\n  };\n\n  const handleConfirm = () => {\n    onDelete();\n    setIsExpanded(false);\n  };\n\n  const handleCancel = () => {\n    setIsExpanded(false);\n  };\n\n  return (\n    <MotionConfig transition={smoothSpring}>\n      <motion.div\n        layout\n        className={cn(\"relative inline-flex items-center gap-2\", className)}\n      >\n        {/* Main Delete/Confirm button */}\n        <motion.div\n          layout\n          whileHover={!disabled ? { scale: 1.02 } : undefined}\n          whileTap={!disabled ? { scale: 0.98 } : undefined}\n        >\n          <Button\n            nativeButton\n            className={cn(\n              sizeVariants[size],\n              \"inline-flex items-center justify-center rounded-md bg-destructive text-white hover:bg-destructive/90 transition-shadow cursor-pointer\",\n              disabled && \"opacity-50 cursor-not-allowed\"\n            )}\n            onClick={isExpanded ? handleConfirm : handleDeleteClick}\n            disabled={disabled}\n            aria-label={isExpanded ? confirmText : buttonText}\n          >\n            <AnimatePresence mode=\"wait\" initial={false}>\n              {showIcon && (\n                <motion.span\n                  key={isExpanded ? \"check-icon\" : \"trash-icon\"}\n                  initial={{ opacity: 0, scale: 0.8 }}\n                  animate={{ opacity: 1, scale: 1 }}\n                  exit={{ opacity: 0, scale: 0.8 }}\n                  transition={{ duration: 0.15 }}\n                  className=\"mr-2 flex items-center\"\n                >\n                  {isExpanded ? (\n                    <Check className={iconSizeVariants[size]} />\n                  ) : (\n                    <Trash2 className={iconSizeVariants[size]} />\n                  )}\n                </motion.span>\n              )}\n            </AnimatePresence>\n            <AnimatePresence mode=\"wait\" initial={false}>\n              <motion.span\n                key={isExpanded ? \"confirm\" : \"delete\"}\n                initial={{ opacity: 0, y: 4 }}\n                animate={{ opacity: 1, y: 0 }}\n                exit={{ opacity: 0, y: -4 }}\n                transition={{ duration: 0.15 }}\n              >\n                {isExpanded ? confirmText : buttonText}\n              </motion.span>\n            </AnimatePresence>\n          </Button>\n        </motion.div>\n\n        {/* Cancel button */}\n        <AnimatePresence mode=\"popLayout\">\n          {isExpanded && (\n            <motion.div\n              key=\"cancel-button\"\n              layout\n              initial={{ opacity: 0, scale: 0.8, x: -8 }}\n              animate={{ opacity: 1, scale: 1, x: 0 }}\n              exit={{ opacity: 0, scale: 0.8, x: -8 }}\n              whileHover={{ scale: 1.05 }}\n              whileTap={{ scale: 0.95 }}\n            >\n              <Button\n                nativeButton\n                className={cn(\n                  cancelButtonSizes[size],\n                  \"inline-flex items-center justify-center rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-shadow cursor-pointer\"\n                )}\n                onClick={handleCancel}\n                aria-label=\"Cancel delete\"\n              >\n                <X className={iconSizeVariants[size]} />\n              </Button>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </motion.div>\n    </MotionConfig>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/native-delete-baseui.tsx"
    }
  ]
}