{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "user-stats-line-glass",
  "type": "registry:block",
  "title": "User Stats Line Glass",
  "description": "User statistics line displaying repos, followers, and following counts.\n * Extracted from ProfileHeaderGlass for reusable user metrics displays.\n *\n * ## Features",
  "dependencies": [
    "lucide-react",
    "react"
  ],
  "registryDependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "components/glass/composite/user-stats-line-glass.tsx",
      "type": "registry:component",
      "content": "// ========================================\n// USER STATS LINE GLASS - COMPOSITE COMPONENT\n// User statistics line (repos, followers, following)\n// Level 3: Composite (extracted from ProfileHeaderGlass)\n// ========================================\n\nimport { forwardRef, type HTMLAttributes } from 'react';\nimport { FolderGit2, Users, User } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport { StatItemGlass } from '../atomic/stat-item-glass';\nimport '@/glass-theme.css';\n\n/**\n * Props for UserStatsLineGlass component.\n *\n * Extends standard div attributes for maximum flexibility.\n * All props are readonly to ensure immutability.\n *\n * @example\n * ```tsx\n * const props: UserStatsLineGlassProps = {\n *   repos: 42,\n *   followers: 1234,\n *   following: 567,\n *   wrap: true,\n *   abbreviated: false,\n * };\n * ```\n */\nexport interface UserStatsLineGlassProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Number of repositories.\n   *\n   * Displayed with FolderGit2 icon and \"repos\" label.\n   * Supports thousand separators and abbreviation.\n   *\n   * @example\n   * ```tsx\n   * <UserStatsLineGlass repos={42} /> // Shows \"📁 42 repos\"\n   * ```\n   */\n  readonly repos: number;\n\n  /**\n   * Number of followers.\n   *\n   * Displayed with Users icon and \"followers\" label.\n   * Supports thousand separators and abbreviation.\n   *\n   * @example\n   * ```tsx\n   * <UserStatsLineGlass followers={1234} /> // Shows \"👥 1,234 followers\"\n   * <UserStatsLineGlass followers={1234} abbreviated /> // Shows \"👥 1.2k followers\"\n   * ```\n   */\n  readonly followers: number;\n\n  /**\n   * Number of users following.\n   *\n   * Displayed with User icon and \"following\" label.\n   * Supports thousand separators and abbreviation.\n   *\n   * @example\n   * ```tsx\n   * <UserStatsLineGlass following={567} /> // Shows \"👤 567 following\"\n   * ```\n   */\n  readonly following: number;\n\n  /**\n   * Whether to wrap stats on mobile.\n   *\n   * - `true`: Stats wrap to multiple lines on narrow screens\n   * - `false`: Stats stay in single line (may overflow)\n   *\n   * @default true\n   */\n  readonly wrap?: boolean;\n\n  /**\n   * Abbreviate large numbers (1.2k instead of 1,234).\n   *\n   * Useful for mobile layouts with limited space.\n   * Applied to all three stat values (repos, followers, following).\n   *\n   * @default false\n   *\n   * @example\n   * ```tsx\n   * // Standard: \"1,234 followers\"\n   * <UserStatsLineGlass followers={1234} />\n   *\n   * // Abbreviated: \"1.2k followers\"\n   * <UserStatsLineGlass followers={1234} abbreviated />\n   * ```\n   */\n  readonly abbreviated?: boolean;\n}\n\n/**\n * UserStatsLineGlass Component\n *\n * User statistics line displaying repos, followers, and following counts.\n * Extracted from ProfileHeaderGlass for reusable user metrics displays.\n *\n * ## Features\n * - 3 stat items (repos, followers, following)\n * - Icon integration (FolderGit2, Users, User from lucide-react)\n * - Automatic thousand separator formatting\n * - Optional number abbreviation (1.2k instead of 1,234)\n * - Optional wrapping for mobile layouts\n * - StatItemGlass integration for consistent styling\n * - Responsive gap spacing (1rem between items)\n * - Compact text size (14px) for inline display\n * - Semantic labels for each stat\n * - Customizable via className\n *\n * ## CSS Variables\n * Inherits all StatItemGlass CSS variables:\n * - `--text-primary` - Primary text color for values\n * - `--text-secondary` - Secondary text color for labels\n *\n * @example\n * // Basic usage with default settings\n * <UserStatsLineGlass\n *   repos={42}\n *   followers={1234}\n *   following={567}\n * />\n *\n * @example\n * // With abbreviated numbers for mobile\n * <UserStatsLineGlass\n *   repos={42}\n *   followers={1234}\n *   following={567}\n *   abbreviated\n * />\n *\n * @example\n * // Without wrapping (single line)\n * <UserStatsLineGlass\n *   repos={42}\n *   followers={1234}\n *   following={567}\n *   wrap={false}\n * />\n *\n * @example\n * // With custom styling\n * <UserStatsLineGlass\n *   repos={42}\n *   followers={1234}\n *   following={567}\n *   className=\"gap-6\"\n * />\n *\n * @accessibility\n * - Semantic HTML structure via StatItemGlass\n * - Icon labels with proper sizing (16px)\n * - Color contrast via CSS variables\n * - Screen reader friendly labels (\"repos\", \"followers\", \"following\")\n * - Non-interactive display (no keyboard requirements)\n * - Number formatting for readability (thousand separators)\n *\n * @since v1.0.0\n */\nexport const UserStatsLineGlass = forwardRef<HTMLDivElement, UserStatsLineGlassProps>(\n  ({ repos, followers, following, wrap = true, abbreviated = false, className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn('flex items-center gap-4 text-sm', wrap && 'flex-wrap', className)}\n        {...props}\n      >\n        <StatItemGlass icon={FolderGit2} value={repos} label=\"repos\" abbreviated={abbreviated} />\n        <StatItemGlass icon={Users} value={followers} label=\"followers\" abbreviated={abbreviated} />\n        <StatItemGlass icon={User} value={following} label=\"following\" abbreviated={abbreviated} />\n      </div>\n    );\n  }\n);\n\nUserStatsLineGlass.displayName = 'UserStatsLineGlass';\n"
    }
  ],
  "categories": [
    "composite"
  ]
}