Text Row.

---
/**
 * TextRow: label on the left, value and optional meta on the right.
 *
 * Ported from Beautiful UI `components/atoms/TextRow.tsx`
 * (MIT, © 2026 Shane Levine). Pass strings as props, or use the `label`,
 * `value` and `meta` slots. Rows draw no dividers; the parent does.
 *
 * @example
 * <TextRow label="Organic sessions" value="48,210" meta="+12%" />
 */
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div"> & {
  label?: string;
  value?: string;
  meta?: string;
};

const { label, value, meta, class: className, ...rest } = Astro.props;
const hasMeta = meta !== undefined || Astro.slots.has("meta");
---

<div class:list={["vs-text-row", className]} {...rest}>
  <span class="vs-text-row__label"><slot name="label">{label}</slot></span>
  <span class="vs-text-row__end">
    <span class="vs-text-row__value"><slot name="value">{value}</slot></span>
    {hasMeta && <span class="vs-text-row__meta"><slot name="meta">{meta}</slot></span>}
  </span>
</div>

<style>
  .vs-text-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    padding: 8px 0;
    box-sizing: border-box;
  }
  .vs-text-row__label {
    font-size: 14px;
    color: var(--vs-ink-2);
  }
  .vs-text-row__end {
    display: flex;
    align-items: baseline;
    gap: 8px;
    text-align: right;
  }
  .vs-text-row__value {
    font-size: 14px;
    font-weight: 500;
    color: var(--vs-ink);
    font-variant-numeric: tabular-nums;
  }
  .vs-text-row__meta {
    font-size: 13px;
    color: var(--vs-ink-3);
  }
</style>