{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "user-info-glass",
  "type": "registry:block",
  "title": "User Info Glass",
  "description": "User name, username, and join date display component.\n * Extracted from ProfileHeaderGlass for reusable user identity sections.\n *\n * ## Features",
  "dependencies": [
    "lucide-react",
    "react"
  ],
  "registryDependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "components/glass/composite/user-info-glass.tsx",
      "type": "registry:component",
      "content": "// ========================================\n// USER INFO GLASS - COMPOSITE COMPONENT\n// User name, username, and join date display\n// Level 3: Composite (extracted from ProfileHeaderGlass)\n// ========================================\n\nimport { forwardRef, type HTMLAttributes, type CSSProperties } from 'react';\nimport { Calendar, ExternalLink } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport '@/glass-theme.css';\n\n/**\n * Props for UserInfoGlass 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: UserInfoGlassProps = {\n *   name: 'John Doe',\n *   username: 'johndoe',\n *   joinDate: 'Jan 2023',\n *   profileUrl: 'https://github.com/johndoe',\n *   layout: 'vertical',\n * };\n * ```\n */\nexport interface UserInfoGlassProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * User's full name.\n   *\n   * Displayed as h1 heading with primary text color.\n   * Responsive font size: lg (mobile) to xl (desktop) in vertical layout.\n   *\n   * @example\n   * ```tsx\n   * <UserInfoGlass name=\"Jane Smith\" />\n   * ```\n   */\n  readonly name: string;\n\n  /**\n   * Username (without @ prefix).\n   *\n   * Displayed as clickable link with @ prefix and external link icon.\n   * Uses accent color for visual hierarchy.\n   *\n   * @example\n   * ```tsx\n   * <UserInfoGlass username=\"janesmith\" /> // Displays \"@janesmith\"\n   * ```\n   */\n  readonly username: string;\n\n  /**\n   * Join date in human-readable format.\n   *\n   * Displayed with calendar icon and \"Joined\" prefix.\n   * Typically formatted as \"MMM YYYY\" (e.g., \"Jan 2023\").\n   *\n   * @example\n   * ```tsx\n   * <UserInfoGlass joinDate=\"Jan 2023\" /> // Shows \"📅 Joined Jan 2023\"\n   * ```\n   */\n  readonly joinDate: string;\n\n  /**\n   * URL for the username link.\n   *\n   * Typically points to user profile page.\n   * Includes aria-label for accessibility.\n   *\n   * @default '#'\n   *\n   * @example\n   * ```tsx\n   * <UserInfoGlass profileUrl=\"https://github.com/johndoe\" />\n   * ```\n   */\n  readonly profileUrl?: string;\n\n  /**\n   * Layout orientation.\n   *\n   * - `vertical`: Name above username/join date (default, mobile-friendly)\n   * - `horizontal`: Name and metadata side-by-side (desktop-optimized)\n   *\n   * @default 'vertical'\n   */\n  readonly layout?: 'vertical' | 'horizontal';\n}\n\n/**\n * UserInfoGlass Component\n *\n * User name, username, and join date display component.\n * Extracted from ProfileHeaderGlass for reusable user identity sections.\n *\n * ## Features\n * - User full name as h1 heading\n * - Clickable username link with @ prefix\n * - External link icon for username links\n * - Calendar icon for join date\n * - 2 layout variants (vertical, horizontal)\n * - Responsive font sizing in vertical layout\n * - Semantic color variables for theme consistency\n * - Icon integration (Calendar, ExternalLink from lucide-react)\n * - Accessible link with aria-label\n * - Hover underline on username link\n *\n * ## CSS Variables\n * - `--text-primary` - Primary text color for name\n * - `--text-secondary` - Secondary text color for metadata\n * - `--text-accent` - Accent color for username link\n *\n * @example\n * // Basic usage with vertical layout\n * <UserInfoGlass\n *   name=\"Jane Smith\"\n *   username=\"janesmith\"\n *   joinDate=\"Jan 2023\"\n * />\n *\n * @example\n * // With custom profile URL\n * <UserInfoGlass\n *   name=\"John Doe\"\n *   username=\"johndoe\"\n *   joinDate=\"Mar 2020\"\n *   profileUrl=\"https://github.com/johndoe\"\n * />\n *\n * @example\n * // Horizontal layout for desktop headers\n * <UserInfoGlass\n *   name=\"Alice Johnson\"\n *   username=\"alicejohnson\"\n *   joinDate=\"Dec 2022\"\n *   layout=\"horizontal\"\n * />\n *\n * @example\n * // With custom styling\n * <UserInfoGlass\n *   name=\"Bob Wilson\"\n *   username=\"bobwilson\"\n *   joinDate=\"Jun 2021\"\n *   className=\"mb-6\"\n * />\n *\n * @accessibility\n * - Semantic h1 heading for user name\n * - Accessible link with descriptive aria-label (\"View {username}'s profile\")\n * - Icon buttons with proper sizing (12px for small icons)\n * - Hover states for interactive elements\n * - Color contrast via CSS variables\n * - Keyboard navigable links\n * - Screen reader friendly separator (·)\n *\n * @since v1.0.0\n */\nexport const UserInfoGlass = forwardRef<HTMLDivElement, UserInfoGlassProps>(\n  (\n    { name, username, joinDate, profileUrl = '#', layout = 'vertical', className, ...props },\n    ref\n  ) => {\n    const titleStyles: CSSProperties = {\n      color: 'var(--text-primary)',\n    };\n\n    const metaStyles: CSSProperties = {\n      color: 'var(--text-secondary)',\n    };\n\n    const linkStyles: CSSProperties = {\n      color: 'var(--text-accent)',\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn(layout === 'vertical' ? 'space-y-1' : 'flex items-center gap-4', className)}\n        {...props}\n      >\n        <h1\n          className={cn('font-bold', layout === 'vertical' ? 'text-lg md:text-xl' : 'text-xl')}\n          style={titleStyles}\n        >\n          {name}\n        </h1>\n        <div\n          className={cn(\n            'flex items-center gap-2 text-sm flex-wrap',\n            layout === 'vertical' && 'mt-0.5'\n          )}\n          style={metaStyles}\n        >\n          <a\n            href={profileUrl}\n            className=\"flex items-center gap-1 hover:underline\"\n            style={linkStyles}\n            aria-label={`View ${username}'s profile`}\n          >\n            @{username} <ExternalLink className=\"w-3 h-3\" />\n          </a>\n          <span>·</span>\n          <span className=\"flex items-center gap-1\">\n            <Calendar className=\"w-3 h-3\" /> Joined {joinDate}\n          </span>\n        </div>\n      </div>\n    );\n  }\n);\n\nUserInfoGlass.displayName = 'UserInfoGlass';\n"
    }
  ],
  "categories": [
    "composite"
  ]
}