basalt-ui 1.41.0 → 2.0.0

package/dist/charts/layout/end-labels.js

@@ -1,76 +0,0 @@
-import { measureText } from "../utils/measure-text.js";
-const END_LABEL_GAP = 6;
-const MAX_END_LABELS = 3;
-const END_LABEL_LINE_HEIGHT = 1.3;
-const MAX_GUTTER_SHARE = 0.25;
-function nudgeLabels(input) {
-  const { ys, minGap, min, max } = input;
-  if (ys.length === 0) return [];
-  if (ys.some((y) => !Number.isFinite(y))) return null;
-  if ((ys.length - 1) * minGap > max - min) return null;
-  const order = ys.map((y, i) => ({ y, i })).toSorted((a, b) => a.y - b.y);
-  let prev = Number.NEGATIVE_INFINITY;
-  const forward = order.map(({ y, i }) => {
-    prev = Math.max(y, min, prev + minGap);
-    return { i, y: prev };
-  });
-  let next = Number.POSITIVE_INFINITY;
-  const back = forward.toReversed().map(({ i, y }) => {
-    next = Math.min(y, max, next - minGap);
-    return { i, y: next };
-  });
-  if (next < min) return null;
-  return back.toSorted((a, b) => a.i - b.i).map((p) => p.y);
-}
-function endLabelGutter(input) {
-  const { labels, fontPx, plotWidth } = input;
-  if (labels.length === 0) return null;
-  const widest = labels.reduce((max, label) => Math.max(max, measureText(label, fontPx)), 0);
-  const gutter = Math.ceil(widest) + END_LABEL_GAP;
-  return gutter > plotWidth * MAX_GUTTER_SHARE ? null : gutter;
-}
-function planEndLabels(input) {
-  const {
-    containerClass,
-    hasY2,
-    hasMarginRight,
-    hasHeaderLegend,
-    visible,
-    data,
-    yScale,
-    yMax,
-    fontPx,
-    plotWidth
-  } = input;
-  if (containerClass !== "wide" || hasY2 || hasMarginRight || hasHeaderLegend) return null;
-  if (visible.length < 2 || visible.length > MAX_END_LABELS) return null;
-  if (!visible.every((s) => s.mark === "line")) return null;
-  const gutter = endLabelGutter({ labels: visible.map((s) => s.label), fontPx, plotWidth });
-  if (gutter === null) return null;
-  const placed = visible.flatMap((s) => {
-    const last = data.findLast((d) => s.getValue(d) !== null);
-    if (last === void 0) return [];
-    const value = s.getValue(last);
-    if (value === null) return [];
-    const y = yScale(value);
-    return Number.isFinite(y) ? [{ series: s, y }] : [];
-  });
-  if (placed.length !== visible.length) return null;
-  const lineHeight = Math.ceil(fontPx * END_LABEL_LINE_HEIGHT);
-  const ys = nudgeLabels({
-    ys: placed.map((p) => p.y),
-    minGap: lineHeight,
-    min: lineHeight / 2,
-    max: yMax - lineHeight / 2
-  });
-  if (ys === null) return null;
-  return { gutter, labels: placed.map((p, i) => ({ series: p.series, y: ys[i] ?? p.y })) };
-}
-export {
-  END_LABEL_GAP,
-  END_LABEL_LINE_HEIGHT,
-  MAX_END_LABELS,
-  endLabelGutter,
-  nudgeLabels,
-  planEndLabels
-};

package/dist/charts/layout/log-ticks.d.ts

@@ -1,27 +0,0 @@
-/**
- * 1-2-5 mantissa tick law for a log axis (`docs/CHARTS-SPEC.md` §2).
- *
- * d3's own `scaleLog().ticks()` multiplies the mantissa density by the number of decades the
- * domain spans, so a wide financial range (e.g. $10k–$300k) reads `$316,228 / $100,000 / $31,623 /
- * $10,000` — every finance reference instead ticks a log price axis at `{1, 2, 5} × 10^n`
- * (`$10,000 · $20,000 · $50,000 · $100,000`). Pure, no visx dependency, so both the measured
- * (`probeAxisLabels`) and painted (`CartesianChart`) sides can share the exact same tick list.
- */
-/**
- * Every `{1, 2, 5} × 10^k` value for every decade touching `[min, max]`, filtered to the domain —
- * escalating through {@link MANTISSA_SETS} while a set leaves fewer than {@link DENSIFY_BELOW}
- * candidates (a short span collapses the strict law to one tick). The exact same list is what
- * `probeAxisLabels` measures and what `CartesianChart` paints, so the two can never disagree.
- * An over-budget result collapses to whole decades only when the decades ALONE form a readable
- * axis ({@link DENSIFY_BELOW}+ in-domain); otherwise it is thinned by a budget-derived stride
- * (may exceed `ticks` by one — see {@link thinToBudget}). Collapsing to decades unconditionally
- * is the bug this ordering exists to prevent: a 4-year BTC window ($15.5k–$139k) holds ONE whole
- * decade, so the collapse produced a single-tick axis. Never returns a non-positive value; a
- * non-positive or inverted domain (a log axis has no zero and no reversed extent) returns `[]`.
- */
-export declare function logTickValues([min, max]: readonly [number, number], ticks: number): number[];
-/** Round a domain outward to the nearest enclosing power-of-10 bounds — the log analog of
- * `scale.nice()`, used to keep `probeAxisLabels` (measurement) and the real niced scale
- * (rendering) computing ticks from the same rounded domain. */
-export declare function niceLogDomain([min, max]: readonly [number, number]): [number, number];
-//# sourceMappingURL=log-ticks.d.ts.map

package/dist/charts/layout/log-ticks.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"log-ticks.d.ts","sourceRoot":"","sources":["../../../src/charts/layout/log-ticks.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AA0CH;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAoB5F;AAED;;+DAE+D;AAC/D,wBAAgB,aAAa,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAErF"}

package/dist/charts/layout/log-ticks.js

@@ -1,42 +0,0 @@
-const MANTISSA_SETS = [
-  [1, 2, 5],
-  [1, 1.5, 2, 3, 4, 5, 7],
-  [1, 1.5, 2, 2.5, 3, 4, 5, 6, 7, 8, 9]
-];
-const DENSIFY_BELOW = 4;
-function decadeExponents(min, max) {
-  const lo = Math.floor(Math.log10(min));
-  const hi = Math.ceil(Math.log10(max));
-  const exponents = [];
-  for (let k = lo; k <= hi; k++) exponents.push(k);
-  return exponents;
-}
-function thinToBudget(values, ticks) {
-  if (values.length <= ticks) return values;
-  const stride = Math.ceil(values.length / ticks);
-  const thinned = values.filter((_, i) => i % stride === 0);
-  const last = values[values.length - 1];
-  return thinned[thinned.length - 1] === last ? thinned : [...thinned, last];
-}
-function logTickValues([min, max], ticks) {
-  if (min <= 0 || max <= 0 || min >= max) return [];
-  const exponents = decadeExponents(min, max);
-  const inDomain = (v) => v >= min && v <= max;
-  const collect = (mantissas) => exponents.flatMap((k) => mantissas.map((m) => m * 10 ** k)).filter(inDomain);
-  let resolved = [];
-  for (const mantissas of MANTISSA_SETS) {
-    resolved = collect(mantissas);
-    if (resolved.length >= DENSIFY_BELOW) break;
-  }
-  if (resolved.length <= ticks) return resolved;
-  const decades = exponents.map((k) => 10 ** k).filter(inDomain);
-  if (decades.length >= DENSIFY_BELOW) return thinToBudget(decades, ticks);
-  return thinToBudget(resolved, ticks);
-}
-function niceLogDomain([min, max]) {
-  return [10 ** Math.floor(Math.log10(min)), 10 ** Math.ceil(Math.log10(max))];
-}
-export {
-  logTickValues,
-  niceLogDomain
-};

package/dist/charts/primitives/AreaGradient.d.ts

@@ -1,18 +0,0 @@
-/**
- * AreaGradient — the single source for the soft single-hue area fill under a line.
- *
- * Renders a vertical <linearGradient> that fades a series/line color from `--vx-area-top`
- * opacity at the data peak to `--vx-area-bottom` at the baseline. Both stops are
- * `color-mix` of a CSS-var color, so they stay theme-aware AND the dev theme lab can retune
- * the whole app's gradient strength by overriding two vars on :root — no chart edits.
- *
- * Usage (inside an <svg>):
- *   <defs><AreaGradient id={`${chartId}-area`} color={VX.line} /></defs>
- *   <AreaClosed ... fill={areaFillUrl(`${chartId}-area`)} />
- */
-export declare function AreaGradient({ id, color }: {
-    id: string;
-    color: string;
-}): import("react").JSX.Element;
-export declare const areaFillUrl: (id: string) => string;
-//# sourceMappingURL=AreaGradient.d.ts.map

package/dist/charts/primitives/AreaGradient.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AreaGradient.d.ts","sourceRoot":"","sources":["../../../src/charts/primitives/AreaGradient.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAKH,wBAAgB,YAAY,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,+BAOxE;AAED,eAAO,MAAM,WAAW,GAAI,IAAI,MAAM,KAAG,MAAuB,CAAA"}

package/dist/charts/primitives/AreaGradient.js

@@ -1,13 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-const areaStop = (color, edge) => `color-mix(in srgb, ${color} var(--vx-area-${edge}), transparent)`;
-function AreaGradient({ id, color }) {
-  return /* @__PURE__ */ jsxs("linearGradient", { id, x1: "0", x2: "0", y1: "0", y2: "1", children: [
-    /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: areaStop(color, "top") }),
-    /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: areaStop(color, "bottom") })
-  ] });
-}
-const areaFillUrl = (id) => `url(#${id})`;
-export {
-  AreaGradient,
-  areaFillUrl
-};

package/dist/charts/primitives/Axes.d.ts

@@ -1,83 +0,0 @@
-import type { AxisScale, TickFormatter } from '@visx/axis';
-/**
- * Tick label font — mono, per `docs/DESIGN-SPEC.md` §5 ("ticks mono 10.5px faint"). Not a `VX.*`
- * ref (the token layer is off-limits to font-family additions here) — a plain reference to the
- * `--basalt-font-mono` var that `styles.css` already defines. Exported so `CartesianChart`'s own
- * end-of-line labels (the same mono tick font, painted outside any `Axis*` primitive here) read it
- * rather than keeping a second, driftable copy of the literal.
- */
-export declare const TICK_FONT_FAMILY = "var(--basalt-font-mono)";
-/** Tick label colour. Default `VX.faint`; a dual-axis chart tints it with its series' colour. */
-type TickColor = {
-    tickColor?: string;
-};
-/** Themed left numeric axis — baked-in theme colors + font size. The tick font tracks the ambient
- * chart tier (`docs/CHARTS-SPEC.md` §8); a caller measuring its own gutter must measure at the
- * SAME size (`chartMetrics().axisFont` into `autoMargin`'s `fontPx`), or the measured label
- * and the painted one stop being the same string's width. */
-export declare function AxisLeftNumeric({ scale, numTicks, tickFormat, tickValues, inside, tickColor, }: TickColor & {
-    scale: AxisScale;
-    numTicks?: number;
-    tickFormat?: TickFormatter<number>;
-    /** Exact tick positions (e.g. a compass axis at 0/90/180/270). Overrides `numTicks`. */
-    tickValues?: readonly number[];
-    /** Labels drawn over the grid, left-aligned on a surface-coloured background chip (above their
-     * line, or below it for a tick within one line-height of the plot's top edge) — the caller
-     * reserves no gutter for them (`docs/CHARTS-SPEC.md` §8). */
-    inside?: boolean;
-}): import("react").JSX.Element;
-/** Themed right numeric axis — mirrors AxisLeftNumeric for dual-axis charts. */
-export declare function AxisRightNumeric({ scale, left, numTicks, tickFormat, tickValues, tickColor, }: TickColor & {
-    scale: AxisScale;
-    /** Left offset inside the Group (typically xMax). Required since AxisRight needs positioning. */
-    left: number;
-    numTicks?: number;
-    tickFormat?: TickFormatter<number>;
-    /** Exact tick positions (e.g. a compass axis at 0/90/180/270). Overrides `numTicks`. */
-    tickValues?: readonly number[];
-}): import("react").JSX.Element;
-/**
- * Themed bottom numeric axis — the numeric twin of {@link AxisLeftNumeric}, for a plot whose x is
- * a continuous number rather than a date/category (e.g. `sky-panorama.tsx`'s azimuth 0–360°,
- * `docs/CHARTS-SPEC.md` issue #52). Exists so a bespoke continuous-x plot — declared exempt from
- * `CartesianChart` by a `theme-allow-file hand-rolled-plot` waiver, since the point-scale x axis
- * that primitive builds cannot represent one — stops re-implementing tick text/color/font by hand.
- */
-export declare function AxisBottomNumeric({ scale, top, numTicks, tickFormat, tickValues, }: {
-    scale: AxisScale;
-    top: number;
-    numTicks?: number;
-    tickFormat?: TickFormatter<number>;
-    /** Exact tick positions (e.g. a compass axis at 0/90/180/270). Overrides `numTicks`. */
-    tickValues?: readonly number[];
-}): import("react").JSX.Element;
-/** `textAnchor` of one x label: inward at the two terminals when asked, centred otherwise. */
-export declare function terminalAnchor(input: {
-    anchorTerminals: boolean;
-    index: number;
-    count: number;
-}): 'start' | 'middle' | 'end';
-/** Themed bottom date axis — baked-in smartTicks + DD.MM formatting. */
-export declare function AxisBottomDate({ scale, top, tickValues, tickFormat, rotate, anchorTerminals, wrapWidth, }: {
-    scale: AxisScale;
-    top: number;
-    tickValues: string[];
-    /** First label anchored `start`, last `end`, so the terminals stay inside the plot instead of
-     * overflowing it. Ignored when rotated. */
-    anchorTerminals?: boolean;
-    /** Wrap each label to this many px (SVG tspans) instead of thinning or rotating it. */
-    wrapWidth?: number;
-    /**
-     * Defaults to `fmtAxisDate` (DD.MM). Override for a sub-day window, where DD.MM collapses every
-     * tick to the same label.
-     */
-    tickFormat?: TickFormatter<string>;
-    /**
-     * Tilt each tick label counter-clockwise by 45° or 90°, anchored at its right edge — the answer
-     * to labels too wide to sit side by side. The caller owns the deepened bottom gutter it needs
-     * (`autoMargin({ rotate })`, `docs/CHARTS-SPEC.md` §1); this only paints them.
-     */
-    rotate?: 45 | 90;
-}): import("react").JSX.Element;
-export {};
-//# sourceMappingURL=Axes.d.ts.map

package/dist/charts/primitives/Axes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Axes.d.ts","sourceRoot":"","sources":["../../../src/charts/primitives/Axes.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAqB,MAAM,YAAY,CAAA;AAM7E;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,4BAA4B,CAAA;AAezD,iGAAiG;AACjG,KAAK,SAAS,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAoCvC;;;6DAG6D;AAC7D,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAY,EACZ,UAAU,EACV,UAAU,EACV,MAAc,EACd,SAA8B,GAC/B,EAAE,SAAS,GAAG;IACb,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAClC,wFAAwF;IACxF,UAAU,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAC9B;;iEAE6D;IAC7D,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,+BAuBA;AAED,gFAAgF;AAChF,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,IAAI,EACJ,QAAY,EACZ,UAAU,EACV,UAAU,EACV,SAA8B,GAC/B,EAAE,SAAS,GAAG;IACb,KAAK,EAAE,SAAS,CAAA;IAChB,iGAAiG;IACjG,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAClC,wFAAwF;IACxF,UAAU,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;CAC/B,+BAmBA;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,GAAG,EACH,QAAY,EACZ,UAAU,EACV,UAAU,GACX,EAAE;IACD,KAAK,EAAE,SAAS,CAAA;IAChB,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAClC,wFAAwF;IACxF,UAAU,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;CAC/B,+BAmBA;AAYD,8FAA8F;AAC9F,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,eAAe,EAAE,OAAO,CAAA;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAK7B;AAED,wEAAwE;AACxE,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,GAAG,EACH,UAAU,EACV,UAAwB,EACxB,MAAM,EACN,eAAuB,EACvB,SAAS,GACV,EAAE;IACD,KAAK,EAAE,SAAS,CAAA;IAChB,GAAG,EAAE,MAAM,CAAA;IACX,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB;+CAC2C;IAC3C,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,uFAAuF;IACvF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAClC;;;;OAIG;IACH,MAAM,CAAC,EAAE,EAAE,GAAG,EAAE,CAAA;CACjB,+BA6BA"}

package/dist/charts/primitives/Axes.js

@@ -1,168 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { AxisBottom, AxisLeft, AxisRight } from "@visx/axis";
-import { VX } from "../../tokens/index.js";
-import { ROTATED_LABEL_OFFSET } from "../layout/auto-margin.js";
-import { fmtAxisDate } from "../utils/format.js";
-import { useChartMetrics } from "./chart-tier.js";
-const TICK_FONT_FAMILY = "var(--basalt-font-mono)";
-const INSIDE_LABEL_PAD_X = 4;
-const INSIDE_LABEL_GAP = 3;
-const INSIDE_LABEL_HALO_WIDTH = 3;
-const TOP_CLEARANCE_LINES = 1;
-const DEFAULT_TICK_COLOR = VX.faint;
-function InsideTickLabel({ x, y, formattedValue, fontSize, fill }) {
-  if (formattedValue === void 0) return null;
-  const size = typeof fontSize === "number" ? fontSize : VX.axisFont;
-  const lineHeight = Math.round(size * 1.3);
-  const nearTop = y <= lineHeight * TOP_CLEARANCE_LINES;
-  const centerY = nearTop ? y + INSIDE_LABEL_GAP + lineHeight / 2 : y - INSIDE_LABEL_GAP - lineHeight / 2;
-  return /* @__PURE__ */ jsx(
-    "text",
-    {
-      x: x + INSIDE_LABEL_PAD_X,
-      y: centerY,
-      dominantBaseline: "middle",
-      textAnchor: "start",
-      fill,
-      stroke: VX.surface.panel,
-      strokeWidth: INSIDE_LABEL_HALO_WIDTH,
-      paintOrder: "stroke",
-      fontFamily: TICK_FONT_FAMILY,
-      fontSize: size,
-      children: formattedValue
-    }
-  );
-}
-function AxisLeftNumeric({
-  scale,
-  numTicks = 5,
-  tickFormat,
-  tickValues,
-  inside = false,
-  tickColor = DEFAULT_TICK_COLOR
-}) {
-  const { axisFont } = useChartMetrics();
-  return /* @__PURE__ */ jsx(
-    AxisLeft,
-    {
-      scale,
-      numTicks,
-      ...tickFormat !== void 0 && { tickFormat },
-      ...tickValues !== void 0 && { tickValues: [...tickValues] },
-      ...inside && { tickLength: 0, hideTicks: true, tickComponent: InsideTickLabel },
-      tickLabelProps: inside ? { fill: tickColor, fontSize: axisFont } : {
-        fill: tickColor,
-        fontFamily: TICK_FONT_FAMILY,
-        fontSize: axisFont,
-        dx: -4
-      },
-      stroke: VX.surface.border,
-      tickStroke: VX.surface.border
-    }
-  );
-}
-function AxisRightNumeric({
-  scale,
-  left,
-  numTicks = 5,
-  tickFormat,
-  tickValues,
-  tickColor = DEFAULT_TICK_COLOR
-}) {
-  const { axisFont } = useChartMetrics();
-  return /* @__PURE__ */ jsx(
-    AxisRight,
-    {
-      left,
-      scale,
-      numTicks,
-      ...tickFormat !== void 0 && { tickFormat },
-      ...tickValues !== void 0 && { tickValues: [...tickValues] },
-      tickLabelProps: {
-        fill: tickColor,
-        fontFamily: TICK_FONT_FAMILY,
-        fontSize: axisFont,
-        dx: 4
-      },
-      stroke: VX.surface.border,
-      tickStroke: VX.surface.border
-    }
-  );
-}
-function AxisBottomNumeric({
-  scale,
-  top,
-  numTicks = 5,
-  tickFormat,
-  tickValues
-}) {
-  const { axisFont } = useChartMetrics();
-  return /* @__PURE__ */ jsx(
-    AxisBottom,
-    {
-      top,
-      scale,
-      numTicks,
-      ...tickFormat !== void 0 && { tickFormat },
-      ...tickValues !== void 0 && { tickValues: [...tickValues] },
-      tickLabelProps: {
-        fill: VX.faint,
-        fontFamily: TICK_FONT_FAMILY,
-        fontSize: axisFont,
-        textAnchor: "middle"
-      },
-      stroke: VX.surface.border,
-      tickStroke: VX.surface.border
-    }
-  );
-}
-const ROTATED_OFFSET = ROTATED_LABEL_OFFSET;
-function terminalAnchor(input) {
-  const { anchorTerminals, index, count } = input;
-  if (!anchorTerminals || count < 2) return "middle";
-  if (index === 0) return "start";
-  return index === count - 1 ? "end" : "middle";
-}
-function AxisBottomDate({
-  scale,
-  top,
-  tickValues,
-  tickFormat = fmtAxisDate,
-  rotate,
-  anchorTerminals = false,
-  wrapWidth
-}) {
-  const { axisFont } = useChartMetrics();
-  const rotated = rotate === void 0 ? void 0 : ROTATED_OFFSET[rotate];
-  return /* @__PURE__ */ jsx(
-    AxisBottom,
-    {
-      top,
-      scale,
-      tickValues,
-      tickFormat,
-      tickLabelProps: (_value, index, values) => ({
-        fill: VX.faint,
-        fontFamily: TICK_FONT_FAMILY,
-        fontSize: axisFont,
-        textAnchor: rotated !== void 0 ? "end" : terminalAnchor({ anchorTerminals, index, count: values.length }),
-        ...rotate !== void 0 && { angle: -rotate },
-        ...rotated !== void 0 && { dx: rotated.dx, dy: rotated.dy },
-        // A wrapped label's default baseline anchors its LAST line, which stacks the earlier ones
-        // UPWARD into the axis line and ticks (R2C-7) — `autoMargin`'s `bottomLines` reserves room
-        // BELOW the axis, so the reservation and the paint have to agree on which line anchors.
-        ...wrapWidth !== void 0 && rotated === void 0 && { width: wrapWidth, verticalAnchor: "start", dy: "-0.35em" }
-      }),
-      stroke: VX.surface.border,
-      tickStroke: VX.surface.border
-    }
-  );
-}
-export {
-  AxisBottomDate,
-  AxisBottomNumeric,
-  AxisLeftNumeric,
-  AxisRightNumeric,
-  TICK_FONT_FAMILY,
-  terminalAnchor
-};