@repraze/kernelkit 0.1.0-alpha.4 → 0.1.0-alpha.5

package/dist/hooks/use-time-format.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-time-format.js","sourceRoot":"","sources":["../../src/hooks/use-time-format.ts"],"names":[],"mappings":"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"}

package/dist/lib/color.d.ts

@@ -6,9 +6,13 @@
  * - `--c-tint` opaque wash behind foreground text
  * - `--c-fill` / `--c-fill-fg` vivid solid surface and its text (TermiColor "fills are the brand":
  *   in light mode the text tier is darkened for contrast, the fill tier stays vivid)
+ * - `--c-soft-text` text on a wash of its own color (soft variants, soft status surfaces): `--c` mixed 25%
+ *   toward the foreground with its chroma restored, which keeps hue and saturation and passes WCAG AA
+ *   4.5:1 for every color, in light, dark and both hc modes, on background, card and popover (plain `--c`
+ *   on its own wash fell to ~3.6)
  *
  * Spread `colorVariants` into a cva `variants.color` map, then write variants against the vars
- * (`bg-(--c) text-(--c-fg)`, `bg-(--c)/12 text-(--c)`, …).
+ * (`bg-(--c) text-(--c-fg)`, `bg-(--c)/12 text-(--c-soft-text)`, …).
  */
 export declare const STATUS_COLORS: readonly ["danger", "warning", "success", "info"];
 export declare const HUES: readonly ["red", "orange", "yellow", "green", "cyan", "blue", "purple", "pink"];

package/dist/lib/color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/lib/color.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,eAAO,MAAM,aAAa,mDAAoD,CAAC;AAC/E,eAAO,MAAM,IAAI,iFAAkF,CAAC;AACpG,eAAO,MAAM,MAAM,+IAA6D,CAAC;AAEjF,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAG5C,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAmB/C,CAAC;AAEF,oFAAoF;AACpF,eAAO,MAAM,aAAa,yIAAwC,CAAC;AAEnE,uEAAuE;AACvE,eAAO,MAAM,aAAa,wDAAyD,CAAC;AACpF,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAEzD,yCAAyC;AACzC,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,WAAW,GAAG,aAAa,CAAC;AAiBvE,uDAAuD;AACvD,wBAAgB,WAAW,CACvB,OAAO,EAAE,WAAW,GAAG,gBAAgB,GAAG,IAAI,GAAG,SAAS,EAC1D,KAAK,EAAE,KAAK,GAAG,IAAI,GAAG,SAAS,EAC/B,QAAQ,GAAE,WAAqB,GAChC;IAAC,OAAO,EAAE,WAAW,CAAC;IAAC,KAAK,EAAE,KAAK,CAAA;CAAC,CAItC"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/lib/color.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,eAAO,MAAM,aAAa,mDAAoD,CAAC;AAC/E,eAAO,MAAM,IAAI,iFAAkF,CAAC;AACpG,eAAO,MAAM,MAAM,+IAA6D,CAAC;AAEjF,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAiC5C,eAAO,MAAM,aAAa,EAErB,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AAE3B,oFAAoF;AACpF,eAAO,MAAM,aAAa,yIAAwC,CAAC;AAEnE,uEAAuE;AACvE,eAAO,MAAM,aAAa,wDAAyD,CAAC;AACpF,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAEzD,yCAAyC;AACzC,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,WAAW,GAAG,aAAa,CAAC;AAiBvE,uDAAuD;AACvD,wBAAgB,WAAW,CACvB,OAAO,EAAE,WAAW,GAAG,gBAAgB,GAAG,IAAI,GAAG,SAAS,EAC1D,KAAK,EAAE,KAAK,GAAG,IAAI,GAAG,SAAS,EAC/B,QAAQ,GAAE,WAAqB,GAChC;IAAC,OAAO,EAAE,WAAW,CAAC;IAAC,KAAK,EAAE,KAAK,CAAA;CAAC,CAItC"}

package/dist/lib/color.js

@@ -6,15 +6,26 @@
  * - `--c-tint` opaque wash behind foreground text
  * - `--c-fill` / `--c-fill-fg` vivid solid surface and its text (TermiColor "fills are the brand":
  *   in light mode the text tier is darkened for contrast, the fill tier stays vivid)
+ * - `--c-soft-text` text on a wash of its own color (soft variants, soft status surfaces): `--c` mixed 25%
+ *   toward the foreground with its chroma restored, which keeps hue and saturation and passes WCAG AA
+ *   4.5:1 for every color, in light, dark and both hc modes, on background, card and popover (plain `--c`
+ *   on its own wash fell to ~3.6)
  *
  * Spread `colorVariants` into a cva `variants.color` map, then write variants against the vars
- * (`bg-(--c) text-(--c-fg)`, `bg-(--c)/12 text-(--c)`, …).
+ * (`bg-(--c) text-(--c-fg)`, `bg-(--c)/12 text-(--c-soft-text)`, …).
  */
 export const STATUS_COLORS = ["danger", "warning", "success", "info"];
 export const HUES = ["red", "orange", "yellow", "green", "cyan", "blue", "purple", "pink"];
 export const COLORS = ["neutral", "primary", ...STATUS_COLORS, ...HUES];
+/**
+ * Derived from `--c` on the same element, so it is set alongside every color (a :root rule would see no `--c`).
+ * The mix toward the (neutral) foreground sets the lightness for contrast but also scales chroma by 0.75, so
+ * where relative color syntax is supported the chroma is multiplied back by 1/0.75: same lightness and hue,
+ * the original saturation (≥ 5.08:1 everywhere, vs ≥ 5.68 for the plain mix kept as the fallback).
+ */
+const SOFT_TEXT = "[--c-soft-text:color-mix(in_oklab,var(--c)_75%,var(--foreground))] supports-[color:oklch(from_red_l_c_h)]:[--c-soft-text:oklch(from_color-mix(in_oklab,var(--c)_75%,var(--foreground))_l_calc(c*1.333)_h)]";
 // Literal strings on purpose: Tailwind only generates classes it can read in the source.
-export const colorVariants = {
+const baseColorVariants = {
     neutral: "[--c:var(--foreground)] [--c-fg:var(--background)] [--c-tint:var(--secondary)] [--c-fill:var(--foreground)] [--c-fill-fg:var(--background)]",
     primary: "[--c:var(--primary-text)] [--c-fg:var(--tc-on-accent)] [--c-tint:var(--accent)] [--c-fill:var(--primary)] [--c-fill-fg:var(--primary-foreground)]",
     danger: "[--c:var(--danger)] [--c-fg:var(--danger-foreground)] [--c-tint:var(--danger-tint)] [--c-fill:var(--tc-red-fill)] [--c-fill-fg:var(--tc-red-on-fill)]",
@@ -30,6 +41,7 @@ export const colorVariants = {
     purple: "[--c:var(--tc-purple)] [--c-fg:var(--tc-purple-on)] [--c-tint:var(--tc-purple-tint)] [--c-fill:var(--tc-purple-fill)] [--c-fill-fg:var(--tc-purple-on-fill)]",
     pink: "[--c:var(--tc-pink)] [--c-fg:var(--tc-pink-on)] [--c-tint:var(--tc-pink-tint)] [--c-fill:var(--tc-pink-fill)] [--c-fill-fg:var(--tc-pink-on-fill)]",
 };
+export const colorVariants = Object.fromEntries(Object.entries(baseColorVariants).map(([color, vars]) => [color, `${vars} ${SOFT_TEXT}`]));
 /** Every color except neutral: the ones whose outline/ghost variants are tinted. */
 export const TINTED_COLORS = COLORS.filter((c) => c !== "neutral");
 /** Fill styles shared by Button, Badge, Toggle… (GUIDELINES.md §2). */

package/dist/lib/color.js.map

@@ -1 +1 @@
-{"version":3,"file":"color.js","sourceRoot":"","sources":["../../src/lib/color.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,CAAU,CAAC;AAC/E,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAC;AACpG,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,GAAG,aAAa,EAAE,GAAG,IAAI,CAAU,CAAC;AAIjF,yFAAyF;AACzF,MAAM,CAAC,MAAM,aAAa,GAA0B;IAChD,OAAO,EACH,6IAA6I;IACjJ,OAAO,EACH,mJAAmJ;IACvJ,MAAM,EAAE,uJAAuJ;IAC/J,OAAO,EACH,gKAAgK;IACpK,OAAO,EACH,8JAA8J;IAClK,IAAI,EAAE,mJAAmJ;IACzJ,GAAG,EAAE,+IAA+I;IACpJ,MAAM,EAAE,8JAA8J;IACtK,MAAM,EAAE,8JAA8J;IACtK,KAAK,EAAE,yJAAyJ;IAChK,IAAI,EAAE,oJAAoJ;IAC1J,IAAI,EAAE,oJAAoJ;IAC1J,MAAM,EAAE,8JAA8J;IACtK,IAAI,EAAE,oJAAoJ;CAC7J,CAAC;AAEF,oFAAoF;AACpF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC;AAEnE,uEAAuE;AACvE,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,CAAU,CAAC;AAMpF,MAAM,OAAO,GAAoE;IAC7E,OAAO,EAAE,EAAC,OAAO,EAAE,OAAO,EAAC;IAC3B,SAAS,EAAE,EAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAC;IAC/C,WAAW,EAAE,EAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAC;CAClD,CAAC;AAEF,oGAAoG;AACpG,MAAM,aAAa,GAA+B;IAC9C,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,SAAS;CACnB,CAAC;AAEF,uDAAuD;AACvD,MAAM,UAAU,WAAW,CACvB,OAA0D,EAC1D,KAA+B,EAC/B,WAAwB,OAAO;IAE/B,MAAM,KAAK,GAAG,OAAO,IAAI,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,OAA2B,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAC/F,MAAM,CAAC,GAAG,KAAK,EAAE,OAAO,IAAK,OAA0C,IAAI,QAAQ,CAAC;IACpF,OAAO,EAAC,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,IAAI,KAAK,EAAE,KAAK,IAAI,aAAa,CAAC,CAAC,CAAC,EAAC,CAAC;AAC1E,CAAC"}
+{"version":3,"file":"color.js","sourceRoot":"","sources":["../../src/lib/color.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,CAAU,CAAC;AAC/E,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAC;AACpG,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,GAAG,aAAa,EAAE,GAAG,IAAI,CAAU,CAAC;AAIjF;;;;;GAKG;AACH,MAAM,SAAS,GACX,4MAA4M,CAAC;AAEjN,yFAAyF;AACzF,MAAM,iBAAiB,GAA0B;IAC7C,OAAO,EACH,6IAA6I;IACjJ,OAAO,EACH,mJAAmJ;IACvJ,MAAM,EAAE,uJAAuJ;IAC/J,OAAO,EACH,gKAAgK;IACpK,OAAO,EACH,8JAA8J;IAClK,IAAI,EAAE,mJAAmJ;IACzJ,GAAG,EAAE,+IAA+I;IACpJ,MAAM,EAAE,8JAA8J;IACtK,MAAM,EAAE,8JAA8J;IACtK,KAAK,EAAE,yJAAyJ;IAChK,IAAI,EAAE,oJAAoJ;IAC1J,IAAI,EAAE,oJAAoJ;IAC1J,MAAM,EAAE,8JAA8J;IACtK,IAAI,EAAE,oJAAoJ;CAC7J,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,WAAW,CAC3C,MAAM,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,GAAG,IAAI,IAAI,SAAS,EAAE,CAAC,CAAC,CACnE,CAAC;AAE3B,oFAAoF;AACpF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC;AAEnE,uEAAuE;AACvE,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,CAAU,CAAC;AAMpF,MAAM,OAAO,GAAoE;IAC7E,OAAO,EAAE,EAAC,OAAO,EAAE,OAAO,EAAC;IAC3B,SAAS,EAAE,EAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAC;IAC/C,WAAW,EAAE,EAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAC;CAClD,CAAC;AAEF,oGAAoG;AACpG,MAAM,aAAa,GAA+B;IAC9C,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,SAAS;CACnB,CAAC;AAEF,uDAAuD;AACvD,MAAM,UAAU,WAAW,CACvB,OAA0D,EAC1D,KAA+B,EAC/B,WAAwB,OAAO;IAE/B,MAAM,KAAK,GAAG,OAAO,IAAI,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,OAA2B,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAC/F,MAAM,CAAC,GAAG,KAAK,EAAE,OAAO,IAAK,OAA0C,IAAI,QAAQ,CAAC;IACpF,OAAO,EAAC,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,IAAI,KAAK,EAAE,KAAK,IAAI,aAAa,CAAC,CAAC,CAAC,EAAC,CAAC;AAC1E,CAAC"}

package/dist/lib/recipes.d.ts

@@ -35,12 +35,13 @@ export declare const placeholderFill = "bg-foreground/10 hc:bg-border";
 export declare const selectedRow = "bg-accent text-accent-foreground shadow-[inset_2px_0_0_var(--primary-text)]";
 /**
  * Status surface shared by Alert and Callout (§2): one `soft` / `outline` axis, same values in both.
- * Expects a color variant (`--c`, `--c-tint`) on the same element. Neutral swaps the hue border for the
+ * Expects a color variant (`--c`, `--c-tint`) on the same element. Text, icons and links on it use
+ * `--c-text`, which each variant sets to the color that passes 4.5:1 on that surface. Neutral swaps the hue border for the
  * plain border on a card surface (`statusSurfaceNeutral`).
  */
 export declare const statusSurface: {
-    readonly soft: "border-(--c)/30 bg-(--c-tint) hc:border-(--c)";
-    readonly outline: "border-(--c)/50 bg-card hc:border-(--c)";
+    readonly soft: "border-(--c)/30 bg-(--c-tint) hc:border-(--c) [--c-text:var(--c-soft-text)]";
+    readonly outline: "border-(--c)/50 bg-card hc:border-(--c) [--c-text:var(--c)]";
 };
-export declare const statusSurfaceNeutral = "border-border bg-card hc:border-border";
+export declare const statusSurfaceNeutral = "border-border bg-card hc:border-border [--c-text:var(--c)]";
 //# sourceMappingURL=recipes.d.ts.map

package/dist/lib/recipes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"recipes.d.ts","sourceRoot":"","sources":["../../src/lib/recipes.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,wDAAwD;AACxD,eAAO,MAAM,SAAS,2FAA2F,CAAC;AAElH,2CAA2C;AAC3C,eAAO,MAAM,WAAW,gHACyF,CAAC;AAElH,iGAAiG;AACjG,eAAO,MAAM,YAAY,qNAC6L,CAAC;AAEvN,iFAAiF;AACjF,eAAO,MAAM,YAAY,+GACuF,CAAC;AAEjH,oCAAoC;AACpC,eAAO,MAAM,WAAW,yWACkV,CAAC;AAE3W;;;;GAIG;AACH,eAAO,MAAM,YAAY,8JACsI,CAAC;AAEhK,iFAAiF;AACjF,eAAO,MAAM,QAAQ,6nBAAmf,CAAC;AAEzgB,0CAA0C;AAC1C,eAAO,MAAM,SAAS,0DAA0D,CAAC;AAEjF,wCAAwC;AACxC,eAAO,MAAM,aAAa,8BAA8B,CAAC;AAEzD,8DAA8D;AAC9D,eAAO,MAAM,QAAQ,0LACsK,CAAC;AAE5L,4EAA4E;AAC5E,eAAO,MAAM,OAAO,4CAA4C,CAAC;AAEjE,iHAAiH;AACjH,eAAO,MAAM,eAAe,kCAAkC,CAAC;AAE/D,yGAAyG;AACzG,eAAO,MAAM,WAAW,gFAAgF,CAAC;AAEzG;;;;GAIG;AACH,eAAO,MAAM,aAAa;;;CAKhB,CAAC;AAEX,eAAO,MAAM,oBAAoB,2CAA2C,CAAC"}
+{"version":3,"file":"recipes.d.ts","sourceRoot":"","sources":["../../src/lib/recipes.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,wDAAwD;AACxD,eAAO,MAAM,SAAS,2FAA2F,CAAC;AAElH,2CAA2C;AAC3C,eAAO,MAAM,WAAW,gHACyF,CAAC;AAElH,iGAAiG;AACjG,eAAO,MAAM,YAAY,qNAC6L,CAAC;AAEvN,iFAAiF;AACjF,eAAO,MAAM,YAAY,+GACuF,CAAC;AAEjH,oCAAoC;AACpC,eAAO,MAAM,WAAW,yWACkV,CAAC;AAE3W;;;;GAIG;AACH,eAAO,MAAM,YAAY,8JACsI,CAAC;AAEhK,iFAAiF;AACjF,eAAO,MAAM,QAAQ,6nBAAmf,CAAC;AAEzgB,0CAA0C;AAC1C,eAAO,MAAM,SAAS,0DAA0D,CAAC;AAEjF,wCAAwC;AACxC,eAAO,MAAM,aAAa,8BAA8B,CAAC;AAEzD,8DAA8D;AAC9D,eAAO,MAAM,QAAQ,0LACsK,CAAC;AAE5L,4EAA4E;AAC5E,eAAO,MAAM,OAAO,4CAA4C,CAAC;AAEjE,iHAAiH;AACjH,eAAO,MAAM,eAAe,kCAAkC,CAAC;AAE/D,yGAAyG;AACzG,eAAO,MAAM,WAAW,gFAAgF,CAAC;AAEzG;;;;;GAKG;AACH,eAAO,MAAM,aAAa;;;CAMhB,CAAC;AAEX,eAAO,MAAM,oBAAoB,+DAA+D,CAAC"}

package/dist/lib/recipes.js

@@ -35,14 +35,16 @@ export const placeholderFill = "bg-foreground/10 hc:bg-border";
 export const selectedRow = "bg-accent text-accent-foreground shadow-[inset_2px_0_0_var(--primary-text)]";
 /**
  * Status surface shared by Alert and Callout (§2): one `soft` / `outline` axis, same values in both.
- * Expects a color variant (`--c`, `--c-tint`) on the same element. Neutral swaps the hue border for the
+ * Expects a color variant (`--c`, `--c-tint`) on the same element. Text, icons and links on it use
+ * `--c-text`, which each variant sets to the color that passes 4.5:1 on that surface. Neutral swaps the hue border for the
  * plain border on a card surface (`statusSurfaceNeutral`).
  */
 export const statusSurface = {
-    // status tint behind foreground text; the hue lives in the border, icon and accents (TermiColor rule)
-    soft: "border-(--c)/30 bg-(--c-tint) hc:border-(--c)",
+    // status tint behind foreground text; the hue lives in the border, icon and accents (TermiColor rule).
+    // `--c-text` is the hue for text, icons and links on it: on the tint it is the soft text (4.5:1)
+    soft: "border-(--c)/30 bg-(--c-tint) hc:border-(--c) [--c-text:var(--c-soft-text)]",
     // no wash: card surface with a hue border, for dense layouts
-    outline: "border-(--c)/50 bg-card hc:border-(--c)",
+    outline: "border-(--c)/50 bg-card hc:border-(--c) [--c-text:var(--c)]",
 };
-export const statusSurfaceNeutral = "border-border bg-card hc:border-border";
+export const statusSurfaceNeutral = "border-border bg-card hc:border-border [--c-text:var(--c)]";
 //# sourceMappingURL=recipes.js.map

package/dist/lib/recipes.js.map

@@ -1 +1 @@
-{"version":3,"file":"recipes.js","sourceRoot":"","sources":["../../src/lib/recipes.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,wDAAwD;AACxD,MAAM,CAAC,MAAM,SAAS,GAAG,wFAAwF,CAAC;AAElH,2CAA2C;AAC3C,MAAM,CAAC,MAAM,WAAW,GACpB,6GAA6G,CAAC;AAElH,iGAAiG;AACjG,MAAM,CAAC,MAAM,YAAY,GACrB,kNAAkN,CAAC;AAEvN,iFAAiF;AACjF,MAAM,CAAC,MAAM,YAAY,GACrB,4GAA4G,CAAC;AAEjH,oCAAoC;AACpC,MAAM,CAAC,MAAM,WAAW,GACpB,sWAAsW,CAAC;AAE3W;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GACrB,2JAA2J,CAAC;AAEhK,iFAAiF;AACjF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,YAAY,ieAAie,CAAC;AAEzgB,0CAA0C;AAC1C,MAAM,CAAC,MAAM,SAAS,GAAG,uDAAuD,CAAC;AAEjF,wCAAwC;AACxC,MAAM,CAAC,MAAM,aAAa,GAAG,2BAA2B,CAAC;AAEzD,8DAA8D;AAC9D,MAAM,CAAC,MAAM,QAAQ,GACjB,uLAAuL,CAAC,CAAC,0CAA0C;AAEvO,4EAA4E;AAC5E,MAAM,CAAC,MAAM,OAAO,GAAG,yCAAyC,CAAC;AAEjE,iHAAiH;AACjH,MAAM,CAAC,MAAM,eAAe,GAAG,+BAA+B,CAAC;AAE/D,yGAAyG;AACzG,MAAM,CAAC,MAAM,WAAW,GAAG,6EAA6E,CAAC;AAEzG;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IACzB,sGAAsG;IACtG,IAAI,EAAE,+CAA+C;IACrD,6DAA6D;IAC7D,OAAO,EAAE,yCAAyC;CAC5C,CAAC;AAEX,MAAM,CAAC,MAAM,oBAAoB,GAAG,wCAAwC,CAAC"}
+{"version":3,"file":"recipes.js","sourceRoot":"","sources":["../../src/lib/recipes.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,wDAAwD;AACxD,MAAM,CAAC,MAAM,SAAS,GAAG,wFAAwF,CAAC;AAElH,2CAA2C;AAC3C,MAAM,CAAC,MAAM,WAAW,GACpB,6GAA6G,CAAC;AAElH,iGAAiG;AACjG,MAAM,CAAC,MAAM,YAAY,GACrB,kNAAkN,CAAC;AAEvN,iFAAiF;AACjF,MAAM,CAAC,MAAM,YAAY,GACrB,4GAA4G,CAAC;AAEjH,oCAAoC;AACpC,MAAM,CAAC,MAAM,WAAW,GACpB,sWAAsW,CAAC;AAE3W;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GACrB,2JAA2J,CAAC;AAEhK,iFAAiF;AACjF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,YAAY,ieAAie,CAAC;AAEzgB,0CAA0C;AAC1C,MAAM,CAAC,MAAM,SAAS,GAAG,uDAAuD,CAAC;AAEjF,wCAAwC;AACxC,MAAM,CAAC,MAAM,aAAa,GAAG,2BAA2B,CAAC;AAEzD,8DAA8D;AAC9D,MAAM,CAAC,MAAM,QAAQ,GACjB,uLAAuL,CAAC,CAAC,0CAA0C;AAEvO,4EAA4E;AAC5E,MAAM,CAAC,MAAM,OAAO,GAAG,yCAAyC,CAAC;AAEjE,iHAAiH;AACjH,MAAM,CAAC,MAAM,eAAe,GAAG,+BAA+B,CAAC;AAE/D,yGAAyG;AACzG,MAAM,CAAC,MAAM,WAAW,GAAG,6EAA6E,CAAC;AAEzG;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IACzB,uGAAuG;IACvG,iGAAiG;IACjG,IAAI,EAAE,6EAA6E;IACnF,6DAA6D;IAC7D,OAAO,EAAE,6DAA6D;CAChE,CAAC;AAEX,MAAM,CAAC,MAAM,oBAAoB,GAAG,4DAA4D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@repraze/kernelkit",
-    "version": "0.1.0-alpha.4",
+    "version": "0.1.0-alpha.5",
     "description": "Modern, techy React components: every shadcn component on Base UI, Tailwind v4 and cva, themed by TermiColor.",
     "keywords": [
         "react",

package/src/components/alert-dialog.tsx

@@ -93,7 +93,10 @@ function AlertDialogMedia({
             data-color={color}
             className={cn(
                 "mb-2 inline-flex size-10 items-center justify-center rounded-lg border border-border bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-5",
-                color && [colorVariants[color], "border-(--c)/40 bg-(--c-tint) text-foreground *:[svg]:text-(--c)"],
+                color && [
+                    colorVariants[color],
+                    "border-(--c)/40 bg-(--c-tint) text-foreground *:[svg]:text-(--c-soft-text)",
+                ],
                 className,
             )}
             {...props}

package/src/components/alert.tsx

@@ -17,8 +17,8 @@ const alertCva = cva(
         variants: {
             color: colorVariants,
             variant: {
-                soft: [statusSurface.soft, "text-foreground *:[svg]:text-(--c)"],
-                outline: [statusSurface.outline, "text-card-foreground *:[svg]:text-(--c)"],
+                soft: [statusSurface.soft, "text-foreground *:[svg]:text-(--c-text)"],
+                outline: [statusSurface.outline, "text-card-foreground *:[svg]:text-(--c-text)"],
             },
         },
         compoundVariants: [
@@ -73,7 +73,7 @@ function AlertTitle({className, ...props}: React.ComponentProps<"div">) {
             data-slot="alert-title"
             className={cn(
                 heading,
-                "group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-(--c)",
+                "group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-(--c-text)",
                 className,
             )}
             {...props}

package/src/components/badge.tsx

@@ -25,7 +25,7 @@ const badgeCva = cva(
             color: colorVariants,
             variant: {
                 solid: "bg-(--c-fill) text-(--c-fill-fg) [a]:hover:bg-(--c-fill)/85",
-                soft: "bg-(--c)/12 text-(--c) dark:bg-(--c)/20 [a]:hover:bg-(--c)/20 dark:[a]:hover:bg-(--c)/30",
+                soft: "bg-(--c)/12 text-(--c-soft-text) dark:bg-(--c)/20 [a]:hover:bg-(--c)/20 dark:[a]:hover:bg-(--c)/30",
                 outline: "border-border text-foreground [a]:hover:bg-hover",
                 ghost: "text-foreground [a]:hover:bg-hover",
                 link: "text-(--c) underline-offset-4 hover:underline",

package/src/components/button.tsx

@@ -27,7 +27,7 @@ const buttonCva = cva(
             color: colorVariants,
             variant: {
                 solid: "bg-(--c-fill) text-(--c-fill-fg) hover:bg-(--c-fill)/85 aria-expanded:bg-(--c-fill)/85",
-                soft: "bg-(--c)/12 text-(--c) hover:bg-(--c)/20 aria-expanded:bg-(--c)/20 dark:bg-(--c)/20 dark:hover:bg-(--c)/30",
+                soft: "bg-(--c)/12 text-(--c-soft-text) hover:bg-(--c)/20 aria-expanded:bg-(--c)/20 dark:bg-(--c)/20 dark:hover:bg-(--c)/30",
                 outline: "border-input bg-transparent hover:bg-hover aria-expanded:bg-hover",
                 ghost: "text-foreground hover:bg-hover aria-expanded:bg-hover",
                 link: "text-(--c) underline-offset-4 hover:underline",

package/src/components/calendar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import {Button, buttonVariants} from "@repraze/kernelkit/components/button";
+import {useLocale, weekStart} from "@repraze/kernelkit/components/locale";
 import {cn} from "cn";
 import {ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon} from "lucide-react";
 import * as React from "react";
@@ -13,6 +14,37 @@ import {type DayButton, DayPicker, getDefaultClassNames, type Locale} from "reac
  * - today: primary dot under the number + medium weight
  * - outside days: muted text; disabled: muted text + line-through
  */
+/** DayPicker props minus `locale`, keeping the `mode` union intact (a plain Omit would collapse it). */
+type CalendarBaseProps =
+    React.ComponentProps<typeof DayPicker> extends infer P ? (P extends unknown ? Omit<P, "locale"> : never) : never;
+
+/** DayPicker formatters from Intl: the caption, weekday names, day numbers (native digits) and dropdowns. */
+function intlFormatters(locale: string) {
+    try {
+        const caption = new Intl.DateTimeFormat(locale, {month: "long", year: "numeric"});
+        // "short" is the full name in some languages (Arabic): fall back to "narrow" when it won't fit a cell
+        const short = new Intl.DateTimeFormat(locale, {weekday: "short"});
+        const long = Array.from({length: 7}, (_, i) => short.format(new Date(2000, 0, 2 + i))).some(
+            (d) => d.length > 4,
+        );
+        const weekday = long ? new Intl.DateTimeFormat(locale, {weekday: "narrow"}) : short;
+        const day = new Intl.DateTimeFormat(locale, {day: "numeric"});
+        const month = new Intl.DateTimeFormat(locale, {month: "short"});
+        const year = new Intl.DateTimeFormat(locale, {year: "numeric"});
+        return {
+            formatCaption: (date: Date) => caption.format(date),
+            formatWeekdayName: (date: Date) => weekday.format(date),
+            // the day part only: ja formats "14日", the grid wants "14" (native digits kept: "١٤" in ar-EG)
+            formatDay: (date: Date) =>
+                day.formatToParts(date).find((p) => p.type === "day")?.value ?? String(date.getDate()),
+            formatMonthDropdown: (date: Date) => month.format(date),
+            formatYearDropdown: (date: Date) => year.format(date),
+        };
+    } catch {
+        return {};
+    }
+}
+
 function Calendar({
     className,
     classNames,
@@ -22,11 +54,20 @@ function Calendar({
     locale,
     formatters,
     components,
+    weekStartsOn,
     ...props
-}: React.ComponentProps<typeof DayPicker> & {
+}: CalendarBaseProps & {
     buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+    /**
+     * A BCP 47 tag (`"fr-FR"`) or nothing: month and weekday names, digits and the first day of the week
+     * come from `Intl` (prop › LocaleProvider › browser). A date-fns `Locale` object uses date-fns instead.
+     */
+    locale?: Partial<Locale> | string;
 }) {
     const defaultClassNames = getDefaultClassNames();
+    const dateFnsLocale = typeof locale === "object" ? locale : undefined;
+    const tag = useLocale(typeof locale === "string" ? locale : undefined);
+    const intl = React.useMemo(() => (dateFnsLocale ? null : intlFormatters(tag)), [dateFnsLocale, tag]);
 
     return (
         <DayPicker
@@ -38,9 +79,12 @@ function Calendar({
                 className,
             )}
             captionLayout={captionLayout}
-            locale={locale}
+            locale={dateFnsLocale}
+            lang={dateFnsLocale ? undefined : tag}
+            weekStartsOn={weekStartsOn ?? (dateFnsLocale ? undefined : weekStart(tag))}
             formatters={{
-                formatMonthDropdown: (date) => date.toLocaleString(locale?.code, {month: "short"}),
+                formatMonthDropdown: (date) => date.toLocaleString(dateFnsLocale?.code ?? tag, {month: "short"}),
+                ...intl,
                 ...formatters,
             }}
             classNames={{
@@ -128,7 +172,7 @@ function Calendar({
 
                     return <ChevronDownIcon className={cn("size-4", className)} {...props} />;
                 },
-                DayButton: ({...props}) => <CalendarDayButton locale={locale} {...props} />,
+                DayButton: ({...props}) => <CalendarDayButton locale={dateFnsLocale} {...props} />,
                 WeekNumber: ({children, ...props}) => {
                     return (
                         <td {...props}>

package/src/components/callout.tsx

@@ -41,10 +41,10 @@ const calloutVariants = cva(
 );
 
 const calloutHeader =
-    "flex min-h-8 w-full items-center gap-1.5 py-1.5 pr-3 pl-4 text-left text-xs text-(--c) group-data-[color=neutral]/callout:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5";
+    "flex min-h-8 w-full items-center gap-1.5 py-1.5 pr-3 pl-4 text-left text-xs text-(--c-text) group-data-[color=neutral]/callout:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5";
 
 const calloutBody =
-    "py-2 pr-3 pl-4 text-sm leading-relaxed [&_a]:text-(--c) [&_a]:underline [&_a]:underline-offset-3 group-data-[color=neutral]/callout:[&_a]:text-foreground [&_p:not(:last-child)]:mb-2 border-(--callout-line)";
+    "py-2 pr-3 pl-4 text-sm leading-relaxed [&_a]:text-(--c-text) [&_a]:underline [&_a]:underline-offset-3 group-data-[color=neutral]/callout:[&_a]:text-foreground [&_p:not(:last-child)]:mb-2 border-(--callout-line)";
 
 interface CalloutProps extends Omit<React.ComponentProps<"div">, "color" | "title"> {
     /** Status or hue of the indicator, header and border. */

package/src/components/combobox.tsx

@@ -229,7 +229,7 @@ function ComboboxChip({
         <ComboboxPrimitive.Chip
             data-slot="combobox-chip"
             className={cn(
-                "flex h-5.5 w-fit items-center justify-center gap-1 rounded-md border border-border bg-secondary px-1.5 text-xs font-medium whitespace-nowrap text-secondary-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0 outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50",
+                "flex h-5.5 w-fit items-center justify-center gap-1 rounded-md border border-border bg-foreground/10 px-1.5 text-xs font-medium whitespace-nowrap text-foreground hc:bg-transparent has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0 outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50",
                 className,
             )}
             {...props}

package/src/components/date-picker.tsx

@@ -2,6 +2,7 @@
 
 import {Button} from "@repraze/kernelkit/components/button";
 import {Calendar} from "@repraze/kernelkit/components/calendar";
+import {useLocale} from "@repraze/kernelkit/components/locale";
 import {Popover, PopoverContent, PopoverTrigger} from "@repraze/kernelkit/components/popover";
 import {cn} from "cn";
 import {format as formatDate} from "date-fns";
@@ -14,8 +15,13 @@ type CalendarProps = React.ComponentProps<typeof Calendar>;
 interface DatePickerBaseProps {
     /** Trigger text when nothing is picked. */
     placeholder?: React.ReactNode;
-    /** date-fns format string for the trigger label. */
-    format?: string;
+    /**
+     * Trigger label: `Intl.DateTimeFormat` options (default `{dateStyle: "long"}`, `"medium"` for ranges), a
+     * function, or a date-fns pattern string.
+     */
+    format?: DateFormat;
+    /** BCP 47 tag for the label and the calendar; defaults to LocaleProvider › browser. */
+    locale?: string;
     size?: "sm" | "default" | "lg";
     disabled?: boolean;
     "aria-invalid"?: boolean;
@@ -27,6 +33,27 @@ interface DatePickerBaseProps {
     align?: "start" | "center" | "end";
 }
 
+type DateFormat = Intl.DateTimeFormatOptions | string | ((date: Date) => string);
+
+/** One date in the trigger. */
+function formatOne(date: Date, format: DateFormat, locale: string) {
+    if (typeof format === "function") {
+        return format(date);
+    }
+    if (typeof format === "string") {
+        return formatDate(date, format);
+    }
+    return new Intl.DateTimeFormat(locale, format).format(date);
+}
+
+/** A range in the trigger: Intl's formatRange shares what both ends have in common ("Nov 14 – 20, 2026"). */
+function formatRange(from: Date, to: Date, format: DateFormat, locale: string) {
+    if (typeof format === "object") {
+        return new Intl.DateTimeFormat(locale, format).formatRange(from, to);
+    }
+    return `${formatOne(from, format, locale)} – ${formatOne(to, format, locale)}`;
+}
+
 function useControllable<T>(value: T | undefined, defaultValue: T | undefined, onChange?: (value: T) => void) {
     const [inner, setInner] = React.useState(defaultValue);
     const controlled = value !== undefined;
@@ -59,7 +86,8 @@ function DatePickerTrigger({
                     variant="outline"
                     size={size}
                     className={cn(
-                        "w-60 justify-start text-left font-normal data-empty:text-muted-foreground data-popup-open:bg-hover [&>svg]:text-muted-foreground",
+                        // a field like Select's trigger, not an outline button: it sits beside inputs and TimeInput
+                        "w-60 justify-start bg-field text-start font-normal hover:bg-field-hover aria-expanded:bg-field-hover data-empty:text-muted-foreground data-popup-open:bg-field-hover [&>svg]:text-muted-foreground",
                         className,
                     )}
                     {...props}
@@ -84,7 +112,8 @@ function DatePicker({
     defaultValue = null,
     onValueChange,
     placeholder = "Pick a date",
-    format = "PPP",
+    format = {dateStyle: "long"},
+    locale: localeProp,
     calendarProps,
     align = "start",
     className,
@@ -92,17 +121,19 @@ function DatePicker({
 }: DatePickerProps) {
     const [open, setOpen] = React.useState(false);
     const [date, setDate] = useControllable<Date | null>(value, defaultValue, onValueChange);
+    const locale = useLocale(localeProp);
 
     return (
         <Popover open={open} onOpenChange={setOpen}>
             <DatePickerTrigger
-                label={date ? formatDate(date, format) : undefined}
+                label={date ? formatOne(date, format, locale) : undefined}
                 placeholder={placeholder}
                 className={className}
                 {...trigger}
             />
             <PopoverContent data-slot="date-picker-content" className="w-auto p-0" align={align}>
                 <Calendar
+                    locale={locale}
                     {...calendarProps}
                     mode="single"
                     selected={date ?? undefined}
@@ -131,7 +162,8 @@ function DateRangePicker({
     defaultValue = null,
     onValueChange,
     placeholder = "Pick a date range",
-    format = "LLL d, y",
+    format = {dateStyle: "medium"},
+    locale: localeProp,
     numberOfMonths = 2,
     calendarProps,
     align = "start",
@@ -139,10 +171,11 @@ function DateRangePicker({
     ...trigger
 }: DateRangePickerProps) {
     const [range, setRange] = useControllable<DateRange | null>(value, defaultValue, onValueChange);
+    const locale = useLocale(localeProp);
     const label = range?.from
         ? range.to
-            ? `${formatDate(range.from, format)} – ${formatDate(range.to, format)}`
-            : formatDate(range.from, format)
+            ? formatRange(range.from, range.to, format, locale)
+            : formatOne(range.from, format, locale)
         : undefined;
 
     return (
@@ -150,6 +183,7 @@ function DateRangePicker({
             <DatePickerTrigger label={label} placeholder={placeholder} className={cn("w-72", className)} {...trigger} />
             <PopoverContent data-slot="date-picker-content" className="w-auto p-0" align={align}>
                 <Calendar
+                    locale={locale}
                     {...calendarProps}
                     mode="range"
                     numberOfMonths={numberOfMonths}
@@ -163,4 +197,4 @@ function DateRangePicker({
 }
 
 export {DatePicker, DatePickerTrigger, DateRangePicker};
-export type {DatePickerProps, DateRangePickerProps};
+export type {DateFormat, DatePickerProps, DateRangePickerProps};

package/src/components/description-list.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import {cva} from "class-variance-authority";
+import {cn} from "cn";
+import * as React from "react";
+
+type DescriptionListOrientation = "horizontal" | "vertical";
+
+const DescriptionListContext = React.createContext<{orientation: DescriptionListOrientation; divided: boolean}>({
+    orientation: "horizontal",
+    divided: false,
+});
+
+const descriptionListVariants = cva("text-sm", {
+    variants: {
+        orientation: {
+            // one shared term column: every item is a subgrid row, so terms line up across rows
+            horizontal: "grid grid-cols-[minmax(0,max-content)_minmax(0,1fr)] gap-x-6",
+            vertical: "flex flex-col",
+        },
+        divided: {
+            true: "",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {orientation: "horizontal", divided: false, class: "gap-y-2.5"},
+        {orientation: "vertical", divided: false, class: "gap-4"},
+    ],
+    defaultVariants: {orientation: "horizontal", divided: false},
+});
+
+interface DescriptionListProps extends React.ComponentProps<"dl"> {
+    /** `horizontal`: terms in a column beside their details. `vertical`: each term above its details. */
+    orientation?: DescriptionListOrientation;
+    /** Rule between items. */
+    divided?: boolean;
+}
+
+/** Key / value pairs: properties of a server, an order, a file. Terms in the label face, details in the body face. */
+function DescriptionList({orientation = "horizontal", divided = false, className, ...props}: DescriptionListProps) {
+    const ctx = React.useMemo(() => ({orientation, divided}), [orientation, divided]);
+    return (
+        <DescriptionListContext.Provider value={ctx}>
+            <dl
+                data-slot="description-list"
+                data-orientation={orientation}
+                data-divided={divided ? "" : undefined}
+                className={cn(descriptionListVariants({orientation, divided}), className)}
+                {...props}
+            />
+        </DescriptionListContext.Provider>
+    );
+}
+
+const descriptionItemVariants = cva("min-w-0", {
+    variants: {
+        orientation: {
+            horizontal: "col-span-2 grid grid-cols-subgrid items-baseline",
+            vertical: "flex flex-col gap-1",
+        },
+        divided: {
+            true: "border-b border-border py-2.5 first:pt-0 last:border-b-0 last:pb-0",
+            false: "",
+        },
+    },
+    defaultVariants: {orientation: "horizontal", divided: false},
+});
+
+/** One term with its details (a `<div>`, which `<dl>` allows around each group). */
+function DescriptionItem({className, ...props}: React.ComponentProps<"div">) {
+    const {orientation, divided} = React.useContext(DescriptionListContext);
+    return (
+        <div
+            data-slot="description-item"
+            data-orientation={orientation}
+            data-divided={divided ? "" : undefined}
+            className={cn(descriptionItemVariants({orientation, divided}), className)}
+            {...props}
+        />
+    );
+}
+
+function DescriptionTerm({className, ...props}: React.ComponentProps<"dt">) {
+    return (
+        <dt
+            data-slot="description-term"
+            className={cn("min-w-0 font-alt text-xs text-muted-foreground", className)}
+            {...props}
+        />
+    );
+}
+
+/** The value. Inline content (a status dot, a copy button) sits on one row with `flex items-center gap-2`. */
+function DescriptionDetails({className, ...props}: React.ComponentProps<"dd">) {
+    return <dd data-slot="description-details" className={cn("min-w-0 text-foreground", className)} {...props} />;
+}
+
+export {
+    DescriptionDetails,
+    DescriptionItem,
+    descriptionItemVariants,
+    DescriptionList,
+    descriptionListVariants,
+    DescriptionTerm,
+};
+export type {DescriptionListOrientation, DescriptionListProps};

package/src/components/locale.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import * as React from "react";
+
+/**
+ * Locale for the kit's dates and times (Calendar, DatePicker, TimeInput, TimeSelect), all formatted with
+ * `Intl`. Resolution: a component's own `locale` prop › the nearest `LocaleProvider` › the browser's
+ * language. Hydration-safe: the server render and the hydration pass use `FALLBACK_LOCALE` (the browser's
+ * language is unknown on the server), then the client re-renders with the browser's. To get it right from
+ * the first paint in SSR, pass the request's locale (Accept-Language, user setting) to `LocaleProvider`.
+ */
+const FALLBACK_LOCALE = "en-US";
+
+const LocaleContext = React.createContext<string | undefined>(undefined);
+
+function LocaleProvider({locale, children}: {locale?: string; children: React.ReactNode}) {
+    return <LocaleContext.Provider value={locale}>{children}</LocaleContext.Provider>;
+}
+
+function browserLocale(): string | null {
+    try {
+        const tag = navigator.languages?.[0] ?? navigator.language;
+        return tag && Intl.DateTimeFormat.supportedLocalesOf(tag).length ? tag : null;
+    } catch {
+        return null;
+    }
+}
+
+function subscribe(onChange: () => void) {
+    window.addEventListener("languagechange", onChange);
+    return () => window.removeEventListener("languagechange", onChange);
+}
+
+/** The locale to format with: `explicit` › LocaleProvider › browser (after hydration) › `FALLBACK_LOCALE`. */
+function useLocale(explicit?: string): string {
+    const provided = React.useContext(LocaleContext);
+    const browser = React.useSyncExternalStore(subscribe, browserLocale, () => null);
+    return explicit ?? provided ?? browser ?? FALLBACK_LOCALE;
+}
+
+// Regions whose week starts on Sunday or Saturday (CLDR), for engines without Intl.Locale#getWeekInfo.
+const SUNDAY = new Set(
+    "AG AS AU BD BR BS BT BW BZ CA CN CO DM DO ET GT GU HK HN ID IL IN JM JP KE KH KR LA MH MM MO MT MX MZ NI NP PA PE PH PK PR PT PY SA SG SV TH TT TW UM US VE VI WS YE ZA ZW".split(
+        " ",
+    ),
+);
+const SATURDAY = new Set("AE AF BH DJ DZ EG IQ IR JO KW LY OM QA SD SY".split(" "));
+
+/** First day of the week for a locale: 0 Sunday … 6 Saturday. */
+function weekStart(locale: string): 0 | 1 | 6 {
+    try {
+        const loc = new Intl.Locale(locale) as Intl.Locale & {
+            getWeekInfo?: () => {firstDay: number};
+            weekInfo?: {firstDay: number};
+        };
+        const info = loc.getWeekInfo?.() ?? loc.weekInfo;
+        if (info) {
+            return (info.firstDay % 7) as 0 | 1 | 6;
+        }
+        const region = loc.maximize().region ?? "";
+        return SUNDAY.has(region) ? 0 : SATURDAY.has(region) ? 6 : 1;
+    } catch {
+        return 0;
+    }
+}
+
+export {FALLBACK_LOCALE, LocaleProvider, useLocale, weekStart};