{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-item-glass",
  "type": "registry:component",
  "title": "Stat Item Glass",
  "description": "Compact statistic display component with icon, value, and label for profile cards and dashboards.\n * Designed for inline metrics with automatic value formatting and flexible layouts.\n *\n * ## Features",
  "dependencies": [
    "class-variance-authority",
    "lucide-react",
    "react",
    "shadcn-glass-ui"
  ],
  "registryDependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "components/glass/atomic/stat-item-glass.tsx",
      "type": "registry:component",
      "content": "/**\n * StatItemGlass Component\n *\n * Compact statistic display component with icon, value, and label for profile cards and dashboards.\n * Designed for inline metrics with automatic value formatting and flexible layouts.\n *\n * ## Features\n * - **Icon + Value + Label:** Clean three-part layout with Lucide icon support\n * - **3 Size Variants:** sm (12px), md (14px), lg (16px) text sizes\n * - **2 Layout Modes:** horizontal (default) and vertical layouts\n * - **Value Formatting:** Automatic number abbreviation (1.2k, 2.5M) in abbreviated mode\n * - **Flexible Values:** Supports both numbers and pre-formatted strings\n * - **Theme-Aware Colors:** Uses CSS variables for icon accent and text\n * - **Customizable Icon Size:** Configurable icon dimensions via `iconSize` prop\n * - **Compact Design:** Minimal spacing optimized for inline use\n * - **Atomic Component:** Extracted from ProfileHeaderGlass for reusability\n *\n * ## CSS Variables\n * Uses inline theme CSS variables (no component-specific variables):\n * - `--text-secondary` - Stat value and label text color\n * - `--text-accent` - Icon color\n *\n * @example Basic usage\n * ```tsx\n * import { StatItemGlass } from 'shadcn-glass-ui'\n * import { Star } from 'lucide-react'\n *\n * function UserProfile() {\n *   return (\n *     <StatItemGlass\n *       icon={Star}\n *       value={1234}\n *       label=\"stars\"\n *     />\n *   )\n * }\n * ```\n *\n * @example With abbreviated values\n * ```tsx\n * import { GitCommit } from 'lucide-react'\n *\n * <StatItemGlass\n *   icon={GitCommit}\n *   value={15678}\n *   label=\"commits\"\n *   abbreviated={true}\n * />\n * // Renders: \"15.7k commits\"\n * ```\n *\n * @example Vertical layout with large size\n * ```tsx\n * import { Users } from 'lucide-react'\n *\n * <StatItemGlass\n *   icon={Users}\n *   value={250}\n *   label=\"followers\"\n *   size=\"lg\"\n *   layout=\"vertical\"\n *   iconSize={20}\n * />\n * ```\n *\n * @example With pre-formatted string value\n * ```tsx\n * import { Calendar } from 'lucide-react'\n *\n * <StatItemGlass\n *   icon={Calendar}\n *   value=\"2 years\"\n *   label=\"active\"\n *   size=\"sm\"\n * />\n * ```\n *\n * @accessibility\n * - Uses semantic `<span>` element for inline display\n * - Icon has proper color contrast via `--text-accent`\n * - Font weight (`font-medium`) improves readability\n * - Supports custom `aria-label` via spread props\n * - No interactive elements, purely informational\n * - WCAG 2.1 AA compliant color contrast\n *\n * @since v1.0.0\n */\n\n// ========================================\n// STAT ITEM GLASS - ATOMIC COMPONENT\n// Compact stat display with icon and label\n// Level 2: Atomic (extracted from ProfileHeaderGlass)\n// ========================================\n\nimport { forwardRef, type HTMLAttributes, type CSSProperties } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { type LucideIcon } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport '@/glass-theme.css';\n\nconst statItemVariants = cva('flex items-center gap-1', {\n  variants: {\n    size: {\n      sm: 'text-xs',\n      md: 'text-sm',\n      lg: 'text-base',\n    },\n    layout: {\n      horizontal: 'flex-row',\n      vertical: 'flex-col items-start gap-0.5',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    layout: 'horizontal',\n  },\n});\n\n/**\n * Props for StatItemGlass component.\n *\n * Extends standard span attributes and includes CVA variants for size and layout.\n *\n * @example\n * ```tsx\n * import { Star } from 'lucide-react'\n *\n * const props: StatItemGlassProps = {\n *   icon: Star,\n *   value: 1234,\n *   label: 'stars',\n *   size: 'md',\n *   layout: 'horizontal',\n *   abbreviated: false,\n * }\n * ```\n */\nexport interface StatItemGlassProps\n  extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof statItemVariants> {\n  /**\n   * Lucide icon component.\n   *\n   * Must be a valid Lucide React icon component. Icon receives `size` and\n   * `style` props for consistent theming.\n   *\n   * @example\n   * ```tsx\n   * import { Star, GitCommit, Users } from 'lucide-react'\n   *\n   * <StatItemGlass icon={Star} value={123} label=\"stars\" />\n   * <StatItemGlass icon={GitCommit} value={456} label=\"commits\" />\n   * ```\n   */\n  readonly icon: LucideIcon;\n\n  /**\n   * Stat value (number or formatted string).\n   *\n   * - **Number:** Automatically formatted when `abbreviated={true}` (e.g., 1234 → \"1.2k\")\n   * - **String:** Displayed as-is (e.g., \"2 years\", \"100%\")\n   *\n   * @example\n   * ```tsx\n   * <StatItemGlass icon={Star} value={1234} label=\"stars\" />\n   * <StatItemGlass icon={Calendar} value=\"2 years\" label=\"active\" />\n   * ```\n   */\n  readonly value: number | string;\n\n  /**\n   * Stat label.\n   *\n   * Displayed after the value. Use lowercase singular/plural forms for\n   * readability (e.g., \"star\", \"commits\", \"followers\").\n   *\n   * @example\n   * ```tsx\n   * <StatItemGlass icon={Star} value={1} label=\"star\" />\n   * <StatItemGlass icon={Users} value={250} label=\"followers\" />\n   * ```\n   */\n  readonly label: string;\n\n  /**\n   * Icon size in pixels.\n   *\n   * Overrides default icon size. Useful for visual hierarchy or dense layouts.\n   *\n   * @default 16\n   *\n   * @example\n   * ```tsx\n   * <StatItemGlass icon={Star} value={123} label=\"stars\" iconSize={20} />\n   * ```\n   */\n  readonly iconSize?: number;\n\n  /**\n   * Abbreviated format for mobile (1.2k instead of 1234).\n   *\n   * Only applies to numeric values. Uses K (thousands) and M (millions) suffixes.\n   *\n   * - `1234` → `\"1.2k\"`\n   * - `1500000` → `\"1.5M\"`\n   * - `\"2 years\"` → `\"2 years\"` (unchanged for strings)\n   *\n   * @default false\n   *\n   * @example\n   * ```tsx\n   * <StatItemGlass\n   *   icon={GitCommit}\n   *   value={15678}\n   *   label=\"commits\"\n   *   abbreviated={true}\n   * />\n   * // Renders: \"15.7k commits\"\n   * ```\n   */\n  readonly abbreviated?: boolean;\n}\n\nexport const StatItemGlass = forwardRef<HTMLSpanElement, StatItemGlassProps>(\n  (\n    {\n      icon: Icon,\n      value,\n      label,\n      iconSize = 16,\n      abbreviated = false,\n      size,\n      layout,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const textStyles: CSSProperties = {\n      color: 'var(--text-secondary)',\n    };\n\n    const iconStyles: CSSProperties = {\n      color: 'var(--text-accent)',\n    };\n\n    const formatValue = (val: number | string): string => {\n      if (!abbreviated || typeof val !== 'number') return String(val);\n\n      if (val >= 1000000) return `${(val / 1000000).toFixed(1)}M`;\n      if (val >= 1000) return `${(val / 1000).toFixed(1)}k`;\n      return String(val);\n    };\n\n    return (\n      <span\n        ref={ref}\n        className={cn(statItemVariants({ size, layout }), className)}\n        style={textStyles}\n        {...props}\n      >\n        <Icon size={iconSize} style={iconStyles} />\n        <span className=\"font-medium\">\n          {formatValue(value)} {label}\n        </span>\n      </span>\n    );\n  }\n);\n\nStatItemGlass.displayName = 'StatItemGlass';\n"
    }
  ],
  "categories": [
    "atomic"
  ]
}