@daanvandenbergh/i18nkit 1.0.0

package/dist/react/flags.js

@@ -0,0 +1,348 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * An opt-in set of inline-SVG country flags for {@link LanguagePicker}, so the common case needs no
+ * `renderFlag` boilerplate: pass the shipped {@link localeFlag} helper and every locale that maps to
+ * a known flag draws one.
+ *
+ * Inline SVG (not emoji flags) because emoji flags render as bare letters on Windows/Chrome. Every
+ * flag is drawn in the same flat, rounded "chip" style - a uniform 4:3 rounded rectangle with a
+ * hairline border for edge definition on light surfaces - so a picker of mixed languages reads as
+ * one clean, consistent set.
+ *
+ * Flags are keyed by ISO 3166-1 region code, and a locale string is resolved to a region by
+ * {@link resolveFlagRegion}: an explicit region subtag wins (`pt-BR` -> Brazil), otherwise the
+ * language's conventional region is used (`pt` -> Portugal, `en` -> United Kingdom). A locale with
+ * no known flag renders nothing, so the picker falls back to its label - never a broken image.
+ */
+import { useId } from "react";
+/** Border stroke shared by every chip, for edge definition on light surfaces. */
+const CHIP_BORDER = "rgba(11, 27, 54, 0.14)";
+/**
+ * The shared chip frame: a 60x45 `viewBox`, rounded corners that clip the content, and a hairline
+ * border. Every flag renders its content inside this so they all share one shape.
+ *
+ * @param props.size - the rendered width in px (height is 3/4 of it).
+ * @param props.children - the flag's inner SVG content, clipped to the rounded rectangle.
+ * @returns the framed flag SVG.
+ */
+function FlagChip({ size, children }) {
+    const uid = useId();
+    const clip = `i18nkit-flag-${uid}`;
+    return (_jsxs("svg", { width: size, height: (size * 3) / 4, viewBox: "0 0 60 45", role: "img", "aria-hidden": true, focusable: false, style: { display: "block" }, children: [_jsx("clipPath", { id: clip, children: _jsx("rect", { width: 60, height: 45, rx: 7 }) }), _jsx("g", { clipPath: `url(#${clip})`, children: children }), _jsx("rect", { x: 0.6, y: 0.6, width: 58.8, height: 43.8, rx: 6.4, fill: "none", stroke: CHIP_BORDER, strokeWidth: 1.2 })] }));
+}
+/** Unit five-point star path (outer radius 1, pointing up); scaled/positioned via {@link Star}. */
+const STAR_PATH = "M0,-1 L0.2245,-0.309 L0.9511,-0.309 L0.3633,0.118 L0.5878,0.809 " +
+    "L0,0.382 L-0.5878,0.809 L-0.3633,0.118 L-0.9511,-0.309 L-0.2245,-0.309 Z";
+/**
+ * A filled five-point star.
+ *
+ * @param props.cx - centre x in `viewBox` units.
+ * @param props.cy - centre y in `viewBox` units.
+ * @param props.r - outer radius in `viewBox` units.
+ * @param props.fill - fill colour.
+ * @param props.rotate - clockwise rotation in degrees (default 0, a point facing up).
+ * @returns the star path element.
+ */
+function Star({ cx, cy, r, fill, rotate = 0, }) {
+    return _jsx("path", { d: STAR_PATH, fill: fill, transform: `translate(${cx} ${cy}) rotate(${rotate}) scale(${r})` });
+}
+/**
+ * Equal horizontal bands, top to bottom. Bands overlap by a hair to avoid anti-alias seams.
+ *
+ * @param colors - the band colours, top-first.
+ * @returns the band rects.
+ */
+function horizontalBands(colors) {
+    const h = 45 / colors.length;
+    return (_jsx(_Fragment, { children: colors.map((color, i) => (_jsx("rect", { y: i * h, width: 60, height: h + 0.3, fill: color }, i))) }));
+}
+/**
+ * Equal vertical bands, hoist (left) to fly (right). Bands overlap by a hair to avoid seams.
+ *
+ * @param colors - the band colours, hoist-first.
+ * @returns the band rects.
+ */
+function verticalBands(colors) {
+    const w = 60 / colors.length;
+    return (_jsx(_Fragment, { children: colors.map((color, i) => (_jsx("rect", { x: i * w, width: w + 0.3, height: 45, fill: color }, i))) }));
+}
+/**
+ * Weighted horizontal bands, top to bottom - for flags whose stripes are unequal (e.g. Spain's
+ * 1:2:1, Thailand's 1:1:2:1:1).
+ *
+ * @param bands - `[color, weight]` pairs, top-first; weights are relative.
+ * @returns the band rects.
+ */
+function weightedHorizontalBands(bands) {
+    const total = bands.reduce((sum, [, weight]) => sum + weight, 0);
+    let y = 0;
+    return (_jsx(_Fragment, { children: bands.map(([color, weight], i) => {
+            const h = (weight / total) * 45;
+            const rect = _jsx("rect", { y: y, width: 60, height: h + 0.3, fill: color }, i);
+            y += h;
+            return rect;
+        }) }));
+}
+/**
+ * A Nordic (off-centre) cross: a full field with a cross whose vertical bar sits left of centre.
+ * When `inner` is given the cross is drawn twice - a wide `cross`-coloured border under a narrow
+ * `inner` bar - for the bordered crosses (Norway, Iceland).
+ *
+ * @param field - the field (background) colour.
+ * @param cross - the cross colour (the border colour when `inner` is set).
+ * @param inner - optional inner-bar colour for a bordered cross.
+ * @returns the field and cross rects.
+ */
+function nordicCross(field, cross, inner) {
+    return (_jsxs(_Fragment, { children: [_jsx("rect", { width: 60, height: 45, fill: field }), inner !== undefined ? (_jsxs(_Fragment, { children: [_jsx("rect", { x: 12, width: 12, height: 45, fill: cross }), _jsx("rect", { y: 16.5, width: 60, height: 12, fill: cross }), _jsx("rect", { x: 15, width: 6, height: 45, fill: inner }), _jsx("rect", { y: 19.5, width: 60, height: 6, fill: inner })] })) : (_jsxs(_Fragment, { children: [_jsx("rect", { x: 14, width: 8, height: 45, fill: cross }), _jsx("rect", { y: 18.5, width: 60, height: 8, fill: cross })] }))] }));
+}
+/** The United Kingdom (Union Jack): a blue field, white then counterchanged-red saltire, and cross. */
+function UnitedKingdom({ size }) {
+    const uid = useId();
+    const counter = `i18nkit-uk-${uid}`;
+    return (_jsxs(FlagChip, { size: size, children: [_jsx("rect", { width: 60, height: 45, fill: "#012169" }), _jsx("clipPath", { id: counter, children: _jsx("path", { d: "M30,22.5 h30 v22.5 z v22.5 h-30 z h-30 v-22.5 z v-22.5 h30 z" }) }), _jsx("path", { d: "M0,0 L60,45 M60,0 L0,45", stroke: "#fff", strokeWidth: 9 }), _jsx("path", { d: "M0,0 L60,45 M60,0 L0,45", clipPath: `url(#${counter})`, stroke: "#C8102E", strokeWidth: 4 }), _jsx("path", { d: "M30,0 v45 M0,22.5 h60", stroke: "#fff", strokeWidth: 15 }), _jsx("path", { d: "M30,0 v45 M0,22.5 h60", stroke: "#C8102E", strokeWidth: 9 })] }));
+}
+/** The United States: 13 red/white stripes and a blue canton. ponytail: neat star grid, not the exact 50. */
+function UnitedStates({ size }) {
+    const stripeH = 45 / 13;
+    const cantonH = stripeH * 7;
+    const rows = [4, 8, 12, 16, 20];
+    return (_jsxs(FlagChip, { size: size, children: [_jsx("rect", { width: 60, height: 45, fill: "#B22234" }), Array.from({ length: 6 }, (_, i) => (_jsx("rect", { y: stripeH * (2 * i + 1), width: 60, height: stripeH + 0.3, fill: "#fff" }, i))), _jsx("rect", { width: 24, height: cantonH, fill: "#3C3B6E" }), rows.flatMap((y, r) => {
+                const cols = r % 2 === 0 ? [2.4, 7.2, 12, 16.8, 21.6] : [4.8, 9.6, 14.4, 19.2];
+                return cols.map((x, c) => _jsx(Star, { cx: x, cy: y, r: 1.3, fill: "#fff" }, `${r}-${c}`));
+            })] }));
+}
+/** Spain: red/yellow/red horizontal bands in a 1:2:1 ratio. ponytail: coat of arms omitted. */
+function Spain({ size }) {
+    return _jsx(FlagChip, { size: size, children: weightedHorizontalBands([["#AA151B", 1], ["#F1BF00", 2], ["#AA151B", 1]]) });
+}
+/** Portugal: green/red vertical split with a simplified armillary-and-shield emblem. ponytail: emblem simplified. */
+function Portugal({ size }) {
+    return (_jsxs(FlagChip, { size: size, children: [_jsx("rect", { width: 24, height: 45, fill: "#046A38" }), _jsx("rect", { x: 24, width: 36, height: 45, fill: "#DA020E" }), _jsx("circle", { cx: 24, cy: 22.5, r: 6, fill: "none", stroke: "#FFE800", strokeWidth: 1.4 }), _jsx("circle", { cx: 24, cy: 22.5, r: 3.4, fill: "#fff" }), _jsx("rect", { x: 22.3, y: 19.6, width: 3.4, height: 5.8, rx: 0.6, fill: "#DA020E" })] }));
+}
+/** Czechia: white over red with a blue triangle from the hoist. */
+function Czechia({ size }) {
+    return (_jsxs(FlagChip, { size: size, children: [_jsx("rect", { width: 60, height: 22.5, fill: "#fff" }), _jsx("rect", { y: 22.5, width: 60, height: 22.5, fill: "#D7141A" }), _jsx("path", { d: "M0,0 L30,22.5 L0,45 Z", fill: "#11457E" })] }));
+}
+/** Greece: nine blue/white stripes with a blue canton bearing a white cross. */
+function Greece({ size }) {
+    const stripe = 45 / 9;
+    return (_jsxs(FlagChip, { size: size, children: [_jsx("rect", { width: 60, height: 45, fill: "#0D5EAF" }), Array.from({ length: 4 }, (_, i) => (_jsx("rect", { y: stripe * (2 * i + 1), width: 60, height: stripe + 0.3, fill: "#fff" }, i))), _jsx("rect", { width: stripe * 5, height: stripe * 5, fill: "#0D5EAF" }), _jsx("rect", { x: stripe * 2, width: stripe, height: stripe * 5, fill: "#fff" }), _jsx("rect", { y: stripe * 2, width: stripe * 5, height: stripe, fill: "#fff" })] }));
+}
+/** Switzerland: a bold white cross on red. ponytail: square flag drawn on the shared 4:3 chip. */
+function Switzerland({ size }) {
+    return (_jsxs(FlagChip, { size: size, children: [_jsx("rect", { width: 60, height: 45, fill: "#D52B1E" }), _jsx("rect", { x: 26, y: 10.5, width: 8, height: 24, fill: "#fff" }), _jsx("rect", { x: 18, y: 18.5, width: 24, height: 8, fill: "#fff" })] }));
+}
+/** Japan: a red disc centred on white. */
+function Japan({ size }) {
+    return (_jsxs(FlagChip, { size: size, children: [_jsx("rect", { width: 60, height: 45, fill: "#fff" }), _jsx("circle", { cx: 30, cy: 22.5, r: 9, fill: "#BC002D" })] }));
+}
+/** China: one large and four small yellow stars in the canton of a red field. */
+function China({ size }) {
+    return (_jsxs(FlagChip, { size: size, children: [_jsx("rect", { width: 60, height: 45, fill: "#DE2910" }), _jsx(Star, { cx: 10, cy: 9.5, r: 5.5, fill: "#FFDE00" }), _jsx(Star, { cx: 19.5, cy: 4, r: 1.9, fill: "#FFDE00", rotate: 20 }), _jsx(Star, { cx: 23, cy: 8.5, r: 1.9, fill: "#FFDE00", rotate: 45 }), _jsx(Star, { cx: 23, cy: 14, r: 1.9, fill: "#FFDE00", rotate: 70 }), _jsx(Star, { cx: 19.5, cy: 18, r: 1.9, fill: "#FFDE00", rotate: 20 })] }));
+}
+/** Vietnam: a large yellow star centred on red. */
+function Vietnam({ size }) {
+    return (_jsxs(FlagChip, { size: size, children: [_jsx("rect", { width: 60, height: 45, fill: "#DA251D" }), _jsx(Star, { cx: 30, cy: 22.5, r: 12, fill: "#FFFF00" })] }));
+}
+/** Turkey: a white crescent and star on red. */
+function Turkey({ size }) {
+    return (_jsxs(FlagChip, { size: size, children: [_jsx("rect", { width: 60, height: 45, fill: "#E30A17" }), _jsx("circle", { cx: 22, cy: 22.5, r: 10, fill: "#fff" }), _jsx("circle", { cx: 25.5, cy: 22.5, r: 8, fill: "#E30A17" }), _jsx(Star, { cx: 37, cy: 22.5, r: 4.6, fill: "#fff", rotate: -18 })] }));
+}
+/** South Korea: the red/blue taegeuk with four black trigrams. ponytail: trigram bars drawn solid. */
+function SouthKorea({ size }) {
+    /** Three short parallel black bars (a simplified trigram) at a corner, angled toward centre. */
+    function Bars({ x, y, angle }) {
+        return (_jsxs("g", { transform: `translate(${x} ${y}) rotate(${angle})`, fill: "#000", children: [_jsx("rect", { x: -4.5, y: -2.7, width: 9, height: 1.3 }), _jsx("rect", { x: -4.5, y: -0.65, width: 9, height: 1.3 }), _jsx("rect", { x: -4.5, y: 1.4, width: 9, height: 1.3 })] }));
+    }
+    return (_jsxs(FlagChip, { size: size, children: [_jsx("rect", { width: 60, height: 45, fill: "#fff" }), _jsx("circle", { cx: 30, cy: 22.5, r: 9, fill: "#003478" }), _jsx("path", { d: "M30,13.5 A9,9 0 0,1 30,31.5 A4.5,4.5 0 0,1 30,22.5 A4.5,4.5 0 0,0 30,13.5 Z", fill: "#C60C30" }), _jsx(Bars, { x: 12, y: 10, angle: -34 }), _jsx(Bars, { x: 48, y: 10, angle: 34 }), _jsx(Bars, { x: 12, y: 35, angle: 34 }), _jsx(Bars, { x: 48, y: 35, angle: -34 })] }));
+}
+/** India: saffron/white/green bands with a navy Ashoka chakra. */
+function India({ size }) {
+    return (_jsxs(FlagChip, { size: size, children: [horizontalBands(["#FF9933", "#fff", "#138808"]), _jsx("g", { stroke: "#000080", strokeWidth: 0.5, children: Array.from({ length: 12 }, (_, k) => (_jsx("line", { x1: 30, y1: 22.5, x2: 30, y2: 18.1, transform: `rotate(${k * 30} 30 22.5)` }, k))) }), _jsx("circle", { cx: 30, cy: 22.5, r: 4.4, fill: "none", stroke: "#000080", strokeWidth: 1 }), _jsx("circle", { cx: 30, cy: 22.5, r: 0.9, fill: "#000080" })] }));
+}
+/** Israel: two blue stripes and a Star of David on white. */
+function Israel({ size }) {
+    return (_jsxs(FlagChip, { size: size, children: [_jsx("rect", { width: 60, height: 45, fill: "#fff" }), _jsx("rect", { y: 9, width: 60, height: 4.2, fill: "#0038B8" }), _jsx("rect", { y: 31.8, width: 60, height: 4.2, fill: "#0038B8" }), _jsx("path", { d: "M30,16 L37.5,29 L22.5,29 Z", fill: "none", stroke: "#0038B8", strokeWidth: 1.3 }), _jsx("path", { d: "M30,29 L37.5,16 L22.5,16 Z", fill: "none", stroke: "#0038B8", strokeWidth: 1.3 })] }));
+}
+/** Brazil: a yellow rhombus and blue disc on green. ponytail: constellation and banner omitted. */
+function Brazil({ size }) {
+    return (_jsxs(FlagChip, { size: size, children: [_jsx("rect", { width: 60, height: 45, fill: "#009C3B" }), _jsx("path", { d: "M30,6 L54,22.5 L30,39 L6,22.5 Z", fill: "#FFDF00" }), _jsx("circle", { cx: 30, cy: 22.5, r: 8.5, fill: "#002776" })] }));
+}
+/**
+ * Every known flag, keyed by lowercase ISO 3166-1 region code. Simple flags are data (bands or a
+ * Nordic cross); emblem flags carry a `custom` renderer. Add a region here and, if bare language
+ * codes should reach it, an entry in {@link DEFAULT_REGION_BY_LANGUAGE}.
+ */
+const FLAG_BY_REGION = {
+    gb: { custom: UnitedKingdom },
+    us: { custom: UnitedStates },
+    nl: { h: ["#AE1C28", "#fff", "#21468B"] },
+    de: { h: ["#000000", "#DD0000", "#FFCE00"] },
+    ru: { h: ["#fff", "#0039A6", "#D52B1E"] },
+    hu: { h: ["#CD2A3E", "#fff", "#436F4D"] },
+    bg: { h: ["#fff", "#00966E", "#D62612"] },
+    at: { h: ["#ED2939", "#fff", "#ED2939"] },
+    lt: { h: ["#FDB913", "#006A44", "#C1272D"] },
+    ee: { h: ["#0072CE", "#000000", "#fff"] },
+    pl: { h: ["#fff", "#DC143C"] },
+    ua: { h: ["#0057B7", "#FFD700"] },
+    id: { h: ["#FF0000", "#fff"] },
+    lv: { hw: [["#9E3039", 2], ["#fff", 1], ["#9E3039", 2]] },
+    es: { custom: Spain },
+    th: { hw: [["#A51931", 1], ["#F4F5F8", 1], ["#2D2A4A", 2], ["#F4F5F8", 1], ["#A51931", 1]] },
+    fr: { v: ["#002395", "#fff", "#ED2939"] },
+    it: { v: ["#008C45", "#F4F5F0", "#CD212A"] },
+    ie: { v: ["#169B62", "#fff", "#FF883E"] },
+    be: { v: ["#000000", "#FDDA24", "#EF3340"] },
+    ro: { v: ["#002B7F", "#FCD116", "#CE1126"] },
+    se: { nordic: { field: "#006AA7", cross: "#FECC00" } },
+    dk: { nordic: { field: "#C8102E", cross: "#fff" } },
+    fi: { nordic: { field: "#fff", cross: "#003580" } },
+    no: { nordic: { field: "#EF2B2D", cross: "#fff", inner: "#002868" } },
+    is: { nordic: { field: "#02529C", cross: "#fff", inner: "#DC1E35" } },
+    pt: { custom: Portugal },
+    cz: { custom: Czechia },
+    gr: { custom: Greece },
+    ch: { custom: Switzerland },
+    jp: { custom: Japan },
+    cn: { custom: China },
+    vn: { custom: Vietnam },
+    tr: { custom: Turkey },
+    kr: { custom: SouthKorea },
+    in: { custom: India },
+    il: { custom: Israel },
+    br: { custom: Brazil },
+};
+/**
+ * The conventional flag region for a bare language subtag (no region in the locale), so `de` shows
+ * Germany, `en` the United Kingdom, `pt` Portugal. A region subtag in the locale always overrides
+ * this (see {@link resolveFlagRegion}).
+ */
+const DEFAULT_REGION_BY_LANGUAGE = {
+    en: "gb",
+    nl: "nl",
+    de: "de",
+    ru: "ru",
+    hu: "hu",
+    bg: "bg",
+    lt: "lt",
+    et: "ee",
+    pl: "pl",
+    uk: "ua",
+    id: "id",
+    lv: "lv",
+    es: "es",
+    th: "th",
+    fr: "fr",
+    it: "it",
+    ga: "ie",
+    ro: "ro",
+    sv: "se",
+    da: "dk",
+    fi: "fi",
+    nb: "no",
+    nn: "no",
+    no: "no",
+    is: "is",
+    pt: "pt",
+    cs: "cz",
+    el: "gr",
+    ja: "jp",
+    zh: "cn",
+    vi: "vn",
+    tr: "tr",
+    ko: "kr",
+    hi: "in",
+    he: "il",
+};
+/**
+ * Resolve a locale string to a known flag region, or `undefined` when none matches.
+ *
+ * A region subtag present in the locale wins when we have that flag (`pt-BR` -> `br`, `de-CH` ->
+ * `ch`); a region we do not ship a flag for is ignored and resolution falls back to the language's
+ * conventional region (`es-MX` -> `es`, `en-CA` -> `gb`). Script subtags (`zh-Hans`) are skipped.
+ *
+ * @param locale - a BCP-47-ish locale code (`-` or `_` separated, any case).
+ * @returns the lowercase region code of a known flag, or `undefined`.
+ */
+function resolveFlagRegion(locale) {
+    const parts = locale.toLowerCase().split(/[-_]/);
+    for (let i = 1; i < parts.length; i++) {
+        const part = parts[i];
+        // A singleton subtag (`t`, `u`, `x`, ...) opens an extension / private-use section; no
+        // region follows it, so stop before mistaking e.g. the `de` in `en-t-de` for a region.
+        if (part && part.length === 1) {
+            break;
+        }
+        if (part && part.length === 2 && /^[a-z]{2}$/.test(part) && part in FLAG_BY_REGION) {
+            return part;
+        }
+    }
+    const region = DEFAULT_REGION_BY_LANGUAGE[parts[0] ?? ""];
+    return region !== undefined && region in FLAG_BY_REGION ? region : undefined;
+}
+/** Render one band/nordic {@link FlagSpec} inside a chip. Custom specs are handled by {@link flagNode}. */
+function BandFlag({ spec, size }) {
+    let content;
+    if ("h" in spec) {
+        content = horizontalBands(spec.h);
+    }
+    else if ("v" in spec) {
+        content = verticalBands(spec.v);
+    }
+    else if ("hw" in spec) {
+        content = weightedHorizontalBands(spec.hw);
+    }
+    else if ("nordic" in spec) {
+        content = nordicCross(spec.nordic.field, spec.nordic.cross, spec.nordic.inner);
+    }
+    else {
+        // Custom specs never reach here; flagNode dispatches them.
+        content = _jsx(_Fragment, {});
+    }
+    return _jsx(FlagChip, { size: size, children: content });
+}
+/**
+ * The flag element for a locale, or `null` when no known flag matches (so callers render nothing).
+ *
+ * @param code - the locale code to resolve.
+ * @param size - the rendered width in px.
+ * @returns the flag element, or `null`.
+ */
+function flagNode(code, size) {
+    const region = resolveFlagRegion(code);
+    if (region === undefined) {
+        return null;
+    }
+    const spec = FLAG_BY_REGION[region];
+    if (spec === undefined) {
+        return null;
+    }
+    if ("custom" in spec) {
+        const Custom = spec.custom;
+        return _jsx(Custom, { size: size });
+    }
+    return _jsx(BandFlag, { spec: spec, size: size });
+}
+/**
+ * The flag for a locale, drawn as a flat rounded chip - or nothing when no known flag matches.
+ *
+ * @param props.code - the locale code (e.g. `"en"`, `"pt-BR"`, `"de-CH"`).
+ * @param props.size - the rendered width in px (default 20; height is 3/4 of it).
+ * @returns the flag SVG, or `null` for an unknown locale.
+ */
+export function Flag({ code, size = 20 }) {
+    return flagNode(code, size);
+}
+/**
+ * A ready-made `renderFlag` for {@link LanguagePicker}: `<LanguagePicker renderFlag={localeFlag} />`.
+ * Returns the built-in flag for the locale, or `null` for locales without one (the picker then
+ * shows just the label).
+ *
+ * @param locale - the locale code to draw a flag for.
+ * @returns the flag node, or `null`.
+ */
+export function localeFlag(locale) {
+    return flagNode(locale, 20);
+}

package/dist/react/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * React adapter for i18nkit (the `./react` entry). Framework-agnostic React: a provider, hooks,
+ * an accessible language picker, and a locale-aware link - none of which import `next/*`, so they
+ * work in any React setup. Pair with the core `@daanvandenbergh/i18nkit` entry (the `I18n` class)
+ * and, for the picker, `import "@daanvandenbergh/i18nkit/styles.css"`.
+ */
+export { I18nProvider, useI18n, useLocale, useSetLocale, useTranslator, type I18nProviderProps, } from "./provider.js";
+export { LanguagePicker, type LanguagePickerProps } from "./LanguagePicker.js";
+export { Flag, localeFlag } from "./flags.js";
+export { LocaleLink, type LocaleLinkProps } from "./LocaleLink.js";

package/dist/react/index.js

@@ -0,0 +1,10 @@
+/**
+ * React adapter for i18nkit (the `./react` entry). Framework-agnostic React: a provider, hooks,
+ * an accessible language picker, and a locale-aware link - none of which import `next/*`, so they
+ * work in any React setup. Pair with the core `@daanvandenbergh/i18nkit` entry (the `I18n` class)
+ * and, for the picker, `import "@daanvandenbergh/i18nkit/styles.css"`.
+ */
+export { I18nProvider, useI18n, useLocale, useSetLocale, useTranslator, } from "./provider.js";
+export { LanguagePicker } from "./LanguagePicker.js";
+export { Flag, localeFlag } from "./flags.js";
+export { LocaleLink } from "./LocaleLink.js";

package/dist/react/provider.d.ts

@@ -0,0 +1,58 @@
+import type { ReactElement, ReactNode } from "react";
+import type { I18n, Translator } from "../i18n/index.js";
+/**
+ * Props for {@link I18nProvider}.
+ *
+ * @typeParam L - the app's locale union (inferred from `i18n`).
+ */
+export interface I18nProviderProps<L extends string> {
+    /** The app's {@link I18n} instance. */
+    i18n: I18n<L>;
+    /** The active locale for this render (the single source of truth). */
+    locale: L;
+    /**
+     * Called after the locale cookie is written when the user picks a new locale. Do the app's
+     * navigation/refresh here (e.g. `router.refresh()`, `location.reload()`). Optional.
+     */
+    onChange?: ((next: L) => void) | undefined;
+    /** The subtree that can read the locale. */
+    children: ReactNode;
+}
+/**
+ * Provide the active locale to a subtree.
+ *
+ * @typeParam L - the app's locale union.
+ * @param props - see {@link I18nProviderProps}.
+ * @returns the provider element.
+ */
+export declare function I18nProvider<L extends string>({ i18n, locale, onChange, children, }: I18nProviderProps<L>): ReactElement;
+/**
+ * The active {@link I18n} instance. Handy for reading `i18n.list`, routing helpers, etc. in a
+ * component. Pass your `Locale` union as the type argument to recover the precise instance type.
+ *
+ * @typeParam L - the app's locale union (defaults to `string`).
+ * @returns the instance.
+ */
+export declare function useI18n<L extends string = string>(): I18n<L>;
+/**
+ * The active locale. Pass your `Locale` union as the type argument for a precise return type.
+ *
+ * @typeParam L - the app's locale union (defaults to `string`).
+ * @returns the active locale.
+ */
+export declare function useLocale<L extends string = string>(): L;
+/**
+ * A {@link Translator} bound to the active locale: `const translate = useTranslator();`, then
+ * `translate(TX.title)`.
+ *
+ * @typeParam L - the app's locale union (defaults to `string`).
+ * @returns the translator.
+ */
+export declare function useTranslator<L extends string = string>(): Translator<L>;
+/**
+ * The locale setter: persists the choice to the cookie and runs the provider's `onChange`.
+ *
+ * @typeParam L - the app's locale union (defaults to `string`).
+ * @returns a function that switches the active locale.
+ */
+export declare function useSetLocale<L extends string = string>(): (next: L) => void;

package/dist/react/provider.js

@@ -0,0 +1,94 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The React seam. `I18nProvider` carries the active locale (resolved however the app likes -
+ * from the URL, a cookie, or the server) down to descendants, which read it via {@link useLocale}
+ * / {@link useTranslator} and change it via {@link useSetLocale}.
+ *
+ * This layer is framework-agnostic: it never imports `next/*`. Navigation on locale change is the
+ * app's concern, injected through the provider's `onChange` prop (e.g. a Next `router.refresh`, a
+ * React Router navigate, or a full reload). The provider does persist the choice to the configured
+ * cookie first, so a server resolver sees it before any navigation the app triggers.
+ */
+import { createContext, useContext, useMemo, useRef } from "react";
+const I18nContext = createContext(null);
+/**
+ * Provide the active locale to a subtree.
+ *
+ * @typeParam L - the app's locale union.
+ * @param props - see {@link I18nProviderProps}.
+ * @returns the provider element.
+ */
+export function I18nProvider({ i18n, locale, onChange, children, }) {
+    // Hold `onChange` in a ref so an inline prop (a new identity each render) does not bust the
+    // memo below and re-render every consumer.
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const value = useMemo(() => ({
+        i18n: i18n,
+        locale,
+        translator: i18n.translator(locale),
+        setLocale: (next) => {
+            if (next === locale) {
+                return;
+            }
+            if (typeof document !== "undefined") {
+                // Encode the value defensively; a valid BCP-47 locale is unchanged, but an app
+                // may forward unvalidated input, and a raw `;` would inject cookie attributes.
+                document.cookie = `${i18n.cookie}=${encodeURIComponent(next)}; path=/; max-age=31536000; samesite=lax`;
+            }
+            onChangeRef.current?.(next);
+        },
+    }), [i18n, locale]);
+    return _jsx(I18nContext.Provider, { value: value, children: children });
+}
+/**
+ * Read the i18n context, throwing a clear error when used outside an {@link I18nProvider}.
+ *
+ * @returns the context value.
+ */
+function useI18nContext() {
+    const ctx = useContext(I18nContext);
+    if (!ctx) {
+        throw new Error("i18nkit: hooks must be used within <I18nProvider>.");
+    }
+    return ctx;
+}
+/**
+ * The active {@link I18n} instance. Handy for reading `i18n.list`, routing helpers, etc. in a
+ * component. Pass your `Locale` union as the type argument to recover the precise instance type.
+ *
+ * @typeParam L - the app's locale union (defaults to `string`).
+ * @returns the instance.
+ */
+export function useI18n() {
+    return useI18nContext().i18n;
+}
+/**
+ * The active locale. Pass your `Locale` union as the type argument for a precise return type.
+ *
+ * @typeParam L - the app's locale union (defaults to `string`).
+ * @returns the active locale.
+ */
+export function useLocale() {
+    return useI18nContext().locale;
+}
+/**
+ * A {@link Translator} bound to the active locale: `const translate = useTranslator();`, then
+ * `translate(TX.title)`.
+ *
+ * @typeParam L - the app's locale union (defaults to `string`).
+ * @returns the translator.
+ */
+export function useTranslator() {
+    return useI18nContext().translator;
+}
+/**
+ * The locale setter: persists the choice to the cookie and runs the provider's `onChange`.
+ *
+ * @typeParam L - the app's locale union (defaults to `string`).
+ * @returns a function that switches the active locale.
+ */
+export function useSetLocale() {
+    return useI18nContext().setLocale;
+}

package/dist/react/styles.css

@@ -0,0 +1,150 @@
+/*
+ * Styles for <LanguagePicker>. Import once in your app:
+ *   import "@daanvandenbergh/i18nkit/styles.css";
+ *
+ * Every color is a CSS custom property with a sensible fallback, so the picker looks right with
+ * zero configuration and restyles by setting `--i18nkit-*` anywhere up the tree (e.g. on :root):
+ *   :root { --i18nkit-color-primary: #7c3aed; --i18nkit-color-surface: #0b1220; }
+ */
+
+.i18nkit-picker {
+    position: relative;
+    display: inline-block;
+    flex-shrink: 0;
+    font-family: inherit;
+}
+
+.i18nkit-picker *,
+.i18nkit-picker *::before,
+.i18nkit-picker *::after {
+    box-sizing: border-box;
+}
+
+/* Trigger: a compact bordered chip showing the active locale + a caret. */
+.i18nkit-picker__trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    height: 38px;
+    padding: 0 12px;
+    border: 1px solid var(--i18nkit-color-border, #e2e8f0);
+    border-radius: 10px;
+    background: var(--i18nkit-color-surface, #ffffff);
+    color: var(--i18nkit-color-ink, #1a1a1a);
+    cursor: pointer;
+    font: inherit;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1;
+    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+
+.i18nkit-picker__trigger:hover {
+    background: var(--i18nkit-color-hover, #f4f7fa);
+}
+
+.i18nkit-picker__trigger:focus-visible {
+    outline: none;
+    border-color: var(--i18nkit-color-primary, #2563eb);
+    box-shadow: 0 0 0 3px var(--i18nkit-color-ring, rgba(37, 99, 235, 0.18));
+}
+
+.i18nkit-picker__flag {
+    display: inline-flex;
+    align-items: center;
+    line-height: 0;
+}
+
+.i18nkit-picker__current {
+    white-space: nowrap;
+}
+
+.i18nkit-picker__caret {
+    color: var(--i18nkit-color-muted, #64748b);
+    transition: transform 0.15s ease;
+}
+
+.i18nkit-picker__caret--open {
+    transform: rotate(180deg);
+}
+
+/* Dropdown panel, right-aligned under the trigger. */
+.i18nkit-picker__panel {
+    position: absolute;
+    top: calc(100% + 8px);
+    right: 0;
+    min-width: 200px;
+    padding: 6px;
+    background: var(--i18nkit-color-surface, #ffffff);
+    border: 1px solid var(--i18nkit-color-border, #e2e8f0);
+    border-radius: 13px;
+    box-shadow: var(--i18nkit-shadow, 0 16px 38px rgba(11, 27, 54, 0.16));
+    z-index: 80;
+    animation: i18nkit-popdown 0.14s ease;
+}
+
+.i18nkit-picker__heading {
+    padding: 9px 10px 7px;
+    font-size: 10.5px;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--i18nkit-color-muted, #9aa5b5);
+}
+
+.i18nkit-picker__item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    padding: 9px 10px;
+    border: none;
+    border-radius: 9px;
+    background: transparent;
+    color: var(--i18nkit-color-ink, #1a1a1a);
+    cursor: pointer;
+    font: inherit;
+    font-size: 13.5px;
+    font-weight: 500;
+    text-align: left;
+}
+
+.i18nkit-picker__item:hover {
+    background: var(--i18nkit-color-hover, #f4f7fa);
+}
+
+.i18nkit-picker__item:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--i18nkit-color-primary, #2563eb) inset;
+}
+
+.i18nkit-picker__label {
+    flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+}
+
+.i18nkit-picker__check {
+    color: var(--i18nkit-color-primary, #2563eb);
+}
+
+@keyframes i18nkit-popdown {
+    from {
+        opacity: 0;
+        transform: translateY(-6px) scale(0.985);
+    }
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .i18nkit-picker__panel {
+        animation: none;
+    }
+    .i18nkit-picker__caret,
+    .i18nkit-picker__trigger {
+        transition: none;
+    }
+}