gbs-add-block 1.2.9 → 1.2.11

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v1.2.9)
+# GBS Building Blocks 2.0 (v1.2.11)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,7 +6,17 @@ Latest and upgraded version of GBS building blocks with headless UI and removed
 
 For detailed documentation on usage and props, Please visit: [Building Block Documentation v2.0](https://gramprokit.vercel.app)
 
-## What's New 🎉 (Ver 1.2.9)
+## Beta Components
+
+DataGrid and Combobox use the redesigned core API and design system. Install them with the beta flag:
+
+```bash
+npx gbs-add-block -a DataGrid -beta
+npx gbs-add-block -a Combobox -beta
+npx gbs-add-block -a DatePicker -beta
+```
+
+## What's New 🎉 (Ver 1.2.11)
 
 - Update Candidate for next major change 2.0.0
 

package/index.cjs

@@ -34,9 +34,8 @@ const CONFIG = {
     "Bargraph",
     "UsePaginatedData",
     "UseUploader",
-    "DataGridBeta",
-    "Combobox"
   ],
+  betaComponents: ["DataGrid", "Combobox", "DatePicker"],
   // Define component dependencies
   dependencies: {
     FormRenderer: ["Select", "MultiSelect", "Input", "DatePicker"],
@@ -45,8 +44,19 @@ const CONFIG = {
 };
 
 const SOURCE_PATH = path.join(__dirname, "source", "components");
+const BETA_SOURCE_PATH = path.join(__dirname, "source", "beta-components");
 const DEFAULT_DEST_PATH = path.join(process.cwd(), "component-lib");
 
+const normalizeComponent = (component, availableComponents) =>
+  availableComponents.find(
+    (available) => available.toLowerCase() === component.toLowerCase(),
+  );
+
+const getAvailableComponents = (beta = false) =>
+  beta ? CONFIG.betaComponents : CONFIG.components;
+
+const getSourcePath = (beta = false) => (beta ? BETA_SOURCE_PATH : SOURCE_PATH);
+
 const copyCommonFiles = async (destPath) => {
   const commonFiles = [
     { src: ["..", "utils.ts"], dest: "utils.ts" },
@@ -68,13 +78,18 @@ const checkComponentExists = (component, destPath) => {
   return fs.existsSync(componentPath);
 };
 
-const copyComponent = async (component, destPath) => {
+const copyComponent = async (component, destPath, beta = false) => {
   try {
-    const componentSrc = path.join(SOURCE_PATH, component.toLowerCase());
+    const componentSrc = path.join(
+      getSourcePath(beta),
+      component.toLowerCase(),
+    );
     const componentDest = path.join(destPath, component.toLowerCase());
 
     if (!fs.existsSync(componentSrc)) {
-      throw new Error(`Component ${component} not found in source directory.`);
+      throw new Error(
+        `Component ${component} not found in ${beta ? "beta " : ""}source directory.`,
+      );
     }
 
     await fs.copy(componentSrc, componentDest, { overwrite: true });
@@ -91,15 +106,21 @@ const copyComponent = async (component, destPath) => {
   }
 };
 
-const installComponentWithDependencies = async (component, destPath) => {
+const installComponentWithDependencies = async (
+  component,
+  destPath,
+  beta = false,
+) => {
   // Get dependencies for the component
   const dependencies = CONFIG.dependencies[component] || [];
   const componentsToInstall = new Set([component, ...dependencies]);
 
   // Check which components need to be installed
-  const pendingInstalls = Array.from(componentsToInstall).filter(
-    (comp) => !checkComponentExists(comp, destPath),
-  );
+  const pendingInstalls = beta
+    ? Array.from(componentsToInstall)
+    : Array.from(componentsToInstall).filter(
+        (comp) => !checkComponentExists(comp, destPath),
+      );
 
   if (pendingInstalls.length === 0) {
     console.log(
@@ -110,7 +131,7 @@ const installComponentWithDependencies = async (component, destPath) => {
 
   // Install all pending components
   for (const comp of pendingInstalls) {
-    await copyComponent(comp, destPath);
+    await copyComponent(comp, destPath, beta);
   }
 
   if (dependencies.length > 0) {
@@ -123,7 +144,11 @@ const installComponentWithDependencies = async (component, destPath) => {
   console.log(`\nFor documentation visit: ${CONFIG.docs}`);
 };
 
-const installMultipleComponents = async (components, destPath) => {
+const installMultipleComponents = async (
+  components,
+  destPath,
+  beta = false,
+) => {
   const allComponentsToInstall = new Set();
 
   // Collect all components and their dependencies
@@ -134,9 +159,11 @@ const installMultipleComponents = async (components, destPath) => {
   });
 
   // Filter out already installed components
-  const pendingInstalls = Array.from(allComponentsToInstall).filter(
-    (comp) => !checkComponentExists(comp, destPath),
-  );
+  const pendingInstalls = beta
+    ? Array.from(allComponentsToInstall)
+    : Array.from(allComponentsToInstall).filter(
+        (comp) => !checkComponentExists(comp, destPath),
+      );
 
   if (pendingInstalls.length === 0) {
     console.log(
@@ -149,7 +176,7 @@ const installMultipleComponents = async (components, destPath) => {
 
   // Install all pending components
   for (const comp of pendingInstalls) {
-    await copyComponent(comp, destPath);
+    await copyComponent(comp, destPath, beta);
   }
 
   // Show dependency information
@@ -169,7 +196,7 @@ const installMultipleComponents = async (components, destPath) => {
   console.log(`\nFor documentation visit: ${CONFIG.docs}`);
 };
 
-const interactiveComponentSelector = async () => {
+const interactiveComponentSelector = async (beta = false) => {
   return new Promise((resolve) => {
     const rl = readline.createInterface({
       input: process.stdin,
@@ -186,7 +213,9 @@ const interactiveComponentSelector = async () => {
         "Use ↑/↓ arrow keys to navigate, SPACE to select/deselect, ENTER to install\n",
       );
 
-      CONFIG.components.forEach((component, index) => {
+      const availableComponents = getAvailableComponents(beta);
+
+      availableComponents.forEach((component, index) => {
         const isSelected = selectedComponents.has(component);
         const isCurrentIndex = index === currentIndex;
         const deps = CONFIG.dependencies[component]
@@ -216,13 +245,13 @@ const interactiveComponentSelector = async () => {
           break;
         case "\u001b[B": // Down arrow
           currentIndex = Math.min(
-            CONFIG.components.length - 1,
+            getAvailableComponents(beta).length - 1,
             currentIndex + 1,
           );
           renderMenu();
           break;
         case " ": // Space bar
-          const component = CONFIG.components[currentIndex];
+          const component = getAvailableComponents(beta)[currentIndex];
           if (selectedComponents.has(component)) {
             selectedComponents.delete(component);
           } else {
@@ -265,21 +294,29 @@ const parseMultipleComponents = (componentString) => {
     .filter((comp) => comp.length > 0);
 };
 
-const validateComponents = (components) => {
+const validateComponents = (components, beta = false) => {
+  const availableComponents = getAvailableComponents(beta);
   const invalidComponents = components.filter(
-    (comp) => !CONFIG.components.includes(comp),
+    (comp) => !availableComponents.includes(comp),
   );
   if (invalidComponents.length > 0) {
     console.error(`Invalid components: ${invalidComponents.join(", ")}`);
-    console.log("\nAvailable components:");
-    CONFIG.components.forEach((comp) => console.log(`- ${comp}`));
+    console.log(`\nAvailable ${beta ? "beta " : ""}components:`);
+    availableComponents.forEach((comp) => console.log(`- ${comp}`));
+    if (!beta) {
+      console.log("\nRedesigned beta components (install with -beta):");
+      CONFIG.betaComponents.forEach((comp) => console.log(`- ${comp}`));
+    }
     return false;
   }
   return true;
 };
 
 const main = async () => {
-  const argv = yargs(hideBin(process.argv))
+  const args = hideBin(process.argv).map((arg) =>
+    arg === "-beta" ? "--beta" : arg,
+  );
+  const argv = yargs(args)
     .option("add", {
       alias: "a",
       describe:
@@ -296,27 +333,39 @@ const main = async () => {
       describe: "List available components",
       type: "boolean",
     })
+    .option("beta", {
+      describe: "Install redesigned beta components",
+      type: "boolean",
+      default: false,
+    })
     .example("$0 -a Button", "Install a single component")
     .example("$0 -a Button,Card,Modal", "Install multiple components")
+    .example("$0 -a DataGrid -beta", "Install the redesigned beta DataGrid")
+    .example("$0 -a Combobox -beta", "Install the redesigned beta Combobox")
     .example("$0 -i", "Interactive selection mode")
     .help().argv;
 
   // List components if requested
   if (argv.list) {
-    console.log("\nAvailable components:");
-    CONFIG.components.forEach((comp) => {
+    const availableComponents = getAvailableComponents(argv.beta);
+    console.log(`\nAvailable ${argv.beta ? "beta " : ""}components:`);
+    availableComponents.forEach((comp) => {
       const deps = CONFIG.dependencies[comp]
         ? ` (requires: ${CONFIG.dependencies[comp].join(", ")})`
         : "";
       console.log(`- ${comp}${deps}`);
     });
+    if (!argv.beta) {
+      console.log("\nRedesigned beta components (install with -beta):");
+      CONFIG.betaComponents.forEach((comp) => console.log(`- ${comp}`));
+    }
     return;
   }
 
   // Interactive mode
   if (argv.interactive) {
     console.log("Starting interactive component selector...\n");
-    const selectedComponents = await interactiveComponentSelector();
+    const selectedComponents = await interactiveComponentSelector(argv.beta);
 
     if (selectedComponents.length === 0) {
       console.log("No components selected. Exiting...");
@@ -333,7 +382,7 @@ const main = async () => {
     }
 
     // Install selected components
-    await installMultipleComponents(selectedComponents, destPath);
+    await installMultipleComponents(selectedComponents, destPath, argv.beta);
     return;
   }
 
@@ -346,10 +395,14 @@ const main = async () => {
 
   // Parse components (single or multiple)
   const componentInput = argv.add;
-  const components = parseMultipleComponents(componentInput);
+  const components = parseMultipleComponents(componentInput).map(
+    (component) =>
+      normalizeComponent(component, getAvailableComponents(argv.beta)) ||
+      component,
+  );
 
   // Validate all components
-  if (!validateComponents(components)) {
+  if (!validateComponents(components, argv.beta)) {
     process.exit(1);
   }
 
@@ -365,10 +418,10 @@ const main = async () => {
   // Install components
   if (components.length === 1) {
     // Single component installation (existing behavior)
-    await installComponentWithDependencies(components[0], destPath);
+    await installComponentWithDependencies(components[0], destPath, argv.beta);
   } else {
     // Multiple components installation
-    await installMultipleComponents(components, destPath);
+    await installMultipleComponents(components, destPath, argv.beta);
   }
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "1.2.9",
+  "version": "1.2.11",
   "description": "React Component Library",
   "type": "module",
   "files": [

package/source/beta-components/datepicker/README.md

@@ -0,0 +1,141 @@
+# DatePicker and DateRangePicker
+
+Two date fields built on one engine and styled to match the DataGrid and the
+Combobox. No runtime dependencies besides React 19.
+
+- **`<DatePicker>`** — one date.
+- **`<DateRangePicker>`** — a start and an end, with a live preview between them.
+
+Both support typed entry in the user's own date order, min/max limits, blocked
+days, month and year panels, week numbers, forms, full keyboard control, dark
+mode and right-to-left layouts.
+
+## Setup
+
+```ts
+import { DatePicker, DateRangePicker } from "@/components/date-picker";
+import "@/components/date-picker/styles.css";
+```
+
+The stylesheet reuses the DataGrid's `--dg-*` variables when that stylesheet is
+loaded, so every component shares a theme, and falls back to the same palette
+when used on its own.
+
+## Basic usage
+
+```tsx
+const [date, setDate] = useState<Date | null>(null);
+
+<DatePicker label="Start date" value={date} onChange={setDate} />;
+
+const [range, setRange] = useState<DateRange>({ start: null, end: null });
+
+<DateRangePicker label="Period" value={range} onChange={setRange} />;
+```
+
+Both are controlled with `value` + `onChange`, or uncontrolled with
+`defaultValue`. `value`, `defaultValue`, `min` and `max` accept a `Date`, an ISO
+`yyyy-mm-dd` string or a timestamp; `onChange` always gives you `Date` objects at
+local midnight. The range picker's `onChange` also receives a `complete` flag,
+which is `false` after the first of the two clicks.
+
+## Props
+
+Shared by both components:
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `min` / `max` | `Date \| string \| number` | — | Earliest and latest selectable day. |
+| `isDateDisabled` | `(date: Date) => boolean` | — | Called per rendered day; return true to block it. |
+| `locale` | `string` | runtime locale | Decides month names, field order and the first day of the week. |
+| `weekStartsOn` | `0`–`6` | locale's first day | 0 is Sunday. |
+| `format` | `Intl.DateTimeFormatOptions \| (date, locale) => string` | `{ year, month: "short", day }` | How the chosen date is written in the field. |
+| `numberOfMonths` | `number` | `1` (range: `2`) | Months shown side by side. |
+| `showWeekNumbers` | `boolean` | `false` | Adds an ISO week column. |
+| `showToday` | `boolean` | `true` (range: `false`) | The "Today" shortcut in the footer. |
+| `allowInput` | `boolean` | `true` | Let people type a date. When false the field is read-only and opens on click. |
+| `fixedWeeks` | `boolean` | `true` | Always six week rows, so the popover never changes height. |
+| `label`, `description`, `error` | `ReactNode` | — | Field label, hint and error message. `error` also marks the control invalid. |
+| `placeholder` | `string` | the locale's pattern | e.g. `dd/mm/yyyy`. |
+| `required`, `disabled`, `readOnly` | `boolean` | `false` | Field states. |
+| `clearable` | `boolean` | `true` | Show the clear button. |
+| `size` | `"sm"` \| `"md"` \| `"lg"` | `"md"` | Control height and font size. |
+| `name` | `string` | — | Posts `yyyy-mm-dd` in a hidden input. The range picker posts `name-start` and `name-end`. |
+| `className`, `classNames`, `style` | — | — | Styling hooks. Slots: `root`, `label`, `control`, `input`, `popover`, `calendar`, `day`, `footer`, `presets`. |
+| `localeText` | `Partial<DatePickerLocaleText>` | English | Overrides UI text. |
+| `onOpenChange` | `(open: boolean) => void` | — | Fires when the calendar opens or closes. |
+| `ref` | `Ref<DatePickerHandle<T>>` | — | `open()`, `close()`, `toggle()`, `focus()`, `clear()`, `getValue()`. |
+
+`DatePicker` adds `value` / `defaultValue` (`Date \| null`) and `closeOnSelect`
+(default `true`). `DateRangePicker` adds `value` / `defaultValue`
+(`{ start, end }`), `presets` and `closeOnSelect` (closes once both ends are set).
+
+## Typed entry
+
+People can type instead of picking. Input is read in the locale's own field
+order, so `03/04/2026` is 3 April in `en-GB` and 4 March in `en-US`. ISO
+(`2026-03-12`) is accepted in every locale, month names work (`12 Mar 2026`), and
+a missing year or month falls back to the month on screen. The calendar follows
+along as you type. Text that isn't a date, or a date outside the limits, shows a
+message when the field loses focus and leaves the value untouched.
+
+## Range presets
+
+```tsx
+<DateRangePicker
+  value={range}
+  onChange={setRange}
+  presets={[
+    { label: "Last 7 days", range: { start: addDays(new Date(), -6), end: new Date() } },
+    { label: "This month", range: { start: startOfMonth(new Date()), end: new Date() } },
+  ]}
+/>
+```
+
+## Keyboard
+
+| Keys | Action |
+| --- | --- |
+| **Enter**, **↓** | Open the calendar (from the field). |
+| **←** / **→** | Previous / next day (swapped in right-to-left layouts). |
+| **↑** / **↓** | Same weekday, previous / next week. |
+| **Home** / **End** | First / last day of the week. |
+| **Page Up** / **Page Down** | Previous / next month. |
+| **Shift + Page Up/Down** | Previous / next year. |
+| **Enter**, **Space** | Choose the focused day. |
+| **Escape** | Close and return focus to the calendar button. |
+
+Each month is a `role="grid"` where only the focused day is tabbable, which is
+the WAI-ARIA pattern for a date picker. The calendar renders in the top layer
+through the native Popover API, so it is never clipped by a scrolling parent
+(including inside a DataGrid cell).
+
+## Theming
+
+Override `--dp-*` variables (they default to the grid's `--dg-*`):
+
+```css
+.dp-root { --dp-accent: #7c3aed; --dp-radius: 12px; --dp-day-size: 38px; }
+```
+
+State attributes for styling: `data-state="open"`, `data-size`, `data-invalid`,
+`data-disabled` on the root and control; `data-today`, `data-selected`,
+`data-outside`, `data-weekend` on days; `data-in-range`, `data-range-start`,
+`data-range-end` on day cells.
+
+## Headless use
+
+`useDatePicker()` holds the whole engine (selection, visible months, typed
+input, keyboard movement, popover state) and is exported if you want a different
+UI on top. The framework-free helpers — `buildMonth`, `buildMonths`, `parseDate`,
+`formatDate`, `moveByKey`, `normalizeRange`, `isInRange`, `toISODate` — are
+exported from `@/components/date-picker/core` and also run on a server.
+
+## Known limits
+
+- Dates only: no time-of-day or time zone selection. Values are local midnight.
+- One range per field; multiple disjoint ranges aren't supported.
+- Only the Gregorian calendar is handled, though month and weekday names,
+  field order and the first day of the week all follow the locale.
+- When rendering on a server, pass `locale` explicitly so the server and the
+  browser format the field identically.

package/source/beta-components/datepicker/__tests__/core.test.ts

@@ -0,0 +1,220 @@
+import { describe, expect, it } from "vitest";
+import {
+  addDays,
+  addMonths,
+  buildMonth,
+  buildMonths,
+  clampDate,
+  compareDay,
+  getISOWeek,
+  isInRange,
+  isSameDay,
+  moveByKey,
+  moveInGrid,
+  normalizeRange,
+  parseISODate,
+  toDate,
+  toISODate,
+  yearPage,
+} from "../core/calendar";
+import {
+  fieldOrder,
+  inputPlaceholder,
+  monthNames,
+  parseDate,
+  weekdayNames,
+} from "../core/format";
+
+const iso = (date: Date | null) => (date ? toISODate(date) : null);
+
+describe("date normalization", () => {
+  it("reads ISO strings as local days, never shifted by the time zone", () => {
+    expect(iso(toDate("2026-03-12"))).toBe("2026-03-12");
+    expect(iso(toDate(new Date(2026, 2, 12, 23, 59)))).toBe("2026-03-12");
+    expect(toDate(null)).toBeNull();
+    expect(toDate("not a date")).toBeNull();
+    expect(parseISODate("2026-02-31")).toBeNull();
+  });
+
+  it("compares and matches days regardless of the time", () => {
+    expect(compareDay(new Date(2026, 0, 1, 23), new Date(2026, 0, 2, 0))).toBeLessThan(0);
+    expect(isSameDay(new Date(2026, 0, 1, 23), new Date(2026, 0, 1))).toBe(true);
+    expect(isSameDay(null, new Date(2026, 0, 1))).toBe(false);
+  });
+
+  it("keeps the day of the month when a month is too short", () => {
+    expect(iso(addMonths(new Date(2026, 0, 31), 1))).toBe("2026-02-28");
+    expect(iso(addMonths(new Date(2024, 0, 31), 1))).toBe("2024-02-29");
+    expect(iso(addDays(new Date(2026, 11, 31), 1))).toBe("2027-01-01");
+  });
+
+  it("clamps to the limits", () => {
+    const min = new Date(2026, 0, 10);
+    const max = new Date(2026, 0, 20);
+    expect(iso(clampDate(new Date(2026, 0, 1), min, max))).toBe("2026-01-10");
+    expect(iso(clampDate(new Date(2026, 0, 31), min, max))).toBe("2026-01-20");
+    expect(iso(clampDate(new Date(2026, 0, 15), min, max))).toBe("2026-01-15");
+  });
+});
+
+describe("month building", () => {
+  const today = new Date(2026, 1, 10);
+
+  it("returns six aligned weeks with the leading days of the previous month", () => {
+    const february = buildMonth(2026, 1, { weekStartsOn: 1, today });
+    expect(february.weeks).toHaveLength(6);
+    expect(february.weeks[0].days).toHaveLength(7);
+    // February 2026 starts on a Sunday, so a Monday-first grid opens on 26 January.
+    expect(february.weeks[0].days[0].key).toBe("2026-01-26");
+    expect(february.weeks[0].days[0].outside).toBe(true);
+    expect(february.weeks[0].days[6].key).toBe("2026-02-01");
+    expect(february.weeks[0].days[6].outside).toBe(false);
+  });
+
+  it("starts the week where the caller asks", () => {
+    const sundayFirst = buildMonth(2026, 1, { weekStartsOn: 0, today });
+    expect(sundayFirst.weeks[0].days[0].key).toBe("2026-02-01");
+  });
+
+  it("marks today, weekends and days outside the limits", () => {
+    const february = buildMonth(2026, 1, {
+      weekStartsOn: 1,
+      today,
+      min: new Date(2026, 1, 5),
+      isDateDisabled: (date) => date.getDate() === 20,
+    });
+    const days = february.weeks.flatMap((week) => week.days);
+    const byKey = (key: string) => days.find((day) => day.key === key);
+
+    expect(byKey("2026-02-10")?.today).toBe(true);
+    expect(byKey("2026-02-09")?.today).toBe(false);
+    expect(byKey("2026-02-07")?.weekend).toBe(true);
+    expect(byKey("2026-02-04")?.disabled).toBe(true);
+    expect(byKey("2026-02-05")?.disabled).toBe(false);
+    expect(byKey("2026-02-20")?.disabled).toBe(true);
+  });
+
+  it("builds consecutive months for a range view", () => {
+    const months = buildMonths(new Date(2026, 10, 20), 2, { today });
+    expect(months.map((month) => `${month.year}-${month.month}`)).toEqual(["2026-10", "2026-11"]);
+  });
+
+  it("numbers ISO weeks, including the ones spanning a year end", () => {
+    expect(getISOWeek(new Date(2024, 0, 1))).toBe(1);
+    expect(getISOWeek(new Date(2026, 0, 1))).toBe(1);
+    expect(getISOWeek(new Date(2021, 0, 1))).toBe(53);
+  });
+});
+
+describe("ranges", () => {
+  it("puts a backwards range the right way round", () => {
+    const start = new Date(2026, 0, 20);
+    const end = new Date(2026, 0, 10);
+    expect(iso(normalizeRange({ start, end }).start)).toBe("2026-01-10");
+    expect(iso(normalizeRange({ start, end }).end)).toBe("2026-01-20");
+    expect(normalizeRange({ start, end: null }).end).toBeNull();
+  });
+
+  it("includes both ends", () => {
+    const start = new Date(2026, 0, 10);
+    const end = new Date(2026, 0, 20);
+    expect(isInRange(new Date(2026, 0, 10), start, end)).toBe(true);
+    expect(isInRange(new Date(2026, 0, 20), start, end)).toBe(true);
+    expect(isInRange(new Date(2026, 0, 21), start, end)).toBe(false);
+    expect(isInRange(new Date(2026, 0, 15), start, null)).toBe(false);
+  });
+});
+
+describe("keyboard movement", () => {
+  const wednesday = new Date(2026, 1, 11);
+
+  it("moves by day, week and month", () => {
+    expect(iso(moveByKey(wednesday, "ArrowLeft"))).toBe("2026-02-10");
+    expect(iso(moveByKey(wednesday, "ArrowRight"))).toBe("2026-02-12");
+    expect(iso(moveByKey(wednesday, "ArrowUp"))).toBe("2026-02-04");
+    expect(iso(moveByKey(wednesday, "ArrowDown"))).toBe("2026-02-18");
+    expect(iso(moveByKey(wednesday, "PageUp"))).toBe("2026-01-11");
+    expect(iso(moveByKey(wednesday, "PageDown"))).toBe("2026-03-11");
+    expect(iso(moveByKey(wednesday, "PageUp", { shiftKey: true }))).toBe("2025-02-11");
+    expect(iso(moveByKey(wednesday, "PageDown", { shiftKey: true }))).toBe("2027-02-11");
+    expect(moveByKey(wednesday, "a")).toBeNull();
+  });
+
+  it("takes Home and End to the ends of the displayed week", () => {
+    expect(iso(moveByKey(wednesday, "Home", { weekStartsOn: 1 }))).toBe("2026-02-09");
+    expect(iso(moveByKey(wednesday, "End", { weekStartsOn: 1 }))).toBe("2026-02-15");
+    expect(iso(moveByKey(wednesday, "Home", { weekStartsOn: 0 }))).toBe("2026-02-08");
+    expect(iso(moveByKey(wednesday, "End", { weekStartsOn: 0 }))).toBe("2026-02-14");
+  });
+
+  it("swaps the arrows in right-to-left layouts", () => {
+    expect(iso(moveByKey(wednesday, "ArrowRight", { rtl: true }))).toBe("2026-02-10");
+    expect(iso(moveByKey(wednesday, "ArrowLeft", { rtl: true }))).toBe("2026-02-12");
+  });
+
+  it("moves inside the month and year panels without leaving the grid", () => {
+    expect(moveInGrid(4, "ArrowDown", 3, 12)).toBe(7);
+    expect(moveInGrid(10, "ArrowDown", 3, 12)).toBe(11);
+    expect(moveInGrid(1, "ArrowUp", 3, 12)).toBe(0);
+    expect(moveInGrid(5, "Home", 3, 12)).toBe(0);
+    expect(moveInGrid(5, "End", 3, 12)).toBe(11);
+    expect(moveInGrid(5, "Enter", 3, 12)).toBeNull();
+  });
+
+  it("pages years in steady blocks", () => {
+    expect(yearPage(2026, 12)[0]).toBe(2016);
+    expect(yearPage(2026, 12)).toHaveLength(12);
+    expect(yearPage(2016, 12)[0]).toBe(2016);
+  });
+});
+
+describe("locale formatting", () => {
+  it("reports the field order and a matching placeholder", () => {
+    expect(fieldOrder("en-GB")).toEqual(["day", "month", "year"]);
+    expect(fieldOrder("en-US")).toEqual(["month", "day", "year"]);
+    expect(inputPlaceholder("en-GB")).toBe("dd/mm/yyyy");
+    expect(inputPlaceholder("en-US")).toBe("mm/dd/yyyy");
+  });
+
+  it("orders weekday names from the first day of the week", () => {
+    expect(weekdayNames("en-GB", 1)[0].short).toBe("Mon");
+    expect(weekdayNames("en-US", 0)[0].short).toBe("Sun");
+    expect(weekdayNames("en-GB", 1)[0].long).toBe("Monday");
+    expect(monthNames("en-GB")[0]).toBe("January");
+  });
+});
+
+describe("typed input", () => {
+  const reference = new Date(2026, 4, 20);
+
+  it("accepts ISO whatever the locale", () => {
+    expect(iso(parseDate("2026-03-12", "en-US", reference))).toBe("2026-03-12");
+  });
+
+  it("reads numbers in the locale's own order", () => {
+    expect(iso(parseDate("3/4/2026", "en-GB", reference))).toBe("2026-04-03");
+    expect(iso(parseDate("3/4/2026", "en-US", reference))).toBe("2026-03-04");
+    expect(iso(parseDate("15.8.2026", "de-DE", reference))).toBe("2026-08-15");
+  });
+
+  it("fills in what was left out", () => {
+    expect(iso(parseDate("15/8", "en-GB", reference))).toBe("2026-08-15");
+    expect(iso(parseDate("5", "en-GB", reference))).toBe("2026-05-05");
+    expect(iso(parseDate("15/8/26", "en-GB", reference))).toBe("2026-08-15");
+    expect(iso(parseDate("15/8/95", "en-GB", reference))).toBe("1995-08-15");
+  });
+
+  it("understands written month names", () => {
+    expect(iso(parseDate("12 Mar 2026", "en-GB", reference))).toBe("2026-03-12");
+    expect(iso(parseDate("March 12, 2026", "en-US", reference))).toBe("2026-03-12");
+    expect(iso(parseDate("7 September", "en-GB", reference))).toBe("2026-09-07");
+  });
+
+  it("rejects anything that isn't a date", () => {
+    expect(parseDate("", "en-GB", reference)).toBeNull();
+    expect(parseDate("hello", "en-GB", reference)).toBeNull();
+    expect(parseDate("31/2/2026", "en-GB", reference)).toBeNull();
+    expect(parseDate("2026-02-31", "en-GB", reference)).toBeNull();
+    expect(parseDate("45/45/2026", "en-GB", reference)).toBeNull();
+  });
+});