{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ai-card-glass",
  "type": "registry:block",
  "title": "Ai Card Glass",
  "description": "AI-themed interactive card with feature list and generate button.\n * Designed for AI analysis, report generation, and ML-powered features.\n *\n * ## Features",
  "dependencies": [
    "lucide-react",
    "react",
    "shadcn-glass-ui"
  ],
  "registryDependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "components/glass/composite/ai-card-glass.tsx",
      "type": "registry:component",
      "content": "/**\n * AICardGlass Component\n *\n * AI-themed interactive card with feature list and generate button.\n * Designed for AI analysis, report generation, and ML-powered features.\n *\n * ## Features\n * - AI-themed Sparkles icon with accent color\n * - Customizable features list with checkmark icons (default: 3 items)\n * - Generate button with Zap icon for action trigger\n * - Estimated time display with Clock icon\n * - Hover lift effect via InteractiveCard primitive\n * - Responsive sizing (full-width on mobile, fixed width on desktop)\n * - Theme-aware accent colors for icons and title\n *\n * ## CSS Variables\n * - `--ai-card-bg` - Card background color\n * - `--ai-card-border` - Card border color\n * - `--ai-card-hover-glow` - Glow effect on hover\n * - `--text-accent` - Accent color for title and Sparkles icon\n * - `--text-secondary` - Description text color\n * - `--text-muted` - Feature list and time text color\n * - `--status-online` - Green checkmark color for features\n *\n * @example Basic usage\n * ```tsx\n * import { AICardGlass } from 'shadcn-glass-ui'\n *\n * function Dashboard() {\n *   return (\n *     <AICardGlass\n *       onGenerate={() => console.log('Generating report...')}\n *     />\n *   )\n * }\n * ```\n *\n * @example Custom features and timing\n * ```tsx\n * <AICardGlass\n *   features={[\n *     'Security analysis',\n *     'Performance metrics',\n *     'Optimization suggestions',\n *     'Dependency audit',\n *   ]}\n *   estimatedTime=\"~45 seconds\"\n *   onGenerate={handleGenerateReport}\n * />\n * ```\n *\n * @example With custom styling\n * ```tsx\n * <AICardGlass\n *   className=\"lg:w-80\"\n *   onGenerate={() => setIsGenerating(true)}\n * />\n * ```\n *\n * @example Without generate handler\n * ```tsx\n * <AICardGlass\n *   features={['Feature detection', 'Pattern recognition', 'Recommendations']}\n * />\n * // Button is still displayed but onClick is undefined\n * ```\n *\n * @accessibility\n * - ButtonGlass has built-in keyboard navigation (Enter/Space)\n * - Sparkles icon includes implicit decorative role\n * - High contrast icons (Sparkles, Check, Zap, Clock) for visual clarity\n * - Responsive text sizing (2xs on mobile, xs on desktop)\n * - Feature list uses semantic `<ul>` and `<li>` elements\n *\n * @since v1.0.0\n */\n\nimport { forwardRef } from 'react';\nimport { Sparkles, Check, Zap, Clock } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport { ButtonGlass } from '../ui/button-glass';\nimport { InteractiveCard } from '../primitives';\nimport '@/glass-theme.css';\n\n/**\n * Props for AICardGlass component.\n *\n * Extends standard div attributes with AI card-specific props.\n *\n * @example\n * ```tsx\n * const props: AICardGlassProps = {\n *   onGenerate: () => handleGenerateReport(),\n *   features: ['Security audit', 'Performance analysis'],\n *   estimatedTime: '~1 minute',\n * };\n * ```\n */\nexport interface AICardGlassProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Callback when generate button is clicked.\n   *\n   * Triggers the AI report generation or analysis action.\n   * Button remains visible even if undefined.\n   *\n   * @example\n   * ```tsx\n   * <AICardGlass\n   *   onGenerate={() => {\n   *     setIsLoading(true);\n   *     generateReport().then(setReport);\n   *   }}\n   * />\n   * ```\n   */\n  readonly onGenerate?: () => void;\n\n  /**\n   * List of features included in the AI analysis.\n   *\n   * Each feature is displayed with a green checkmark icon.\n   * Defaults to: \"Code quality assessment\", \"Architecture patterns\", \"Best practices\".\n   *\n   * @default ['Code quality assessment', 'Architecture patterns', 'Best practices']\n   *\n   * @example\n   * ```tsx\n   * <AICardGlass\n   *   features={[\n   *     'Security analysis',\n   *     'Performance metrics',\n   *     'Code coverage',\n   *     'Dependency audit',\n   *   ]}\n   * />\n   * ```\n   */\n  readonly features?: readonly string[];\n\n  /**\n   * Estimated time for report generation.\n   *\n   * Displayed below the generate button with a Clock icon.\n   *\n   * @default \"~30 seconds\"\n   *\n   * @example\n   * ```tsx\n   * <AICardGlass estimatedTime=\"~2 minutes\" />\n   * <AICardGlass estimatedTime=\"< 1 minute\" />\n   * ```\n   */\n  readonly estimatedTime?: string;\n}\n\nconst defaultFeatures: readonly string[] = [\n  'Code quality assessment',\n  'Architecture patterns',\n  'Best practices',\n];\n\nexport const AICardGlass = forwardRef<HTMLDivElement, AICardGlassProps>(\n  (\n    { onGenerate, features = defaultFeatures, estimatedTime = '~30 seconds', className, ...props },\n    ref\n  ) => {\n    return (\n      <InteractiveCard\n        ref={ref}\n        baseBg=\"var(--ai-card-bg)\"\n        borderColor=\"var(--ai-card-border)\"\n        hoverGlow=\"var(--ai-card-hover-glow)\"\n        hoverLift\n        blur=\"sm\"\n        rounded=\"rounded-xl\"\n        className={cn('w-full sm:w-56 md:w-64 p-3 md:p-4', className)}\n        {...props}\n      >\n        <div\n          className=\"flex items-center gap-1.5 md:gap-2 font-semibold text-xs md:text-sm mb-1.5 md:mb-2\"\n          style={{ color: 'var(--text-accent)' }}\n        >\n          <Sparkles className=\"w-3.5 h-3.5 md:w-4 md:h-4\" />\n          AI Summary\n        </div>\n        <p className=\"text-(length:--font-size-2xs) md:text-xs mb-1.5 md:mb-2 text-(--text-secondary)\">\n          Get comprehensive analysis:\n        </p>\n        <ul className=\"text-(length:--font-size-2xs) md:text-xs space-y-0.5 md:space-y-1 mb-2 md:mb-3\">\n          {features.map((feature, i) => (\n            <li\n              key={`feature-${i}`}\n              className=\"flex items-center gap-1\"\n              style={{ color: 'var(--text-muted)' }}\n            >\n              <Check\n                className=\"w-2.5 h-2.5 md:w-3 md:h-3\"\n                style={{ color: 'var(--status-online)' }}\n              />\n              {feature}\n            </li>\n          ))}\n        </ul>\n        <ButtonGlass variant=\"default\" size=\"sm\" icon={Zap} onClick={onGenerate} className=\"w-full\">\n          Generate Report\n        </ButtonGlass>\n        <p className=\"text-(length:--font-size-2xs) md:text-xs mt-1.5 md:mt-2 text-center flex items-center justify-center gap-1 text-(--text-muted)\">\n          <Clock className=\"w-2.5 h-2.5 md:w-3 md:h-3\" />\n          {estimatedTime}\n        </p>\n      </InteractiveCard>\n    );\n  }\n);\n\nAICardGlass.displayName = 'AICardGlass';\n"
    }
  ],
  "categories": [
    "composite"
  ]
}