bo-grid 0.8.0 → 0.21.0

package/dist/bo-grid.element.js

@@ -0,0 +1,4 @@
+import { E as f } from "./bo-grid.element-DPnHUXMa.js";
+export {
+  f as default
+};

package/dist/charts/BarChart.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { barRects } from './chart-math';
+  import { CHART_COLOR } from './palette';
+
+  let {
+    data,
+    width = 120,
+    height = 36,
+    gap = 2,
+    color = CHART_COLOR,
+    radius = 1,
+    ariaLabel = 'Bar chart',
+    class: klass = '',
+  }: {
+    /** Series values; negative values draw below the zero axis. */
+    data: number[];
+    width?: number;
+    height?: number;
+    /** Gap between bars (px). */
+    gap?: number;
+    /** Bar colour (CSS colour or var). */
+    color?: string;
+    radius?: number;
+    ariaLabel?: string;
+    class?: string;
+  } = $props();
+
+  const bars = $derived(barRects(data, width, height, gap));
+</script>
+
+<svg
+  class="boc boc-bar {klass}"
+  viewBox="0 0 {width} {height}"
+  width={width}
+  height={height}
+  preserveAspectRatio="none"
+  role="img"
+  aria-label={ariaLabel}
+>
+  {#each bars as b, i (i)}
+    <rect x={b.x} y={b.y} width={b.w} height={b.h} rx={radius} fill={color}><title>{data[i]}</title></rect>
+  {/each}
+</svg>
+
+<style>
+  .boc {
+    display: block;
+    max-width: 100%;
+  }
+</style>

package/dist/charts/BarChart.svelte.d.ts

@@ -0,0 +1,16 @@
+type $$ComponentProps = {
+    /** Series values; negative values draw below the zero axis. */
+    data: number[];
+    width?: number;
+    height?: number;
+    /** Gap between bars (px). */
+    gap?: number;
+    /** Bar colour (CSS colour or var). */
+    color?: string;
+    radius?: number;
+    ariaLabel?: string;
+    class?: string;
+};
+declare const BarChart: import("svelte").Component<$$ComponentProps, {}, "">;
+type BarChart = ReturnType<typeof BarChart>;
+export default BarChart;

package/dist/charts/DonutChart.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { donutArcs } from './chart-math';
+  import { CHART_PALETTE } from './palette';
+
+  type Slice = { value: number; color?: string; label?: string };
+
+  let {
+    data,
+    size = 120,
+    thickness = 18,
+    colors = CHART_PALETTE,
+    ariaLabel = 'Donut chart',
+    class: klass = '',
+  }: {
+    /** Plain values, or `{ value, color?, label? }` objects. */
+    data: number[] | Slice[];
+    size?: number;
+    /** Ring thickness (px); `>= size/2` renders a full pie. */
+    thickness?: number;
+    colors?: readonly string[];
+    ariaLabel?: string;
+    class?: string;
+  } = $props();
+
+  const values = $derived(data.map((d) => (typeof d === 'number' ? d : d.value)));
+  const arcs = $derived(donutArcs(values, size, thickness));
+  function colorOf(i: number): string {
+    const d = data[i];
+    if (typeof d !== 'number' && d.color) return d.color;
+    return colors[i % colors.length];
+  }
+</script>
+
+<svg
+  class="boc boc-donut {klass}"
+  viewBox="0 0 {size} {size}"
+  width={size}
+  height={size}
+  role="img"
+  aria-label={ariaLabel}
+>
+  {#each arcs as a (a.index)}
+    {@const d = data[a.index]}
+    <path d={a.d} fill={colorOf(a.index)} fill-rule="evenodd">
+      <title>{typeof d !== 'number' && d.label ? `${d.label}: ` : ''}{a.value}</title>
+    </path>
+  {/each}
+</svg>
+
+<style>
+  .boc {
+    display: block;
+  }
+</style>

package/dist/charts/DonutChart.svelte.d.ts

@@ -0,0 +1,18 @@
+type Slice = {
+    value: number;
+    color?: string;
+    label?: string;
+};
+type $$ComponentProps = {
+    /** Plain values, or `{ value, color?, label? }` objects. */
+    data: number[] | Slice[];
+    size?: number;
+    /** Ring thickness (px); `>= size/2` renders a full pie. */
+    thickness?: number;
+    colors?: readonly string[];
+    ariaLabel?: string;
+    class?: string;
+};
+declare const DonutChart: import("svelte").Component<$$ComponentProps, {}, "">;
+type DonutChart = ReturnType<typeof DonutChart>;
+export default DonutChart;

package/dist/charts/Legend.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { CHART_PALETTE } from './palette';
+
+  let {
+    items,
+    colors = CHART_PALETTE,
+    class: klass = '',
+  }: {
+    /** Legend entries; `color` defaults to the palette by position. */
+    items: { label: string; color?: string }[];
+    colors?: readonly string[];
+    class?: string;
+  } = $props();
+</script>
+
+<ul class="boc-legend {klass}">
+  {#each items as item, i (item.label + i)}
+    <li>
+      <span class="boc-legend-dot" style="background:{item.color ?? colors[i % colors.length]}"></span>
+      {item.label}
+    </li>
+  {/each}
+</ul>
+
+<style>
+  .boc-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px 14px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: 11px;
+    color: var(--boc-legend-color, inherit);
+  }
+  .boc-legend li {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+  .boc-legend-dot {
+    flex: none;
+    width: 9px;
+    height: 9px;
+    border-radius: 2px;
+  }
+</style>

package/dist/charts/Legend.svelte.d.ts

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    /** Legend entries; `color` defaults to the palette by position. */
+    items: {
+        label: string;
+        color?: string;
+    }[];
+    colors?: readonly string[];
+    class?: string;
+};
+declare const Legend: import("svelte").Component<$$ComponentProps, {}, "">;
+type Legend = ReturnType<typeof Legend>;
+export default Legend;

package/dist/charts/LineChart.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { linePoints, linePath, areaPath } from './chart-math';
+  import { CHART_COLOR } from './palette';
+
+  let {
+    data,
+    width = 120,
+    height = 36,
+    color = CHART_COLOR,
+    area = false,
+    strokeWidth = 1.5,
+    ariaLabel = 'Line chart',
+    class: klass = '',
+  }: {
+    data: number[];
+    width?: number;
+    height?: number;
+    color?: string;
+    /** Fill the area under the line (a soft tint of `color`). */
+    area?: boolean;
+    strokeWidth?: number;
+    ariaLabel?: string;
+    class?: string;
+  } = $props();
+
+  const points = $derived(linePoints(data, width, height, strokeWidth));
+  const d = $derived(linePath(points));
+  const fillD = $derived(area ? areaPath(points, height - strokeWidth) : '');
+</script>
+
+<svg
+  class="boc boc-line {klass}"
+  viewBox="0 0 {width} {height}"
+  width={width}
+  height={height}
+  preserveAspectRatio="none"
+  role="img"
+  aria-label={ariaLabel}
+>
+  {#if area && fillD}
+    <path d={fillD} fill={color} fill-opacity="0.14" stroke="none" />
+  {/if}
+  <path
+    d={d}
+    fill="none"
+    stroke={color}
+    stroke-width={strokeWidth}
+    stroke-linejoin="round"
+    stroke-linecap="round"
+    vector-effect="non-scaling-stroke"
+  />
+</svg>
+
+<style>
+  .boc {
+    display: block;
+    max-width: 100%;
+  }
+</style>

package/dist/charts/LineChart.svelte.d.ts

@@ -0,0 +1,14 @@
+type $$ComponentProps = {
+    data: number[];
+    width?: number;
+    height?: number;
+    color?: string;
+    /** Fill the area under the line (a soft tint of `color`). */
+    area?: boolean;
+    strokeWidth?: number;
+    ariaLabel?: string;
+    class?: string;
+};
+declare const LineChart: import("svelte").Component<$$ComponentProps, {}, "">;
+type LineChart = ReturnType<typeof LineChart>;
+export default LineChart;

package/dist/charts/StackedBarChart.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { stackedBars, groupedBars } from './chart-math';
+  import { CHART_PALETTE } from './palette';
+
+  let {
+    data,
+    width = 160,
+    height = 60,
+    gap = 3,
+    grouped = false,
+    colors = CHART_PALETTE,
+    seriesLabels = [],
+    radius = 1,
+    ariaLabel = 'Bar chart',
+    class: klass = '',
+  }: {
+    /** Series of category values: `data[series][category]`. */
+    data: number[][];
+    width?: number;
+    height?: number;
+    gap?: number;
+    /** Side-by-side bars per category instead of a stack. */
+    grouped?: boolean;
+    colors?: readonly string[];
+    /** Optional series names — shown in each segment's hover tooltip. */
+    seriesLabels?: string[];
+    radius?: number;
+    ariaLabel?: string;
+    class?: string;
+  } = $props();
+
+  const segs = $derived(grouped ? groupedBars(data, width, height, gap) : stackedBars(data, width, height, gap));
+</script>
+
+<svg
+  class="boc boc-stacked {klass}"
+  viewBox="0 0 {width} {height}"
+  width={width}
+  height={height}
+  preserveAspectRatio="none"
+  role="img"
+  aria-label={ariaLabel}
+>
+  {#each segs as seg, i (i)}
+    <rect x={seg.x} y={seg.y} width={seg.w} height={seg.h} rx={radius} fill={colors[seg.series % colors.length]}>
+      <title>{seriesLabels[seg.series] ? `${seriesLabels[seg.series]}: ` : ''}{seg.value}</title>
+    </rect>
+  {/each}
+</svg>
+
+<style>
+  .boc {
+    display: block;
+    max-width: 100%;
+  }
+</style>

package/dist/charts/StackedBarChart.svelte.d.ts

@@ -0,0 +1,18 @@
+type $$ComponentProps = {
+    /** Series of category values: `data[series][category]`. */
+    data: number[][];
+    width?: number;
+    height?: number;
+    gap?: number;
+    /** Side-by-side bars per category instead of a stack. */
+    grouped?: boolean;
+    colors?: readonly string[];
+    /** Optional series names — shown in each segment's hover tooltip. */
+    seriesLabels?: string[];
+    radius?: number;
+    ariaLabel?: string;
+    class?: string;
+};
+declare const StackedBarChart: import("svelte").Component<$$ComponentProps, {}, "">;
+type StackedBarChart = ReturnType<typeof StackedBarChart>;
+export default StackedBarChart;

package/dist/charts/chart-math.d.ts

@@ -0,0 +1,57 @@
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface Rect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export interface Arc {
+    /** SVG path `d` for the slice. */
+    d: string;
+    value: number;
+    index: number;
+    /** Share of the (positive) total, 0..1. */
+    fraction: number;
+}
+/** Data extent, guarding empty/constant series. `baseline`, when given, is always
+    included (e.g. 0 so bars share a zero axis). */
+export declare function extent(values: readonly number[], baseline?: number): {
+    min: number;
+    max: number;
+};
+/** Map a series to SVG points inside the [pad..w-pad] × [pad..h-pad] box (y down,
+    so larger values sit higher). Pass an explicit `range` to share a scale. */
+export declare function linePoints(values: readonly number[], w: number, h: number, pad?: number, range?: {
+    min: number;
+    max: number;
+}): Point[];
+/** SVG path `d` for a polyline through the points. */
+export declare function linePath(points: readonly Point[]): string;
+/** SVG path `d` for the filled area under the polyline, down to `baselineY`. */
+export declare function areaPath(points: readonly Point[], baselineY: number): string;
+/** Bar rectangles across the width, from a shared zero baseline (signed-aware:
+    negatives extend below the axis). */
+export declare function barRects(values: readonly number[], w: number, h: number, gap?: number, pad?: number): Rect[];
+/** One bar segment of a multi-series (stacked/grouped) chart. */
+export interface BarSeg extends Rect {
+    series: number;
+    category: number;
+    value: number;
+}
+/**
+ * Stacked bars: `series[s][c]` is series `s`'s value in category `c`. Each
+ * category is a vertical stack scaled to the largest category total. Non-positive
+ * values are clamped to 0 (stacking).
+ */
+export declare function stackedBars(series: readonly (readonly number[])[], w: number, h: number, gap?: number, pad?: number): BarSeg[];
+/**
+ * Grouped bars: same data shape as `stackedBars`, but each category's series are
+ * drawn side by side, scaled to the largest single value.
+ */
+export declare function groupedBars(series: readonly (readonly number[])[], w: number, h: number, gap?: number, innerGap?: number, pad?: number): BarSeg[];
+/** Donut/pie arc paths. `thickness >= size/2` gives a full pie. Slices start at
+    12 o'clock and run clockwise; non-positive values are skipped. */
+export declare function donutArcs(values: readonly number[], size: number, thickness: number): Arc[];

package/dist/charts/chart-math.js

@@ -0,0 +1,174 @@
+// Pure SVG geometry for the bo-grid/charts companion. No dependencies; every
+// chart component is a thin SVG wrapper over these helpers, so the math is
+// unit-tested in isolation and the components stay trivial.
+const round = (n) => Math.round(n * 100) / 100;
+/** Data extent, guarding empty/constant series. `baseline`, when given, is always
+    included (e.g. 0 so bars share a zero axis). */
+export function extent(values, baseline) {
+    let min = baseline ?? Infinity;
+    let max = baseline ?? -Infinity;
+    for (const v of values) {
+        if (!Number.isFinite(v))
+            continue;
+        if (v < min)
+            min = v;
+        if (v > max)
+            max = v;
+    }
+    if (!Number.isFinite(min))
+        min = 0;
+    if (!Number.isFinite(max))
+        max = min;
+    if (min === max)
+        max = min + 1; // avoid divide-by-zero on a flat series
+    return { min, max };
+}
+/** Map a series to SVG points inside the [pad..w-pad] × [pad..h-pad] box (y down,
+    so larger values sit higher). Pass an explicit `range` to share a scale. */
+export function linePoints(values, w, h, pad = 1, range) {
+    if (values.length === 0)
+        return [];
+    const { min, max } = range ?? extent(values);
+    const span = max - min || 1;
+    const iw = w - pad * 2;
+    const ih = h - pad * 2;
+    const step = values.length > 1 ? iw / (values.length - 1) : 0;
+    return values.map((v, i) => ({
+        x: round(pad + i * step),
+        y: round(pad + ih - ((v - min) / span) * ih),
+    }));
+}
+/** SVG path `d` for a polyline through the points. */
+export function linePath(points) {
+    return points.map((p, i) => `${i ? 'L' : 'M'}${round(p.x)} ${round(p.y)}`).join(' ');
+}
+/** SVG path `d` for the filled area under the polyline, down to `baselineY`. */
+export function areaPath(points, baselineY) {
+    if (points.length === 0)
+        return '';
+    const a = points[0];
+    const b = points[points.length - 1];
+    return `${linePath(points)} L${round(b.x)} ${round(baselineY)} L${round(a.x)} ${round(baselineY)} Z`;
+}
+/** Bar rectangles across the width, from a shared zero baseline (signed-aware:
+    negatives extend below the axis). */
+export function barRects(values, w, h, gap = 2, pad = 1) {
+    if (values.length === 0)
+        return [];
+    const { min, max } = extent(values, 0);
+    const span = max - min || 1;
+    const iw = w - pad * 2;
+    const ih = h - pad * 2;
+    const bw = Math.max(0, (iw - gap * (values.length - 1)) / values.length);
+    const yOf = (v) => pad + ih - ((v - min) / span) * ih;
+    const zeroY = yOf(0);
+    return values.map((v, i) => {
+        const vy = yOf(Number.isFinite(v) ? v : 0);
+        return { x: round(pad + i * (bw + gap)), y: round(Math.min(vy, zeroY)), w: round(bw), h: round(Math.abs(vy - zeroY)) };
+    });
+}
+const polar = (cx, cy, r, a) => [
+    round(cx + r * Math.cos(a)),
+    round(cy + r * Math.sin(a)),
+];
+/** One donut slice (outer arc out, radial in, inner arc back). */
+function ringArc(cx, cy, r, ir, a0, a1) {
+    const large = a1 - a0 > Math.PI ? 1 : 0;
+    const [x0, y0] = polar(cx, cy, r, a0);
+    const [x1, y1] = polar(cx, cy, r, a1);
+    const [xi1, yi1] = polar(cx, cy, ir, a1);
+    const [xi0, yi0] = polar(cx, cy, ir, a0);
+    return `M${x0} ${y0} A${round(r)} ${round(r)} 0 ${large} 1 ${x1} ${y1} L${xi1} ${yi1} A${round(ir)} ${round(ir)} 0 ${large} 0 ${xi0} ${yi0} Z`;
+}
+/** A complete ring (used when one slice is 100% — a single 360° arc degenerates).
+    Outer circle CW + inner circle CCW; render with `fill-rule="evenodd"`. */
+function fullRing(cx, cy, r, ir) {
+    return (`M${round(cx - r)} ${round(cy)} A${round(r)} ${round(r)} 0 1 1 ${round(cx + r)} ${round(cy)} ` +
+        `A${round(r)} ${round(r)} 0 1 1 ${round(cx - r)} ${round(cy)} Z ` +
+        `M${round(cx - ir)} ${round(cy)} A${round(ir)} ${round(ir)} 0 1 0 ${round(cx + ir)} ${round(cy)} ` +
+        `A${round(ir)} ${round(ir)} 0 1 0 ${round(cx - ir)} ${round(cy)} Z`);
+}
+const nCategories = (series) => series.reduce((m, s) => Math.max(m, s.length), 0);
+/**
+ * Stacked bars: `series[s][c]` is series `s`'s value in category `c`. Each
+ * category is a vertical stack scaled to the largest category total. Non-positive
+ * values are clamped to 0 (stacking).
+ */
+export function stackedBars(series, w, h, gap = 2, pad = 1) {
+    const nCat = nCategories(series);
+    if (nCat === 0)
+        return [];
+    const totals = Array.from({ length: nCat }, (_, c) => series.reduce((a, s) => a + Math.max(0, s[c] ?? 0), 0));
+    const max = Math.max(1, ...totals);
+    const iw = w - pad * 2;
+    const ih = h - pad * 2;
+    const bw = Math.max(0, (iw - gap * (nCat - 1)) / nCat);
+    const segs = [];
+    for (let c = 0; c < nCat; c++) {
+        const x = pad + c * (bw + gap);
+        let yBottom = pad + ih;
+        for (let s = 0; s < series.length; s++) {
+            const v = Math.max(0, series[s][c] ?? 0);
+            const segH = (v / max) * ih;
+            yBottom -= segH;
+            segs.push({ x: round(x), y: round(yBottom), w: round(bw), h: round(segH), series: s, category: c, value: series[s][c] ?? 0 });
+        }
+    }
+    return segs;
+}
+/**
+ * Grouped bars: same data shape as `stackedBars`, but each category's series are
+ * drawn side by side, scaled to the largest single value.
+ */
+export function groupedBars(series, w, h, gap = 4, innerGap = 1, pad = 1) {
+    const nCat = nCategories(series);
+    const nSer = series.length;
+    if (nCat === 0)
+        return [];
+    let max = 1;
+    for (const s of series)
+        for (const v of s)
+            max = Math.max(max, v);
+    const iw = w - pad * 2;
+    const ih = h - pad * 2;
+    const groupW = (iw - gap * (nCat - 1)) / nCat;
+    const bw = Math.max(0, (groupW - innerGap * (nSer - 1)) / nSer);
+    const segs = [];
+    for (let c = 0; c < nCat; c++) {
+        const gx = pad + c * (groupW + gap);
+        for (let s = 0; s < nSer; s++) {
+            const v = Math.max(0, series[s][c] ?? 0);
+            const segH = (v / max) * ih;
+            segs.push({ x: round(gx + s * (bw + innerGap)), y: round(pad + ih - segH), w: round(bw), h: round(segH), series: s, category: c, value: series[s][c] ?? 0 });
+        }
+    }
+    return segs;
+}
+/** Donut/pie arc paths. `thickness >= size/2` gives a full pie. Slices start at
+    12 o'clock and run clockwise; non-positive values are skipped. */
+export function donutArcs(values, size, thickness) {
+    const pos = values.map((v) => (Number.isFinite(v) && v > 0 ? v : 0));
+    const total = pos.reduce((a, b) => a + b, 0);
+    if (total <= 0)
+        return [];
+    const r = size / 2;
+    const ir = Math.max(0, r - thickness);
+    const cx = r;
+    const cy = r;
+    let a0 = -Math.PI / 2;
+    const arcs = [];
+    pos.forEach((v, index) => {
+        if (v <= 0)
+            return;
+        const fraction = v / total;
+        const a1 = a0 + fraction * Math.PI * 2;
+        arcs.push({
+            d: fraction >= 1 ? fullRing(cx, cy, r, ir) : ringArc(cx, cy, r, ir, a0, a1),
+            value: values[index],
+            index,
+            fraction,
+        });
+        a0 = a1;
+    });
+    return arcs;
+}

package/dist/charts/index.d.ts

@@ -0,0 +1,8 @@
+export { default as BarChart } from './BarChart.svelte';
+export { default as LineChart } from './LineChart.svelte';
+export { default as DonutChart } from './DonutChart.svelte';
+export { default as StackedBarChart } from './StackedBarChart.svelte';
+export { default as Legend } from './Legend.svelte';
+export { CHART_PALETTE, CHART_COLOR } from './palette';
+export { extent, linePoints, linePath, areaPath, barRects, stackedBars, groupedBars, donutArcs } from './chart-math';
+export type { Point, Rect, Arc, BarSeg } from './chart-math';

package/dist/charts/index.js

@@ -0,0 +1,11 @@
+// Public API for the optional `bo-grid/charts` companion — tiny, dependency-free
+// SVG charts for dashboards. Imported via the subpath so the grid core stays
+// untouched: `import { LineChart } from 'bo-grid/charts';`
+export { default as BarChart } from './BarChart.svelte';
+export { default as LineChart } from './LineChart.svelte';
+export { default as DonutChart } from './DonutChart.svelte';
+export { default as StackedBarChart } from './StackedBarChart.svelte';
+export { default as Legend } from './Legend.svelte';
+export { CHART_PALETTE, CHART_COLOR } from './palette';
+// Geometry helpers (for building your own SVG charts).
+export { extent, linePoints, linePath, areaPath, barRects, stackedBars, groupedBars, donutArcs } from './chart-math';

package/dist/charts/palette.d.ts

@@ -0,0 +1,4 @@
+export declare const CHART_PALETTE: readonly string[];
+/** A single-series default colour (line/bar). Override via `--boc-color` or the
+    component's `color` prop. */
+export declare const CHART_COLOR = "var(--boc-color, #6366f1)";

package/dist/charts/palette.js

@@ -0,0 +1,14 @@
+// Default categorical palette for multi-series charts (donut slices, grouped
+// bars). Each entry is a CSS var with a fallback, so a consumer can re-theme the
+// whole set by defining `--boc-1`…`--boc-6` on any ancestor — or pass `colors`.
+export const CHART_PALETTE = [
+    'var(--boc-1, #6366f1)',
+    'var(--boc-2, #10b981)',
+    'var(--boc-3, #f59e0b)',
+    'var(--boc-4, #ef4444)',
+    'var(--boc-5, #06b6d4)',
+    'var(--boc-6, #a855f7)',
+];
+/** A single-series default colour (line/bar). Override via `--boc-color` or the
+    component's `color` prop. */
+export const CHART_COLOR = 'var(--boc-color, #6366f1)';

package/dist/format/format.d.ts

@@ -3,3 +3,9 @@ export declare function fmtPercent(v: number): string;
 export declare function fmtVolume(v: number): string;
 export type DateStyle = 'short' | 'medium';
 export declare function fmtDate(ms: number, style?: DateStyle): string;
+/** Localized currency (e.g. `$1,234.50`). Falls back to a fixed-decimal number
+    if the ISO `currency` code is unsupported. */
+export declare function fmtCurrency(v: number, currency?: string, locale?: string, decimals?: number): string;
+/** Human relative time vs `now` (default: real now) — e.g. `3 hours ago`,
+    `in 2 days`. `ms` is an epoch timestamp. Deterministic when `now` is passed. */
+export declare function relativeTime(ms: number, now?: number): string;