{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "permit-badge",
  "title": "Permit Badge",
  "description": "Carrier and permit credential atoms: a status-tinted PermitBadge pill with registration number and expiry countdown, a fuller PermitCard with holder, dates and a verify-on-register link slot, and an inline VerificationTick.",
  "dependencies": [
    "@untitledui/icons@^0.0.22"
  ],
  "registryDependencies": [
    "@nx-ui/utils"
  ],
  "files": [
    {
      "path": "components/blocks/domain/permit-badge/index.ts",
      "content": "export {\n  PermitBadge,\n  PermitCard,\n  VerificationTick,\n  type PermitBadgeProps,\n  type PermitCardProps,\n  type PermitStatus,\n  type PermitType,\n  type VerificationTickProps,\n} from \"./permit-badge\"\n",
      "type": "registry:component",
      "target": "components/blocks/domain/permit-badge/index.ts"
    },
    {
      "path": "components/blocks/domain/permit-badge/permit-badge.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AlertTriangle,\n  Award01,\n  CheckVerified01,\n  Clock,\n  FileShield02,\n  LinkExternal01,\n  ShieldTick,\n  Truck01,\n  XCircle,\n} from \"@untitledui/icons\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport type PermitType = \"waste-carrier\" | \"environmental-permit\" | \"exemption\"\n\nexport type PermitStatus = \"active\" | \"expiring\" | \"expired\" | \"suspended\"\n\nconst PERMIT_TYPE_META: Record<\n  PermitType,\n  { Icon: React.ComponentType<{ className?: string }>; label: string }\n> = {\n  \"waste-carrier\": { Icon: Truck01, label: \"Waste carrier\" },\n  \"environmental-permit\": { Icon: FileShield02, label: \"Environmental permit\" },\n  exemption: { Icon: Award01, label: \"Exemption\" },\n}\n\nconst PERMIT_STATUS_META: Record<\n  PermitStatus,\n  {\n    Icon: React.ComponentType<{ className?: string }>\n    label: string\n    badgeClassName: string\n    dotClassName: string\n  }\n> = {\n  active: {\n    Icon: ShieldTick,\n    label: \"Active\",\n    badgeClassName:\n      \"bg-utility-green-50 text-utility-green-700 border-utility-green-200\",\n    dotClassName: \"bg-utility-green-500\",\n  },\n  expiring: {\n    Icon: Clock,\n    label: \"Expiring\",\n    badgeClassName:\n      \"bg-utility-yellow-50 text-utility-yellow-700 border-utility-yellow-200\",\n    dotClassName: \"bg-utility-yellow-500\",\n  },\n  expired: {\n    Icon: XCircle,\n    label: \"Expired\",\n    badgeClassName: \"bg-utility-red-50 text-utility-red-700 border-utility-red-200\",\n    dotClassName: \"bg-utility-red-500\",\n  },\n  suspended: {\n    Icon: AlertTriangle,\n    label: \"Suspended\",\n    badgeClassName:\n      \"bg-utility-orange-50 text-utility-orange-700 border-utility-orange-200\",\n    dotClassName: \"bg-utility-orange-500\",\n  },\n}\n\nexport interface VerificationTickProps {\n  /** Whether the credential has been verified against the public register. */\n  verified?: boolean\n  /** Accessible/tooltip label, e.g. \"Verified against the EA register\". */\n  label?: string\n  className?: string\n}\n\n/** VerificationTick — a small inline tick shown beside verified credentials. */\nexport function VerificationTick({\n  verified = true,\n  label,\n  className,\n}: VerificationTickProps) {\n  if (!verified) {\n    return (\n      <Clock\n        aria-label={label ?? \"Verification pending\"}\n        className={cn(\"size-3.5 shrink-0 text-utility-yellow-600\", className)}\n      />\n    )\n  }\n  return (\n    <CheckVerified01\n      aria-label={label ?? \"Verified\"}\n      className={cn(\"size-3.5 shrink-0 text-utility-green-600\", className)}\n    />\n  )\n}\n\nexport interface PermitBadgeProps {\n  type: PermitType\n  /** Registration or permit number, e.g. \"CBDU123456\". */\n  registrationNumber?: string\n  status: PermitStatus\n  /** Pre-formatted expiry countdown, e.g. \"Expires in 21 days\" — tinted by status. */\n  expiryLabel?: string\n  /** Show a verification tick after the registration number. */\n  verified?: boolean\n  className?: string\n}\n\n/**\n * PermitBadge — a compact status pill for a carrier registration, environmental\n * permit or exemption, with the registration number and an expiry countdown\n * tinted by status.\n */\nexport function PermitBadge({\n  type,\n  registrationNumber,\n  status,\n  expiryLabel,\n  verified,\n  className,\n}: PermitBadgeProps) {\n  const typeMeta = PERMIT_TYPE_META[type]\n  const statusMeta = PERMIT_STATUS_META[status]\n\n  return (\n    <span\n      className={cn(\n        \"inline-flex max-w-full items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium\",\n        statusMeta.badgeClassName,\n        className\n      )}\n    >\n      <typeMeta.Icon className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n      <span className=\"truncate\">{typeMeta.label}</span>\n      {registrationNumber ? (\n        <span className=\"truncate font-semibold tabular-nums\">\n          {registrationNumber}\n        </span>\n      ) : null}\n      {verified ? <VerificationTick className=\"text-current\" /> : null}\n      <span\n        className={cn(\"size-1.5 shrink-0 rounded-full\", statusMeta.dotClassName)}\n        aria-hidden=\"true\"\n      />\n      <span className=\"shrink-0\">{expiryLabel ?? statusMeta.label}</span>\n    </span>\n  )\n}\n\nexport interface PermitCardProps {\n  type: PermitType\n  status: PermitStatus\n  /** The organisation or person holding the licence. */\n  holder: string\n  registrationNumber: string\n  /** Pre-formatted issue date, e.g. \"Issued 3 Jan 2024\". */\n  issuedLabel?: string\n  /** Pre-formatted expiry, e.g. \"Expires 2 Jan 2027\" or \"Expired 12 May 2026\". */\n  expiryLabel?: string\n  /** Whether the credential has been verified against the public register. */\n  verified?: boolean\n  /** Slot for a verify action, e.g. a link to the EA public register. */\n  verifyHref?: string\n  verifyLabel?: string\n  onVerify?: () => void\n  className?: string\n}\n\n/**\n * PermitCard — a fuller credential card showing the holder, registration\n * number, licence dates, status and an optional \"verify on register\" link.\n */\nexport function PermitCard({\n  type,\n  status,\n  holder,\n  registrationNumber,\n  issuedLabel,\n  expiryLabel,\n  verified,\n  verifyHref,\n  verifyLabel = \"Verify on register\",\n  onVerify,\n  className,\n}: PermitCardProps) {\n  const typeMeta = PERMIT_TYPE_META[type]\n  const statusMeta = PERMIT_STATUS_META[status]\n\n  const verifyContent = (\n    <>\n      {verifyLabel}\n      <LinkExternal01 className=\"size-3.5\" aria-hidden=\"true\" />\n    </>\n  )\n  const verifyClassName =\n    \"inline-flex items-center gap-1 text-xs font-semibold text-text-brand-secondary transition hover:underline\"\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col gap-3 rounded-xl border border-border bg-background p-4 shadow-xs\",\n        className\n      )}\n    >\n      <div className=\"flex items-start justify-between gap-3\">\n        <div className=\"flex items-center gap-2.5\">\n          <span className=\"flex size-9 shrink-0 items-center justify-center rounded-lg bg-bg-secondary text-text-secondary\">\n            <typeMeta.Icon className=\"size-4.5\" aria-hidden=\"true\" />\n          </span>\n          <div>\n            <div className=\"text-sm font-semibold text-foreground\">\n              {typeMeta.label}\n            </div>\n            <div className=\"flex items-center gap-1.5 text-xs text-text-tertiary tabular-nums\">\n              {registrationNumber}\n              {verified !== undefined ? (\n                <VerificationTick verified={verified} />\n              ) : null}\n            </div>\n          </div>\n        </div>\n        <span\n          className={cn(\n            \"inline-flex shrink-0 items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium\",\n            statusMeta.badgeClassName\n          )}\n        >\n          <statusMeta.Icon className=\"size-3\" aria-hidden=\"true\" />\n          {statusMeta.label}\n        </span>\n      </div>\n\n      <dl className=\"grid gap-x-4 gap-y-1 text-sm sm:grid-cols-2\">\n        <div className=\"sm:col-span-2\">\n          <dt className=\"text-xs text-text-quaternary\">Holder</dt>\n          <dd className=\"font-medium text-text-secondary\">{holder}</dd>\n        </div>\n        {issuedLabel ? (\n          <div>\n            <dt className=\"text-xs text-text-quaternary\">Issued</dt>\n            <dd className=\"text-text-secondary\">{issuedLabel}</dd>\n          </div>\n        ) : null}\n        {expiryLabel ? (\n          <div>\n            <dt className=\"text-xs text-text-quaternary\">Expiry</dt>\n            <dd\n              className={cn(\n                \"text-text-secondary\",\n                status === \"expiring\" && \"font-medium text-utility-yellow-700\",\n                status === \"expired\" && \"font-medium text-utility-red-700\",\n                status === \"suspended\" && \"font-medium text-utility-orange-700\"\n              )}\n            >\n              {expiryLabel}\n            </dd>\n          </div>\n        ) : null}\n      </dl>\n\n      {verifyHref || onVerify ? (\n        <div className=\"border-t border-border pt-3\">\n          {verifyHref ? (\n            <a\n              href={verifyHref}\n              target=\"_blank\"\n              rel=\"noreferrer\"\n              className={verifyClassName}\n            >\n              {verifyContent}\n            </a>\n          ) : (\n            <button type=\"button\" onClick={onVerify} className={verifyClassName}>\n              {verifyContent}\n            </button>\n          )}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/domain/permit-badge/permit-badge.tsx"
    }
  ],
  "type": "registry:block"
}