{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "insight-card-glass",
  "type": "registry:component",
  "title": "Insight Card Glass",
  "description": "Versatile insight display component with emoji icons, text, and optional interactivity.\n * Supports 7 semantic variants with distinct styling and multiple display modes for dashboards,\n * analytics, and feedback interfaces.\n *\n * ## Features",
  "dependencies": [
    "class-variance-authority",
    "lucide-react",
    "react",
    "shadcn-glass-ui"
  ],
  "registryDependencies": [
    "cn",
    "variants"
  ],
  "files": [
    {
      "path": "components/glass/atomic/insight-card-glass.tsx",
      "type": "registry:component",
      "content": "/**\n * InsightCardGlass Component\n *\n * Versatile insight display component with emoji icons, text, and optional interactivity.\n * Supports 7 semantic variants with distinct styling and multiple display modes for dashboards,\n * analytics, and feedback interfaces.\n *\n * ## Features\n * - **7 Semantic Variants:** default, tip, highlight, warning, stat, growth, decline\n * - **2 Display Modes:** card (default) with glass surface, or inline for text integration\n * - **Emoji Icons:** Default emojis per variant (customizable via `emoji` prop)\n * - **Clickable Mode:** Optional `onClick` handler with hover glow effect\n * - **Arrow Indicator:** Optional chevron icon for clickable insights\n * - **Fade-In Animation:** Optional entrance animation via `animated` prop\n * - **Detail Text:** Optional secondary text line for additional context\n * - **Keyboard Accessible:** Space/Enter key support when clickable\n * - **Theme-Aware:** Variant-specific border colors and glow effects\n * - **CVA Variants:** Type-safe variant system with automatic styling\n *\n * ## CSS Variables\n * Defined per variant in `insight-card-glass-variants.ts`:\n *\n * ### Shared Variables\n * - `--glass-bg-subtle` - Card background (non-inline mode)\n * - `--glass-bg` - Hover background for clickable cards\n * - `--text-primary` - Main text color\n * - `--text-secondary` - Inline text color\n * - `--text-muted` - Detail text and arrow icon color\n *\n * ### Variant-Specific Variables\n * Each variant has unique border and glow variables:\n *\n * - **default:** `--glass-border`, `--glow-primary`\n * - **tip:** `--alert-default-border`, `--glow-secondary`\n * - **highlight:** `--alert-success-border`, `--glow-success`\n * - **warning:** `--alert-warning-border`, `--glow-warning`\n * - **stat:** `--glass-border`, no glow\n * - **growth:** `--alert-success-border`, `--glow-success`\n * - **decline:** `--alert-destructive-border`, `--glow-error`\n *\n * @example Basic usage\n * ```tsx\n * import { InsightCardGlass } from 'shadcn-glass-ui'\n *\n * function Dashboard() {\n *   return (\n *     <InsightCardGlass\n *       variant=\"tip\"\n *       text=\"Your code quality has improved this month\"\n *       detail=\"Based on 45 merged PRs\"\n *     />\n *   )\n * }\n * ```\n *\n * @example Clickable insight with arrow\n * ```tsx\n * <InsightCardGlass\n *   variant=\"highlight\"\n *   text=\"New achievements unlocked!\"\n *   detail=\"View all 3 achievements\"\n *   onClick={() => navigate('/achievements')}\n *   showArrow={true}\n * />\n * ```\n *\n * @example Inline mode\n * ```tsx\n * <p>\n *   Your profile is complete{' '}\n *   <InsightCardGlass\n *     variant=\"growth\"\n *     text=\"100% completion\"\n *     inline={true}\n *   />\n * </p>\n * ```\n *\n * @example Custom emoji with animation\n * ```tsx\n * <InsightCardGlass\n *   variant=\"warning\"\n *   emoji=\"🚨\"\n *   text=\"Action required: Update your billing information\"\n *   animated={true}\n * />\n * ```\n *\n * @example All 7 variants\n * ```tsx\n * <InsightCardGlass variant=\"default\" text=\"General insight\" />\n * <InsightCardGlass variant=\"tip\" text=\"Pro tip for better results\" />\n * <InsightCardGlass variant=\"highlight\" text=\"Key achievement unlocked\" />\n * <InsightCardGlass variant=\"warning\" text=\"Potential issue detected\" />\n * <InsightCardGlass variant=\"stat\" text=\"Statistical observation\" />\n * <InsightCardGlass variant=\"growth\" text=\"Positive trend detected\" />\n * <InsightCardGlass variant=\"decline\" text=\"Metric decreased\" />\n * ```\n *\n * @accessibility\n * - Uses `role=\"button\"` when clickable with `tabIndex={0}`\n * - Keyboard support (Space/Enter) for clickable insights\n * - Emoji icons marked `aria-hidden=\"true\"` (decorative)\n * - Arrow icon marked `aria-hidden=\"true\"` (visual indicator only)\n * - Semantic `<div>` for card mode, `<span>` for inline mode\n * - Focus states automatically applied when clickable\n * - WCAG 2.1 AA compliant color contrast for all variants\n *\n * @since v1.0.0\n */\n\nimport { forwardRef, type CSSProperties, type KeyboardEvent } from 'react';\nimport { type VariantProps } from 'class-variance-authority';\nimport { ChevronRight } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport {\n  insightCardVariants,\n  insightVariantConfig,\n  type InsightVariant,\n} from '@/lib/variants/insight-card-glass-variants';\nimport '@/glass-theme.css';\n\n/**\n * Props for InsightCardGlass component.\n *\n * Extends standard div attributes (excluding `style` which is used internally for\n * variant-specific border and glow effects) and includes CVA variants.\n *\n * @example\n * ```tsx\n * const props: InsightCardGlassProps = {\n *   variant: 'tip',\n *   emoji: '💡',\n *   text: 'Pro tip for better results',\n *   detail: 'Based on best practices',\n *   inline: false,\n *   onClick: () => console.log('Clicked'),\n *   showArrow: true,\n *   animated: true,\n * }\n * ```\n */\nexport interface InsightCardGlassProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>,\n    VariantProps<typeof insightCardVariants> {\n  /**\n   * Emoji icon for the insight.\n   *\n   * Overrides the default emoji for the variant. Each variant has a default:\n   * - default: 💡, tip: 💡, highlight: ✨, warning: ⚠️\n   * - stat: 📊, growth: 📈, decline: 📉\n   *\n   * @example\n   * ```tsx\n   * <InsightCardGlass emoji=\"🚨\" text=\"Alert\" variant=\"warning\" />\n   * <InsightCardGlass emoji=\"🎉\" text=\"Success\" variant=\"highlight\" />\n   * ```\n   */\n  readonly emoji?: string;\n\n  /**\n   * Main insight text.\n   *\n   * Primary message displayed in the insight. Use clear, concise language for\n   * maximum impact.\n   *\n   * @example\n   * ```tsx\n   * <InsightCardGlass text=\"Your code quality has improved this month\" />\n   * ```\n   */\n  readonly text: string;\n\n  /**\n   * Additional details.\n   *\n   * Optional secondary text line for context or metrics. Displayed in smaller,\n   * muted text below the main text.\n   *\n   * @example\n   * ```tsx\n   * <InsightCardGlass\n   *   text=\"Your code quality has improved\"\n   *   detail=\"Based on 45 merged PRs\"\n   * />\n   * ```\n   */\n  readonly detail?: string;\n\n  /**\n   * Insight type variant.\n   *\n   * One of 7 semantic variants with distinct styling:\n   * - `default`: General insights (blue glow)\n   * - `tip`: Helpful tips (secondary glow)\n   * - `highlight`: Achievements, success (green glow)\n   * - `warning`: Alerts, cautions (orange/yellow glow)\n   * - `stat`: Statistical observations (no glow)\n   * - `growth`: Positive trends (green glow)\n   * - `decline`: Negative trends (red glow)\n   *\n   * @default 'default'\n   *\n   * @example\n   * ```tsx\n   * <InsightCardGlass variant=\"tip\" text=\"Enable 2FA for security\" />\n   * <InsightCardGlass variant=\"growth\" text=\"Traffic up 25%\" />\n   * ```\n   */\n  readonly variant?: InsightVariant;\n\n  /**\n   * Inline display mode.\n   *\n   * - `true`: Renders as `<span>` for inline text integration (no glass surface)\n   * - `false`: Renders as `<div>` card with glass background and border\n   *\n   * @default false\n   *\n   * @example\n   * ```tsx\n   * <p>\n   *   Status: <InsightCardGlass inline text=\"Active\" variant=\"growth\" />\n   * </p>\n   * ```\n   */\n  readonly inline?: boolean;\n\n  /**\n   * Click handler (makes the insight clickable).\n   *\n   * When provided, the insight becomes interactive with:\n   * - Hover glow effect (variant-specific)\n   * - Cursor pointer\n   * - Keyboard support (Space/Enter)\n   * - `role=\"button\"` and `tabIndex={0}`\n   *\n   * @example\n   * ```tsx\n   * <InsightCardGlass\n   *   text=\"View details\"\n   *   onClick={() => navigate('/details')}\n   *   showArrow\n   * />\n   * ```\n   */\n  readonly onClick?: () => void;\n\n  /**\n   * Show arrow indicator.\n   *\n   * Displays ChevronRight icon on the right side of the card. Useful for\n   * indicating clickable insights that navigate to another view.\n   *\n   * @default false\n   *\n   * @example\n   * ```tsx\n   * <InsightCardGlass\n   *   text=\"See all achievements\"\n   *   onClick={handleClick}\n   *   showArrow={true}\n   * />\n   * ```\n   */\n  readonly showArrow?: boolean;\n\n  /**\n   * Fade-in animation.\n   *\n   * Applies `animate-insight-fade-in` CSS animation for entrance effect.\n   * Useful for insights that appear dynamically (e.g., after data load).\n   *\n   * @default false\n   *\n   * @example\n   * ```tsx\n   * <InsightCardGlass\n   *   text=\"New data available\"\n   *   animated={dataJustLoaded}\n   * />\n   * ```\n   */\n  readonly animated?: boolean;\n}\n\nexport const InsightCardGlass = forwardRef<HTMLDivElement, InsightCardGlassProps>(\n  (\n    {\n      emoji,\n      text,\n      detail,\n      variant = 'default',\n      inline = false,\n      onClick,\n      showArrow = false,\n      animated = false,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const config = insightVariantConfig[variant];\n    const displayEmoji = emoji ?? config.defaultEmoji;\n    const isClickable = !!onClick;\n\n    const handleClick = () => onClick?.();\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n      if (isClickable && (e.key === 'Enter' || e.key === ' ')) {\n        e.preventDefault();\n        onClick?.();\n      }\n    };\n\n    const borderStyle: CSSProperties = !inline\n      ? {\n          borderColor: `var(${config.borderVar})`,\n        }\n      : {};\n\n    const glowStyle: CSSProperties =\n      isClickable && config.glowVar\n        ? ({\n            '--hover-glow': `var(${config.glowVar})`,\n          } as CSSProperties)\n        : {};\n\n    // Inline variant\n    if (inline) {\n      return (\n        <span\n          ref={ref as React.Ref<HTMLSpanElement>}\n          className={cn(\n            'inline-flex items-center gap-1.5 text-sm text-[var(--text-secondary)]',\n            className\n          )}\n          {...props}\n        >\n          <span aria-hidden=\"true\">{displayEmoji}</span>\n          <span>{text}</span>\n          {detail && <span className=\"text-[var(--text-muted)]\">({detail})</span>}\n        </span>\n      );\n    }\n\n    // Card variant\n    return (\n      <div\n        ref={ref}\n        role={isClickable ? 'button' : undefined}\n        tabIndex={isClickable ? 0 : undefined}\n        onClick={isClickable ? handleClick : undefined}\n        onKeyDown={isClickable ? handleKeyDown : undefined}\n        className={cn(\n          insightCardVariants({ inline, clickable: isClickable }),\n          isClickable && config.glowVar && 'hover:shadow-[0_0_12px_var(--hover-glow)]',\n          animated && 'animate-insight-fade-in',\n          className\n        )}\n        style={{ ...borderStyle, ...glowStyle }}\n        {...props}\n      >\n        <div className=\"flex items-start gap-2\">\n          <span className=\"text-lg flex-shrink-0\" aria-hidden=\"true\">\n            {displayEmoji}\n          </span>\n          <div className=\"flex-1 min-w-0\">\n            <p className=\"text-sm text-[var(--text-primary)]\">{text}</p>\n            {detail && <p className=\"text-xs text-[var(--text-muted)] mt-0.5\">{detail}</p>}\n          </div>\n          {showArrow && (\n            <ChevronRight\n              className=\"w-4 h-4 text-[var(--text-muted)] flex-shrink-0\"\n              aria-hidden=\"true\"\n            />\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nInsightCardGlass.displayName = 'InsightCardGlass';\n"
    }
  ],
  "categories": [
    "atomic"
  ]
}