shadcn-glass-ui 2.0.8 → 2.0.9

package/dist/r/trust-score-display-glass.json

@@ -15,7 +15,7 @@
     {
       "path": "components/glass/composite/trust-score-display-glass.tsx",
       "type": "registry:component",
-      "content": "// ========================================\n// TRUST SCORE DISPLAY GLASS - COMPOSITE COMPONENT\n// Large animated trust score number with title\n// Level 3: Composite (extracted from TrustScoreCardGlass)\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\nexport interface TrustScoreDisplayGlassProps extends HTMLAttributes<HTMLDivElement> {\n  /** Score value (0-100) */\n  readonly score: number;\n  /** Maximum score (default: 100) */\n  readonly maxScore?: number;\n  /** Title text */\n  readonly title?: string;\n  /** Show icon */\n  readonly showIcon?: boolean;\n  /** Size variant */\n  readonly size?: 'sm' | 'md' | 'lg';\n}\n\nexport const TrustScoreDisplayGlass = forwardRef<\n  HTMLDivElement,\n  TrustScoreDisplayGlassProps\n>(\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\n        ref={ref}\n        className={cn('flex items-center justify-between', className)}\n        {...props}\n      >\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(\n              sizes.score,\n              'font-bold bg-linear-to-r from-amber-400 via-emerald-400 to-cyan-400 bg-clip-text text-transparent'\n            )}\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"
+      "content": "// ========================================\n// TRUST SCORE DISPLAY GLASS - COMPOSITE COMPONENT\n// Large animated trust score number with title\n// Level 3: Composite (extracted from TrustScoreCardGlass)\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\nexport interface TrustScoreDisplayGlassProps extends HTMLAttributes<HTMLDivElement> {\n  /** Score value (0-100) */\n  readonly score: number;\n  /** Maximum score (default: 100) */\n  readonly maxScore?: number;\n  /** Title text */\n  readonly title?: string;\n  /** Show icon */\n  readonly showIcon?: boolean;\n  /** Size variant */\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": [