{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "endpoint",
  "title": "Endpoint",
  "description": "API endpoint pill combining HTTP method, response status code, and route path.",
  "files": [
    {
      "path": "registry/default/ui/endpoint.tsx",
      "content": "import { cn } from '@/lib/utils';\n\nexport type TEndpointProps = {\n  method?: string;\n  statusCode?: number | string;\n  path?: string;\n  className?: string;\n};\n\nfunction getStatusColor(\n  value?: number | string,\n  method?: string\n): Record<'text' | 'bg' | 'border', string> {\n  if (!method && value !== undefined) {\n    const statusNum = Number(value);\n    const isValidHttpStatus =\n      !isNaN(statusNum) && statusNum >= 100 && statusNum < 600;\n\n    if (!isValidHttpStatus) {\n      return {\n        text: 'text-muted-foreground',\n        bg: 'bg-muted',\n        border: 'border-border',\n      };\n    }\n  }\n\n  const normalized =\n    typeof value === 'number'\n      ? value < 100\n        ? String(value)\n        : String(Math.floor(value / 100))\n      : typeof value === 'string' && /^\\d+$/.test(value) && value.length >= 3\n        ? String(Math.floor(Number(value) / 100))\n        : value;\n\n  switch (normalized) {\n    case '1':\n    case '2':\n    case '3':\n    case 'info':\n    case 'success':\n    case undefined:\n      return {\n        text: 'text-muted-foreground',\n        bg: 'bg-muted',\n        border: 'border-emerald-400',\n      };\n    case '4':\n    case 'warning':\n    case 'redirect':\n      return {\n        text: 'text-warning-foreground',\n        bg: 'bg-warning',\n        border: 'border-warning-foreground/30',\n      };\n    case '5':\n    case 'error':\n      return {\n        text: 'text-destructive-foreground',\n        bg: 'bg-destructive',\n        border: 'border-destructive-foreground/30',\n      };\n    default:\n      return {\n        text: 'text-muted-foreground',\n        bg: 'bg-muted',\n        border: 'border-border',\n      };\n  }\n}\n\nfunction Endpoint({ method, statusCode, path, className }: TEndpointProps) {\n  const colors = getStatusColor(statusCode, method);\n  const hasStatus = statusCode !== undefined;\n  const hasPath = path !== undefined && path !== '';\n  const hasMethod = !!method;\n\n  const methodIsLast = hasMethod && !hasStatus && !hasPath;\n  const statusIsLast = hasStatus && !hasPath;\n\n  return (\n    <span\n      data-slot=\"endpoint\"\n      className={cn(\n        'inline-flex items-center text-xs font-mono tabular-nums',\n        className\n      )}\n    >\n      {hasMethod && (\n        <span\n          className={cn(\n            'inline-flex items-center select-text leading-none py-1 px-2 rounded-l-xs bg-background text-foreground border uppercase tracking-wide',\n            methodIsLast ? 'rounded-r-xs' : 'border-r-0'\n          )}\n        >\n          {method}\n        </span>\n      )}\n      {hasStatus && (\n        <span\n          className={cn(\n            'inline-flex items-center leading-none py-1 px-2 border',\n            !hasMethod && 'rounded-l-xs',\n            statusIsLast && 'rounded-r-xs',\n            colors.text,\n            colors.bg,\n            colors.border\n          )}\n        >\n          {statusCode}\n        </span>\n      )}\n      {hasPath && (\n        <span\n          className={cn(\n            'inline-flex items-center select-text leading-none py-1 px-2 rounded-r-xs bg-muted/40 text-foreground border truncate',\n            hasStatus && 'border-l-0',\n            hasMethod &&\n              !hasStatus &&\n              'border-l-emerald-400 dark:border-l-border',\n            !hasMethod && !hasStatus && 'rounded-l-xs'\n          )}\n        >\n          {path}\n        </span>\n      )}\n    </span>\n  );\n}\n\nexport { Endpoint };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}