@uniflowed/ui 0.0.0-alpha.43 → 0.0.0-alpha.44

package/internal/segmented-field.js

@@ -0,0 +1,316 @@
+// @flow
+"use client";
+import * as React from "@uniflowed/react";
+import { useMemo, useState } from "@uniflowed/react";
+import { useStableCallback } from "@uniflowed/hooks/lifecycle";
+import { Temporal } from "@uniflowed/core/temporal";
+import { useControlled } from "./controlled-state.js";
+import { composeHandlers, withProps } from "./merge-props.js";
+import type { RenderProp, Rest } from "./merge-props.js";
+import { directionOf } from "./roving-focus.js";
+import { useLocale } from "../i18n-provider.js";
+
+type Segment = "year" | "month" | "day" | "hour" | "minute" | "second" | "dayPeriod";
+type Fields = { [string]: string };
+export type DateFieldProps = {
+  value?: string | null,
+  defaultValue?: string | null,
+  onValueChange?: (value: string | null) => void,
+  minValue?: string,
+  isDateUnavailable?: (value: string) => boolean,
+  maxValue?: string,
+  disabled?: boolean,
+  readOnly?: boolean,
+  required?: boolean,
+  granularity?: "minute" | "second",
+  hourCycle?: "h12" | "h23",
+  segmentLabels?: { [string]: string },
+  onValidationChange?: (invalid: boolean) => void,
+  render?: RenderProp,
+  readonly key?: empty,
+  readonly [string]: mixed,
+};
+function names(time: boolean, seconds: boolean): Array<Segment> {
+  return time
+    ? seconds
+      ? ["hour", "minute", "second"]
+      : ["hour", "minute"]
+    : ["year", "month", "day"];
+}
+function fieldsFor(value: string | null, time: boolean, seconds: boolean): Fields {
+  if (value == null) return {};
+  const parsed = time ? Temporal.PlainTime.from(value) : Temporal.PlainDate.from(value);
+  const fields: Fields = {};
+  for (const name of names(time, seconds)) fields[name] = String((parsed as $FlowFixMe)[name]);
+  return fields;
+}
+function serialize(fields: Fields, time: boolean, seconds: boolean): string | null {
+  const parts = names(time, seconds);
+  if (parts.some((part) => !/^\d+$/.test(fields[part] ?? ""))) return null;
+  try {
+    if (time) {
+      const value = `${fields.hour.padStart(2, "0")}:${fields.minute.padStart(2, "0")}:${seconds ? fields.second.padStart(2, "0") : "00"}`;
+      const parsed = Temporal.PlainTime.from(value);
+      return parsed.toString().slice(0, seconds ? 8 : 5);
+    }
+    const year = Number(fields.year),
+      month = Number(fields.month),
+      day = Number(fields.day);
+    if (year < 1 || year > 9999) return null;
+    const parsed = Temporal.PlainDate.from({ year, month, day });
+    if (parsed.year !== year || parsed.month !== month || parsed.day !== day) return null;
+    return parsed.toString();
+  } catch {
+    return null;
+  }
+}
+function maximum(name: Segment, fields: Fields): number {
+  if (name === "year") return 9999;
+  if (name === "month") return 12;
+  if (name === "hour") return 23;
+  if (name !== "day") return 59;
+  try {
+    return Temporal.PlainDate.from({
+      year: Number(fields.year) || 2000,
+      month: Number(fields.month) || 1,
+      day: 1,
+    }).daysInMonth;
+  } catch {
+    return 31;
+  }
+}
+
+/** Segment order, digits and labels come from the locale; the stored value is ISO. */
+export component SegmentedField(time: boolean, options: DateFieldProps) {
+  const {
+    value,
+    defaultValue = null,
+    onValueChange,
+    minValue,
+    isDateUnavailable,
+    maxValue,
+    disabled = false,
+    readOnly = false,
+    required = false,
+    granularity = "minute",
+    hourCycle,
+    segmentLabels,
+    onValidationChange,
+    render,
+    ...rest
+  } = options;
+  const { locale } = useLocale();
+  const seconds = granularity === "second";
+  const [current, setCurrent] = useControlled(value, defaultValue, onValueChange);
+  const [draft, setDraft] = useState<Fields | null>(null);
+  const [announcement, announce] = useState("");
+  const fields = draft ?? fieldsFor(current, time, seconds);
+  const empty = names(time, seconds).every((part) => !fields[part]);
+  const serialized = serialize(fields, time, seconds);
+  const minimum =
+    minValue == null ? null : serialize(fieldsFor(minValue, time, seconds), time, seconds);
+  const maximumValue =
+    maxValue == null ? null : serialize(fieldsFor(maxValue, time, seconds), time, seconds);
+  if (minimum != null && maximumValue != null && minimum > maximumValue)
+    throw new RangeError("DateField minimum exceeds maximum");
+  const invalid =
+    (empty ? required : serialized == null) ||
+    (serialized != null &&
+      ((minimum != null && serialized < minimum) ||
+        (maximumValue != null && serialized > maximumValue) ||
+        isDateUnavailable?.(serialized) === true));
+  const digits = useMemo(() => new Intl.NumberFormat(locale, { useGrouping: false }), [locale]);
+  const labels: $FlowFixMe = useMemo(
+    () => new (Intl as $FlowFixMe).DisplayNames(locale, { type: "dateTimeField" }),
+    [locale],
+  );
+  const parts: Array<{ type: string, value: string }> = useMemo(() => {
+    const formatter: $FlowFixMe = new Intl.DateTimeFormat(
+      locale,
+      time
+        ? {
+            hour: "2-digit",
+            minute: "2-digit",
+            second: seconds ? "2-digit" : undefined,
+            hourCycle,
+            timeZone: "UTC",
+          }
+        : {
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+            calendar: "gregory",
+            timeZone: "UTC",
+          },
+    );
+    return formatter.formatToParts(new Date("2000-01-02T12:34:56Z"));
+  }, [locale, time, seconds, hourCycle]);
+  const hour12 = time && parts.some((part) => part.type === "dayPeriod");
+  const periodNames: Array<string> = useMemo(() => {
+    const formatter: $FlowFixMe = new Intl.DateTimeFormat(locale, {
+      hour: "numeric",
+      hour12: true,
+      timeZone: "UTC",
+    });
+    return [0, 12].map(
+      (hour) =>
+        formatter
+          .formatToParts(new Date(Date.UTC(2000, 0, 1, hour)))
+          .find((part) => part.type === "dayPeriod")?.value ?? (hour === 0 ? "AM" : "PM"),
+    );
+  }, [locale]);
+  const encode = (text: string): string =>
+    Array.from(text)
+      .map((digit) => digits.format(Number(digit)))
+      .join("");
+  const decode = (text: string): string => {
+    let result = text;
+    for (let digit = 0; digit < 10; digit += 1)
+      result = result.split(digits.format(digit)).join(String(digit));
+    return result.replace(/[^0-9]/g, "");
+  };
+  const commit = useStableCallback(() => {
+    if (disabled || readOnly) return;
+    onValidationChange?.(invalid);
+    if (invalid) {
+      announce("Enter a valid value within the allowed range");
+      return;
+    }
+    setCurrent(empty ? null : serialized);
+    setDraft(null);
+    announce(serialized ?? "Cleared");
+  });
+  const edit = useStableCallback((part: Segment, text: string) => {
+    if (!disabled && !readOnly) setDraft({ ...fields, [part]: text });
+  });
+  const keyboard = useStableCallback((event: $FlowFixMe, part: Segment) => {
+    if (disabled || readOnly) return;
+    const key = event.key;
+    if (key === "Enter") {
+      event.preventDefault();
+      commit();
+      return;
+    }
+    if (key === "ArrowLeft" || key === "ArrowRight") {
+      event.preventDefault();
+      const root = event.currentTarget.closest("[data-segmented]");
+      const segments = Array.from(root.querySelectorAll("[data-segment]"));
+      const at = segments.indexOf(event.currentTarget);
+      const forward =
+        key === (directionOf(event.currentTarget) === "rtl" ? "ArrowLeft" : "ArrowRight");
+      (segments[at + (forward ? 1 : -1)] as $FlowFixMe)?.focus();
+      return;
+    }
+    if (!["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End"].includes(key)) return;
+    event.preventDefault();
+    const min = time && !(part === "hour" && hour12) ? 0 : 1,
+      max = part === "hour" && hour12 ? 12 : maximum(part, fields);
+    const raw = Number(fields[part] || min);
+    const current = part === "hour" && hour12 ? ((raw + 11) % 12) + 1 : raw;
+    const next =
+      key === "Home"
+        ? min
+        : key === "End"
+          ? max
+          : current +
+            (key === "ArrowUp" ? 1 : key === "ArrowDown" ? -1 : key === "PageUp" ? 10 : -10);
+    const bounded = next > max ? min : next < min ? max : next;
+    const adjusted =
+      part === "hour" && hour12 ? (bounded % 12) + (Number(fields.hour) >= 12 ? 12 : 0) : bounded;
+    const nextFields = { ...fields, [part]: String(adjusted) };
+    if (!time && (part === "month" || part === "year") && nextFields.day)
+      nextFields.day = String(Math.min(Number(nextFields.day), maximum("day", nextFields)));
+    setDraft(nextFields);
+  });
+  const segments = parts.map((part, index) => {
+    if (part.type === "dayPeriod") {
+      const pm = Number(fields.hour) >= 12;
+      const toggle = () => edit("hour", String((Number(fields.hour) || 0) + (pm ? -12 : 12)));
+      return (
+        <span
+          key="period"
+          role="spinbutton"
+          tabIndex={disabled ? -1 : 0}
+          data-segment="dayPeriod"
+          aria-label={segmentLabels?.dayPeriod ?? labels.of("dayPeriod")}
+          aria-valuemin={0}
+          aria-valuemax={1}
+          aria-valuenow={pm ? 1 : 0}
+          aria-valuetext={periodNames[pm ? 1 : 0]}
+          aria-disabled={disabled || undefined}
+          aria-readonly={readOnly || undefined}
+          onClick={toggle}
+          onKeyDown={(event) => {
+            if (disabled || readOnly) return;
+            if (["ArrowUp", "ArrowDown", "Home", "End", " "].includes(event.key)) {
+              event.preventDefault();
+              if ((event.key !== "Home" || pm) && (event.key !== "End" || !pm)) toggle();
+            } else if (["ArrowLeft", "ArrowRight", "Enter"].includes(event.key))
+              keyboard(event, "dayPeriod");
+          }}
+        >
+          {periodNames[pm ? 1 : 0]}
+        </span>
+      );
+    }
+
+    if (!names(time, seconds).includes(part.type as $FlowFixMe))
+      return (
+        <span key={index} aria-hidden="true">
+          {part.value}
+        </span>
+      );
+    const name: Segment = part.type as $FlowFixMe;
+    const raw = fields[name] ?? "";
+    const text =
+      name === "hour" && hour12 && raw !== "" ? String(((Number(raw) + 11) % 12) + 1) : raw;
+    return (
+      <input
+        key={name}
+        type="text"
+        role="spinbutton"
+        inputMode="numeric"
+        data-segment={name}
+        aria-label={segmentLabels?.[name] ?? labels.of(name)}
+        aria-valuemin={time && !(name === "hour" && hour12) ? 0 : 1}
+        aria-valuemax={name === "hour" && hour12 ? 12 : maximum(name, fields)}
+        aria-valuenow={text ? Number(text) : undefined}
+        aria-valuetext={text ? encode(text) : undefined}
+        aria-invalid={invalid || undefined}
+        disabled={disabled}
+        readOnly={readOnly}
+        required={required}
+        maxLength={name === "year" ? 4 : 2}
+        placeholder={name === "year" ? "yyyy" : "--"}
+        value={text ? encode(text) : ""}
+        onChange={(event) => {
+          const text = decode(event.currentTarget.value);
+          edit(
+            name,
+            name === "hour" && hour12 && text && Number(text) <= 12
+              ? String((Number(text) % 12) + (Number(fields.hour) >= 12 ? 12 : 0))
+              : text,
+          );
+        }}
+        onKeyDown={(event) => keyboard(event, name)}
+      />
+    );
+  });
+  const props = withProps(rest, {
+    role: "group",
+    "data-segmented": time ? "time" : "date",
+    "aria-invalid": invalid || rest["aria-invalid"],
+    onBlur: composeHandlers(rest.onBlur, (event: $FlowFixMe) => {
+      if (!event.currentTarget.contains(event.relatedTarget)) commit();
+    }),
+    children: (
+      <>
+        {segments}
+        <span role="status" aria-live="polite">
+          {announcement}
+        </span>
+      </>
+    ),
+  });
+  return render != null ? render(props) : <div {...props} />;
+}

package/list-box.js

@@ -0,0 +1,13 @@
+// @flow
+"use client";
+import * as React from "@uniflowed/react";
+import { CollectionRoot } from "./internal/collection.js";
+import type { CollectionProps } from "./internal/collection.js";
+export component ListBox(...props: CollectionProps) {
+  return <CollectionRoot options={props} kind="listbox" />;
+}
+export type {
+  CollectionItem,
+  CollectionItemState,
+  CollectionProps,
+} from "./internal/collection.js";

package/number-field.js

@@ -0,0 +1,263 @@
+// @flow
+"use client";
+
+import * as React from "@uniflowed/react";
+import { createContext, useContext, useMemo, useState } from "@uniflowed/react";
+import { useStableCallback } from "@uniflowed/hooks/lifecycle";
+import { useControlled } from "./internal/controlled-state.js";
+import type { RenderProp, Rest } from "./internal/merge-props.js";
+import { composeHandlers, withProps } from "./internal/merge-props.js";
+import { useLocale } from "./i18n-provider.js";
+
+type NumberFormatter = {
+  format: (value: number) => string,
+  formatToParts: (value: number) => Array<{ type: string, value: string }>,
+  resolvedOptions: () => { locale: string, style: string, ... },
+};
+export type NumberFormatOptions = {
+  style?: "decimal" | "percent" | "currency" | "unit",
+  currency?: string,
+  currencyDisplay?: "symbol" | "narrowSymbol" | "code" | "name",
+  currencySign?: "standard" | "accounting",
+  unit?: string,
+  unitDisplay?: "long" | "short" | "narrow",
+  useGrouping?: boolean,
+  minimumFractionDigits?: number,
+  maximumFractionDigits?: number,
+  minimumIntegerDigits?: number,
+  numberingSystem?: string,
+};
+// Flow's bundled Intl declarations predate formatToParts and unit formatting.
+function numberFormatter(locale: string, options?: NumberFormatOptions): NumberFormatter {
+  return new Intl.NumberFormat(locale, { maximumFractionDigits: 20, ...options }) as $FlowFixMe;
+}
+
+/** Parse only the symbols the formatter emits, never arbitrary trailing text. */
+export function parseNumber(text: string, formatter: NumberFormatter): number | null {
+  if (text.trim() === "") return null;
+  const options = formatter.resolvedOptions();
+  const digits = new Intl.NumberFormat(options.locale, { useGrouping: false });
+  let clean = text.trim();
+  for (let digit = 0; digit < 10; digit += 1)
+    clean = clean.split(digits.format(digit)).join(String(digit));
+  const parts = formatter.formatToParts(-12345.6);
+  const decimal =
+    numberFormatter(options.locale)
+      .formatToParts(1.1)
+      .find((part) => part.type === "decimal")?.value ?? ".";
+  const accounting = clean.startsWith("(") && clean.endsWith(")");
+  if (accounting) clean = clean.slice(1, -1);
+  for (const part of parts) {
+    if (["group", "currency", "unit", "percentSign", "literal"].includes(part.type))
+      clean = clean.split(part.value).join("");
+    if (part.type === "minusSign") clean = clean.split(part.value).join("-");
+  }
+  clean = clean
+    .split(decimal)
+    .join(".")
+    .replace(/[\s\u200e\u200f\u061c]/g, "");
+  if (!/^[+-]?(?:\d+(?:\.\d*)?|\.\d+)$/.test(clean)) return NaN;
+  const value = (Number(clean) * (accounting ? -1 : 1)) / (options.style === "percent" ? 100 : 1);
+  return Number.isFinite(value) ? value : NaN;
+}
+
+type NumberState = {
+  value: number | null,
+  text: string,
+  invalid: boolean,
+  disabled: boolean,
+  readOnly: boolean,
+  min: number | void,
+  max: number | void,
+  formatter: NumberFormatter,
+  edit: (text: string) => void,
+  commit: () => void,
+  stepBy: (direction: number) => void,
+  boundary: (value: number | void) => void,
+};
+const NumberContext: React.Context<NumberState | null> = createContext(null);
+hook useNumber(): NumberState {
+  const state = useContext(NumberContext);
+  if (state == null) throw new Error("NumberField parts must be inside NumberField.Root");
+  return state;
+}
+
+export component NumberFieldRoot(
+  children: React.Node,
+  value?: number | null,
+  defaultValue?: number | null = null,
+  onValueChange?: (value: number | null) => void,
+  onValidationChange?: (invalid: boolean) => void,
+  min?: number,
+  max?: number,
+  step?: number,
+  formatOptions?: NumberFormatOptions,
+  disabled?: boolean = false,
+  readOnly?: boolean = false,
+  render?: RenderProp,
+  ...rest: Rest
+) {
+  const increment = step ?? (formatOptions?.style === "percent" ? 0.01 : 1);
+  if (
+    !Number.isFinite(increment) ||
+    increment <= 0 ||
+    (min != null && !Number.isFinite(min)) ||
+    (max != null && !Number.isFinite(max)) ||
+    (min != null && max != null && min > max)
+  ) {
+    throw new RangeError("NumberField requires finite bounds and a positive increment");
+  }
+  const upperBound =
+    max == null
+      ? undefined
+      : Number(
+          ((min ?? 0) + Math.floor((max - (min ?? 0)) / increment + 1e-9) * increment).toPrecision(
+            15,
+          ),
+        );
+  const { locale } = useLocale();
+  const formatter = useMemo(() => numberFormatter(locale, formatOptions), [locale, formatOptions]);
+  const [current, setCurrent] = useControlled(value, defaultValue, onValueChange);
+  const [draft, setDraft] = useState<string | null>(null);
+  const text = draft ?? (current == null ? "" : formatter.format(current));
+  const parsed = parseNumber(text, formatter);
+  const invalid =
+    parsed != null &&
+    (!Number.isFinite(parsed) ||
+      (min != null && parsed < min) ||
+      (max != null && parsed > max) ||
+      Math.abs((parsed - (min ?? 0)) / increment - Math.round((parsed - (min ?? 0)) / increment)) >
+        1e-7);
+  const assign = useStableCallback((next: number | null) => {
+    if (disabled || readOnly) return;
+    setDraft(null);
+    setCurrent(next);
+    onValidationChange?.(false);
+  });
+  const commit = useStableCallback(() => {
+    if (disabled || readOnly) return;
+    onValidationChange?.(invalid);
+    if (!invalid) assign(parsed);
+  });
+  const stepBy = useStableCallback((direction: number) => {
+    const start = parsed != null && Number.isFinite(parsed) ? parsed : (current ?? min ?? 0);
+    const base = min ?? 0;
+    const position = (start - base) / increment;
+    const index =
+      direction > 0
+        ? Math.floor(position + 1e-9) + direction
+        : Math.ceil(position - 1e-9) + direction;
+    const next = Number((base + index * increment).toPrecision(15));
+    const ceiling =
+      max == null
+        ? Infinity
+        : Number((base + Math.floor((max - base) / increment + 1e-9) * increment).toPrecision(15));
+    assign(Math.max(min ?? -Infinity, Math.min(ceiling, next)));
+  });
+  const state = {
+    value: current,
+    text,
+    invalid,
+    disabled,
+    readOnly,
+    min,
+    max: upperBound,
+    formatter,
+    edit: (next: string) => {
+      if (!disabled && !readOnly) setDraft(next);
+    },
+    commit,
+    stepBy,
+    boundary: (next: number | void) => {
+      if (next != null)
+        assign(
+          Number(
+            (
+              (min ?? 0) +
+              Math.floor((next - (min ?? 0)) / increment + 1e-9) * increment
+            ).toPrecision(15),
+          ),
+        );
+    },
+  };
+  const props = withProps(rest, { children, "data-invalid": invalid ? "" : undefined });
+  return (
+    <NumberContext.Provider value={state}>
+      {render != null ? render(props) : <div {...props} />}
+    </NumberContext.Provider>
+  );
+}
+
+/** Field.Control may render this input to supply the label, description and error ids. */
+export component NumberFieldInput(render?: RenderProp, ...rest: Rest) {
+  const state = useNumber();
+  const props = withProps(rest, {
+    type: "text",
+    role: "spinbutton",
+    inputMode: "decimal",
+    value: state.text,
+    disabled: state.disabled,
+    readOnly: state.readOnly,
+    "aria-valuenow": state.value == null || !Number.isFinite(state.value) ? undefined : state.value,
+    "aria-valuetext": state.text || undefined,
+    "aria-valuemin": state.min,
+    "aria-valuemax": state.max,
+    "aria-invalid": state.invalid ? "true" : rest["aria-invalid"],
+    onChange: composeHandlers(rest.onChange, (event: $FlowFixMe) =>
+      state.edit(event.currentTarget.value),
+    ),
+    onBlur: composeHandlers(rest.onBlur, state.commit),
+    onKeyDown: composeHandlers(rest.onKeyDown, (event: $FlowFixMe) => {
+      if (state.disabled || state.readOnly) return;
+      const key = event.key;
+      if (["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", "Enter"].includes(key)) {
+        event.preventDefault();
+        if (key === "Home") state.boundary(state.min);
+        else if (key === "End") state.boundary(state.max);
+        else if (key === "Enter") state.commit();
+        else
+          state.stepBy(
+            key === "ArrowUp" ? 1 : key === "ArrowDown" ? -1 : key === "PageUp" ? 10 : -10,
+          );
+      }
+    }),
+  });
+  return render != null ? render(props) : <input {...props} />;
+}
+
+export component NumberFieldIncrement(
+  children?: React.Node = "+",
+  render?: RenderProp,
+  ...rest: Rest
+) {
+  const state = useNumber();
+  const props = withProps(rest, {
+    children,
+    type: "button",
+    "aria-label": rest["aria-label"] ?? "Increase",
+    disabled:
+      state.disabled ||
+      state.readOnly ||
+      (state.max != null && state.value != null && state.value >= state.max),
+    onClick: composeHandlers(rest.onClick, () => state.stepBy(1)),
+  });
+  return render != null ? render(props) : <button {...props} />;
+}
+export component NumberFieldDecrement(
+  children?: React.Node = "−",
+  render?: RenderProp,
+  ...rest: Rest
+) {
+  const state = useNumber();
+  const props = withProps(rest, {
+    children,
+    type: "button",
+    "aria-label": rest["aria-label"] ?? "Decrease",
+    disabled:
+      state.disabled ||
+      state.readOnly ||
+      (state.min != null && state.value != null && state.value <= state.min),
+    onClick: composeHandlers(rest.onClick, () => state.stepBy(-1)),
+  });
+  return render != null ? render(props) : <button {...props} />;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniflowed/ui",
-  "version": "0.0.0-alpha.43",
+  "version": "0.0.0-alpha.44",
   "description": "Headless, accessible React components whose composition Flow checks, part of the Unified Toolchain for Flow.",
   "type": "module",
   "license": "MIT",
@@ -19,10 +19,10 @@
     "!*.test.js"
   ],
   "dependencies": {
-    "@uniflowed/core": "0.0.0-alpha.43",
-    "@uniflowed/hooks": "0.0.0-alpha.43",
-    "@uniflowed/react": "0.0.0-alpha.43",
-    "@uniflowed/state": "0.0.0-alpha.43"
+    "@uniflowed/core": "0.0.0-alpha.44",
+    "@uniflowed/hooks": "0.0.0-alpha.44",
+    "@uniflowed/react": "0.0.0-alpha.44",
+    "@uniflowed/state": "0.0.0-alpha.44"
   },
   "peerDependencies": {
     "react": ">=19"

package/range-calendar.js

@@ -0,0 +1,78 @@
+// @flow
+"use client";
+import * as React from "@uniflowed/react";
+import { useState } from "@uniflowed/react";
+import type { PlainDate } from "@uniflowed/core/temporal";
+import { useControlled } from "./internal/controlled-state.js";
+import type { Rest } from "./internal/merge-props.js";
+import type { DateRange } from "./internal/date-range.js";
+import { validateRange, unavailableInRange } from "./internal/date-range.js";
+import { CalendarRoot, CalendarMonth } from "./calendar.js";
+export type { DateRange } from "./internal/date-range.js";
+
+export component RangeCalendarRoot(
+  children?: React.Node = <CalendarMonth />,
+  value?: DateRange | null,
+  defaultValue?: DateRange | null = null,
+  onValueChange?: (value: DateRange | null) => void,
+  minValue?: string,
+  maxValue?: string,
+  isDateDisabled?: (date: PlainDate) => boolean,
+  defaultFocused?: string,
+  today?: string,
+  locale?: string,
+  focusedDayRef?: { current: HTMLElement | null },
+  ...rest: Rest
+) {
+  const [range, setRange] = useControlled(value, defaultValue, onValueChange);
+  const [anchor, setAnchor] = useState<string | null>(null);
+  const [announcement, announce] = useState("");
+  validateRange(range);
+  const disabled = (date: PlainDate) =>
+    (minValue != null && date.toString() < minValue) ||
+    (maxValue != null && date.toString() > maxValue) ||
+    isDateDisabled?.(date) === true;
+  const choose = (date: PlainDate) => {
+    const iso = date.toString();
+    if (disabled(date)) return;
+    if (anchor == null) {
+      setAnchor(iso);
+      announce(`Start ${iso}. Choose an end date.`);
+      return;
+    }
+    const start = anchor < iso ? anchor : iso,
+      end = anchor < iso ? iso : anchor;
+    if (unavailableInRange(start, end, isDateDisabled)) {
+      announce("The range contains an unavailable date");
+      return;
+    }
+    setRange({ start, end });
+    setAnchor(null);
+    announce(`Selected ${start} to ${end}`);
+  };
+  const selected = (date: PlainDate) => {
+    const iso = date.toString();
+    return anchor != null
+      ? iso === anchor
+      : range != null && iso >= range.start && iso <= range.end;
+  };
+  return (
+    <div {...rest}>
+      <CalendarRoot
+        value={anchor ?? range?.start ?? null}
+        defaultFocused={defaultFocused}
+        today={today}
+        locale={locale}
+        focusedDayRef={focusedDayRef}
+        isDateDisabled={disabled}
+        isDateSelected={selected}
+        onValueChange={choose}
+      >
+        {children}
+      </CalendarRoot>
+      <span role="status" aria-live="polite">
+        {announcement}
+      </span>
+    </div>
+  );
+}