{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-glass",
  "type": "registry:component",
  "title": "Progress Glass",
  "description": "Glass-themed progress bar with 100% shadcn/ui Progress API compatibility.\n *\n * ## shadcn/ui Compatibility\n *\n * This component is **fully compatible** with shadcn/ui Progress API:",
  "dependencies": [
    "class-variance-authority",
    "react",
    "shadcn-glass-ui"
  ],
  "registryDependencies": [
    "cn",
    "variants"
  ],
  "files": [
    {
      "path": "components/glass/specialized/progress-glass.tsx",
      "type": "registry:component",
      "content": "/**\n * ProgressGlass Component\n *\n * Glass-themed progress bar with 100% shadcn/ui Progress API compatibility.\n *\n * ## shadcn/ui Compatibility\n *\n * This component is **fully compatible** with shadcn/ui Progress API:\n * - `value` prop works identically\n * - `max` prop supported (default: 100)\n * - Extra props (`size`, `gradient`, `showLabel`) have sensible defaults\n * - Drop-in replacement: `<Progress value={50} />` → `<ProgressGlass value={50} />`\n *\n * @example Drop-in replacement from shadcn/ui\n * ```tsx\n * // shadcn/ui\n * <Progress value={50} />\n * <Progress value={50} max={200} />\n *\n * // ProgressGlass (identical behavior)\n * <ProgressGlass value={50} />\n * <ProgressGlass value={50} max={200} />\n * ```\n *\n * @example Enhanced features (not in shadcn/ui)\n * ```tsx\n * <ProgressGlass\n *   value={75}\n *   max={100}           // Custom max value (default: 100)\n *   size=\"lg\"           // 'sm' | 'md' | 'lg' | 'xl' (default: 'md')\n *   gradient=\"emerald\"  // 'violet' | 'blue' | 'cyan' | 'amber' | 'emerald' | 'rose' (default: 'violet')\n *   showLabel           // Show percentage label (default: false)\n * />\n * ```\n *\n * ## Features\n * - Theme-aware styling (glass/light/aurora)\n * - Gradient fill with glow effects\n * - Responsive size variants\n * - Optional percentage label\n *\n * @accessibility\n * - role=\"progressbar\" with aria-valuenow, aria-valuemin, aria-valuemax\n */\n\nimport { forwardRef, type CSSProperties } from 'react';\nimport { type VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\nimport { progressSizes, type ProgressGradient } from '@/lib/variants/progress-glass-variants';\nimport '@/glass-theme.css';\n\n// ========================================\n// PROPS INTERFACE\n// ========================================\n\nexport interface ProgressGlassProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>, VariantProps<typeof progressSizes> {\n  readonly value: number;\n  readonly max?: number;\n  readonly gradient?: ProgressGradient;\n  readonly showLabel?: boolean;\n}\n\n// ========================================\n// COMPONENT\n// ========================================\n\n// Map gradient to existing metric color variables\nconst getGradientColor = (\n  gradient: ProgressGradient = 'violet'\n): { colorVar: string; glowVar: string } => {\n  const gradients: Record<ProgressGradient, { colorVar: string; glowVar: string }> = {\n    violet: { colorVar: '--metric-default-text', glowVar: '--progress-glow-violet' }, // Uses blue metric color\n    blue: { colorVar: '--metric-default-text', glowVar: '--progress-glow-blue' },\n    cyan: { colorVar: '--metric-secondary-text', glowVar: '--progress-glow-cyan' },\n    amber: { colorVar: '--metric-warning-text', glowVar: '--progress-glow-amber' },\n    emerald: { colorVar: '--metric-success-text', glowVar: '--progress-glow-emerald' },\n    rose: { colorVar: '--metric-destructive-text', glowVar: '--progress-glow-rose' },\n  };\n  return gradients[gradient] || gradients.violet;\n};\n\nexport const ProgressGlass = forwardRef<HTMLDivElement, ProgressGlassProps>(\n  (\n    {\n      className,\n      size = 'md',\n      value = 0,\n      max = 100,\n      gradient = 'violet',\n      showLabel,\n      'aria-label': ariaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    // Calculate percentage based on max value\n    const percentage = Math.min(100, Math.max(0, (value / max) * 100));\n    const { colorVar, glowVar } = getGradientColor(gradient);\n\n    const trackStyles: CSSProperties = {\n      background: 'var(--progress-bg)',\n    };\n\n    const fillStyles: CSSProperties = {\n      width: `${percentage}%`,\n      background: `var(${colorVar})`,\n      boxShadow: `var(${glowVar})`,\n    };\n\n    return (\n      <div ref={ref} data-slot=\"progress\" className={cn('w-full', className)} {...props}>\n        {showLabel && (\n          <div className=\"flex justify-between mb-1 md:mb-1.5\">\n            <span className=\"text-(length:--font-size-2xs) md:text-xs text-(--text-muted)\">\n              Progress\n            </span>\n            <span className=\"text-(length:--font-size-2xs) md:text-xs font-medium text-(--text-secondary)\">\n              {Math.round(percentage)}%\n            </span>\n          </div>\n        )}\n        <div className={cn(progressSizes({ size }))} style={trackStyles}>\n          <div\n            data-slot=\"progress-indicator\"\n            className=\"h-full rounded-full transition-all duration-700 ease-out\"\n            style={fillStyles}\n            role=\"progressbar\"\n            aria-valuenow={value}\n            aria-valuemin={0}\n            aria-valuemax={max}\n            aria-label={ariaLabel ?? `Progress: ${value} of ${max}`}\n          />\n        </div>\n      </div>\n    );\n  }\n);\n\nProgressGlass.displayName = 'ProgressGlass';\n\n// ========================================\n// SHADCN/UI COMPATIBLE ALIAS\n// ========================================\n\n/**\n * Progress - shadcn/ui compatible alias for ProgressGlass\n *\n * @example Drop-in replacement for shadcn/ui Progress\n * ```tsx\n * import { Progress } from 'shadcn-glass-ui'\n *\n * <Progress value={50} />\n * <Progress value={50} max={200} />\n * ```\n */\nexport const Progress = ProgressGlass;\n"
    }
  ],
  "categories": [
    "specialized"
  ]
}