@borisj74/bv-ds 0.1.0

package/src/components/CarouselImage/CarouselImage.tsx

@@ -0,0 +1,60 @@
+import { type HTMLAttributes } from "react";
+import clsx from "clsx";
+import { CarouselArrow, type CarouselArrowSize } from "../CarouselArrow";
+import { PaginationDotGroup } from "../PaginationDotGroup";
+
+export interface CarouselImageProps extends HTMLAttributes<HTMLDivElement> {
+  imageUrl: string;
+  size?: CarouselArrowSize;
+  /** Total slides (drives the dot pager). */
+  count?: number;
+  /** Active slide index. */
+  current?: number;
+  onPrev?: () => void;
+  onNext?: () => void;
+}
+
+/**
+ * Carousel slide — a full-bleed image with overlaid prev/next `CarouselArrow`s
+ * and a bottom-centre `PaginationDotGroup` (framed). Aspect 8:5. Composition
+ * over the arrow + dot-group primitives.
+ */
+export function CarouselImage({
+  imageUrl,
+  size = "md",
+  count = 3,
+  current = 0,
+  onPrev,
+  onNext,
+  className,
+  ...rest
+}: CarouselImageProps) {
+  const inset = size === "lg" ? "left-5 right-5" : "left-4 right-4";
+  return (
+    <div
+      className={clsx("relative aspect-[8/5] w-full overflow-hidden rounded-xl", className)}
+      {...rest}
+    >
+      <img src={imageUrl} alt="" className="absolute inset-0 size-full object-cover" />
+      <CarouselArrow
+        direction="left"
+        size={size}
+        onClick={onPrev}
+        className={clsx("absolute top-1/2 -translate-y-1/2", inset.split(" ")[0])}
+      />
+      <CarouselArrow
+        direction="right"
+        size={size}
+        onClick={onNext}
+        className={clsx("absolute top-1/2 -translate-y-1/2", inset.split(" ")[1])}
+      />
+      <PaginationDotGroup
+        framed
+        size={size}
+        count={count}
+        current={current}
+        className="absolute bottom-4 left-1/2 -translate-x-1/2"
+      />
+    </div>
+  );
+}

package/src/components/CarouselImage/index.ts

@@ -0,0 +1,2 @@
+export { CarouselImage } from "./CarouselImage";
+export type { CarouselImageProps } from "./CarouselImage";

package/src/components/Change/Change.tsx

@@ -0,0 +1,73 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export type ChangeType = "01" | "02" | "03";
+export type ChangeTrend = "positive" | "negative";
+
+export interface ChangeProps extends HTMLAttributes<HTMLDivElement> {
+  /** 01 = plain arrow · 02 = trend line · 03 = bordered pill (neutral text). */
+  type?: ChangeType;
+  trend?: ChangeTrend;
+  /** The delta value, e.g. "100%". */
+  children: ReactNode;
+}
+
+const Stroke = ({ className, d }: { className?: string; d: string }) => (
+  <svg className={className} viewBox="0 0 16 16" fill="none" aria-hidden>
+    <path d={d} stroke="currentColor" strokeWidth="1.33" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+const ICONS: Record<ChangeType, Record<ChangeTrend, ReactNode>> = {
+  "01": {
+    positive: <Stroke className="size-4" d="M8 12.67V3.33M8 3.33 3.33 8M8 3.33 12.67 8" />,
+    negative: <Stroke className="size-4" d="M8 3.33v9.34M8 12.67 3.33 8M8 12.67 12.67 8" />,
+  },
+  "02": {
+    positive: <Stroke className="size-4" d="M14.67 4.67 9 10.33 6.33 7.67 1.33 12.67M14.67 4.67h-4M14.67 4.67v4" />,
+    negative: <Stroke className="size-4" d="M14.67 11.33 9 5.67 6.33 8.33 1.33 3.33M14.67 11.33h-4M14.67 11.33v-4" />,
+  },
+  "03": {
+    positive: <Stroke className="size-3" d="M4.5 11.5 11.5 4.5M11.5 4.5h-6M11.5 4.5v6" />,
+    negative: <Stroke className="size-3" d="M4.5 4.5 11.5 11.5M11.5 11.5h-6M11.5 11.5v-6" />,
+  },
+};
+
+/**
+ * Trend delta chip used by `MetricItem` (and standalone). Three shapes:
+ * - **01** arrow + value, success/error tinted.
+ * - **02** trend-line + value, success/error tinted.
+ * - **03** bordered pill, diagonal arrow, **neutral** text regardless of trend.
+ */
+export function Change({
+  type = "01",
+  trend = "positive",
+  children,
+  className,
+  ...rest
+}: ChangeProps) {
+  const tint =
+    type === "03"
+      ? "text-text-secondary"
+      : trend === "positive"
+        ? "text-text-success-primary"
+        : "text-text-error-primary";
+
+  return (
+    <div
+      className={clsx(
+        "inline-flex items-center",
+        type === "03" &&
+          "gap-xs rounded-sm border border-border-primary bg-bg-primary py-xxs pl-sm pr-md shadow-xs",
+        type === "02" && "justify-center gap-xs",
+        type === "01" && "justify-center gap-xxs",
+        tint,
+        className,
+      )}
+      {...rest}
+    >
+      {ICONS[type][trend]}
+      <span className="text-sm font-medium">{children}</span>
+    </div>
+  );
+}

package/src/components/Change/index.ts

@@ -0,0 +1,2 @@
+export { Change } from "./Change";
+export type { ChangeProps, ChangeType, ChangeTrend } from "./Change";

package/src/components/ChartLegend/ChartLegend.tsx

@@ -0,0 +1,38 @@
+import { type ReactNode } from "react";
+import clsx from "clsx";
+
+export interface ChartLegendItem {
+  label: ReactNode;
+  color: string;
+}
+
+export interface ChartLegendProps {
+  items: ChartLegendItem[];
+  /** Layout direction — `horizontal` (top) or `vertical` (right). */
+  orientation?: "horizontal" | "vertical";
+  className?: string;
+}
+
+/**
+ * Chart legend — a row (or column) of colored-dot + label entries. Use standalone
+ * or feed Recharts' `<Legend content={...} />`. `color` is a real CSS color (the
+ * series color), matching the `CHART_COLORS` palette.
+ */
+export function ChartLegend({ items, orientation = "horizontal", className }: ChartLegendProps) {
+  return (
+    <ul
+      className={clsx(
+        "flex font-body",
+        orientation === "vertical" ? "flex-col gap-md" : "flex-wrap items-center gap-lg",
+        className,
+      )}
+    >
+      {items.map((item, i) => (
+        <li key={i} className="flex items-center gap-sm text-sm text-text-tertiary">
+          <span className="size-2.5 shrink-0 rounded-full" style={{ backgroundColor: item.color }} aria-hidden />
+          {item.label}
+        </li>
+      ))}
+    </ul>
+  );
+}

package/src/components/ChartLegend/index.ts

@@ -0,0 +1,2 @@
+export { ChartLegend } from "./ChartLegend";
+export type { ChartLegendProps, ChartLegendItem } from "./ChartLegend";

package/src/components/ChartMarker/ChartMarker.tsx

@@ -0,0 +1,54 @@
+import clsx from "clsx";
+
+export type ChartMarkerLine = "solid" | "dashed" | "none";
+
+export interface ChartMarkerProps {
+  /** Primary value shown in the bubble (e.g. "1,218"). */
+  value: string;
+  /** Optional secondary line (e.g. "Jan 10, 2027"). */
+  date?: string;
+  /** The drop line beneath the marker. */
+  line?: ChartMarkerLine;
+  /** Drop-line height. Defaults to h-32 (128px). */
+  lineHeightClass?: string;
+  className?: string;
+}
+
+export function ChartMarker({
+  value,
+  date,
+  line = "solid",
+  lineHeightClass = "h-32",
+  className,
+}: ChartMarkerProps) {
+  return (
+    <div className={clsx("inline-flex flex-col items-center font-body", className)}>
+      {/* Tooltip-style bubble */}
+      <div className="rounded-md bg-bg-primary-solid px-md py-xs text-center shadow-lg">
+        <div className="text-xs font-semibold text-text-white">{value}</div>
+        {/*
+          TOKEN NOTE: the source colour is `Component colors/Components/Tooltips/
+          tooltip-supporting-text` (#d4d4d4). It's approximated here as
+          `utility-neutral-300`, which is an exact HEX match but a SEMANTIC
+          mismatch (a tooltip-specific token mapped onto a generic utility
+          shade). If a real `tooltip-supporting-text` token is added to the
+          preset later (e.g. when Tooltip is built), swap this for it.
+        */}
+        {date ? (
+          <div className="text-xs font-medium text-utility-neutral-300">{date}</div>
+        ) : null}
+      </div>
+      {/* Marker dot (ring) */}
+      <span className="mt-xs size-3 rounded-full border-2 border-utility-brand-600 bg-bg-primary" aria-hidden />
+      {/* Drop line */}
+      {line === "solid" ? (
+        <span className={clsx("w-0.5 bg-utility-brand-600", lineHeightClass)} aria-hidden />
+      ) : line === "dashed" ? (
+        <span
+          className={clsx("border-l-2 border-dashed border-utility-brand-600", lineHeightClass)}
+          aria-hidden
+        />
+      ) : null}
+    </div>
+  );
+}

package/src/components/ChartMarker/index.ts

@@ -0,0 +1,2 @@
+export { ChartMarker } from "./ChartMarker";
+export type { ChartMarkerProps, ChartMarkerLine } from "./ChartMarker";

package/src/components/ChartMini/ChartMini.tsx

@@ -0,0 +1,86 @@
+import { type CSSProperties } from "react";
+import { Line, LineChart, ResponsiveContainer } from "recharts";
+
+export interface ChartMiniDatum {
+  value: number;
+}
+
+export type ChartMiniTrend = "positive" | "negative" | "neutral";
+
+export interface ChartMiniProps {
+  /** Series points — only `value` is read. */
+  data: ChartMiniDatum[];
+  /**
+   * Stroke colour. A design-token name (e.g. `"utility-brand-500"`,
+   * `"utility-success-500"`) resolved to its hex, or a raw `#hex`. Defaults to
+   * the `trend` colour (`utility-brand-500` for neutral).
+   */
+  color?: string;
+  /** Drives the default stroke colour when `color` is omitted. */
+  trend?: ChartMiniTrend;
+  /** Container size (px). Figma sparkline is 112×56. */
+  width?: number | string;
+  height?: number;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * Token hex values mirrored from `tailwind-preset.js`. Recharts colour props
+ * take hex strings (not Tailwind class names), so the chart palette is resolved
+ * here. Keep in sync with the preset's `utility-*` ramp.
+ */
+const TOKEN_HEX: Record<string, string> = {
+  "utility-brand-400": "#b692f6",
+  "utility-brand-500": "#9e77ed",
+  "utility-brand-600": "#7f56d9",
+  "utility-brand-700": "#6941c6",
+  "utility-success-500": "#22c55e",
+  "utility-error-500": "#dc2626",
+};
+
+const TREND_COLOR: Record<ChartMiniTrend, string> = {
+  positive: TOKEN_HEX["utility-success-500"],
+  negative: TOKEN_HEX["utility-error-500"],
+  neutral: TOKEN_HEX["utility-brand-500"],
+};
+
+function resolveColor(color: string | undefined, trend: ChartMiniTrend): string {
+  if (!color) return TREND_COLOR[trend];
+  if (color.startsWith("#")) return color;
+  return TOKEN_HEX[color] ?? TREND_COLOR[trend];
+}
+
+/**
+ * Sparkline — a thin Recharts `LineChart` wrapper. No axes, legend, tooltip or
+ * dots: line only. Consumed by `MetricItem`'s `chart` slot. Recharts is an
+ * optional peer dependency — install it in the consuming app to use this.
+ */
+export function ChartMini({
+  data,
+  color,
+  trend = "neutral",
+  width = 112,
+  height = 56,
+  className,
+  style,
+}: ChartMiniProps) {
+  const stroke = resolveColor(color, trend);
+
+  return (
+    <div className={className} style={{ width, height, ...style }}>
+      <ResponsiveContainer width="100%" height="100%">
+        <LineChart data={data} margin={{ top: 4, right: 4, bottom: 4, left: 4 }}>
+          <Line
+            type="monotone"
+            dataKey="value"
+            stroke={stroke}
+            strokeWidth={2}
+            dot={false}
+            isAnimationActive={false}
+          />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}

package/src/components/ChartMini/index.ts

@@ -0,0 +1,2 @@
+export { ChartMini } from "./ChartMini";
+export type { ChartMiniProps, ChartMiniDatum, ChartMiniTrend } from "./ChartMini";

package/src/components/ChartTooltip/ChartTooltip.tsx

@@ -0,0 +1,44 @@
+import { type ReactNode } from "react";
+
+export interface ChartTooltipPayloadItem {
+  name?: string;
+  value?: number | string;
+  color?: string;
+  dataKey?: string | number;
+}
+
+export interface ChartTooltipProps {
+  /** Recharts passes this when the tooltip is shown. */
+  active?: boolean;
+  /** Series entries at the hovered point (Recharts shape). */
+  payload?: ChartTooltipPayloadItem[];
+  /** The category/x label at the hovered point. */
+  label?: ReactNode;
+  /** Format a value for display. */
+  formatValue?: (value: number | string | undefined) => ReactNode;
+}
+
+/**
+ * Themed tooltip card for the Recharts chart wrappers — pass as the chart's
+ * `<Tooltip content={<ChartTooltip />} />`. Renders a `bg-primary` card with the
+ * point label and one colored-dot row per series. Returns null when inactive.
+ */
+export function ChartTooltip({ active, payload, label, formatValue }: ChartTooltipProps) {
+  if (!active || !payload?.length) return null;
+  return (
+    <div className="rounded-md border border-border-secondary-alt bg-bg-primary px-lg py-md font-body shadow-lg">
+      {label != null && <div className="mb-xs text-xs font-semibold text-text-secondary">{label}</div>}
+      <div className="flex flex-col gap-xxs">
+        {payload.map((item, i) => (
+          <div key={i} className="flex items-center gap-sm text-xs">
+            <span className="size-2 shrink-0 rounded-full" style={{ backgroundColor: item.color }} aria-hidden />
+            <span className="text-text-tertiary">{item.name ?? item.dataKey}</span>
+            <span className="ml-auto font-semibold text-text-primary">
+              {formatValue ? formatValue(item.value) : item.value}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/ChartTooltip/index.ts

@@ -0,0 +1,2 @@
+export { ChartTooltip } from "./ChartTooltip";
+export type { ChartTooltipProps, ChartTooltipPayloadItem } from "./ChartTooltip";

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,65 @@
+import type { InputHTMLAttributes } from "react";
+import clsx from "clsx";
+import { CheckControlVisual, type CheckControlSize } from "./checkboxBase";
+
+export interface CheckboxProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+  size?: CheckControlSize;
+  /** Indeterminate (mixed) visual state. */
+  indeterminate?: boolean;
+  label?: string;
+  supportingText?: string;
+}
+
+const textSize: Record<CheckControlSize, string> = { sm: "text-sm", md: "text-md" };
+
+export function Checkbox({
+  size = "sm",
+  indeterminate = false,
+  checked,
+  disabled,
+  label,
+  supportingText,
+  className,
+  ...rest
+}: CheckboxProps) {
+  return (
+    <label
+      className={clsx(
+        "inline-flex items-start gap-md font-body",
+        disabled ? "cursor-not-allowed opacity-70" : "cursor-pointer",
+        className,
+      )}
+    >
+      <input
+        type="checkbox"
+        checked={checked}
+        disabled={disabled}
+        className="peer sr-only"
+        aria-checked={indeterminate ? "mixed" : checked}
+        {...rest}
+      />
+      <CheckControlVisual
+        type="checkbox"
+        checked={checked}
+        indeterminate={indeterminate}
+        size={size}
+        disabled={disabled}
+      />
+      {label || supportingText ? (
+        <span className="flex flex-col">
+          {label ? (
+            <span className={clsx("font-medium text-text-secondary", textSize[size])}>
+              {label}
+            </span>
+          ) : null}
+          {supportingText ? (
+            <span className={clsx("font-normal text-text-tertiary", textSize[size])}>
+              {supportingText}
+            </span>
+          ) : null}
+        </span>
+      ) : null}
+    </label>
+  );
+}

package/src/components/Checkbox/checkboxBase.tsx

@@ -0,0 +1,81 @@
+import clsx from "clsx";
+
+export type CheckControlSize = "sm" | "md";
+export type CheckControlType = "checkbox" | "radio";
+
+const boxSize: Record<CheckControlSize, string> = {
+  sm: "size-4", // 16px
+  md: "size-5", // 20px
+};
+
+const glyphSize: Record<CheckControlSize, string> = {
+  sm: "size-3",
+  md: "size-3.5",
+};
+
+export interface CheckControlVisualProps {
+  type: CheckControlType;
+  checked?: boolean;
+  indeterminate?: boolean;
+  size?: CheckControlSize;
+  disabled?: boolean;
+}
+
+/**
+ * Shared visual control for Checkbox and Radio (the `_Checkbox base` in Figma).
+ * Renders the box/circle + glyph from props; the wrapping component owns the
+ * native input, label, and events. Place it immediately AFTER a `peer` input so
+ * the focus ring (peer-focus-visible) works.
+ */
+export function CheckControlVisual({
+  type,
+  checked = false,
+  indeterminate = false,
+  size = "sm",
+  disabled = false,
+}: CheckControlVisualProps) {
+  const active = checked || indeterminate;
+  return (
+    <span
+      aria-hidden
+      className={clsx(
+        "flex shrink-0 items-center justify-center border transition-colors",
+        "peer-focus-visible:ring-2 peer-focus-visible:ring-border-brand peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-bg-primary",
+        type === "radio" ? "rounded-full" : "rounded-sm",
+        boxSize[size],
+        disabled
+          ? "border-border-primary bg-bg-tertiary"
+          : active
+            ? "border-brand-solid bg-brand-solid"
+            : "border-border-primary bg-bg-primary",
+      )}
+    >
+      {type === "checkbox" && checked && !indeterminate ? (
+        <svg viewBox="0 0 16 16" fill="none" className={glyphSize[size]} aria-hidden>
+          <path
+            d="m13 4-7 7-3-3"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="text-white"
+          />
+        </svg>
+      ) : null}
+      {type === "checkbox" && indeterminate ? (
+        <svg viewBox="0 0 16 16" fill="none" className={glyphSize[size]} aria-hidden>
+          <path d="M4 8h8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-white" />
+        </svg>
+      ) : null}
+      {type === "radio" && checked ? (
+        <span className={clsx("rounded-full bg-white", size === "sm" ? "size-1.5" : "size-2")} />
+      ) : null}
+    </span>
+  );
+}
+
+export interface CheckControlLabelProps {
+  label?: string;
+  supportingText?: string;
+  size?: CheckControlSize;
+}

package/src/components/Checkbox/index.ts

@@ -0,0 +1,3 @@
+export { Checkbox } from "./Checkbox";
+export type { CheckboxProps } from "./Checkbox";
+export type { CheckControlSize } from "./checkboxBase";

package/src/components/CodeSnippet/CodeSnippet.tsx

@@ -0,0 +1,94 @@
+import { useState } from "react";
+import clsx from "clsx";
+
+export interface CodeSnippetProps {
+  /** Raw code string. Rendered verbatim — see the highlighting note below. */
+  code: string;
+  /** Optional language label (shown in the toolbar). */
+  language?: string;
+  /** Show the line-number gutter. */
+  showLineNumbers?: boolean;
+  /** Override the copy handler (defaults to navigator.clipboard). */
+  onCopy?: (code: string) => void;
+  className?: string;
+}
+
+/*
+  SCOPE NOTE: this is the DS *shell* only — dark container, toolbar (copy +
+  expand), and an optional line-number gutter. It renders `code` as plain
+  monospace text. SYNTAX HIGHLIGHTING IS NOT IMPLEMENTED HERE: Untitled UI's
+  snippet uses per-token colours (utility-blue/green/pink/red-600), which means
+  real tokenization via a library (Prism / Shiki / highlight.js) rather than
+  hand-rolled regex. Treat the <code> body as the plug-point: wrap or replace it
+  with a highlighter's output once a library is chosen (same "wrap a lib" caution
+  flagged in figma-map.md). Tabs (npm/yarn/bun) variant is also not modelled yet.
+*/
+
+function CopyIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" className="size-4" aria-hidden>
+      <path
+        d="M6.667 6.667V4.333c0-.92.746-1.666 1.666-1.666h7.334c.92 0 1.666.746 1.666 1.666v7.334c0 .92-.746 1.666-1.666 1.666h-2.334M11.667 6.667H4.333c-.92 0-1.666.746-1.666 1.666v7.334c0 .92.746 1.666 1.666 1.666h7.334c.92 0 1.666-.746 1.666-1.666V8.333c0-.92-.746-1.666-1.666-1.666Z"
+        stroke="currentColor"
+        strokeWidth="1.667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function CodeSnippet({
+  code,
+  language,
+  showLineNumbers = false,
+  onCopy,
+  className,
+}: CodeSnippetProps) {
+  const [copied, setCopied] = useState(false);
+  const lines = code.replace(/\n$/, "").split("\n");
+
+  const handleCopy = () => {
+    if (onCopy) onCopy(code);
+    else void navigator.clipboard?.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+
+  return (
+    <div
+      className={clsx(
+        "overflow-hidden rounded-lg bg-bg-primary-solid font-body",
+        className,
+      )}
+    >
+      <div className="flex items-center justify-between px-xl py-md">
+        <span className="text-xs font-medium text-utility-neutral-400">
+          {language ?? "code"}
+        </span>
+        <button
+          type="button"
+          onClick={handleCopy}
+          aria-label="Copy code"
+          className="text-utility-neutral-400 transition-colors hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-brand"
+        >
+          {copied ? <span className="text-xs">Copied</span> : <CopyIcon />}
+        </button>
+      </div>
+      <pre className="overflow-x-auto px-xl pb-xl text-sm leading-5">
+        <code className="font-mono text-white">
+          {showLineNumbers
+            ? lines.map((line, i) => (
+                <div key={i} className="grid grid-cols-[2rem_1fr] gap-md">
+                  <span className="select-none text-right text-utility-neutral-500">
+                    {i + 1}
+                  </span>
+                  <span className="whitespace-pre">{line || " "}</span>
+                </div>
+              ))
+            : code}
+        </code>
+      </pre>
+    </div>
+  );
+}

package/src/components/CodeSnippet/index.ts

@@ -0,0 +1,2 @@
+export { CodeSnippet } from "./CodeSnippet";
+export type { CodeSnippetProps } from "./CodeSnippet";

package/src/components/CodeSnippetTabs/CodeSnippetTabs.tsx

@@ -0,0 +1,44 @@
+import clsx from "clsx";
+
+export interface CodeSnippetTabsProps {
+  /** Tab labels (e.g. ["npm", "yarn", "bun"]). */
+  tabs: string[];
+  /** Currently-selected tab. */
+  value: string;
+  onChange?: (tab: string) => void;
+  className?: string;
+}
+
+/** Tab strip for CodeSnippet's "Vertical with tabs" type. */
+export function CodeSnippetTabs({
+  tabs,
+  value,
+  onChange,
+  className,
+}: CodeSnippetTabsProps) {
+  return (
+    <div role="tablist" className={clsx("inline-flex items-center gap-xs font-body", className)}>
+      {tabs.map((tab) => {
+        const current = tab === value;
+        return (
+          <button
+            key={tab}
+            type="button"
+            role="tab"
+            aria-selected={current}
+            onClick={() => onChange?.(tab)}
+            className={clsx(
+              "rounded-sm px-md py-xs text-sm font-semibold transition-colors",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-brand",
+              current
+                ? "border border-border-brand text-text-primary"
+                : "border border-transparent text-text-quaternary hover:text-text-primary",
+            )}
+          >
+            {tab}
+          </button>
+        );
+      })}
+    </div>
+  );
+}