{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"pill","type":"registry:ui","title":"pill","description":"A flexible badge component designed for a variety of use cases.","author":"Hayden Bleasel <hello@haydenbleasel.com>","dependencies":["lucide-react"],"devDependencies":[],"registryDependencies":["avatar","badge","button"],"files":[{"type":"registry:ui","path":"index.tsx","content":"import { ChevronDownIcon, ChevronUpIcon, MinusIcon } from \"lucide-react\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nexport type PillProps = ComponentProps<typeof Badge> & {\n  themed?: boolean;\n};\n\nexport const Pill = ({\n  variant = \"secondary\",\n  themed = false,\n  className,\n  ...props\n}: PillProps) => (\n  <Badge\n    className={cn(\"gap-2 rounded-full px-3 py-1.5 font-normal\", className)}\n    variant={variant}\n    {...props}\n  />\n);\n\nexport type PillAvatarProps = ComponentProps<typeof AvatarImage> & {\n  fallback?: string;\n};\n\nexport const PillAvatar = ({\n  fallback,\n  className,\n  ...props\n}: PillAvatarProps) => (\n  <Avatar className={cn(\"-ml-1 h-4 w-4\", className)}>\n    <AvatarImage {...props} />\n    <AvatarFallback>{fallback}</AvatarFallback>\n  </Avatar>\n);\n\nexport type PillButtonProps = ComponentProps<typeof Button>;\n\nexport const PillButton = ({ className, ...props }: PillButtonProps) => (\n  <Button\n    className={cn(\n      \"-my-2 -mr-2 size-6 rounded-full p-0.5 hover:bg-foreground/5\",\n      className\n    )}\n    size=\"icon\"\n    variant=\"ghost\"\n    {...props}\n  />\n);\n\nexport type PillStatusProps = {\n  children: ReactNode;\n  className?: string;\n};\n\nexport const PillStatus = ({\n  children,\n  className,\n  ...props\n}: PillStatusProps) => (\n  <div\n    className={cn(\n      \"flex items-center gap-2 border-r pr-2 font-medium\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nexport type PillIndicatorProps = {\n  variant?: \"success\" | \"error\" | \"warning\" | \"info\";\n  pulse?: boolean;\n};\n\nexport const PillIndicator = ({\n  variant = \"success\",\n  pulse = false,\n}: PillIndicatorProps) => (\n  <span className=\"relative flex size-2\">\n    {pulse && (\n      <span\n        className={cn(\n          \"absolute inline-flex h-full w-full animate-ping rounded-full opacity-75\",\n          variant === \"success\" && \"bg-emerald-400\",\n          variant === \"error\" && \"bg-rose-400\",\n          variant === \"warning\" && \"bg-amber-400\",\n          variant === \"info\" && \"bg-sky-400\"\n        )}\n      />\n    )}\n    <span\n      className={cn(\n        \"relative inline-flex size-2 rounded-full\",\n        variant === \"success\" && \"bg-emerald-500\",\n        variant === \"error\" && \"bg-rose-500\",\n        variant === \"warning\" && \"bg-amber-500\",\n        variant === \"info\" && \"bg-sky-500\"\n      )}\n    />\n  </span>\n);\n\nexport type PillDeltaProps = {\n  className?: string;\n  delta: number;\n};\n\nexport const PillDelta = ({ className, delta }: PillDeltaProps) => {\n  if (!delta) {\n    return (\n      <MinusIcon className={cn(\"size-3 text-muted-foreground\", className)} />\n    );\n  }\n\n  if (delta > 0) {\n    return (\n      <ChevronUpIcon className={cn(\"size-3 text-emerald-500\", className)} />\n    );\n  }\n\n  return <ChevronDownIcon className={cn(\"size-3 text-rose-500\", className)} />;\n};\n\nexport type PillIconProps = {\n  icon: typeof ChevronUpIcon;\n  className?: string;\n};\n\nexport const PillIcon = ({\n  icon: Icon,\n  className,\n  ...props\n}: PillIconProps) => (\n  <Icon\n    className={cn(\"size-3 text-muted-foreground\", className)}\n    size={12}\n    {...props}\n  />\n);\n\nexport type PillAvatarGroupProps = {\n  children: ReactNode;\n  className?: string;\n};\n\nexport const PillAvatarGroup = ({\n  children,\n  className,\n  ...props\n}: PillAvatarGroupProps) => (\n  <div\n    className={cn(\n      \"-space-x-1 flex items-center\",\n      \"[&>*:not(:first-of-type)]:[mask-image:radial-gradient(circle_9px_at_-4px_50%,transparent_99%,white_100%)]\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n","target":"components/kibo-ui/pill/index.tsx"}],"css":{}}