{
  "formField": "interface FormFieldProps {\n  label?: string\n  placeholder?: string\n  helperText?: string\n  id?: string\n  value?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nfunction EmailFormField({ \n  label = \"Email Address\",\n  placeholder = \"john@example.com\",\n  helperText = \"We'll never share your email with anyone else.\",\n  id = \"email\",\n  value,\n  onChange\n}: FormFieldProps) {\n  return (\n    <div className=\"space-y-2\">\n      <Label htmlFor={id}>{label}</Label>\n      <div className=\"relative\">\n        <Envelope className=\"absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground\" />\n        <Input id={id} type=\"email\" placeholder={placeholder} className=\"pl-10\" value={value} onChange={onChange} />\n      </div>\n      <p className=\"text-sm text-muted-foreground\">\n        {helperText}\n      </p>\n    </div>\n  )\n}",
  "searchBar": "interface SearchBarProps {\n  placeholder?: string\n  value?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nfunction SearchBar({ placeholder = \"Search...\", value, onChange }: SearchBarProps) {\n  return (\n    <div className=\"relative\">\n      <MagnifyingGlass className=\"absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground\" />\n      <Input placeholder={placeholder} className=\"pl-10\" value={value} onChange={onChange} />\n    </div>\n  )\n}",
  "searchBarWithButton": "interface SearchBarWithButtonProps {\n  placeholder?: string\n  buttonText?: string\n  value?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n  onSearch?: () => void\n}\n\nfunction SearchBarWithButton({ \n  placeholder = \"Search...\",\n  buttonText = \"Search\",\n  value,\n  onChange,\n  onSearch\n}: SearchBarWithButtonProps) {\n  return (\n    <div className=\"flex gap-2\">\n      <div className=\"relative flex-1\">\n        <MagnifyingGlass className=\"absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground\" />\n        <Input placeholder={placeholder} className=\"pl-10\" value={value} onChange={onChange} />\n      </div>\n      <Button onClick={onSearch}>{buttonText}</Button>\n    </div>\n  )\n}",
  "userCard": "interface UserCardProps {\n  name?: string\n  username?: string\n  bio?: string\n  avatarUrl?: string\n  avatarFallback?: string\n  buttonText?: string\n  onButtonClick?: () => void\n}\n\nfunction UserCard({ \n  name = \"Alex Morgan\",\n  username = \"@alexmorgan\",\n  bio = \"Product designer passionate about creating delightful user experiences.\",\n  avatarUrl = \"https://i.pravatar.cc/150?img=1\",\n  avatarFallback = \"AM\",\n  buttonText = \"Follow\",\n  onButtonClick\n}: UserCardProps) {\n  return (\n    <Card className=\"p-6\">\n      <div className=\"flex items-start gap-4\">\n        <Avatar className=\"h-12 w-12\">\n          <AvatarImage src={avatarUrl} />\n          <AvatarFallback>{avatarFallback}</AvatarFallback>\n        </Avatar>\n        <div className=\"flex-1 min-w-0\">\n          <h3 className=\"font-semibold text-lg\">{name}</h3>\n          <p className=\"text-sm text-muted-foreground\">{username}</p>\n          <p className=\"text-sm mt-2\">\n            {bio}\n          </p>\n        </div>\n        <Button size=\"sm\" variant=\"outline\" onClick={onButtonClick}>\n          {buttonText}\n        </Button>\n      </div>\n    </Card>\n  )\n}",
  "socialActions": "interface SocialActionsProps {\n  likeText?: string\n  commentText?: string\n  shareText?: string\n  onLike?: () => void\n  onComment?: () => void\n  onShare?: () => void\n}\n\nfunction SocialActions({ \n  likeText = \"Like\",\n  commentText = \"Comment\",\n  shareText = \"Share\",\n  onLike,\n  onComment,\n  onShare\n}: SocialActionsProps) {\n  return (\n    <div className=\"flex items-center gap-2\">\n      <Button variant=\"ghost\" size=\"sm\" onClick={onLike}>\n        <Heart className=\"mr-2\" />\n        {likeText}\n      </Button>\n      <Button variant=\"ghost\" size=\"sm\" onClick={onComment}>\n        <ChatCircle className=\"mr-2\" />\n        {commentText}\n      </Button>\n      <Button variant=\"ghost\" size=\"sm\" onClick={onShare}>\n        <Share className=\"mr-2\" />\n        {shareText}\n      </Button>\n    </div>\n  )\n}",
  "statusIndicator": "interface StatusIndicatorProps {\n  statusText?: string\n  badgeText?: string\n  isActive?: boolean\n}\n\nfunction StatusIndicator({ \n  statusText = \"System Online\",\n  badgeText = \"Active\",\n  isActive = true\n}: StatusIndicatorProps) {\n  return (\n    <div className=\"flex items-center justify-between\">\n      <div className=\"flex items-center gap-3\">\n        <div className={cn(\n          \"h-3 w-3 rounded-full bg-accent\",\n          isActive && \"animate-pulse\"\n        )} />\n        <span className=\"font-medium\">{statusText}</span>\n      </div>\n      <Badge>{badgeText}</Badge>\n    </div>\n  )\n}",
  "contentCard": "interface ContentCardProps {\n  title?: string\n  description?: string\n  date?: string\n  readTime?: string\n  tags?: string[]\n}\n\nfunction ContentCard({ \n  title = \"Building Scalable Design Systems\",\n  description = \"Learn how to create and maintain design systems that grow with your team.\",\n  date = \"Mar 15, 2024\",\n  readTime = \"5 min read\",\n  tags = [\"Design\", \"System\"]\n}: ContentCardProps) {\n  return (\n    <Card className=\"p-6 hover:shadow-lg transition-shadow\">\n      <div className=\"space-y-4\">\n        <div className=\"flex items-start justify-between gap-4\">\n          <div className=\"space-y-1\">\n            <h3 className=\"font-semibold text-lg line-clamp-2\">\n              {title}\n            </h3>\n            <p className=\"text-sm text-muted-foreground\">\n              {description}\n            </p>\n          </div>\n        </div>\n        <div className=\"flex items-center gap-4 text-sm text-muted-foreground\">\n          <div className=\"flex items-center gap-1\">\n            <Calendar className=\"h-4 w-4\" />\n            <span>{date}</span>\n          </div>\n          <span>•</span>\n          <span>{readTime}</span>\n        </div>\n        <div className=\"flex gap-2\">\n          {tags.map((tag) => (\n            <Badge key={tag} variant=\"outline\">{tag}</Badge>\n          ))}\n        </div>\n      </div>\n    </Card>\n  )\n}"
}