Localization

LocaleProvider

No i18n library is required. The kit works with zero config in English. To change the locale, wrap your app in LocaleProvider and pass a messages object of type Messages.

import { LocaleProvider } from "@vamos-cms/ui";
import { tr } from "./locales/tr"; // same shape as the built-in `en`

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <LocaleProvider locale="tr-TR" messages={tr}>
      {children}
    </LocaleProvider>
  );
}

Inside components, read strings and formatters with hooks:

import { useMessages, useFormat } from "@vamos-cms/ui";

function Footer({ page, total, amount }: { page: number; total: number; amount: number }) {
  const t = useMessages();
  const f = useFormat();
  return (
    <p>
      {t.pagination.page(page, total)} · {f.currency(amount, "TRY")}
    </p>
  );
}

The built-in dictionary currently covers common, pagination and command; it grows with each component.

Partial overrides

Rename one string without writing a full locale: any prop that shows built-in text (closeLabel, emptyLabel, labels) wins over the dictionary. Deep-merged partial dictionaries are Planned.

Formatting

Numbers, money, dates and relative times go through the browser's Intl APIs with the active locale. The same values in two locales, computed live:

Dates without a time are sent as YYYY-MM-DD, money as a decimal string, and the time zone is always explicit.

Locale packs

Some rules are country-specific, so they ship as optional packs. The Turkish pack is first:

Right-to-left

Components use logical properties (ps/pe, start/end, text-start) so they mirror under dir="rtl". Motion that must flip reads the --dir variable.