gridsmith-ui 0.26.0 → 0.28.0

package/README.md

@@ -10,6 +10,8 @@ gridsmith-ui needs React 19. On a React 18 project, upgrade `react`, `react-dom`
 npm install gridsmith-ui
 ```
 
+**Upgrading:** each release in `CHANGELOG.md` (in this package, `node_modules/gridsmith-ui/CHANGELOG.md`) ends with an upgrade note for agents: what an app on the previous version changes. A 0.x minor release can break code written for the one before, so `^0.26.0` never reaches 0.27.0 by itself.
+
 ### Charts (optional)
 
 ```bash
@@ -38,19 +40,28 @@ npm install react-resizable-panels                               # gridsmith-ui/
 
 ### Icon packs
 
-The `Icon` component uses `lucide-react` by default, and every other pack falls back to it for a missing name, so always install it. Other packs are loaded on demand — install only what you need:
+The `Icon` component uses `lucide-react` by default, and every other pack falls back to it for a missing name, so always install it. For another pack, install it and register it once, at the top of your app's shell (in Next.js the shell is a client file; never the root layout, a server component) and before any `preloadPack`: the library names no pack but Lucide, so your bundler (Next.js's included) only meets the pack you installed. A pack you draw without registering it draws Lucide's icons, and in development the console names the line to add.
 
 ```bash
 # Default and fallback (required)
 npm install lucide-react
 
-# Alternative packs
+# Alternative packs: install the one your theme uses
 npm install @phosphor-icons/react   # phosphor
 npm install @heroicons/react        # heroicons
 npm install @tabler/icons-react     # tabler
 npm install react-icons             # feather (via react-icons)
 ```
 
+```tsx
+import { registerIconPack } from "gridsmith-ui/icons";
+
+registerIconPack("feather", () => import("react-icons/fi"));
+// phosphor: () => import("@phosphor-icons/react")
+// heroicons: () => import("@heroicons/react/24/outline")
+// tabler: () => import("@tabler/icons-react")
+```
+
 ## Setup
 
 Import the design tokens and Tailwind bindings in your CSS entry point:
@@ -68,7 +79,7 @@ Import the design tokens and Tailwind bindings in your CSS entry point:
 - **tailwind.css** — maps `--ds-*` tokens to Tailwind utilities (`p-ds-4`, `text-2xs`, `opacity-disabled`)
 - **@source** — tells Tailwind to scan the compiled components; without it they render unstyled. It must come after every `@import`.
 
-For the fastest icon rendering on cold loads, call `preloadPack` in your entry point before `createRoot`:
+For the fastest icon rendering on cold loads, call `preloadPack` in your entry point before `createRoot` (in Next.js, at the top of the shell), another pack's after its registration:
 
 ```tsx
 import { preloadPack } from "gridsmith-ui/icons";
@@ -77,6 +88,8 @@ preloadPack("lucide");
 
 ## Entry Points
 
+Every entry but `gridsmith-ui/utils` is client code, each file opening with `"use client"`. In Next.js (15 or later), a server component (a page with no `'use client'` of its own) renders the components with plain data: text, numbers, dates, elements. A function (`onClick`, `onChange`, a column's `render`) needs a client component of yours, and so does calling the library's hooks; a server page hands the library's constants and contexts on as they are, without reading them, and renders a compound part by its own name (`TabsList` for `Tabs.List`, `CollapsibleTrigger` for `Collapsible.Trigger`). On the server (a page, a route handler, a server action), call the helpers from `gridsmith-ui/utils`, passing them `requestLocale(LANG, acceptLanguage)` so their words read as the components' do; a Date is read there in the server's time zone, so hand `RelativeTime` and the Calendar the data for what the visitor reads in their own. Vite and Remix ignore the marker.
+
 | Import path | What it provides |
 |---|---|
 | `gridsmith-ui` | Every component outside the entry points below (actions, forms, data display, navigation, overlays, feedback, layout) |
@@ -88,8 +101,8 @@ preloadPack("lucide");
 | `gridsmith-ui/data-grid` | `DataGrid` (requires `@tanstack/react-table`) |
 | `gridsmith-ui/virtualized` | `VirtualizedList` (requires `@tanstack/react-virtual`) |
 | `gridsmith-ui/resizable` | `ResizablePanelGroup`, `ResizablePanel`, `ResizableHandle`, `SplitView` (requires `react-resizable-panels`) |
-| `gridsmith-ui/icons` | `Icon`, `IconProvider`, `preloadPack` — 5 icon packs with two-phase loading |
-| `gridsmith-ui/utils` | `cn()` — className merge utility (clsx + tailwind-merge) |
+| `gridsmith-ui/icons` | `Icon`, `IconProvider`, `preloadPack`, `registerIconPack` — 5 icon packs with two-phase loading |
+| `gridsmith-ui/utils` | `cn()` — className merge utility (clsx + tailwind-merge) — and the helpers server code calls: the repeat rules, calendar days and date ranges, time zones, a chart's label kind, and `requestLocale()` for a request's locale. Nothing in it needs React or a browser |
 | `gridsmith-ui/roots.css` | CSS custom property engine |
 | `gridsmith-ui/tokens.css` | Default preset token values |
 | `gridsmith-ui/tailwind.css` | Tailwind v4 `@theme` bindings for `--ds-*` tokens |
@@ -100,6 +113,7 @@ preloadPack("lucide");
 import { Button, Card, Input, Table } from "gridsmith-ui";
 import { BarChart, LineChart } from "gridsmith-ui/charts";
 import { RichTextEditor } from "gridsmith-ui/editor";
+import { useMentions } from "gridsmith-ui/editor-mentions";
 import { MarkdownContent } from "gridsmith-ui/chat";
 import { KanbanBoard } from "gridsmith-ui/kanban";
 import { DataGrid } from "gridsmith-ui/data-grid";
@@ -136,6 +150,8 @@ Wrap your app in `<IconProvider>` to select a pack:
 - **Import errors after installing a package while `vite` is running** — restart with `npm run dev -- --force` (or delete `node_modules/.vite`); Vite's dependency cache otherwise serves the pre-install module graph.
 - **Components render unstyled** — add `@source "../node_modules/gridsmith-ui/dist/*.js"` to your CSS entry point *after* every `@import`. Tailwind v4 needs it to scan the compiled components, and rejects an `@import` that follows it.
 - **`IconProvider` is not exported** — upgrade to a current `gridsmith-ui`; the provider ships from the `gridsmith-ui/icons` entry point.
+- **"Attempted to call … from the server" in Next.js** — a server component called one of the library's functions or hooks: take the helper from `gridsmith-ui/utils`, or mark the file `'use client'`. "Functions cannot be passed directly to Client Components" — it handed a component a function: move that element into a client component of yours.
+- **A component test in jsdom fails on `ResizeObserver`** — jsdom has none: stub it in the test setup (`globalThis.ResizeObserver = class { observe() {} unobserve() {} disconnect() {} }`), as the components measure their width.
 
 ## Peer Dependencies
 

package/dist/charts.d.ts

@@ -18,7 +18,7 @@ type CategoryKind = "names" | "scale";
  * anchored pattern to be "scale"; an all-empty set is "scale". LineChart and AreaChart are always "scale"; BarChart and
  * CompositeChart guess with this, and their `categoryKind` prop overrides the guess.
  */
-declare function categoryKind(labels: ReadonlyArray<unknown>): CategoryKind;
+declare function categoryKind(labels: ReadonlyArray<unknown>, locale?: string): CategoryKind;
 
 type XAxisInterval = number | "preserveStart" | "preserveEnd" | "preserveStartEnd" | "equidistantPreserveStart";
 
@@ -399,4 +399,4 @@ declare function ChartContainer({ height, title, loading, emptyState, variant, c
 
 declare function useChartColors(count: number, soft?: boolean): string[];
 
-export { AreaChart, type AreaChartProps, type AreaDef, BarChart, type BarChartProps, type BarDef, ChartContainer, CompositeChart, type CompositeChartProps, FunnelChart, type FunnelChartProps, LineChart, type LineChartProps, type LineDef, PieChart, type PieChartProps, RadarChart, type RadarChartProps, type RadarDataKey, RadialBarChart, type RadialBarChartProps, SankeyChart, type SankeyChartProps, ScatterChart, type ScatterChartProps, type ScatterSeries, Sparkline, type SparklineProps, TreemapChart, type TreemapChartProps, type TreemapNode, type ValueFormat, categoryKind, useChartColors };
+export { AreaChart, type AreaChartProps, type AreaDef, BarChart, type BarChartProps, type BarDef, type CategoryKind, ChartContainer, CompositeChart, type CompositeChartProps, FunnelChart, type FunnelChartProps, LineChart, type LineChartProps, type LineDef, PieChart, type PieChartProps, RadarChart, type RadarChartProps, type RadarDataKey, RadialBarChart, type RadialBarChartProps, SankeyChart, type SankeyChartProps, ScatterChart, type ScatterChartProps, type ScatterSeries, Sparkline, type SparklineProps, TreemapChart, type TreemapChartProps, type TreemapNode, type ValueFormat, categoryKind, useChartColors };

package/dist/charts.js

@@ -1,6 +1,8 @@
-import { formatLocale, TITLE_TEXT, Skeleton } from './chunk-X2HEV7FB.js';
+"use client";
+import { useFormatLocale, useHydrated, TITLE_TEXT, Skeleton } from './chunk-2ROVDVLZ.js';
+import { formatLocale, elementType } from './chunk-OYNUU346.js';
 import { mergeRefs } from './chunk-7Q46JXSK.js';
-import { cn, GLASS_SURFACE } from './chunk-M2QRNBDQ.js';
+import { cn, GLASS_SURFACE } from './chunk-66JJCQU3.js';
 import { createContext, forwardRef, useContext, useRef, useState, useMemo, useLayoutEffect, useEffect, useId, useSyncExternalStore, Children, isValidElement } from 'react';
 import { ResponsiveContainer, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Bar, LineChart as LineChart$1, Line, AreaChart as AreaChart$1, Area, PieChart as PieChart$1, Pie, Cell, ComposedChart, ScatterChart as ScatterChart$1, ZAxis, Scatter, RadarChart as RadarChart$1, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, RadialBarChart as RadialBarChart$1, RadialBar, FunnelChart as FunnelChart$1, Funnel, LabelList, Treemap, Sankey, Text, Legend, getNiceTickValues, Rectangle } from 'recharts';
 import { createPortal } from 'react-dom';
@@ -194,8 +196,12 @@ function intlNames(locale, kind) {
   }
   return out;
 }
-function locales() {
+function locales(given) {
   const out = /* @__PURE__ */ new Set(["en"]);
+  if (given !== void 0) {
+    out.add(given);
+    return [...out];
+  }
   try {
     out.add(new Intl.DateTimeFormat().resolvedOptions().locale);
   } catch {
@@ -205,8 +211,8 @@ function locales() {
   return [...out];
 }
 var cached = null;
-function patterns() {
-  const tags = locales();
+function patterns(given) {
+  const tags = locales(given);
   const key = tags.join("|");
   if (cached?.key === key) return cached;
   const months = new Set(ENGLISH_MONTHS);
@@ -258,8 +264,8 @@ function patterns() {
   cached = { key, list };
   return cached;
 }
-function categoryKind(labels) {
-  const { list } = patterns();
+function categoryKind(labels, locale) {
+  const { list } = patterns(locale);
   for (const raw of labels) {
     if (raw == null) continue;
     if (typeof raw === "number") {
@@ -407,7 +413,7 @@ function isLibraryChart(children) {
   if (kids.length !== 1) return false;
   const only = kids[0];
   if (!isValidElement(only)) return false;
-  const type = only.type;
+  const type = elementType(only.type);
   return !!type && typeof type !== "string" && type[CHART_MARK] === true;
 }
 var ChartContainerContext = createContext(null);
@@ -534,7 +540,7 @@ function exact(format, maxDigits = MAX_FRACTION) {
   }
   return format(maxDigits);
 }
-var unitFormat = (unit, value) => (digits) => new Intl.NumberFormat(formatLocale(), { style: "unit", unit, unitDisplay: "short", maximumFractionDigits: digits }).format(value);
+var unitFormat = (unit, value, locale) => (digits) => new Intl.NumberFormat(locale, { style: "unit", unit, unitDisplay: "short", maximumFractionDigits: digits }).format(value);
 var unitsOf = (format) => format === "bytes" ? BYTE_UNITS : TIME_UNITS;
 function unitReached(units, value) {
   return units.find(([, size]) => Math.abs(value) >= size) ?? units[units.length - 1];
@@ -552,26 +558,26 @@ function valueAxisTicks(values) {
   if (lo === hi) return [lo];
   return getNiceTickValues([lo, hi], TICK_COUNT, true).map(Number);
 }
-function axisTickFormatter(values, format = "number") {
+function axisTickFormatter(values, format, locale) {
   if (typeof format === "function") return format;
-  if (format === "percent") return (value) => exact((d) => new Intl.NumberFormat(formatLocale(), { style: "percent", maximumFractionDigits: d }).format(value / 100));
+  if (format === "percent") return (value) => exact((d) => new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: d }).format(value / 100));
   if (format === "milliseconds" || format === "bytes") {
     const [unit, size] = axisUnit(unitsOf(format), valueAxisTicks(values));
-    return (value) => exact(unitFormat(unit, value / size));
+    return (value) => exact(unitFormat(unit, value / size, locale));
   }
-  const compact = (value) => exact((d) => new Intl.NumberFormat(formatLocale(), { notation: "compact", maximumFractionDigits: d }).format(value));
-  const plain = (value) => exact((d) => new Intl.NumberFormat(formatLocale(), { maximumFractionDigits: d }).format(value));
+  const compact = (value) => exact((d) => new Intl.NumberFormat(locale, { notation: "compact", maximumFractionDigits: d }).format(value));
+  const plain = (value) => exact((d) => new Intl.NumberFormat(locale, { maximumFractionDigits: d }).format(value));
   const largest = Math.max(0, ...values.filter(Number.isFinite).map(Math.abs));
   return largest >= COMPACT_FROM ? compact : plain;
 }
 var COMPACT_FROM = 1e4;
-function fullValueFormatter(format = "number") {
+function fullValueFormatter(format, locale) {
   if (typeof format === "function") return format;
-  if (format === "number") return (value) => value.toLocaleString(formatLocale());
-  if (format === "percent") return (value) => exact((d) => new Intl.NumberFormat(formatLocale(), { style: "percent", maximumFractionDigits: d }).format(value / 100), 4);
+  if (format === void 0 || format === "number") return (value) => value.toLocaleString(locale);
+  if (format === "percent") return (value) => exact((d) => new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: d }).format(value / 100), 4);
   return (value) => {
     const [unit, size] = unitReached(unitsOf(format), value);
-    return exact(unitFormat(unit, value / size), 4);
+    return exact(unitFormat(unit, value / size, locale), 4);
   };
 }
 function axisExtent(data, series) {
@@ -595,10 +601,10 @@ function seriesValues(data, keys, stacked = false) {
 }
 var hasLabel = (label) => label != null && label !== "" && typeof label !== "number";
 var entryName = (entry, label) => !hasLabel(label) && typeof entry.payload?.name === "string" && entry.payload.name || entry.name;
-var entryValue = (entry, format) => typeof entry.value === "number" ? format ? format(entry.value, entry.dataKey) : entry.value.toLocaleString(formatLocale()) : entry.value;
-function tooltipAnnouncement(label, payload, format) {
+var entryValue = (entry, format, locale) => typeof entry.value === "number" ? format ? format(entry.value, entry.dataKey) : entry.value.toLocaleString(locale) : entry.value;
+function tooltipAnnouncement(label, payload, format, locale = formatLocale()) {
   if (!payload?.length) return "";
-  const values = payload.map((entry) => `${entryName(entry, label)} ${entryValue(entry, format)}`).join(", ");
+  const values = payload.map((entry) => `${entryName(entry, label)} ${entryValue(entry, format, locale)}`).join(", ");
   return hasLabel(label) ? `${String(label)}: ${values}` : values;
 }
 function ChartTooltipContent({ active, payload, label }) {
@@ -607,6 +613,7 @@ function ChartTooltipContent({ active, payload, label }) {
   const textPrimary = useResolvedToken("--ds-text-primary");
   const textSecondary = useResolvedToken("--ds-text-secondary");
   const { live, formatValue } = useContext(ChartFrameContext);
+  const locale = useFormatLocale();
   const on = !!active && !!payload?.length;
   const showLabel = hasLabel(label);
   const box = on ? /* @__PURE__ */ jsxs(
@@ -634,7 +641,7 @@ function ChartTooltipContent({ active, payload, label }) {
               entryName(entry, label),
               ":"
             ] }),
-            /* @__PURE__ */ jsx("span", { className: "tabular-nums", style: { color: textPrimary }, children: entryValue(entry, formatValue) })
+            /* @__PURE__ */ jsx("span", { className: "tabular-nums", style: { color: textPrimary }, children: entryValue(entry, formatValue, locale) })
           ] }, i);
         })
       ]
@@ -643,7 +650,7 @@ function ChartTooltipContent({ active, payload, label }) {
   if (live) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       box,
-      createPortal(on ? tooltipAnnouncement(label, payload, formatValue) : "", live)
+      createPortal(on ? tooltipAnnouncement(label, payload, formatValue, locale) : "", live)
     ] });
   }
   return /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", children: box });
@@ -888,12 +895,14 @@ var BarChart = markChart(forwardRef(function BarChart2({
 }, ref) {
   const wrapperRef = useRef(null);
   const labels = useMemo(() => (data ?? []).map((d) => String(d[xAxisKey] ?? "")), [data, xAxisKey]);
-  const kind = categoryKind2 ?? categoryKind((data ?? []).map((d) => d[xAxisKey]));
+  const locale = useFormatLocale();
+  const hydrated = useHydrated();
+  const kind = categoryKind2 ?? categoryKind((data ?? []).map((d) => d[xAxisKey]), hydrated ? void 0 : locale);
   const names = kind === "names";
   const measured = useAxisMeasure(wrapperRef, (data?.length ?? 0) > 0);
   const values = useMemo(() => valueExtent(data ?? [], bars, stacked), [data, bars, stacked]);
-  const tickFormat = useMemo(() => axisTickFormatter(values, valueFormat), [values, valueFormat]);
-  const fullFormat = useMemo(() => fullValueFormatter(valueFormat), [valueFormat]);
+  const tickFormat = useMemo(() => axisTickFormatter(values, valueFormat, locale), [values, valueFormat, locale]);
+  const fullFormat = useMemo(() => fullValueFormatter(valueFormat, locale), [valueFormat, locale]);
   const axisWidth = useMemo(
     () => measured.measure ? valueAxisWidth(values, measured.measure, tickFormat) : 0,
     [measured.measure, values, tickFormat]
@@ -1028,8 +1037,9 @@ var LineChart = markChart(forwardRef(function LineChart2({
 }, ref) {
   const wrapperRef = useRef(null);
   const values = useMemo(() => seriesValues(data ?? [], lines.map((s) => s.dataKey), false), [data, lines]);
-  const tickFormat = useMemo(() => axisTickFormatter(values, valueFormat), [values, valueFormat]);
-  const fullFormat = useMemo(() => fullValueFormatter(valueFormat), [valueFormat]);
+  const locale = useFormatLocale();
+  const tickFormat = useMemo(() => axisTickFormatter(values, valueFormat, locale), [values, valueFormat, locale]);
+  const fullFormat = useMemo(() => fullValueFormatter(valueFormat, locale), [valueFormat, locale]);
   const xTicks = useCategoryTicks(data, xAxisKey, wrapperRef, xAxisInterval, "scale");
   const measured = useAxisMeasure(wrapperRef, !!yAxisLabel && (data?.length ?? 0) > 0);
   const colors = useChartColors(lines.length, false);
@@ -1113,8 +1123,9 @@ var AreaChart = markChart(forwardRef(function AreaChart2({
 }, ref) {
   const wrapperRef = useRef(null);
   const values = useMemo(() => seriesValues(data ?? [], areas.map((s) => s.dataKey), stacked), [data, areas, stacked]);
-  const tickFormat = useMemo(() => axisTickFormatter(values, valueFormat), [values, valueFormat]);
-  const fullFormat = useMemo(() => fullValueFormatter(valueFormat), [valueFormat]);
+  const locale = useFormatLocale();
+  const tickFormat = useMemo(() => axisTickFormatter(values, valueFormat, locale), [values, valueFormat, locale]);
+  const fullFormat = useMemo(() => fullValueFormatter(valueFormat, locale), [valueFormat, locale]);
   const xTicks = useCategoryTicks(data, xAxisKey, wrapperRef, xAxisInterval, "scale");
   const measured = useAxisMeasure(wrapperRef, !!yAxisLabel && (data?.length ?? 0) > 0);
   const instanceId = useId();
@@ -1244,7 +1255,9 @@ var CompositeChart = markChart(forwardRef(function CompositeChart2({
 }, ref) {
   const wrapperRef = useRef(null);
   const labels = useMemo(() => (data ?? []).map((d) => String(d[xAxisKey] ?? "")), [data, xAxisKey]);
-  const kind = categoryKind2 ?? categoryKind((data ?? []).map((d) => d[xAxisKey]));
+  const locale = useFormatLocale();
+  const hydrated = useHydrated();
+  const kind = categoryKind2 ?? categoryKind((data ?? []).map((d) => d[xAxisKey]), hydrated ? void 0 : locale);
   const names = kind === "names";
   const measured = useAxisMeasure(wrapperRef, (data?.length ?? 0) > 0);
   const [values, lineValues] = useMemo(() => {
@@ -1255,14 +1268,14 @@ var CompositeChart = markChart(forwardRef(function CompositeChart2({
     const lineValues2 = (data ?? []).flatMap((row) => lines.map((l) => Number(row[l.dataKey])));
     return [values2, lineValues2];
   }, [data, bars, lines, stacked, dualAxis]);
-  const tickFormat = useMemo(() => axisTickFormatter(values, valueFormat), [values, valueFormat]);
-  const lineTickFormat = useMemo(() => axisTickFormatter(lineValues, lineValueFormat), [lineValues, lineValueFormat]);
+  const tickFormat = useMemo(() => axisTickFormatter(values, valueFormat, locale), [values, valueFormat, locale]);
+  const lineTickFormat = useMemo(() => axisTickFormatter(lineValues, lineValueFormat, locale), [lineValues, lineValueFormat, locale]);
   const fullFormat = useMemo(() => {
-    const bar = fullValueFormatter(valueFormat);
-    const line = fullValueFormatter(dualAxis ? lineValueFormat : valueFormat);
+    const bar = fullValueFormatter(valueFormat, locale);
+    const line = fullValueFormatter(dualAxis ? lineValueFormat : valueFormat, locale);
     const lineKeys = new Set(lines.map((l) => l.dataKey));
     return (value, dataKey) => dataKey && lineKeys.has(dataKey) ? line(value) : bar(value);
-  }, [valueFormat, lineValueFormat, dualAxis, lines]);
+  }, [valueFormat, lineValueFormat, dualAxis, lines, locale]);
   const axisWidth = useMemo(() => {
     if (!measured.measure) return 0;
     return valueAxisWidth(values, measured.measure, tickFormat) + (dualAxis ? valueAxisWidth(lineValues, measured.measure, lineTickFormat) : 0);
@@ -1411,16 +1424,17 @@ var ScatterChart = markChart(forwardRef(function ScatterChart2({
   className
 }, ref) {
   const wrapperRef = useRef(null);
+  const locale = useFormatLocale();
   const [xTickFormat, yTickFormat, fullFormat] = useMemo(() => {
     const points = (data ?? []).flatMap((s) => s.points);
-    const x = fullValueFormatter(xValueFormat);
-    const y = fullValueFormatter(valueFormat);
+    const x = fullValueFormatter(xValueFormat, locale);
+    const y = fullValueFormatter(valueFormat, locale);
     return [
-      axisTickFormatter(points.map((p) => p.x), xValueFormat),
-      axisTickFormatter(points.map((p) => p.y), valueFormat),
-      (value, dataKey) => dataKey === "x" ? x(value) : dataKey === "y" ? y(value) : value.toLocaleString(formatLocale())
+      axisTickFormatter(points.map((p) => p.x), xValueFormat, locale),
+      axisTickFormatter(points.map((p) => p.y), valueFormat, locale),
+      (value, dataKey) => dataKey === "x" ? x(value) : dataKey === "y" ? y(value) : value.toLocaleString(locale)
     ];
-  }, [data, valueFormat, xValueFormat]);
+  }, [data, valueFormat, xValueFormat, locale]);
   const measured = useAxisMeasure(wrapperRef, !!yLabel && (data?.length ?? 0) > 0);
   const colors = useChartColors(data.length, false);
   const gridStroke = useGridStroke();
@@ -1511,8 +1525,9 @@ var RadarChart = markChart(forwardRef(function RadarChart2({
   const isAnimated = useChartAnimation(animated);
   const legendVisible = showLegend ?? dataKeys.length >= 2;
   const values = useMemo(() => seriesValues(data ?? [], dataKeys.map((dk) => dk.key)), [data, dataKeys]);
-  const tickFormat = useMemo(() => axisTickFormatter(values, valueFormat), [values, valueFormat]);
-  const fullFormat = useMemo(() => fullValueFormatter(valueFormat), [valueFormat]);
+  const locale = useFormatLocale();
+  const tickFormat = useMemo(() => axisTickFormatter(values, valueFormat, locale), [values, valueFormat, locale]);
+  const fullFormat = useMemo(() => fullValueFormatter(valueFormat, locale), [valueFormat, locale]);
   if (!data?.length) return null;
   return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, size: { model: "square" }, chart: "radar", className, "aria-label": ariaLabel, formatValue: fullFormat, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(RadarChart$1, { data, cx: "50%", cy: "50%", outerRadius: "75%", accessibilityLayer: true, children: [
     /* @__PURE__ */ jsx(PolarGrid, { stroke: "var(--ds-border-subtle)" }),