chore: migrate to Badges

packages/ui/app/src/api-reference/endpoints/EndpointContentCodeSnippets.tsx

@@ -1,13 +1,12 @@
 import * as ApiDefinition from "@fern-api/fdr-sdk/api-definition";
 import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import { EMPTY_ARRAY, EMPTY_OBJECT, visitDiscriminatedUnion } from "@fern-api/ui-core-utils";
-import { FernScrollArea } from "@fern-ui/components";
+import { FernScrollArea, StatusCodeBadge, statusCodeToIntent } from "@fern-ui/components";
 import { useResizeObserver } from "@fern-ui/react-commons";
 import { sortBy } from "es-toolkit";
 import { RESET } from "jotai/utils";
 import { ReactNode, SetStateAction, memo, useCallback, useMemo, useRef } from "react";
 import { FernErrorTag } from "../../components/FernErrorBoundary";
-import { StatusCodeTag, statusCodeToIntent } from "../../components/StatusCodeTag";
 import { PlaygroundButton } from "../../playground/PlaygroundButton";
 import { usePlaygroundBaseUrl } from "../../playground/utils/select-environment";
 import { AudioExample } from "../examples/AudioExample";
@@ -195,7 +194,7 @@ const UnmemoizedEndpointContentCodeSnippets: React.FC<EndpointContentCodeSnippet
                     }}
                     hoveredPropertyPath={hoveredResponsePropertyPath}
                     json={selectedExample?.exampleCall.responseBody?.value ?? EMPTY_OBJECT}
-                    intent={statusCodeToIntent(selectedExample.exampleCall.responseStatusCode)}
+                    intent={statusCodeToIntent(String(selectedExample.exampleCall.responseStatusCode))}
                 />
             )}
             {selectedExample?.exampleCall.responseBody != null &&
@@ -255,11 +254,11 @@ const UnmemoizedEndpointContentCodeSnippets: React.FC<EndpointContentCodeSnippet
 
 export const EndpointContentCodeSnippets = memo(UnmemoizedEndpointContentCodeSnippets);
 
-function renderResponseTitle(title: string, statusCode: number) {
+function renderResponseTitle(title: string, statusCode: number | string) {
     return (
         <span className="inline-flex items-center gap-2">
-            <StatusCodeTag statusCode={statusCode} />
-            <span className={`text-intent-${statusCodeToIntent(Number(statusCode))}`}>{title}</span>
+            <StatusCodeBadge statusCode={statusCode} />
+            <span className={`text-intent-${statusCodeToIntent(String(statusCode))}`}>{title}</span>
         </span>
     );
 }

packages/ui/app/src/api-reference/endpoints/EndpointContentHeader.tsx

@@ -1,9 +1,9 @@
 import { EndpointContext } from "@fern-api/fdr-sdk/api-definition";
 import type * as FernNavigation from "@fern-api/fdr-sdk/navigation";
+import { AvailabilityBadge } from "@fern-ui/components/badges";
 import { memo, type ReactNode } from "react";
 import { FernBreadcrumbs } from "../../components/FernBreadcrumbs";
 import { usePlaygroundBaseUrl } from "../../playground/utils/select-environment";
-import { EndpointAvailabilityTag } from "./EndpointAvailabilityTag";
 import { EndpointUrlWithOverflow } from "./EndpointUrlWithOverflow";
 
 interface EndpointContentHeaderProps {
@@ -23,7 +23,7 @@ export const EndpointContentHeader = memo<EndpointContentHeaderProps>(({ context
                     <h1 className="fern-page-heading">{node.title}</h1>
                     {endpoint.availability != null && (
                         <span className="inline-block ml-2 align-text-bottom">
-                            <EndpointAvailabilityTag availability={endpoint.availability} minimal={true} />
+                            <AvailabilityBadge availability={endpoint.availability} rounded />
                         </span>
                     )}
                 </span>

packages/ui/app/src/api-reference/endpoints/EndpointError.tsx

@@ -3,13 +3,13 @@ import type { APIV1Read } from "@fern-api/fdr-sdk/client/types";
 import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import { visitDiscriminatedUnion } from "@fern-api/ui-core-utils";
 import { FernCollapse } from "@fern-ui/components";
+import { AvailabilityBadge } from "@fern-ui/components/badges";
 import cn from "clsx";
 import { MouseEventHandler, memo } from "react";
 import { MdxContent } from "../../mdx/MdxContent";
 import { renderTypeShorthand } from "../../type-shorthand";
 import { type JsonPropertyPath } from "../examples/JsonPropertyPath";
 import { TypeReferenceDefinitions } from "../types/type-reference/TypeReferenceDefinitions";
-import { EndpointAvailabilityTag } from "./EndpointAvailabilityTag";
 
 export declare namespace EndpointError {
     export interface Props {
@@ -58,7 +58,7 @@ export const EndpointError = memo<EndpointError.Props>(function EndpointErrorUnm
             <div className="flex items-baseline space-x-2">
                 <div className="rounded-lg bg-tag-danger px-2 py-1 text-xs text-intent-danger">{error.statusCode}</div>
                 <div className="t-muted text-xs text-left">{error.name}</div>
-                {availability != null && <EndpointAvailabilityTag availability={availability} minimal={true} />}
+                {availability != null && <AvailabilityBadge availability={availability} size="sm" rounded />}
             </div>
 
             {error.shape != null && (

packages/ui/app/src/api-reference/endpoints/EndpointParameter.tsx

@@ -2,6 +2,7 @@ import type * as ApiDefinition from "@fern-api/fdr-sdk/api-definition";
 import type * as FernDocs from "@fern-api/fdr-sdk/docs";
 import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import { EMPTY_ARRAY } from "@fern-api/ui-core-utils";
+import { AvailabilityBadge } from "@fern-ui/components/badges";
 import cn from "clsx";
 import { compact } from "es-toolkit/array";
 import { FC, PropsWithChildren, ReactNode, memo, useEffect, useRef, useState } from "react";
@@ -13,7 +14,6 @@ import { Markdown } from "../../mdx/Markdown";
 import { renderTypeShorthandRoot } from "../../type-shorthand";
 import { getAnchorId } from "../../util/anchor";
 import { TypeReferenceDefinitions } from "../types/type-reference/TypeReferenceDefinitions";
-import { EndpointAvailabilityTag } from "./EndpointAvailabilityTag";
 
 export declare namespace EndpointParameter {
     export interface Props {
@@ -125,7 +125,7 @@ export const EndpointParameterContent: FC<PropsWithChildren<EndpointParameter.Co
                 <span className="inline-flex items-baseline gap-2">
                     <span className="fern-api-property-key">{name}</span>
                     {typeShorthand}
-                    {availability != null && <EndpointAvailabilityTag availability={availability} minimal={true} />}
+                    {availability != null && <AvailabilityBadge availability={availability} size="sm" rounded />}
                 </span>
             </FernAnchor>
             <Markdown mdx={descriptions[0]} className="!t-muted" size="sm" />

packages/ui/app/src/api-reference/endpoints/EndpointUrl.tsx

@@ -2,11 +2,11 @@ import { APIV1Read } from "@fern-api/fdr-sdk";
 import * as ApiDefinition from "@fern-api/fdr-sdk/api-definition";
 import visitDiscriminatedUnion from "@fern-api/ui-core-utils/visitDiscriminatedUnion";
 import { CopyToClipboardButton } from "@fern-ui/components";
+import { HttpMethodBadge } from "@fern-ui/components/badges";
 import { useBooleanState } from "@fern-ui/react-commons";
 import cn from "clsx";
 import React, { PropsWithChildren, ReactElement, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { noop } from "ts-essentials";
-import { HttpMethodTag } from "../../components/HttpMethodTag";
 import { MaybeEnvironmentDropdown } from "../../components/MaybeEnvironmentDropdown";
 
 export declare namespace EndpointUrl {
@@ -86,7 +86,7 @@ export const EndpointUrl = React.forwardRef<HTMLDivElement, PropsWithChildren<En
 
     return (
         <div ref={ref} className={cn("flex items-center gap-1 pr-2", className)}>
-            <HttpMethodTag method={method} />
+            <HttpMethodBadge method={method} />
 
             <div className={cn("flex items-center")}>
                 <span

packages/ui/app/src/api-reference/endpoints/ErrorExampleSelect.tsx

@@ -1,9 +1,8 @@
-import { FernButton, Intent } from "@fern-ui/components";
+import { FernButton, SemanticColor, statusCodeToIntent } from "@fern-ui/components";
 import * as Select from "@radix-ui/react-select";
 import clsx from "clsx";
 import { NavArrowDown, NavArrowUp } from "iconoir-react";
 import { FC, Fragment, PropsWithChildren, ReactNode, forwardRef } from "react";
-import { statusCodeToIntent } from "../../components/StatusCodeTag";
 import { CodeExample } from "../examples/code-example";
 import { ExamplesByStatusCode, StatusCode } from "../types/EndpointContent";
 
@@ -47,7 +46,7 @@ export const ErrorExampleSelect: FC<PropsWithChildren<ErrorExampleSelect.Props>>
                     className="-ml-1 pl-1"
                     intent={
                         selectedExample != null
-                            ? statusCodeToIntent(selectedExample.exampleCall.responseStatusCode)
+                            ? statusCodeToIntent(String(selectedExample.exampleCall.responseStatusCode))
                             : "none"
                     }
                 >
@@ -69,7 +68,7 @@ export const ErrorExampleSelect: FC<PropsWithChildren<ErrorExampleSelect.Props>>
                                             <FernSelectItem
                                                 value={`${statusCode}:${j}`}
                                                 key={j}
-                                                intent={statusCodeToIntent(Number(statusCode))}
+                                                intent={statusCodeToIntent(statusCode)}
                                             >
                                                 {getExampleId(example)}
                                             </FernSelectItem>
@@ -90,7 +89,7 @@ export const ErrorExampleSelect: FC<PropsWithChildren<ErrorExampleSelect.Props>>
 
 export const FernSelectItem = forwardRef<
     HTMLDivElement,
-    Select.SelectItemProps & { textClassName?: string; intent?: Intent }
+    Select.SelectItemProps & { textClassName?: string; intent?: SemanticColor }
 >(function FernSelectItem({ children, className, textClassName, intent = "none", ...props }, forwardedRef) {
     return (
         <Select.Item

packages/ui/app/src/api-reference/examples/TitledExample.tsx

@@ -1,11 +1,11 @@
-import { CopyToClipboardButton, Intent } from "@fern-ui/components";
+import { CopyToClipboardButton, SemanticColor } from "@fern-ui/components";
 import cn from "clsx";
-import { forwardRef, MouseEventHandler, PropsWithChildren, ReactElement, ReactNode } from "react";
+import { MouseEventHandler, PropsWithChildren, ReactElement, ReactNode, forwardRef } from "react";
 
 export declare namespace TitledExample {
     export interface Props {
         title: ReactNode;
-        intent?: Intent;
+        intent?: SemanticColor;
         actions?: ReactElement;
         className?: string;
         copyToClipboardText?: () => string; // use provider to lazily compute clipboard text

packages/ui/app/src/api-reference/types/discriminated-union/DiscriminatedUnionVariant.tsx

@@ -2,6 +2,7 @@ import * as ApiDefinition from "@fern-api/fdr-sdk/api-definition";
 import type * as FernDocs from "@fern-api/fdr-sdk/docs";
 import type * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import titleCase from "@fern-api/ui-core-utils/titleCase";
+import { AvailabilityBadge } from "@fern-ui/components/badges";
 import cn from "clsx";
 import { compact } from "es-toolkit/array";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -11,7 +12,6 @@ import { FernAnchor } from "../../../components/FernAnchor";
 import { useHref } from "../../../hooks/useHref";
 import { Markdown } from "../../../mdx/Markdown";
 import { getAnchorId } from "../../../util/anchor";
-import { EndpointAvailabilityTag } from "../../endpoints/EndpointAvailabilityTag";
 import {
     TypeDefinitionContext,
     TypeDefinitionContextValue,
@@ -117,7 +117,7 @@ export const DiscriminatedUnionVariant: React.FC<DiscriminatedUnionVariant.Props
             </div>
 
             {unionVariant.availability != null && (
-                <EndpointAvailabilityTag availability={unionVariant.availability} minimal={true} />
+                <AvailabilityBadge availability={unionVariant.availability} size="sm" rounded />
             )}
             <div className="flex flex-col">
                 <Markdown mdx={descriptions[0]} size="sm" />

packages/ui/app/src/api-reference/types/object/ObjectProperty.tsx

@@ -1,5 +1,6 @@
 import * as ApiDefinition from "@fern-api/fdr-sdk/api-definition";
 import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
+import { AvailabilityBadge } from "@fern-ui/components/badges";
 import cn from "clsx";
 import { compact } from "es-toolkit/array";
 import { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -11,7 +12,6 @@ import { useHref } from "../../../hooks/useHref";
 import { Markdown } from "../../../mdx/Markdown";
 import { renderTypeShorthandRoot } from "../../../type-shorthand";
 import { getAnchorId } from "../../../util/anchor";
-import { EndpointAvailabilityTag } from "../../endpoints/EndpointAvailabilityTag";
 import { JsonPropertyPath } from "../../examples/JsonPropertyPath";
 import {
     TypeDefinitionContext,
@@ -141,7 +141,7 @@ const UnmemoizedObjectPropertyInternal = forwardRef<HTMLDivElement, ObjectProper
                 </FernAnchor>
                 {renderTypeShorthandRoot(property.valueShape, types, contextValue.isResponse)}
                 {property.availability != null && (
-                    <EndpointAvailabilityTag availability={property.availability} minimal={true} />
+                    <AvailabilityBadge availability={property.availability} size="sm" rounded />
                 )}
             </div>
             {hasInlineEnum(property.valueShape, types) && (

packages/ui/app/src/api-reference/types/undiscriminated-union/UndiscriminatedUnionVariant.tsx

@@ -1,11 +1,11 @@
 import * as ApiDefinition from "@fern-api/fdr-sdk/api-definition";
 import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import { visitDiscriminatedUnion } from "@fern-api/ui-core-utils";
+import { AvailabilityBadge } from "@fern-ui/components/badges";
 import cn from "clsx";
 import { ReactElement, useCallback } from "react";
 import { Markdown } from "../../../mdx/Markdown";
 import { renderTypeShorthand } from "../../../type-shorthand";
-import { EndpointAvailabilityTag } from "../../endpoints/EndpointAvailabilityTag";
 import {
     TypeDefinitionContext,
     TypeDefinitionContextValue,
@@ -115,7 +115,7 @@ export const UndiscriminatedUnionVariant: React.FC<UndiscriminatedUnionVariant.P
                         {renderTypeShorthand(unionVariant.shape, { nullable: contextValue.isResponse }, types)}
                     </span>
                     {unionVariant.availability != null && (
-                        <EndpointAvailabilityTag availability={unionVariant.availability} minimal={true} />
+                        <AvailabilityBadge availability={unionVariant.availability} size="sm" rounded />
                     )}
                 </div>
                 <Markdown mdx={unionVariant.description} size="sm" />

packages/ui/app/src/api-reference/web-socket/WebSocket.tsx

@@ -3,6 +3,7 @@ import * as ApiDefinition from "@fern-api/fdr-sdk/api-definition";
 import { APIV1Read } from "@fern-api/fdr-sdk/client/types";
 import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import { CopyToClipboardButton, FernScrollArea } from "@fern-ui/components";
+import { AvailabilityBadge } from "@fern-ui/components/badges";
 import cn from "clsx";
 import { ArrowDown, ArrowUp, Wifi } from "iconoir-react";
 import { Children, FC, HTMLAttributes, ReactNode, useMemo, useRef } from "react";
@@ -13,7 +14,6 @@ import { Markdown } from "../../mdx/Markdown";
 import { PlaygroundButton } from "../../playground/PlaygroundButton";
 import { usePlaygroundBaseUrl } from "../../playground/utils/select-environment";
 import { getSlugFromChildren } from "../../util/getSlugFromText";
-import { EndpointAvailabilityTag } from "../endpoints/EndpointAvailabilityTag";
 import { EndpointParameter } from "../endpoints/EndpointParameter";
 import { EndpointSection } from "../endpoints/EndpointSection";
 import { EndpointUrlWithOverflow } from "../endpoints/EndpointUrlWithOverflow";
@@ -117,7 +117,7 @@ const WebhookContent: FC<WebhookContentProps> = ({ context, breadcrumb, last })
                         <h1 className="fern-page-heading">{node.title}</h1>
                         {channel.availability != null && (
                             <span className="inline-block ml-2 align-text-bottom">
-                                <EndpointAvailabilityTag availability={channel.availability} minimal={true} />
+                                <AvailabilityBadge availability={channel.availability} rounded />
                             </span>
                         )}
                     </div>