shadcn-glass-ui 1.0.0 → 1.0.7

package/dist/r/notification-glass.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "notification-glass",
+  "type": "registry:ui",
+  "title": "Notification Glass",
+  "description": "Glass-themed toast notification with:",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react",
+    "react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "primitives",
+    "use-hover",
+    "variants"
+  ],
+  "files": [
+    {
+      "path": "components/glass/ui/notification-glass.tsx",
+      "type": "registry:component",
+      "content": "/**\n * NotificationGlass Component\n *\n * Glass-themed toast notification with:\n * - Theme-aware styling (glass/light/aurora)\n * - Type variants (info/success/warning/error)\n * - Glow effect on hover\n * - Dismissible\n */\n\nimport { forwardRef, type CSSProperties } from 'react';\nimport { type VariantProps } from 'class-variance-authority';\nimport { Info, CheckCircle, AlertTriangle, AlertCircle, X } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport { useHover } from '@/lib/hooks/use-hover';\nimport { notificationVariants } from '@/lib/variants/notification-glass-variants';\nimport { ICON_SIZES } from '@/components/glass/primitives';\nimport '@/glass-theme.css';\n\nimport type { NotificationType } from '@/lib/variants/notification-glass-variants';\n\n// ========================================\n// CONSTANTS\n// ========================================\n\nconst NOTIFICATION_ICONS = {\n  info: Info,\n  success: CheckCircle,\n  warning: AlertTriangle,\n  error: AlertCircle,\n} as const;\n\n// ========================================\n// PROPS INTERFACE\n// ========================================\n\nexport interface NotificationGlassProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'style'>,\n    VariantProps<typeof notificationVariants> {\n  readonly title: string;\n  readonly message: string;\n  /** Notification variant (shadcn/ui compatible) */\n  readonly variant?: 'default' | 'destructive' | 'success' | 'warning';\n  /** @deprecated Use variant prop instead. Will be removed in next major version. */\n  readonly type?: NotificationType;\n  readonly onClose: () => void;\n}\n\n// ========================================\n// COMPONENT\n// ========================================\n\n// Type-specific CSS variable mapping\nconst getTypeVars = (notifType: NotificationType): { color: string; glow: string; iconBg: string } => {\n  const configs: Record<NotificationType, { color: string; glow: string; iconBg: string }> = {\n    info: { color: 'var(--notification-info-color)', glow: 'var(--notification-info-glow)', iconBg: 'var(--notification-info-icon-bg)' },\n    success: { color: 'var(--notification-success-color)', glow: 'var(--notification-success-glow)', iconBg: 'var(--notification-success-icon-bg)' },\n    warning: { color: 'var(--notification-warning-color)', glow: 'var(--notification-warning-glow)', iconBg: 'var(--notification-warning-icon-bg)' },\n    error: { color: 'var(--notification-error-color)', glow: 'var(--notification-error-glow)', iconBg: 'var(--notification-error-icon-bg)' },\n  };\n  return configs[notifType];\n};\n\nexport const NotificationGlass = forwardRef<HTMLDivElement, NotificationGlassProps>(\n  ({ variant: variantProp, type: typeProp, title, message, onClose, className, ...props }, ref) => {\n    // Backward compatibility: support deprecated 'type' prop\n    const variant = variantProp ?? typeProp ?? 'default';\n\n    // Show deprecation warning in development\n    if (process.env.NODE_ENV === 'development' && typeProp) {\n      console.warn(\n        'NotificationGlass: The \"type\" prop is deprecated. Use \"variant\" instead. Example: <NotificationGlass variant=\"destructive\" />'\n      );\n    }\n\n    // Map variant to internal notification type\n    const variantToType: Record<string, NotificationType> = {\n      default: 'info',\n      destructive: 'error',\n      success: 'success',\n      warning: 'warning',\n      // Backward compatibility aliases\n      info: 'info',\n      error: 'error',\n    };\n\n    const effectiveType: NotificationType = variantToType[variant] || 'info';\n\n    const { isHovered, hoverProps } = useHover();\n    const Icon = NOTIFICATION_ICONS[effectiveType];\n    const config = getTypeVars(effectiveType);\n\n    const containerStyles: CSSProperties = {\n      background: 'var(--notification-bg)',\n      border: '1px solid var(--notification-border)',\n      boxShadow: isHovered ? config.glow : 'var(--notification-shadow)',\n      transform: isHovered ? 'translateY(-2px)' : 'translateY(0)',\n    };\n\n    const iconContainerStyles: CSSProperties = {\n      background: config.iconBg,\n      boxShadow: isHovered ? config.glow : 'none',\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn(notificationVariants({ type: effectiveType }), className)}\n        style={containerStyles}\n        role=\"alert\"\n        aria-live=\"polite\"\n        onMouseEnter={hoverProps.onMouseEnter}\n        onMouseLeave={hoverProps.onMouseLeave}\n        {...props}\n      >\n        {/* Icon with glow */}\n        <div\n          className=\"w-8 h-8 md:w-10 md:h-10 rounded-xl flex items-center justify-center shrink-0\"\n          style={iconContainerStyles}\n        >\n          <Icon className=\"w-4 h-4 md:w-5 md:h-5\" style={{ color: config.color }} />\n        </div>\n\n        {/* Content */}\n        <div className=\"flex-1 min-w-0\">\n          <p className=\"font-semibold text-xs md:text-sm mb-0.5 md:mb-1\" style={{ color: 'var(--text-primary)' }}>\n            {title}\n          </p>\n          <p className=\"text-xs md:text-sm\" style={{ color: 'var(--text-secondary)' }}>\n            {message}\n          </p>\n        </div>\n\n        {/* Close button */}\n        <button\n          onClick={onClose}\n          className=\"p-1 md:p-1.5 rounded-lg shrink-0\"\n          style={{ color: 'var(--text-muted)' }}\n          type=\"button\"\n          aria-label=\"Close notification\"\n        >\n          <X className={ICON_SIZES.md} />\n        </button>\n      </div>\n    );\n  }\n);\n\nNotificationGlass.displayName = 'NotificationGlass';\n"
+    }
+  ],
+  "categories": [
+    "ui"
+  ],
+  "cssVars": {
+    "light": {
+      "--glass-bg": "rgba(255, 255, 255, 0.1)",
+      "--glass-border": "rgba(255, 255, 255, 0.2)",
+      "--blur-sm": "8px",
+      "--blur-md": "16px",
+      "--blur-lg": "24px"
+    },
+    "dark": {
+      "--glass-bg": "rgba(255, 255, 255, 0.05)",
+      "--glass-border": "rgba(255, 255, 255, 0.1)",
+      "--blur-sm": "8px",
+      "--blur-md": "16px",
+      "--blur-lg": "24px"
+    }
+  }
+}

package/dist/r/popover-glass.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "popover-glass",
+  "type": "registry:ui",
+  "title": "Popover Glass",
+  "description": "Floating glass-themed container for tooltips, dropdowns, and overlays with:",
+  "dependencies": [
+    "@radix-ui/react-popover",
+    "react"
+  ],
+  "registryDependencies": [
+    "cn"
+  ],
+  "files": [
+    {
+      "path": "components/glass/ui/popover-glass.tsx",
+      "type": "registry:component",
+      "content": "/**\n * PopoverGlass Component\n *\n * Floating glass-themed container for tooltips, dropdowns, and overlays with:\n * - Theme-aware styling (glass/light/aurora)\n * - Smooth animations with fade-in effect\n * - Arrow pointer with glass styling\n * - ESC key and click-outside to close\n * - Focus trap for accessibility\n * - All position/alignment options (top/right/bottom/left × start/center/end)\n *\n * @example\n * ```tsx\n * <PopoverGlass\n *   trigger={<ButtonGlass>Open</ButtonGlass>}\n *   side=\"top\"\n *   align=\"center\"\n * >\n *   <div className=\"p-4\">Popover content</div>\n * </PopoverGlass>\n * ```\n */\n\nimport * as React from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { cn } from '@/lib/utils';\nimport '@/glass-theme.css';\n\n// ========================================\n// PROPS INTERFACE\n// ========================================\n\nexport interface PopoverGlassProps {\n  /** The trigger element that opens the popover */\n  readonly trigger: React.ReactNode;\n  /** The content to display inside the popover */\n  readonly children: React.ReactNode;\n  /** The preferred side of the trigger to render against */\n  readonly side?: 'top' | 'right' | 'bottom' | 'left';\n  /** The preferred alignment against the trigger */\n  readonly align?: 'start' | 'center' | 'end';\n  /** The distance in pixels from the trigger */\n  readonly sideOffset?: number;\n  /** Controlled open state */\n  readonly open?: boolean;\n  /** Callback when open state changes */\n  readonly onOpenChange?: (open: boolean) => void;\n  /** Whether to show the arrow pointer */\n  readonly showArrow?: boolean;\n  /** Additional class name for the content wrapper */\n  readonly className?: string;\n}\n\n// ========================================\n// COMPONENT\n// ========================================\n\nexport const PopoverGlass = React.forwardRef<\n  HTMLDivElement,\n  PopoverGlassProps\n>(\n  (\n    {\n      trigger,\n      children,\n      side = 'bottom',\n      align = 'center',\n      sideOffset = 8,\n      open,\n      onOpenChange,\n      showArrow = true,\n      className,\n    },\n    ref\n  ) => {\n    // Popover content styles with CSS variables\n    const popoverStyles: React.CSSProperties = {\n      background: 'var(--popover-bg)',\n      border: '1px solid var(--popover-border)',\n      boxShadow: 'var(--popover-shadow)',\n      backdropFilter: 'blur(var(--blur-md))', // 16px - standard popover blur\n      WebkitBackdropFilter: 'blur(var(--blur-md))',\n    };\n\n    // Arrow styles\n    const arrowStyles: React.CSSProperties = {\n      fill: 'var(--popover-arrow-bg)',\n    };\n\n    return (\n      <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>\n        <PopoverPrimitive.Trigger asChild>{trigger}</PopoverPrimitive.Trigger>\n\n        <PopoverPrimitive.Portal>\n          <PopoverPrimitive.Content\n            ref={ref}\n            side={side}\n            align={align}\n            sideOffset={sideOffset}\n            className={cn(\n              'z-[50003] rounded-2xl p-4',\n              'animate-in fade-in-0 zoom-in-95 duration-200',\n              'data-[side=bottom]:slide-in-from-top-2',\n              'data-[side=top]:slide-in-from-bottom-2',\n              'data-[side=right]:slide-in-from-left-2',\n              'data-[side=left]:slide-in-from-right-2',\n              'outline-none',\n              className\n            )}\n            style={popoverStyles}\n            role=\"dialog\"\n            aria-modal=\"false\"\n          >\n            {children}\n\n            {showArrow && (\n              <PopoverPrimitive.Arrow\n                className=\"fill-current\"\n                style={arrowStyles}\n                width={16}\n                height={8}\n              />\n            )}\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    );\n  }\n);\n\nPopoverGlass.displayName = 'PopoverGlass';\n"
+    }
+  ],
+  "categories": [
+    "ui"
+  ],
+  "cssVars": {
+    "light": {
+      "--glass-bg": "rgba(255, 255, 255, 0.1)",
+      "--glass-border": "rgba(255, 255, 255, 0.2)",
+      "--blur-sm": "8px",
+      "--blur-md": "16px",
+      "--blur-lg": "24px"
+    },
+    "dark": {
+      "--glass-bg": "rgba(255, 255, 255, 0.05)",
+      "--glass-border": "rgba(255, 255, 255, 0.1)",
+      "--blur-sm": "8px",
+      "--blur-md": "16px",
+      "--blur-lg": "24px"
+    }
+  }
+}

package/dist/r/profile-avatar-glass.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "profile-avatar-glass",
+  "type": "registry:component",
+  "title": "Profile Avatar Glass",
+  "description": "Profile Avatar Glass component with glass effects",
+  "dependencies": [
+    "react"
+  ],
+  "registryDependencies": [
+    "cn"
+  ],
+  "files": [
+    {
+      "path": "components/glass/specialized/profile-avatar-glass.tsx",
+      "type": "registry:component",
+      "content": "// ========================================\n// PROFILE AVATAR GLASS COMPONENT\n// Large avatar with glow animation for profiles\n// ========================================\n\nimport { forwardRef, useState, type CSSProperties } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport \"@/glass-theme.css\";\n\nexport type ProfileAvatarSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type ProfileAvatarStatus = \"online\" | \"offline\" | \"busy\" | \"away\";\n\nconst sizeClasses: Record<ProfileAvatarSize, string> = {\n  sm: \"w-9 h-9 md:w-10 md:h-10 text-xs md:text-sm\",\n  md: \"w-12 h-12 md:w-14 md:h-14 text-base md:text-lg\",\n  lg: \"w-14 h-14 md:w-16 md:h-16 text-lg md:text-xl\",\n  xl: \"w-18 h-18 md:w-20 md:h-20 text-xl md:text-2xl\",\n};\n\nconst statusSizeClasses: Record<ProfileAvatarSize, string> = {\n  sm: \"w-2.5 h-2.5 md:w-3 md:h-3\",\n  md: \"w-3 h-3 md:w-3.5 md:h-3.5\",\n  lg: \"w-3.5 h-3.5 md:w-4 md:h-4\",\n  xl: \"w-4 h-4 md:w-5 md:h-5\",\n};\n\nconst statusPositionClasses: Record<ProfileAvatarSize, string> = {\n  sm: \"bottom-0 right-0\",\n  md: \"bottom-0 right-0\",\n  lg: \"-bottom-0.5 -right-0.5\",\n  xl: \"-bottom-1 -right-1\",\n};\n\n// CSS variable maps for status colors (using semantic naming)\nconst statusVarMap: Record<ProfileAvatarStatus, string> = {\n  online: \"var(--status-online)\",\n  offline: \"var(--text-muted)\",\n  busy: \"var(--status-busy)\",\n  away: \"var(--status-away)\",\n};\n\nexport interface ProfileAvatarGlassProps extends React.HTMLAttributes<HTMLDivElement> {\n  readonly initials: string;\n  readonly size?: ProfileAvatarSize;\n  readonly status?: ProfileAvatarStatus;\n  readonly glowing?: boolean;\n}\n\nexport const ProfileAvatarGlass = forwardRef<HTMLDivElement, ProfileAvatarGlassProps>(\n  ({ initials, size = \"lg\", status, glowing = true, className, ...props }, ref) => {\n    const [isHovered, setIsHovered] = useState(false);\n\n    const avatarStyles: CSSProperties = {\n      boxShadow: isHovered ? \"var(--profile-avatar-glow)\" : \"none\",\n      border: \"3px solid var(--profile-avatar-border)\",\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"relative inline-flex\", className)}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n        {...props}\n      >\n        <div\n          className={cn(\n            \"rounded-full bg-gradient-to-br from-blue-400 via-violet-500 to-indigo-500\",\n            \"flex items-center justify-center text-white font-bold transition-all duration-300\",\n            sizeClasses[size],\n            glowing && \"animate-[glow-pulse_2s_ease-in-out_infinite]\"\n          )}\n          style={avatarStyles}\n          role=\"img\"\n          aria-label={`Profile avatar with initials ${initials}`}\n        >\n          {initials}\n        </div>\n        {status && (\n          <span\n            className={cn(\n              \"absolute rounded-full\",\n              statusPositionClasses[size],\n              statusSizeClasses[size]\n            )}\n            style={{\n              background: statusVarMap[status],\n              border: \"none\",\n              boxShadow: \"none\",\n            }}\n            role=\"status\"\n            aria-label={`Status: ${status}`}\n          />\n        )}\n      </div>\n    );\n  }\n);\n\nProfileAvatarGlass.displayName = \"ProfileAvatarGlass\";\n"
+    }
+  ],
+  "categories": [
+    "specialized"
+  ]
+}

package/dist/r/profile-header-glass.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "profile-header-glass",
+  "type": "registry:block",
+  "title": "Profile Header Glass",
+  "description": "Profile Header Glass component with glass effects",
+  "dependencies": [
+    "lucide-react",
+    "react"
+  ],
+  "registryDependencies": [
+    "cn"
+  ],
+  "files": [
+    {
+      "path": "components/glass/sections/profile-header-glass.tsx",
+      "type": "registry:component",
+      "content": "// ========================================\n// PROFILE HEADER GLASS COMPONENT\n// User profile header with avatar, stats, languages\n// ========================================\n\nimport { forwardRef } from \"react\";\nimport { Calendar, ExternalLink, FolderGit2, Users, User } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { GlassCard } from \"../ui/glass-card\";\nimport { ProfileAvatarGlass } from \"../specialized/profile-avatar-glass\";\nimport { LanguageBarGlass, type LanguageData } from \"../specialized/language-bar-glass\";\nimport { AICardGlass } from \"../composite/ai-card-glass\";\nimport \"@/glass-theme.css\";\n\nexport interface ProfileStats {\n  readonly repos?: number;\n  readonly followers?: number;\n  readonly following?: number;\n}\n\nexport interface ProfileHeaderGlassProps extends React.HTMLAttributes<HTMLDivElement> {\n  readonly name?: string;\n  readonly username?: string;\n  readonly joinDate?: string;\n  readonly stats?: ProfileStats;\n  readonly languages?: readonly LanguageData[];\n  readonly onAIGenerate?: () => void;\n}\n\nexport const ProfileHeaderGlass = forwardRef<HTMLDivElement, ProfileHeaderGlassProps>(\n  (\n    {\n      name = \"Artem Safronov\",\n      username = \"Yhooi2\",\n      joinDate = \"Jan 2023\",\n      stats = {},\n      languages = [],\n      onAIGenerate,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const s = { repos: 11, followers: 1, following: 5, ...stats };\n\n    const getInitials = (fullName: string): string => {\n      return fullName\n        .split(\" \")\n        .map((n) => n[0])\n        .join(\"\")\n        .toUpperCase()\n        .slice(0, 2);\n    };\n\n    return (\n      <GlassCard\n        ref={ref}\n        className={cn(\"p-5\", className)}\n        intensity=\"strong\"\n        glow=\"violet\"\n        hover={false}\n        {...props}\n      >\n        <div className=\"flex flex-col md:flex-row gap-3 md:gap-6\">\n          <div className=\"flex-1\">\n            <div className=\"flex gap-4\">\n              <ProfileAvatarGlass\n                initials={getInitials(name)}\n                size=\"lg\"\n                status=\"online\"\n              />\n              <div>\n                <h1 className=\"text-lg md:text-xl font-bold\" style={{ color: \"var(--text-primary)\" }}>\n                  {name}\n                </h1>\n                <div\n                  className=\"flex items-center gap-2 text-sm mt-0.5\"\n                  style={{ color: \"var(--text-secondary)\" }}\n                >\n                  <a\n                    href=\"#\"\n                    className=\"flex items-center gap-1 hover:underline\"\n                    style={{ color: \"var(--text-accent)\" }}\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                  className=\"flex items-center gap-3 md:gap-4 mt-2 text-sm flex-wrap\"\n                  style={{ color: \"var(--text-secondary)\" }}\n                >\n                  <span className=\"flex items-center gap-1\">\n                    <FolderGit2\n                      className=\"w-4 h-4\"\n                      style={{ color: \"var(--text-accent)\" }}\n                    />\n                    {s.repos} repos\n                  </span>\n                  <span className=\"flex items-center gap-1\">\n                    <Users className=\"w-4 h-4\" style={{ color: \"var(--text-accent)\" }} />\n                    {s.followers} followers\n                  </span>\n                  <span className=\"flex items-center gap-1\">\n                    <User className=\"w-4 h-4\" style={{ color: \"var(--text-accent)\" }} />\n                    {s.following} following\n                  </span>\n                </div>\n              </div>\n            </div>\n            {languages.length > 0 && (\n              <div className=\"mt-4\">\n                <LanguageBarGlass languages={languages} />\n              </div>\n            )}\n          </div>\n          <AICardGlass onGenerate={onAIGenerate} />\n        </div>\n      </GlassCard>\n    );\n  }\n);\n\nProfileHeaderGlass.displayName = \"ProfileHeaderGlass\";\n"
+    }
+  ],
+  "categories": [
+    "sections"
+  ]
+}

package/dist/r/progress-glass.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "progress-glass",
+  "type": "registry:component",
+  "title": "Progress Glass",
+  "description": "Glass-themed progress bar with:",
+  "dependencies": [
+    "class-variance-authority",
+    "react"
+  ],
+  "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:\n * - Theme-aware styling (glass/light/aurora)\n * - Gradient fill with glow\n * - Size variants\n * - Optional label\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'>,\n    VariantProps<typeof progressSizes> {\n  readonly value: number;\n  readonly gradient?: ProgressGradient;\n  readonly showLabel?: boolean;\n}\n\n// ========================================\n// COMPONENT\n// ========================================\n\n// Gradient colors for the fill - CSS variable based\nconst getGradientColors = (gradient: ProgressGradient): { from: string; to: string; glowVar: string } => {\n  const gradients: Record<ProgressGradient, { from: string; to: string; glowVar: string }> = {\n    violet: { from: '#8b5cf6', to: '#a855f7', glowVar: '--progress-glow-violet' },\n    blue: { from: '#3b82f6', to: '#60a5fa', glowVar: '--progress-glow-blue' },\n    cyan: { from: '#06b6d4', to: '#22d3ee', glowVar: '--progress-glow-cyan' },\n    amber: { from: '#f59e0b', to: '#fbbf24', glowVar: '--progress-glow-amber' },\n    emerald: { from: '#10b981', to: '#34d399', glowVar: '--progress-glow-emerald' },\n    rose: { from: '#f43f5e', to: '#fb7185', glowVar: '--progress-glow-rose' },\n  };\n  return gradients[gradient];\n};\n\nexport const ProgressGlass = forwardRef<HTMLDivElement, ProgressGlassProps>(\n  (\n    {\n      className,\n      size = 'md',\n      value,\n      gradient = 'violet',\n      showLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const clampedValue = Math.min(100, Math.max(0, value));\n    const gradientColors = getGradientColors(gradient);\n\n    const trackStyles: CSSProperties = {\n      background: 'var(--progress-bg)',\n    };\n\n    const fillStyles: CSSProperties = {\n      width: `${clampedValue}%`,\n      background: `linear-gradient(90deg, ${gradientColors.from}, ${gradientColors.to})`,\n      boxShadow: `var(${gradientColors.glowVar})`,\n    };\n\n    return (\n      <div ref={ref} className={cn('w-full', className)} {...props}>\n        {showLabel && (\n          <div className=\"flex justify-between mb-1 md:mb-1.5\">\n            <span className=\"text-[10px] md:text-xs\" style={{ color: 'var(--text-muted)' }}>\n              Progress\n            </span>\n            <span className=\"text-[10px] md:text-xs font-medium\" style={{ color: 'var(--text-secondary)' }}>\n              {clampedValue}%\n            </span>\n          </div>\n        )}\n        <div className={cn(progressSizes({ size }))} style={trackStyles}>\n          <div\n            className=\"h-full rounded-full transition-all duration-700 ease-out\"\n            style={fillStyles}\n            role=\"progressbar\"\n            aria-valuenow={clampedValue}\n            aria-valuemin={0}\n            aria-valuemax={100}\n            aria-label={`Progress: ${clampedValue}%`}\n          />\n        </div>\n      </div>\n    );\n  }\n);\n\nProgressGlass.displayName = 'ProgressGlass';\n"
+    }
+  ],
+  "categories": [
+    "specialized"
+  ]
+}

package/dist/r/projects-list-glass.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "projects-list-glass",
+  "type": "registry:block",
+  "title": "Projects List Glass",
+  "description": "Projects List Glass component with glass effects",
+  "dependencies": [
+    "lucide-react",
+    "react"
+  ],
+  "registryDependencies": [
+    "cn"
+  ],
+  "files": [
+    {
+      "path": "components/glass/sections/projects-list-glass.tsx",
+      "type": "registry:component",
+      "content": "// ========================================\n// PROJECTS LIST GLASS COMPONENT\n// List of repository cards with filtering, sorting, and ownership controls\n// ========================================\n\nimport { forwardRef, useState, useMemo, type CSSProperties } from \"react\";\nimport { FolderGit2, AlertTriangle } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { GlassCard } from \"../ui/glass-card\";\nimport { BadgeGlass } from \"../ui/badge-glass\";\nimport { RepositoryCardGlass, type RepositoryFlagType } from \"../composite/repository-card-glass\";\nimport { SegmentedControlGlass } from \"../specialized/segmented-control-glass\";\nimport { SortDropdownGlass, type SortField, type SortOrder } from \"../atomic\";\nimport \"@/glass-theme.css\";\n\n// ========================================\n// TYPES\n// ========================================\n\nexport type OwnershipFilter = 'your' | 'contrib' | 'all';\n\n// Re-export for convenience\nexport type { SortField, SortOrder } from \"../atomic\";\n\nexport interface Repository {\n  readonly name: string;\n  readonly languages: string;\n  readonly commits: number;\n  readonly contribution: number;\n  readonly stars?: number;\n  readonly flagType?: RepositoryFlagType;\n  readonly issues?: readonly string[];\n  readonly createdYear?: number;\n  /** Ownership type for Your/Contrib filtering */\n  readonly ownership?: 'your' | 'contrib';\n}\n\nexport interface ProjectsListGlassProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** List of repositories to display */\n  readonly repositories: readonly Repository[];\n  /** Show only flagged (non-green) repositories */\n  readonly showFlaggedOnly?: boolean;\n  /** Filter by creation year */\n  readonly selectedYear?: number | null;\n  /** Callback to clear all filters */\n  readonly onClearFilters?: () => void;\n  /** Custom title (overrides auto-generated) */\n  readonly title?: string;\n\n  // ======== NEW: Ownership Filter ========\n  /** Current ownership filter */\n  readonly ownershipFilter?: OwnershipFilter;\n  /** Callback when ownership filter changes */\n  readonly onOwnershipChange?: (filter: OwnershipFilter) => void;\n\n  // ======== NEW: Sorting ========\n  /** Current sort field */\n  readonly sortBy?: SortField;\n  /** Current sort order */\n  readonly sortOrder?: SortOrder;\n  /** Callback when sort changes */\n  readonly onSortChange?: (field: SortField, order: SortOrder) => void;\n\n  // ======== NEW: Controls ========\n  /** Show header controls (sort dropdown, ownership filter). Default: true when callbacks provided */\n  readonly showControls?: boolean;\n}\n\n// ========================================\n// OWNERSHIP FILTER OPTIONS\n// ========================================\n\nconst ownershipOptions = [\n  { value: 'your' as const, label: 'Your' },\n  { value: 'contrib' as const, label: 'Contrib' },\n];\n\n// ========================================\n// COMPONENT\n// ========================================\n\nexport const ProjectsListGlass = forwardRef<HTMLDivElement, ProjectsListGlassProps>(\n  (\n    {\n      repositories,\n      showFlaggedOnly = false,\n      selectedYear = null,\n      onClearFilters,\n      title,\n      // New props\n      ownershipFilter,\n      onOwnershipChange,\n      sortBy = 'commits',\n      sortOrder = 'desc',\n      onSortChange,\n      showControls,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const [expandedIndex, setExpandedIndex] = useState<number | null>(null);\n\n    // Determine if controls should be shown\n    const shouldShowControls = showControls ?? (onOwnershipChange !== undefined || onSortChange !== undefined);\n\n    // Filter repositories\n    const filteredRepos = useMemo(() => {\n      return repositories.filter((repo) => {\n        // Flag filter\n        if (showFlaggedOnly && repo.flagType === \"green\") return false;\n        // Year filter\n        if (selectedYear && repo.createdYear !== selectedYear) return false;\n        // Ownership filter\n        if (ownershipFilter && ownershipFilter !== 'all' && repo.ownership !== ownershipFilter) return false;\n        return true;\n      });\n    }, [repositories, showFlaggedOnly, selectedYear, ownershipFilter]);\n\n    // Sort repositories\n    const sortedRepos = useMemo(() => {\n      if (!onSortChange) return filteredRepos;\n\n      return [...filteredRepos].sort((a, b) => {\n        const multiplier = sortOrder === 'asc' ? 1 : -1;\n        switch (sortBy) {\n          case 'commits':\n            return (a.commits - b.commits) * multiplier;\n          case 'stars':\n            return ((a.stars ?? 0) - (b.stars ?? 0)) * multiplier;\n          case 'name':\n            return a.name.localeCompare(b.name) * multiplier;\n          case 'contribution':\n            return (a.contribution - b.contribution) * multiplier;\n          default:\n            return 0;\n        }\n      });\n    }, [filteredRepos, sortBy, sortOrder, onSortChange]);\n\n    // Generate title based on filters\n    const displayTitle = title ?? (\n      showFlaggedOnly\n        ? \"Flagged\"\n        : selectedYear\n          ? `${selectedYear}`\n          : \"All\"\n    ) + \" Projects\";\n\n    const emptyContainerStyles: CSSProperties = {\n      background: \"var(--card-bg)\",\n    };\n\n    // Handle ownership change with type safety\n    const handleOwnershipChange = (value: string): void => {\n      if (onOwnershipChange && (value === 'your' || value === 'contrib')) {\n        onOwnershipChange(value);\n      }\n    };\n\n    return (\n      <GlassCard\n        ref={ref}\n        intensity=\"medium\"\n        className={cn(\"p-3 sm:p-4\", className)}\n        {...props}\n      >\n        {/* Header */}\n        <div className=\"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4\">\n          {/* Left: Title + Badge */}\n          <div className=\"flex items-center gap-2\">\n            {showFlaggedOnly ? (\n              <AlertTriangle className=\"w-4 h-4\" style={{ color: \"var(--status-away)\" }} />\n            ) : (\n              <FolderGit2 className=\"w-4 h-4\" style={{ color: \"var(--text-accent)\" }} />\n            )}\n            <h3\n              className=\"font-semibold text-sm sm:text-base\"\n              style={{ color: \"var(--text-primary)\" }}\n            >\n              {displayTitle}\n            </h3>\n            <BadgeGlass variant=\"info\">{sortedRepos.length} repos</BadgeGlass>\n          </div>\n\n          {/* Right: Controls */}\n          {shouldShowControls && (\n            <div className=\"flex items-center gap-2 flex-wrap\">\n              {onSortChange && (\n                <SortDropdownGlass\n                  sortBy={sortBy}\n                  sortOrder={sortOrder}\n                  onSortChange={onSortChange}\n                />\n              )}\n              {onOwnershipChange && ownershipFilter && (\n                <SegmentedControlGlass\n                  options={ownershipOptions}\n                  value={ownershipFilter}\n                  onChange={handleOwnershipChange}\n                />\n              )}\n            </div>\n          )}\n        </div>\n\n        {/* Content */}\n        {sortedRepos.length === 0 ? (\n          // Empty State\n          <div className=\"text-center py-10\">\n            <div\n              className=\"w-16 h-16 mx-auto mb-3 rounded-2xl flex items-center justify-center\"\n              style={emptyContainerStyles}\n            >\n              <FolderGit2 className=\"w-8 h-8\" style={{ color: \"var(--text-muted)\" }} />\n            </div>\n            <p\n              className=\"text-sm\"\n              style={{ color: \"var(--text-muted)\" }}\n            >\n              No repositories found\n            </p>\n            {onClearFilters && (\n              <button\n                onClick={onClearFilters}\n                className=\"mt-2 text-sm underline transition-colors hover:opacity-80\"\n                style={{ color: \"var(--text-accent)\" }}\n              >\n                Clear filters\n              </button>\n            )}\n          </div>\n        ) : (\n          // Repository List\n          <div className=\"space-y-2\">\n            {sortedRepos.map((repo, index) => (\n              <RepositoryCardGlass\n                key={repo.name}\n                name={repo.name}\n                languages={repo.languages}\n                commits={repo.commits}\n                contribution={repo.contribution}\n                stars={repo.stars}\n                flagType={repo.flagType}\n                issues={repo.issues}\n                expanded={expandedIndex === index}\n                onToggle={() => setExpandedIndex(expandedIndex === index ? null : index)}\n              />\n            ))}\n          </div>\n        )}\n      </GlassCard>\n    );\n  }\n);\n\nProjectsListGlass.displayName = \"ProjectsListGlass\";\n"
+    }
+  ],
+  "categories": [
+    "sections"
+  ]
+}

package/dist/r/rainbow-progress-glass.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "rainbow-progress-glass",
+  "type": "registry:component",
+  "title": "Rainbow Progress Glass",
+  "description": "Rainbow Progress Glass component with glass effects",
+  "dependencies": [
+    "react"
+  ],
+  "registryDependencies": [
+    "cn"
+  ],
+  "files": [
+    {
+      "path": "components/glass/specialized/rainbow-progress-glass.tsx",
+      "type": "registry:component",
+      "content": "// ========================================\n// RAINBOW PROGRESS GLASS COMPONENT\n// Animated rainbow gradient progress bar\n// ========================================\n\nimport { forwardRef, type CSSProperties } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport \"@/glass-theme.css\";\n\nexport type RainbowProgressSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface RainbowProgressGlassProps extends React.HTMLAttributes<HTMLDivElement> {\n  readonly value: number;\n  readonly size?: RainbowProgressSize;\n  readonly showGlow?: boolean;\n}\n\nconst sizeClasses: Record<RainbowProgressSize, string> = {\n  sm: \"h-2.5 md:h-2\",\n  md: \"h-3.5 md:h-3\",\n  lg: \"h-[1.125rem] md:h-4\",\n  xl: \"h-6 md:h-5\",\n};\n\nexport const RainbowProgressGlass = forwardRef<HTMLDivElement, RainbowProgressGlassProps>(\n  ({ value, size = \"lg\", showGlow = true, className, ...props }, ref) => {\n    const clampedValue = Math.min(100, Math.max(0, value));\n\n    const trackStyles: CSSProperties = {\n      background: \"var(--progress-bg)\",\n    };\n\n    const fillStyles: CSSProperties = {\n      width: `${clampedValue}%`,\n      background:\n        \"linear-gradient(90deg, #f59e0b, #fbbf24, #84cc16, #22c55e, #14b8a6, #06b6d4, #3b82f6)\",\n      boxShadow: showGlow ? \"var(--rainbow-glow)\" : \"none\",\n      animation: showGlow ? \"var(--rainbow-animation)\" : \"none\",\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"rounded-full overflow-hidden\", sizeClasses[size], className)}\n        style={trackStyles}\n        role=\"progressbar\"\n        aria-valuenow={clampedValue}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-label={`Rainbow progress: ${clampedValue}%`}\n        {...props}\n      >\n        <div\n          className=\"h-full rounded-full transition-all duration-1000\"\n          style={fillStyles}\n        />\n      </div>\n    );\n  }\n);\n\nRainbowProgressGlass.displayName = \"RainbowProgressGlass\";\n"
+    }
+  ],
+  "categories": [
+    "specialized"
+  ]
+}

package/dist/r/registry.json

@@ -0,0 +1,337 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry.json",
+  "name": "shadcn-glass-ui",
+  "homepage": "https://yhooi2.github.io/shadcn-glass-ui-library/",
+  "items": [
+    {
+      "name": "tooltip-glass",
+      "type": "registry:ui",
+      "title": "Tooltip Glass",
+      "description": "Glass-themed tooltip with:"
+    },
+    {
+      "name": "toggle-glass",
+      "type": "registry:ui",
+      "title": "Toggle Glass",
+      "description": "Glass-themed toggle switch with:"
+    },
+    {
+      "name": "tabs-glass",
+      "type": "registry:ui",
+      "title": "Tabs Glass",
+      "description": "TabsGlass Component (Compound API only)"
+    },
+    {
+      "name": "slider-glass",
+      "type": "registry:ui",
+      "title": "Slider Glass",
+      "description": "Glass-themed range slider with:"
+    },
+    {
+      "name": "skeleton-glass",
+      "type": "registry:ui",
+      "title": "Skeleton Glass",
+      "description": "Glass-themed loading skeleton with:"
+    },
+    {
+      "name": "popover-glass",
+      "type": "registry:ui",
+      "title": "Popover Glass",
+      "description": "Floating glass-themed container for tooltips, dropdowns, and overlays with:"
+    },
+    {
+      "name": "notification-glass",
+      "type": "registry:ui",
+      "title": "Notification Glass",
+      "description": "Glass-themed toast notification with:"
+    },
+    {
+      "name": "modal-glass",
+      "type": "registry:ui",
+      "title": "Modal Glass",
+      "description": "ModalGlass Component (Compound API only)"
+    },
+    {
+      "name": "input-glass",
+      "type": "registry:ui",
+      "title": "Input Glass",
+      "description": "Glass-themed input with:"
+    },
+    {
+      "name": "glass-card",
+      "type": "registry:ui",
+      "title": "Glass Card",
+      "description": "Glass-themed container with:"
+    },
+    {
+      "name": "dropdown-glass",
+      "type": "registry:ui",
+      "title": "Dropdown Glass",
+      "description": "Glass-themed dropdown menu based on Radix UI with:"
+    },
+    {
+      "name": "combobox-glass",
+      "type": "registry:ui",
+      "title": "Combobox Glass",
+      "description": "Glass-themed combobox (searchable select) with:"
+    },
+    {
+      "name": "circular-progress-glass",
+      "type": "registry:ui",
+      "title": "Circular Progress Glass",
+      "description": "SVG-based circular progress indicator with:"
+    },
+    {
+      "name": "checkbox-glass",
+      "type": "registry:ui",
+      "title": "Checkbox Glass",
+      "description": "Glass-themed checkbox with:"
+    },
+    {
+      "name": "button-glass",
+      "type": "registry:ui",
+      "title": "Button Glass",
+      "description": "Glass-themed button with:"
+    },
+    {
+      "name": "badge-glass",
+      "type": "registry:ui",
+      "title": "Badge Glass",
+      "description": "Glass-themed badge with:"
+    },
+    {
+      "name": "avatar-glass",
+      "type": "registry:ui",
+      "title": "Avatar Glass",
+      "description": "Glass-themed avatar with:"
+    },
+    {
+      "name": "alert-glass",
+      "type": "registry:ui",
+      "title": "Alert Glass",
+      "description": "Glass-themed alert with:"
+    },
+    {
+      "name": "status-indicator-glass",
+      "type": "registry:component",
+      "title": "Status Indicator Glass",
+      "description": "Status Indicator Glass component with glass effects"
+    },
+    {
+      "name": "segmented-control-glass",
+      "type": "registry:component",
+      "title": "Segmented Control Glass",
+      "description": "Segmented Control Glass component with glass effects"
+    },
+    {
+      "name": "rainbow-progress-glass",
+      "type": "registry:component",
+      "title": "Rainbow Progress Glass",
+      "description": "Rainbow Progress Glass component with glass effects"
+    },
+    {
+      "name": "progress-glass",
+      "type": "registry:component",
+      "title": "Progress Glass",
+      "description": "Glass-themed progress bar with:"
+    },
+    {
+      "name": "profile-avatar-glass",
+      "type": "registry:component",
+      "title": "Profile Avatar Glass",
+      "description": "Profile Avatar Glass component with glass effects"
+    },
+    {
+      "name": "language-bar-glass",
+      "type": "registry:component",
+      "title": "Language Bar Glass",
+      "description": "Language Bar Glass component with glass effects"
+    },
+    {
+      "name": "flag-alert-glass",
+      "type": "registry:component",
+      "title": "Flag Alert Glass",
+      "description": "Flag Alert Glass component with glass effects"
+    },
+    {
+      "name": "base-progress-glass",
+      "type": "registry:component",
+      "title": "Base Progress Glass",
+      "description": "Base progress bar component used as foundation for:"
+    },
+    {
+      "name": "trust-score-card-glass",
+      "type": "registry:block",
+      "title": "Trust Score Card Glass",
+      "description": "Trust Score Card Glass component with glass effects"
+    },
+    {
+      "name": "projects-list-glass",
+      "type": "registry:block",
+      "title": "Projects List Glass",
+      "description": "Projects List Glass component with glass effects"
+    },
+    {
+      "name": "profile-header-glass",
+      "type": "registry:block",
+      "title": "Profile Header Glass",
+      "description": "Profile Header Glass component with glass effects"
+    },
+    {
+      "name": "header-nav-glass",
+      "type": "registry:block",
+      "title": "Header Nav Glass",
+      "description": "Header Nav Glass component with glass effects"
+    },
+    {
+      "name": "header-branding-glass",
+      "type": "registry:block",
+      "title": "Header Branding Glass",
+      "description": "Header Branding Glass component with glass effects"
+    },
+    {
+      "name": "flags-section-glass",
+      "type": "registry:block",
+      "title": "Flags Section Glass",
+      "description": "Flags Section Glass component with glass effects"
+    },
+    {
+      "name": "career-stats-glass",
+      "type": "registry:block",
+      "title": "Career Stats Glass",
+      "description": "Career Stats Glass component with glass effects"
+    },
+    {
+      "name": "touch-target",
+      "type": "registry:lib",
+      "title": "Touch Target",
+      "description": "Ensures minimum touch target size compliance with Apple Human Interface Guidelines.\n * Wraps interactive elements to guarantee accessibility on touch devices.\n *\n * Apple HIG recommends minimum 44×44pt (44×44px) touch targets.\n * Material Design recommends 48×48dp for better accessibility.\n *\n * @see https://developer.apple.com/design/human-interface-guidelines/layout"
+    },
+    {
+      "name": "interactive-card",
+      "type": "registry:lib",
+      "title": "Interactive Card",
+      "description": "Unified wrapper for card components with hover animations and glass effects.\n * Eliminates hover state duplication in MetricCardGlass, YearCardGlass,\n * AICardGlass, RepositoryCardGlass, and other card components.\n *\n * Features:"
+    },
+    {
+      "name": "form-field-wrapper",
+      "type": "registry:lib",
+      "title": "Form Field Wrapper",
+      "description": "Unified wrapper for form controls with label, validation states, and messages.\n * Eliminates code duplication across InputGlass, SliderGlass, ComboBoxGlass, etc.\n *\n * Handles:"
+    },
+    {
+      "name": "year-card-glass",
+      "type": "registry:block",
+      "title": "Year Card Glass",
+      "description": "Year Card Glass component with glass effects"
+    },
+    {
+      "name": "user-stats-line-glass",
+      "type": "registry:block",
+      "title": "User Stats Line Glass",
+      "description": "User Stats Line Glass component with glass effects"
+    },
+    {
+      "name": "user-info-glass",
+      "type": "registry:block",
+      "title": "User Info Glass",
+      "description": "User Info Glass component with glass effects"
+    },
+    {
+      "name": "trust-score-display-glass",
+      "type": "registry:block",
+      "title": "Trust Score Display Glass",
+      "description": "Trust Score Display Glass component with glass effects"
+    },
+    {
+      "name": "repository-metadata-glass",
+      "type": "registry:block",
+      "title": "Repository Metadata Glass",
+      "description": "Repository Metadata Glass component with glass effects"
+    },
+    {
+      "name": "repository-header-glass",
+      "type": "registry:block",
+      "title": "Repository Header Glass",
+      "description": "Repository Header Glass component with glass effects"
+    },
+    {
+      "name": "repository-card-glass",
+      "type": "registry:block",
+      "title": "Repository Card Glass",
+      "description": "Repository Card Glass component with glass effects"
+    },
+    {
+      "name": "metrics-grid-glass",
+      "type": "registry:block",
+      "title": "Metrics Grid Glass",
+      "description": "Metrics Grid Glass component with glass effects"
+    },
+    {
+      "name": "metric-card-glass",
+      "type": "registry:block",
+      "title": "Metric Card Glass",
+      "description": "Metric Card Glass component with glass effects"
+    },
+    {
+      "name": "contribution-metrics-glass",
+      "type": "registry:block",
+      "title": "Contribution Metrics Glass",
+      "description": "Contribution Metrics Glass component with glass effects"
+    },
+    {
+      "name": "circular-metric-glass",
+      "type": "registry:block",
+      "title": "Circular Metric Glass",
+      "description": "CircularMetricGlass - Compact circular progress metric display"
+    },
+    {
+      "name": "career-stats-header-glass",
+      "type": "registry:block",
+      "title": "Career Stats Header Glass",
+      "description": "Career Stats Header Glass component with glass effects"
+    },
+    {
+      "name": "ai-card-glass",
+      "type": "registry:block",
+      "title": "Ai Card Glass",
+      "description": "Ai Card Glass component with glass effects"
+    },
+    {
+      "name": "theme-toggle-glass",
+      "type": "registry:component",
+      "title": "Theme Toggle Glass",
+      "description": "Theme Toggle Glass component with glass effects"
+    },
+    {
+      "name": "stat-item-glass",
+      "type": "registry:component",
+      "title": "Stat Item Glass",
+      "description": "Stat Item Glass component with glass effects"
+    },
+    {
+      "name": "sort-dropdown-glass",
+      "type": "registry:component",
+      "title": "Sort Dropdown Glass",
+      "description": "Atomic component for sorting controls with:"
+    },
+    {
+      "name": "search-box-glass",
+      "type": "registry:component",
+      "title": "Search Box Glass",
+      "description": "Search Box Glass component with glass effects"
+    },
+    {
+      "name": "icon-button-glass",
+      "type": "registry:component",
+      "title": "Icon Button Glass",
+      "description": "Icon Button Glass component with glass effects"
+    },
+    {
+      "name": "expandable-header-glass",
+      "type": "registry:component",
+      "title": "Expandable Header Glass",
+      "description": "Expandable Header Glass component with glass effects"
+    }
+  ]
+}