{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "trust-score-display-glass",
  "type": "registry:block",
  "title": "Trust Score Display Glass",
  "description": "Large animated trust score display with gradient text and pulsing animation.\n * Extracted from TrustScoreCardGlass for reusability across layouts.\n *\n * ## Features",
  "dependencies": [
    "lucide-react",
    "react",
    "shadcn-glass-ui"
  ],
  "registryDependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "components/glass/composite/trust-score-display-glass.tsx",
      "type": "registry:component",
      "content": "/**\n * TrustScoreDisplayGlass Component\n *\n * Large animated trust score display with gradient text and pulsing animation.\n * Extracted from TrustScoreCardGlass for reusability across layouts.\n *\n * ## Features\n * - Large animated score number with gradient background\n * - 3 size variants (sm, md, lg) with responsive text scales\n * - Optional Target icon with accent color\n * - Score/maxScore ratio format (e.g., \"85 / 100\")\n * - Customizable title (default: \"Overall Trust Score\")\n * - Theme-aware text colors (primary, accent, muted)\n * - Pulsing animation (2s cycle, ease-in-out)\n * - Centered horizontal layout with space-between alignment\n *\n * ## CSS Variables\n * Uses theme text color variables (no component-specific variables):\n * - `--text-primary` - Title text color\n * - `--text-accent` - Target icon color\n * - `--text-muted` - Max score text color\n * - `--score-gradient` - Gradient background for score number\n *\n * @example Basic usage\n * ```tsx\n * import { TrustScoreDisplayGlass } from 'shadcn-glass-ui'\n *\n * function TrustDashboard() {\n *   return (\n *     <TrustScoreDisplayGlass score={85} />\n *   )\n * }\n * ```\n *\n * @example With custom title and max score\n * ```tsx\n * <TrustScoreDisplayGlass\n *   score={92}\n *   maxScore={100}\n *   title=\"Security Score\"\n *   size=\"lg\"\n * />\n * ```\n *\n * @example Small size without icon\n * ```tsx\n * <TrustScoreDisplayGlass\n *   score={78}\n *   size=\"sm\"\n *   showIcon={false}\n * />\n * ```\n *\n * @example Large size with custom styling\n * ```tsx\n * <TrustScoreDisplayGlass\n *   score={95}\n *   maxScore={120}\n *   title=\"Performance Score\"\n *   size=\"lg\"\n *   className=\"mb-6\"\n * />\n * ```\n *\n * @accessibility\n * - Score uses `bg-clip-text` with transparent text for gradient effect\n * - High contrast ratio maintained via CSS variable colors\n * - Target icon is decorative (no aria-label needed)\n * - Semantic `<h2>` element for title (adjust as needed for heading hierarchy)\n * - Animation respects system motion preferences when configured\n *\n * @since v1.0.0\n */\n\nimport { forwardRef, type HTMLAttributes, type CSSProperties } from 'react';\nimport { Target } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport '@/glass-theme.css';\n\n/**\n * Props for TrustScoreDisplayGlass component.\n *\n * Extends standard div attributes with score display-specific props.\n *\n * @example\n * ```tsx\n * const props: TrustScoreDisplayGlassProps = {\n *   score: 85,\n *   maxScore: 100,\n *   title: 'Overall Trust Score',\n *   size: 'lg',\n *   showIcon: true,\n * };\n * ```\n */\nexport interface TrustScoreDisplayGlassProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Current score value.\n   *\n   * Typically in range 0-100, but can be any positive number.\n   * Displayed with gradient background and pulsing animation.\n   *\n   * @example\n   * ```tsx\n   * <TrustScoreDisplayGlass score={85} />\n   * <TrustScoreDisplayGlass score={92} maxScore={120} />\n   * ```\n   */\n  readonly score: number;\n\n  /**\n   * Maximum possible score.\n   *\n   * Displayed after a slash (e.g., \"85 / 100\").\n   * Used to provide context for the score value.\n   *\n   * @default 100\n   *\n   * @example\n   * ```tsx\n   * <TrustScoreDisplayGlass score={85} maxScore={100} />\n   * <TrustScoreDisplayGlass score={450} maxScore={500} />\n   * ```\n   */\n  readonly maxScore?: number;\n\n  /**\n   * Title text displayed next to the score.\n   *\n   * Uses semantic `<h2>` element. Adjust heading level as needed\n   * for your document hierarchy.\n   *\n   * @default \"Overall Trust Score\"\n   *\n   * @example\n   * ```tsx\n   * <TrustScoreDisplayGlass score={92} title=\"Security Score\" />\n   * <TrustScoreDisplayGlass score={78} title=\"Code Quality\" />\n   * ```\n   */\n  readonly title?: string;\n\n  /**\n   * Whether to display the Target icon.\n   *\n   * Icon appears before the title with accent color.\n   *\n   * @default true\n   *\n   * @example\n   * ```tsx\n   * <TrustScoreDisplayGlass score={85} showIcon={true} />\n   * <TrustScoreDisplayGlass score={85} showIcon={false} />\n   * ```\n   */\n  readonly showIcon?: boolean;\n\n  /**\n   * Size variant for text scaling.\n   *\n   * Controls font sizes for title, score, and maxScore:\n   * - `sm`: title (base), score (2xl), maxScore (lg), icon (w-4 h-4)\n   * - `md`: title (lg), score (4xl), maxScore (xl), icon (w-5 h-5)\n   * - `lg`: title (xl), score (5xl), maxScore (2xl), icon (w-6 h-6)\n   *\n   * @default \"md\"\n   *\n   * @example\n   * ```tsx\n   * <TrustScoreDisplayGlass score={85} size=\"sm\" />\n   * <TrustScoreDisplayGlass score={85} size=\"lg\" />\n   * ```\n   */\n  readonly size?: 'sm' | 'md' | 'lg';\n}\n\nexport const TrustScoreDisplayGlass = forwardRef<HTMLDivElement, TrustScoreDisplayGlassProps>(\n  (\n    {\n      score,\n      maxScore = 100,\n      title = 'Overall Trust Score',\n      showIcon = true,\n      size = 'md',\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const titleStyles: CSSProperties = {\n      color: 'var(--text-primary)',\n    };\n\n    const accentStyles: CSSProperties = {\n      color: 'var(--text-accent)',\n    };\n\n    const mutedStyles: CSSProperties = {\n      color: 'var(--text-muted)',\n    };\n\n    const sizeClasses = {\n      sm: { title: 'text-base', score: 'text-2xl', max: 'text-lg', icon: 'w-4 h-4' },\n      md: { title: 'text-lg', score: 'text-4xl', max: 'text-xl', icon: 'w-5 h-5' },\n      lg: { title: 'text-xl', score: 'text-5xl', max: 'text-2xl', icon: 'w-6 h-6' },\n    };\n\n    const sizes = sizeClasses[size];\n\n    return (\n      <div ref={ref} className={cn('flex items-center justify-between', className)} {...props}>\n        <h2\n          className={cn('font-semibold flex items-center gap-2', sizes.title)}\n          style={titleStyles}\n        >\n          {showIcon && <Target className={sizes.icon} style={accentStyles} />}\n          {title}\n        </h2>\n        <div className=\"flex items-center gap-2 animate-[score-pulse_2s_ease-in-out_infinite]\">\n          <span\n            className={cn(sizes.score, 'font-bold bg-clip-text text-transparent')}\n            style={{ backgroundImage: 'var(--score-gradient)' }}\n          >\n            {score}\n          </span>\n          <span className={sizes.max} style={mutedStyles}>\n            / {maxScore}\n          </span>\n        </div>\n      </div>\n    );\n  }\n);\n\nTrustScoreDisplayGlass.displayName = 'TrustScoreDisplayGlass';\n"
    }
  ],
  "categories": [
    "composite"
  ]
}