@borisj74/bv-ds 0.1.0

package/src/components/PaginationDotIndicator/PaginationDotIndicator.tsx

@@ -0,0 +1,39 @@
+import { type HTMLAttributes } from "react";
+import clsx from "clsx";
+
+export type PaginationDotSize = "md" | "lg";
+export type PaginationDotVariant = "dot" | "line";
+
+export interface PaginationDotIndicatorProps
+  extends HTMLAttributes<HTMLDivElement> {
+  current?: boolean;
+  size?: PaginationDotSize;
+  variant?: PaginationDotVariant;
+}
+
+/**
+ * Single pagination indicator — a dot or a line. `current` fills it with the
+ * brand colour, otherwise `bg-quaternary`. Dimensions per size/variant match
+ * Figma (dot md 8 / lg 10; line md h6 / lg h8, both 40 wide).
+ */
+export function PaginationDotIndicator({
+  current = false,
+  size = "md",
+  variant = "dot",
+  className,
+  ...rest
+}: PaginationDotIndicatorProps) {
+  return (
+    <div
+      className={clsx(
+        "rounded-full",
+        current ? "bg-fg-brand-primary-alt" : "bg-bg-quaternary",
+        variant === "dot" && (size === "lg" ? "size-2.5" : "size-2"),
+        variant === "line" && "w-10",
+        variant === "line" && (size === "lg" ? "h-2" : "h-1.5"),
+        className,
+      )}
+      {...rest}
+    />
+  );
+}

package/src/components/PaginationDotIndicator/index.ts

@@ -0,0 +1,6 @@
+export { PaginationDotIndicator } from "./PaginationDotIndicator";
+export type {
+  PaginationDotIndicatorProps,
+  PaginationDotSize,
+  PaginationDotVariant,
+} from "./PaginationDotIndicator";

package/src/components/PaginationNumberBase/PaginationNumberBase.tsx

@@ -0,0 +1,42 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export type PaginationNumberShape = "square" | "circle";
+
+export interface PaginationNumberBaseProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+  shape?: PaginationNumberShape;
+  /** Active/current page — applies the selected background + text colour. */
+  active?: boolean;
+  children: ReactNode;
+}
+
+/**
+ * Single 36px page-number cell. `shape` square (rounded-md) or circle (full);
+ * `active` (current page) uses the hover bg + darker text. Brand focus ring.
+ */
+export function PaginationNumberBase({
+  shape = "square",
+  active = false,
+  children,
+  className,
+  type = "button",
+  ...rest
+}: PaginationNumberBaseProps) {
+  return (
+    <button
+      type={type}
+      aria-current={active ? "page" : undefined}
+      className={clsx(
+        "flex size-9 items-center justify-center p-md text-sm font-medium outline-none transition-colors",
+        shape === "circle" ? "rounded-full" : "rounded-md",
+        active ? "bg-bg-primary-hover text-text-secondary" : "text-text-quaternary hover:bg-bg-primary-hover",
+        "focus-visible:ring-2 focus-visible:ring-utility-brand-500 focus-visible:ring-offset-2",
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+}

package/src/components/PaginationNumberBase/index.ts

@@ -0,0 +1,5 @@
+export { PaginationNumberBase } from "./PaginationNumberBase";
+export type {
+  PaginationNumberBaseProps,
+  PaginationNumberShape,
+} from "./PaginationNumberBase";

package/src/components/PieChart/PieChart.tsx

@@ -0,0 +1,73 @@
+import { type ReactNode } from "react";
+import {
+  ResponsiveContainer,
+  PieChart as RePieChart,
+  Pie,
+  Cell,
+  Tooltip,
+} from "recharts";
+import { ChartTooltip } from "../ChartTooltip";
+import { ChartLegend } from "../ChartLegend";
+import { chartColor } from "../../internal/chartTheme";
+
+export type PieChartSize = "xxs" | "xs" | "sm" | "md" | "lg";
+
+export interface PieSlice {
+  name: string;
+  value: number;
+  color?: string;
+}
+
+export interface PieChartProps {
+  data: PieSlice[];
+  size?: PieChartSize;
+  legend?: boolean;
+  /** Donut hole (0 = full pie, 0–1 fraction of radius). */
+  innerRadiusRatio?: number;
+  className?: string;
+  formatValue?: (value: number | string | undefined) => ReactNode;
+}
+
+const DIAMETER: Record<PieChartSize, number> = { xxs: 80, xs: 120, sm: 160, md: 200, lg: 240 };
+
+/**
+ * Donut/pie chart — a themed Recharts `PieChart` wrapper. Slices take colors from
+ * the shared palette (override per-slice via `color`); `size` sets the diameter,
+ * `legend` renders a `ChartLegend` beside it. Recharts is an optional peer dep.
+ */
+export function PieChart({
+  data,
+  size = "md",
+  legend = true,
+  innerRadiusRatio = 0.6,
+  className,
+  formatValue,
+}: PieChartProps) {
+  const d = DIAMETER[size];
+  const colored = data.map((s, i) => ({ ...s, color: s.color ?? chartColor(i) }));
+  const outer = d / 2;
+  const inner = outer * innerRadiusRatio;
+
+  return (
+    <div className={`flex items-center gap-2xl ${className ?? ""}`}>
+      <div style={{ width: d, height: d }} className="shrink-0">
+        <ResponsiveContainer width="100%" height="100%">
+          <RePieChart>
+            <Pie data={colored} dataKey="value" nameKey="name" innerRadius={inner} outerRadius={outer} paddingAngle={1} stroke="none">
+              {colored.map((s, i) => (
+                <Cell key={i} fill={s.color} />
+              ))}
+            </Pie>
+            <Tooltip content={<ChartTooltip formatValue={formatValue} />} />
+          </RePieChart>
+        </ResponsiveContainer>
+      </div>
+      {legend && (
+        <ChartLegend
+          orientation="vertical"
+          items={colored.map((s) => ({ label: s.name, color: s.color! }))}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/PieChart/index.ts

@@ -0,0 +1,2 @@
+export { PieChart } from "./PieChart";
+export type { PieChartProps, PieSlice, PieChartSize } from "./PieChart";

package/src/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,75 @@
+import { type HTMLAttributes } from "react";
+import clsx from "clsx";
+
+export type ProgressBarLabel = "none" | "right" | "bottom" | "topFloating" | "bottomFloating";
+
+export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
+  /** 0–100. Clamped. */
+  value: number;
+  /** Label placement. `*Floating` shows a tooltip bubble tracking the fill. */
+  label?: ProgressBarLabel;
+}
+
+const Track = ({ pct }: { pct: number }) => (
+  <div className="relative h-2 w-full overflow-hidden rounded-full bg-bg-quaternary">
+    <div
+      className="absolute inset-y-0 left-0 rounded-full bg-fg-brand-primary transition-[width] duration-300"
+      style={{ width: `${pct}%` }}
+    />
+  </div>
+);
+
+const Bubble = ({ pct, where }: { pct: number; where: "top" | "bottom" }) => (
+  <div
+    className={clsx("absolute -translate-x-1/2", where === "top" ? "bottom-full mb-2" : "top-full mt-2")}
+    style={{ left: `${pct}%` }}
+  >
+    <div className="rounded-md border border-border-secondary-alt bg-bg-primary-alt px-lg py-md text-xs font-semibold text-text-secondary shadow-lg">
+      {pct}%
+    </div>
+  </div>
+);
+
+/**
+ * Progress bar — pure CSS, no chart lib. `value` (0–100) drives an animated fill
+ * (`fg-brand-primary` on a `bg-quaternary` track). `label`: none / right (inline
+ * %) / bottom (% under) / top|bottom-floating (tooltip bubble tracking the fill).
+ */
+export function ProgressBar({ value, label = "none", className, ...rest }: ProgressBarProps) {
+  const pct = Math.max(0, Math.min(100, value));
+
+  if (label === "right") {
+    return (
+      <div className={clsx("flex w-full items-center gap-lg", className)} {...rest}>
+        <Track pct={pct} />
+        <span className="shrink-0 text-sm font-medium text-text-secondary">{pct}%</span>
+      </div>
+    );
+  }
+
+  if (label === "bottom") {
+    return (
+      <div className={clsx("flex w-full flex-col items-end gap-md", className)} {...rest}>
+        <Track pct={pct} />
+        <span className="text-sm font-medium text-text-secondary">{pct}%</span>
+      </div>
+    );
+  }
+
+  if (label === "topFloating" || label === "bottomFloating") {
+    return (
+      <div className={clsx("w-full", label === "topFloating" ? "pt-10" : "pb-10", className)} {...rest}>
+        <div className="relative">
+          <Track pct={pct} />
+          <Bubble pct={pct} where={label === "topFloating" ? "top" : "bottom"} />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={clsx("w-full", className)} {...rest}>
+      <Track pct={pct} />
+    </div>
+  );
+}

package/src/components/ProgressBar/index.ts

@@ -0,0 +1,2 @@
+export { ProgressBar } from "./ProgressBar";
+export type { ProgressBarProps, ProgressBarLabel } from "./ProgressBar";

package/src/components/ProgressCircle/ProgressCircle.tsx

@@ -0,0 +1,89 @@
+import { type ReactNode } from "react";
+import clsx from "clsx";
+import { ringGeometry, RingPair } from "../../internal/ringBase";
+
+export type ProgressCircleSize = "xxs" | "xs" | "sm" | "md" | "lg";
+export type ProgressCircleShape = "circle" | "half";
+
+export interface ProgressCircleProps {
+  /** 0–100. Clamped. */
+  value: number;
+  /** Centre label above the value (e.g. "Active users"). */
+  label?: ReactNode;
+  /** Override the centre value text (default `${value}%`). */
+  valueText?: ReactNode;
+  shape?: ProgressCircleShape;
+  size?: ProgressCircleSize;
+  className?: string;
+}
+
+interface Spec {
+  d: number;
+  stroke: number;
+  valueClass: string;
+  labelClass: string;
+}
+
+const SPECS: Record<ProgressCircleSize, Spec> = {
+  xxs: { d: 64, stroke: 6, valueClass: "text-sm", labelClass: "text-xs" },
+  xs: { d: 160, stroke: 8, valueClass: "text-display-xs", labelClass: "text-xs" },
+  sm: { d: 200, stroke: 10, valueClass: "text-display-sm", labelClass: "text-xs" },
+  md: { d: 240, stroke: 12, valueClass: "text-display-md", labelClass: "text-sm" },
+  lg: { d: 280, stroke: 14, valueClass: "text-display-lg", labelClass: "text-sm" },
+};
+
+/**
+ * Circular / half-circle progress gauge. Pure SVG + CSS (no chart lib) — the ring
+ * geometry comes from the shared `ringGeometry`/`RingPair` helper (also used by
+ * `ActivityGauge`). `shape="half"` renders a top-semicircle gauge.
+ *
+ * NOTE: the half-circle is an approximation — it crops a full ring to the top
+ * semicircle (rotate 180 + arcFraction 0.5); the centre content is positioned
+ * for the cropped box.
+ */
+export function ProgressCircle({
+  value,
+  label,
+  valueText,
+  shape = "circle",
+  size = "xxs",
+  className,
+}: ProgressCircleProps) {
+  const { d, stroke, valueClass, labelClass } = SPECS[size];
+  const isHalf = shape === "half";
+  const geo = ringGeometry(d, stroke, value, { arcFraction: isHalf ? 0.5 : 1 });
+
+  const center = (
+    <div className="flex flex-col items-center text-center">
+      {label && <span className={clsx("font-medium text-text-tertiary", labelClass)}>{label}</span>}
+      <span className={clsx("font-display font-semibold text-text-primary", valueClass)}>
+        {valueText ?? `${value}%`}
+      </span>
+    </div>
+  );
+
+  if (isHalf) {
+    const h = geo.center + stroke; // top half + stroke
+    return (
+      <div className={clsx("relative", className)} style={{ width: d, height: h }}>
+        <svg width={d} height={d} viewBox={`0 0 ${d} ${d}`} className="absolute left-0 top-0" role="img" aria-label={`${value}%`}>
+          <g transform={`rotate(180 ${geo.center} ${geo.center})`}>
+            <RingPair geo={geo} stroke={stroke} trackClass="stroke-bg-quaternary" progressClass="stroke-fg-brand-primary" />
+          </g>
+        </svg>
+        <div className="absolute bottom-0 left-1/2 -translate-x-1/2">{center}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={clsx("relative", className)} style={{ width: d, height: d }}>
+      <svg width={d} height={d} viewBox={`0 0 ${d} ${d}`} className="block" role="img" aria-label={`${value}%`}>
+        <g transform={`rotate(-90 ${geo.center} ${geo.center})`}>
+          <RingPair geo={geo} stroke={stroke} trackClass="stroke-bg-quaternary" progressClass="stroke-fg-brand-primary" />
+        </g>
+      </svg>
+      <div className="absolute inset-0 flex items-center justify-center">{center}</div>
+    </div>
+  );
+}

package/src/components/ProgressCircle/index.ts

@@ -0,0 +1,6 @@
+export { ProgressCircle } from "./ProgressCircle";
+export type {
+  ProgressCircleProps,
+  ProgressCircleSize,
+  ProgressCircleShape,
+} from "./ProgressCircle";

package/src/components/RadarChart/RadarChart.tsx

@@ -0,0 +1,62 @@
+import {
+  ResponsiveContainer,
+  RadarChart as ReRadarChart,
+  Radar,
+  PolarGrid,
+  PolarAngleAxis,
+} from "recharts";
+import { ChartLegend } from "../ChartLegend";
+import { chartColor, CHART_GRID, tickStyle } from "../../internal/chartTheme";
+import type { ChartSeries } from "../LineAndBarChart";
+
+export type RadarLegendPosition = "none" | "right" | "bottom";
+
+export interface RadarChartProps {
+  data: Record<string, number | string>[];
+  series: ChartSeries[];
+  /** Key for the polar-angle axis category. */
+  axisKey: string;
+  legend?: RadarLegendPosition;
+  size?: number;
+  className?: string;
+}
+
+/**
+ * Radar chart — a themed Recharts `RadarChart` wrapper. Each `series` becomes a
+ * filled `<Radar>` colored from the shared palette; `legend` positions a
+ * `ChartLegend` to the right or bottom. Recharts is an optional peer dependency.
+ */
+export function RadarChart({
+  data,
+  series,
+  axisKey,
+  legend = "bottom",
+  size = 280,
+  className,
+}: RadarChartProps) {
+  const colored = series.map((s, i) => ({ ...s, color: s.color ?? chartColor(i) }));
+  const legendEl =
+    legend !== "none" ? (
+      <ChartLegend
+        orientation={legend === "right" ? "vertical" : "horizontal"}
+        items={colored.map((s) => ({ label: s.name ?? s.dataKey, color: s.color! }))}
+      />
+    ) : null;
+
+  return (
+    <div className={`flex gap-2xl ${legend === "right" ? "flex-row items-center" : "flex-col items-center"} ${className ?? ""}`}>
+      <div style={{ width: size, height: size }} className="shrink-0">
+        <ResponsiveContainer width="100%" height="100%">
+          <ReRadarChart data={data}>
+            <PolarGrid stroke={CHART_GRID} />
+            <PolarAngleAxis dataKey={axisKey} tick={tickStyle} />
+            {colored.map((s) => (
+              <Radar key={s.dataKey} dataKey={s.dataKey} name={s.name ?? s.dataKey} stroke={s.color} fill={s.color} fillOpacity={0.2} />
+            ))}
+          </ReRadarChart>
+        </ResponsiveContainer>
+      </div>
+      {legendEl}
+    </div>
+  );
+}

package/src/components/RadarChart/index.ts

@@ -0,0 +1,2 @@
+export { RadarChart } from "./RadarChart";
+export type { RadarChartProps, RadarLegendPosition } from "./RadarChart";

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,55 @@
+import type { InputHTMLAttributes } from "react";
+import clsx from "clsx";
+import { CheckControlVisual, type CheckControlSize } from "../Checkbox/checkboxBase";
+
+export interface RadioProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+  size?: CheckControlSize;
+  label?: string;
+  supportingText?: string;
+}
+
+const textSize: Record<CheckControlSize, string> = { sm: "text-sm", md: "text-md" };
+
+export function Radio({
+  size = "sm",
+  checked,
+  disabled,
+  label,
+  supportingText,
+  className,
+  ...rest
+}: RadioProps) {
+  return (
+    <label
+      className={clsx(
+        "inline-flex items-start gap-md font-body",
+        disabled ? "cursor-not-allowed opacity-70" : "cursor-pointer",
+        className,
+      )}
+    >
+      <input
+        type="radio"
+        checked={checked}
+        disabled={disabled}
+        className="peer sr-only"
+        {...rest}
+      />
+      <CheckControlVisual type="radio" checked={checked} 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/Radio/index.ts

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

package/src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,54 @@
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  type HTMLAttributes,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
+import clsx from "clsx";
+
+export interface RadioGroupProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+  /** Selected item value (controlled). */
+  value?: string;
+  onValueChange?: (value: string) => void;
+  /** `RadioGroupItem` elements, each with a `value` prop. */
+  children: ReactNode;
+}
+
+interface ItemProps {
+  value?: string;
+  selected?: boolean;
+  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+}
+
+/**
+ * Single-select container for `RadioGroupItem`s. Clones each child to inject
+ * `selected` (matching `value`) and an `onClick` that fires `onValueChange` with
+ * the child's `value`. Children control their own `type`/content.
+ */
+export function RadioGroup({
+  value,
+  onValueChange,
+  children,
+  className,
+  ...rest
+}: RadioGroupProps) {
+  return (
+    <div role="radiogroup" className={clsx("flex flex-col gap-lg", className)} {...rest}>
+      {Children.map(children, (child) => {
+        if (!isValidElement(child)) return child;
+        const props = child.props as ItemProps;
+        const v = props.value;
+        return cloneElement(child as React.ReactElement<ItemProps>, {
+          selected: v !== undefined ? v === value : props.selected,
+          onClick: (e: MouseEvent<HTMLButtonElement>) => {
+            props.onClick?.(e);
+            if (v !== undefined) onValueChange?.(v);
+          },
+        });
+      })}
+    </div>
+  );
+}

package/src/components/RadioGroup/index.ts

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

package/src/components/RadioGroupItem/RadioGroupItem.tsx

@@ -0,0 +1,118 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export type RadioGroupItemType =
+  | "radioButton"
+  | "checkbox"
+  | "iconSimple"
+  | "iconCard"
+  | "avatar"
+  | "paymentIcon";
+export type RadioGroupItemSize = "sm" | "md";
+
+export interface RadioGroupItemProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "title"> {
+  type?: RadioGroupItemType;
+  selected?: boolean;
+  size?: RadioGroupItemSize;
+  title?: ReactNode;
+  /** Inline secondary text beside the title (e.g. "$10/month"). */
+  subtext?: ReactNode;
+  description?: ReactNode;
+  /** Leading visual — featured icon / avatar / payment-method icon. */
+  leading?: ReactNode;
+  /** iconCard badge (top-right). */
+  badge?: ReactNode;
+  /** Trailing actions row (paymentIcon). */
+  actions?: ReactNode;
+}
+
+function Control({ kind, selected, size }: { kind: "radio" | "checkbox"; selected: boolean; size: RadioGroupItemSize }) {
+  const dim = size === "md" ? "size-5" : "size-4";
+  return (
+    <span
+      className={clsx(
+        "flex shrink-0 items-center justify-center border",
+        dim,
+        kind === "radio" ? "rounded-full" : "rounded-xs",
+        selected ? "border-transparent bg-bg-brand-solid" : "border-border-primary bg-bg-primary",
+      )}
+    >
+      {selected && kind === "radio" && <span className="size-1.5 rounded-full bg-fg-white" />}
+      {selected && kind === "checkbox" && (
+        <svg viewBox="0 0 16 16" fill="none" className="size-3 text-fg-white" aria-hidden>
+          <path d="M13.33 4 6 11.33 2.67 8" stroke="currentColor" strokeWidth="1.67" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      )}
+    </span>
+  );
+}
+
+/**
+ * Selectable radio/checkbox card. One component over the 6 Figma `type`s — the
+ * shared shell (border, padding, `radius-xl`, selected `border-brand`) is
+ * constant; only the leading element and control placement change. `radioButton`
+ * uses a radio (leading); `checkbox` a checkbox (leading); `iconSimple`/`avatar`/
+ * `paymentIcon` put a `leading` visual on the left and the checkbox trailing;
+ * `iconCard` is a vertical card (header + body + `badge`).
+ */
+export function RadioGroupItem({
+  type = "radioButton",
+  selected = false,
+  size = "sm",
+  title,
+  subtext,
+  description,
+  leading,
+  badge,
+  actions,
+  className,
+  ...rest
+}: RadioGroupItemProps) {
+  const kind = type === "radioButton" ? "radio" : "checkbox";
+  const leadingControl = type === "radioButton" || type === "checkbox";
+  const shell = clsx(
+    "w-full bg-bg-primary text-left transition-colors",
+    selected ? "border-2 border-border-brand" : "border border-border-secondary",
+    className,
+  );
+
+  if (type === "iconCard") {
+    return (
+      <button type="button" aria-pressed={selected} className={clsx(shell, "flex flex-col overflow-hidden rounded-xl")} {...rest}>
+        <div className="flex w-full items-center gap-lg border-b border-border-secondary py-lg pl-lg pr-2xl">
+          {leading && <span className="shrink-0">{leading}</span>}
+          <span className="min-w-0 flex-1 text-md font-semibold text-text-secondary">{title}</span>
+          <Control kind="checkbox" selected={selected} size={size} />
+        </div>
+        <div className="relative flex w-full flex-col gap-xs p-xl">
+          {(title || subtext) && (
+            <div className="flex items-end gap-xs">
+              {subtext && <span className="font-display text-display-sm font-semibold text-text-secondary">{subtext}</span>}
+            </div>
+          )}
+          {description && <p className="text-sm text-text-tertiary">{description}</p>}
+          {badge && <div className="absolute right-4 top-4">{badge}</div>}
+        </div>
+      </button>
+    );
+  }
+
+  return (
+    <button type="button" aria-pressed={selected} className={clsx(shell, "flex items-start gap-md rounded-xl p-xl")} {...rest}>
+      {leadingControl && <span className="pt-xxs"><Control kind={kind} selected={selected} size={size} /></span>}
+      {leading && <span className="shrink-0">{leading}</span>}
+      <div className="flex min-w-0 flex-1 flex-col gap-md">
+        <div className="flex flex-col gap-xxs">
+          <div className="flex items-center gap-xs">
+            <span className="text-sm font-medium text-text-secondary">{title}</span>
+            {subtext && <span className="text-sm text-text-tertiary">{subtext}</span>}
+          </div>
+          {description && <p className="text-sm text-text-tertiary">{description}</p>}
+        </div>
+        {actions && <div className="flex items-center gap-lg">{actions}</div>}
+      </div>
+      {!leadingControl && <Control kind="checkbox" selected={selected} size={size} />}
+    </button>
+  );
+}

package/src/components/RadioGroupItem/index.ts

@@ -0,0 +1,6 @@
+export { RadioGroupItem } from "./RadioGroupItem";
+export type {
+  RadioGroupItemProps,
+  RadioGroupItemType,
+  RadioGroupItemSize,
+} from "./RadioGroupItem";