@box-kite/react 2.2.4 → 2.2.6

package/react-shared.mjs

@@ -11,7 +11,7 @@ function a({ classNames: e, styleElements: t }, n) {
 //#region src/react/boxComponent.ts
 var o = parseInt(e.version, 10) >= 19;
 function s(e, r) {
-	let i = o ? (t) => e(t, t.ref ?? null) : t(e), a = n(i);
+	let i = o ? ({ ref: t, ...n }) => e(n, t ?? null) : t(e), a = n(i);
 	return i.displayName = r, a.displayName = r, a;
 }
 //#endregion
@@ -57,12 +57,12 @@ function _(t) {
 }
 //#endregion
 //#region src/react/resolveStyles.ts
-function v(e, t) {
-	let { classNames: n, signature: r, styleElements: a } = i().resolveClassNames(e, t);
+function v(e, t, n) {
+	let { classNames: r, signature: a, styleElements: o } = i().resolveClassNames(e, t, n);
 	return {
-		classNames: n,
-		signature: r,
-		styleElements: _(a)
+		classNames: r,
+		signature: a,
+		styleElements: _(o)
 	};
 }
 //#endregion

package/registry/blocks/dashboard-shell/dashboard-shell.d.ts

@@ -17,6 +17,8 @@ export interface DashboardShellProps {
     /** The heading above the page, and the `id` of the nav item that is marked as current. */
     title: string;
     current?: string;
+    /** The theme to open in. Without it the shell follows the reader's saved choice, then their system. */
+    theme?: string;
     children: ReactNode;
 }
-export default function DashboardShell({ title, current, children }: DashboardShellProps): import("react").JSX.Element;
+export default function DashboardShell({ title, current, theme, children }: DashboardShellProps): import("react").JSX.Element;

package/registry/designs/store/address-form.d.ts

@@ -0,0 +1,11 @@
+export interface AddressFormProps {
+    /** The fieldset's caption, and the prefix every field submits under: `shipping.city`, `billing.city`. */
+    legend?: string;
+    prefix?: string;
+}
+/**
+ * A postal address as a `<fieldset>`: name, two street lines, city, postcode, country and a phone. Every
+ * field carries the `autocomplete` token a browser fills it from, which on a phone is most of the typing.
+ * Drop two into one form, with different prefixes, for a shipping and a billing address.
+ */
+export default function AddressForm({ legend, prefix }: AddressFormProps): import("react").JSX.Element;

package/registry/designs/store/cart-items.d.ts

@@ -0,0 +1,10 @@
+import { CartLine } from './store-data';
+export interface CartItemsProps {
+    lines: readonly CartLine[];
+    onLinesChange: (lines: CartLine[]) => void;
+}
+/**
+ * The lines of a cart: picture, name, the options chosen, a quantity stepper, the line's price and a way
+ * out. It holds no state — the cart is the page's, so the summary beside it reads the same list.
+ */
+export default function CartItems({ lines, onLinesChange }: CartItemsProps): import("react").JSX.Element;

package/registry/designs/store/cart-page.d.ts

@@ -0,0 +1,4 @@
+/** The cart: its lines beside the summary, both reading one list, and an empty state once it is cleared. */
+export default function CartPage({ theme }: {
+    theme?: string;
+}): import("react").JSX.Element;

package/registry/designs/store/checkout-page.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The checkout: one form of contact, address, delivery and payment, beside the order it pays for. The
+ * sections are separate blocks, each a `<fieldset>`, so the form reads every field by name on submit.
+ */
+export default function CheckoutPage({ theme }: {
+    theme?: string;
+}): import("react").JSX.Element;

package/registry/designs/store/credit-card-form.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A card payment fieldset: number, name, expiry and security code, formatted as they are typed and checked
+ * when a field is left, with a card drawn above that fills in as they go. It is a `<fieldset>`, not a form,
+ * so it drops into a checkout form beside the address; the fields submit as `cardNumber`, `cardName`,
+ * `cardExpiry` and `cardCvc`, with the `autocomplete` tokens a browser fills a saved card from.
+ *
+ * This only shapes the input. Sending a raw card number to your own server puts you in scope for PCI DSS —
+ * in production these fields are usually your payment provider's hosted inputs, laid out the same way.
+ */
+export default function CreditCardForm(): import("react").JSX.Element;

package/registry/designs/store/form-field.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+/** What a field's control is handed: its `id`, and the two attributes that tie an error to it. */
+export interface FieldControl {
+    id: string;
+    'aria-invalid'?: true;
+    'aria-describedby'?: string;
+}
+export interface FormFieldProps {
+    label: string;
+    /** Shown under the control and read with it; the control is marked invalid while there is one. */
+    error?: string;
+    hint?: string;
+    children: (control: FieldControl) => ReactNode;
+}
+/**
+ * A label, a control and what is wrong with it. The control is a render prop so the field can hand it the
+ * ids — a message the screen reader is not pointed at is a message only the sighted get.
+ */
+export default function FormField({ label, error, hint, children }: FormFieldProps): import("react").JSX.Element;

package/registry/designs/store/order-summary.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { CartLine } from './store-data';
+export interface OrderSummaryProps {
+    lines: readonly CartLine[];
+    /** The shipping price once a method is chosen. Left out, the summary says it is worked out at checkout. */
+    shipping?: number;
+    /** List the objects themselves — what a checkout page shows, where the cart is no longer on screen. */
+    showLines?: boolean;
+    /** The button underneath: "Checkout" on the cart page, nothing on the checkout. */
+    action?: ReactNode;
+    /** Told the discount once a code is accepted, for a page that shows the total somewhere else too. */
+    onDiscountChange?: (amount: number) => void;
+}
+/**
+ * Subtotal, discount, shipping, tax and the total, with a discount-code field and how far the cart is from
+ * free shipping. Every figure is computed from `lines`, so it can never disagree with the cart beside it.
+ */
+export default function OrderSummary({ lines, shipping, showLines, action, onDiscountChange }: OrderSummaryProps): import("react").JSX.Element;

package/registry/designs/store/product-art.d.ts

@@ -0,0 +1,26 @@
+import { Shape } from './store-data';
+export type ArtView = 'front' | 'set';
+export interface ProductArtProps {
+    shape: Shape;
+    finish: string;
+    /** For the `set` view: more finishes, each on its own tile beside the first. */
+    also?: readonly string[];
+    view?: ArtView;
+    /** Names the picture; without one it is decoration, hidden from assistive technology. */
+    label?: string;
+    /** The line's width in the icon's own 24-unit grid: thinner on a large tile, heavier on a thumbnail. */
+    stroke?: 0.5 | 0.75 | 1 | 1.25 | 1.5;
+    /** Rounds the picture’s corners, on the ÷4 scale: the tiles clip themselves, so nothing around them has to. */
+    radius?: 2 | 3 | 4 | 6;
+}
+/** Fills its parent: give the parent a size or an aspect ratio, and the picture takes the rest. */
+export default function ProductArt({ shape, finish, also, view, label, stroke, radius }: ProductArtProps): import("react").JSX.Element;
+/** A flat dot of the finish, for the colour swatches. */
+export declare function finishSwatch(id: string): {
+    vars: {
+        swatch: string;
+    };
+    css: {
+        backgroundColor: string;
+    };
+};

package/registry/designs/store/product-card.d.ts

@@ -0,0 +1,11 @@
+import { Product } from './store-data';
+export interface ProductCardProps {
+    product: Product;
+    /** The heading level the card's name takes in the page around it. */
+    level?: 'h2' | 'h3';
+}
+/**
+ * One product in a grid. The whole card is the link, and its name is the link's text: the picture is
+ * decoration beside it, and the finish swatches are spelled out for a screen reader in one sentence.
+ */
+export default function ProductCard({ product, level }: ProductCardProps): import("react").JSX.Element;

package/registry/designs/store/product-gallery.d.ts

@@ -0,0 +1,11 @@
+import { Product } from './store-data';
+export interface ProductGalleryProps {
+    product?: Product;
+    /** The finish on show — the variant picker beside the gallery owns it. */
+    finish?: string;
+}
+/**
+ * A product's pictures: one large view and a row of thumbnails that choose it. The thumbnails are tabs
+ * (APG's tabbed carousel), so the arrow keys move between them and each picture is named by its tab.
+ */
+export default function ProductGallery({ product, finish }: ProductGalleryProps): import("react").JSX.Element;

package/registry/designs/store/product-grid.d.ts

@@ -0,0 +1,10 @@
+import { Product } from './store-data';
+export interface ProductGridProps {
+    products?: readonly Product[];
+    title?: string;
+}
+/**
+ * A product grid with filters: categories and finishes as checkboxes, a sort, and a count that is announced
+ * as it changes. Filtering is a `useMemo` over the list it is given — hand it the page your API returned.
+ */
+export default function ProductGrid({ products, title }: ProductGridProps): import("react").JSX.Element;

package/registry/designs/store/product-page.d.ts

@@ -0,0 +1,5 @@
+/** One product: the gallery and the picker share the finish, and adding to the cart moves the header's count. */
+export default function ProductPage({ slug, theme }: {
+    slug?: string;
+    theme?: string;
+}): import("react").JSX.Element;

package/registry/designs/store/quantity-stepper.d.ts

@@ -0,0 +1,13 @@
+export interface QuantityStepperProps {
+    value: number;
+    onChange: (value: number) => void;
+    /** What is being counted, for the buttons' names: "Add one Bolt the robot". */
+    item: string;
+    min?: number;
+    max?: number;
+}
+/**
+ * Two buttons and the count between them. The count is an `<output>`, which is a polite live region of its
+ * own, so a screen reader hears the new number after each press with nothing wired up.
+ */
+export default function QuantityStepper({ value, onChange, item, min, max }: QuantityStepperProps): import("react").JSX.Element;

package/registry/designs/store/shipping-method.d.ts

@@ -0,0 +1,14 @@
+import { ShippingMethod as Method } from './store-data';
+export interface ShippingMethodProps {
+    methods?: readonly Method[];
+    value?: string;
+    onValueChange?: (id: string) => void;
+    /** Standard shipping is free above this subtotal. */
+    freeStandard?: boolean;
+}
+/**
+ * Delivery options as cards. Each card is the `<label>` of a native radio, so the whole card is the
+ * target, the set is one tab stop with the arrow keys inside it, and the chosen card is styled with
+ * `:has(:checked)` — the radio itself stays visible, because it is what says this is a choice of one.
+ */
+export default function ShippingMethod({ methods, value, onValueChange, freeStandard }: ShippingMethodProps): import("react").JSX.Element;

package/registry/designs/store/store-data.d.ts

@@ -0,0 +1,53 @@
+/**
+ * The catalogue the store pages render: plain objects, so swapping in your own fetch changes nothing else.
+ * A finish is the object's colour, the wash its picture sits on, and the ink the picture is drawn in.
+ */
+export type Shape = 'lamp' | 'clock' | 'vase' | 'speaker' | 'mug' | 'chair' | 'glass' | 'desk-lamp';
+export interface Finish {
+    id: string;
+    name: string;
+    /** The swatch, as any CSS colour: the finishes are muted on purpose, between the palette's steps. */
+    color: string;
+    /** The wash behind the picture: the finish, lightened. */
+    tile: string;
+    /** The picture's line: a deep tone of the same hue, or a light one on a dark finish. */
+    ink: string;
+}
+export interface Product {
+    slug: string;
+    name: string;
+    shape: Shape;
+    category: string;
+    price: number;
+    finishes: readonly string[];
+    sizes?: readonly string[];
+    badge?: string;
+    summary: string;
+}
+export interface CartLine {
+    id: string;
+    slug: string;
+    finish: string;
+    size?: string;
+    quantity: number;
+}
+export interface ShippingMethod {
+    id: string;
+    name: string;
+    detail: string;
+    price: number;
+}
+export declare const STORE_NAME = "Still";
+export declare const finishes: Record<string, Finish>;
+export declare const products: readonly Product[];
+export declare const categories: string[];
+export declare const sampleCart: readonly CartLine[];
+export declare const shippingMethods: readonly ShippingMethod[];
+/** Orders over this ship free on the standard service. */
+export declare const FREE_SHIPPING_FROM = 250;
+export declare const TAX_RATE = 0.08;
+/** A price as a tag prints it: $240, with cents only when there are some. */
+export declare const formatPrice: (amount: number) => string;
+export declare const productBySlug: (slug: string) => Product;
+export declare const subtotalOf: (lines: readonly CartLine[]) => number;
+export declare const countOf: (lines: readonly CartLine[]) => number;

package/registry/designs/store/store-design.d.ts

@@ -0,0 +1,63 @@
+import { ReactNode } from 'react';
+/**
+ * The store's design: the built-in components restyled for this one brand, in light and dark. It registers
+ * nothing — `Box.createComponents()` returns a design, and `StoreSurface` applies it to its subtree only, so
+ * the store can sit inside an app that looks like something else.
+ */
+export declare const storeDesign: any;
+/** Spread on a heading: a medium weight and tight tracking, in whatever sans the system already has. */
+export declare const heading: {
+    readonly fontWeight: 500;
+    readonly letterSpacing: -0.5;
+};
+/** The small spaced capitals over a section, beside a badge or under a price. */
+export declare const eyebrow: {
+    readonly fontSize: 12;
+    readonly fontWeight: 500;
+    readonly letterSpacing: 1.5;
+    readonly textTransform: "uppercase";
+};
+/** A panel on the page: a hairline and soft corners, nothing else. */
+export declare const card: {
+    readonly b: 1;
+    readonly borderRadius: 4;
+    readonly borderColor: "stone-200";
+    readonly theme: {
+        readonly dark: {
+            readonly borderColor: "stone-800";
+        };
+    };
+};
+/** Secondary text, in both themes. */
+export declare const muted: {
+    readonly color: "stone-500";
+    readonly theme: {
+        readonly dark: {
+            readonly color: "stone-400";
+        };
+    };
+};
+/**
+ * Where the pages and blocks link to. A provider rather than constants, so the same pages work under any
+ * router: wrap them in `<StoreLinks.Provider value={…}>` with your own routes.
+ */
+export interface StoreRoutes {
+    shop: string;
+    product: (slug: string) => string;
+    cart: string;
+    checkout: string;
+}
+export declare const StoreLinks: import('react').Context<StoreRoutes>;
+export declare const useStoreLinks: () => StoreRoutes;
+/** The design and the page colours, with no theme of its own: it follows whatever theme is around it. */
+export declare function StoreSurface({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * A whole store page: its own light/dark switch, remembered under its own key, around `StoreSurface`.
+ * Without `theme` it opens in the reader's saved choice, then their system's.
+ */
+export declare function StoreTheme({ theme, children }: {
+    theme?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/registry/designs/store/store-shell.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export interface StoreShellProps {
+    /** The number on the cart link. */
+    cartCount?: number;
+    /** A checkout's header: the brand and a padlock, with nothing to wander off through. */
+    checkout?: boolean;
+    /** Opens in this theme rather than the reader's saved or system one. */
+    theme?: string;
+    children: ReactNode;
+}
+/** The frame every store page shares: the header, the page, the footer, and the theme switch. */
+export default function StoreShell({ cartCount, checkout, theme, children }: StoreShellProps): import("react").JSX.Element;

package/registry/designs/store/storefront-page.d.ts

@@ -0,0 +1,4 @@
+/** The store's front page: the hero, three promises, the collection with its filters, and the shop's story. */
+export default function StorefrontPage({ theme }: {
+    theme?: string;
+}): import("react").JSX.Element;

package/registry/designs/store/variant-picker.d.ts

@@ -0,0 +1,15 @@
+import { CartLine, Product } from './store-data';
+export interface VariantPickerProps {
+    product?: Product;
+    /** The finish, when the page owns it — the gallery beside the picker shows the same one. */
+    finish?: string;
+    onFinishChange?: (finish: string) => void;
+    /** Called with the line the reader added. */
+    onAdd?: (line: CartLine) => void;
+}
+/**
+ * Colour, size and quantity, then Add to cart. The swatches and the sizes are native radios, each set one
+ * tab stop with the arrow keys inside it, and only the frame around them is drawn here: the `<label>`
+ * finds out which radio is chosen with `:has(:checked)`, so nothing is mirrored into state for the styling.
+ */
+export default function VariantPicker({ product, finish, onFinishChange, onAdd }: VariantPickerProps): import("react").JSX.Element;

package/rsc.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./rolldown-runtime.cjs"),t=require("./react-shared.cjs");let n=require("react");n=e.t(n,1);let r=require("@box-kite/core");(0,r.getDefaultEngine)().configure({sink:`element`});function i(e,r){let{tag:i=`div`,children:a}=e;if(typeof a==`function`)throw Error(`[box-kite] Box children as a function track hover state, which needs the client Box — render it from a 'use client' module.`);let{classNames:o,styleElements:s}=t.l(e,i===`svg`);return n.default.createElement(n.default.Fragment,null,s,n.default.createElement(i,t.d(e,o),a))}function a(e){return i(e)}var o=a;o.extend=r.BoxExtends.extend,o.components=r.BoxExtends.components,o.keyframes=r.BoxExtends.keyframes,o.spring=r.Springs.spring,o.getVariableValue=e=>(0,r.getDefaultEngine)().getVariableValue(e),o.configure=e=>(0,r.getDefaultEngine)().configure(e),o.viewTransition=r.startViewTransition;function s(e,n){return t.p(t.l(e,n?.svg===!0),e.className)}exports.default=o,exports.useBoxElement=i,exports.useClassNames=s;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./rolldown-runtime.cjs"),t=require("./react-shared.cjs");let n=require("react");n=e.t(n,1);let r=require("@box-kite/core");(0,r.getDefaultEngine)().configure({sink:`element`});function i(e,r){let{tag:i=`div`,children:a}=e;if(typeof a==`function`)throw Error(`[box-kite] Box children as a function track hover state, which needs the client Box — render it from a 'use client' module.`);let{classNames:o,styleElements:s}=t.l(e,i===`svg`);return n.default.createElement(n.default.Fragment,null,s,n.default.createElement(i,t.d(e,o),a))}function a(e){return i(e)}var o=a;o.extend=r.BoxExtends.extend,o.components=r.BoxExtends.components,o.createComponents=r.BoxExtends.createComponents,o.keyframes=r.BoxExtends.keyframes,o.spring=r.Springs.spring,o.getVariableValue=e=>(0,r.getDefaultEngine)().getVariableValue(e),o.configure=e=>(0,r.getDefaultEngine)().configure(e),o.viewTransition=r.startViewTransition;function s(e,n){return t.p(t.l(e,n?.svg===!0),e.className)}exports.default=o,exports.useBoxElement=i,exports.useClassNames=s;

package/rsc.d.ts

@@ -12,6 +12,8 @@ interface RscBoxType {
     <TTag extends keyof React.JSX.IntrinsicElements = 'div', TKey extends keyof ComponentsAndVariants = never>(props: BoxCoreProps<TTag, TKey>): React.ReactNode;
     extend: typeof BoxExtends.extend;
     components: typeof BoxExtends.components;
+    /** A design for one subtree. A Server Component cannot read the provider that applies it; a client one under `<Box.Components>` can. */
+    createComponents: typeof BoxExtends.createComponents;
     keyframes: typeof BoxExtends.keyframes;
     /** A spring of your own, sampled into `{ easing, duration }`. Pure arithmetic, so a Server Component can call it. */
     spring: typeof Springs.spring;

package/rsc.mjs

@@ -13,7 +13,7 @@ function l(e) {
 	return c(e);
 }
 var u = l;
-u.extend = i.extend, u.components = i.components, u.keyframes = i.keyframes, u.spring = a.spring, u.getVariableValue = (e) => o().getVariableValue(e), u.configure = (e) => o().configure(e), u.viewTransition = s;
+u.extend = i.extend, u.components = i.components, u.createComponents = i.createComponents, u.keyframes = i.keyframes, u.spring = a.spring, u.getVariableValue = (e) => o().getVariableValue(e), u.configure = (e) => o().configure(e), u.viewTransition = s;
 function d(e, r) {
 	return n(t(e, r?.svg === !0), e.className);
 }

package/scrolling.cjs

@@ -0,0 +1 @@
+const e=require("./platform.cjs");function t(e,t,n=e.length){let r=0,i=n-1;if(i<=0)return 0;for(;r<i;){let n=r+i+1>>>1;e[n]<=t?r=n:i=n-1}return r}function n(t){let n=e.c(t),r=n?.ownerDocument?.defaultView;if(!n||!r)return null;let i=n.ownerDocument.scrollingElement??n.ownerDocument.documentElement;for(let e=n.parentElement;e&&e!==i&&e!==n.ownerDocument.body;e=e.parentElement)if(/auto|scroll|overlay/.test(r.getComputedStyle(e).overflowY)&&e.scrollHeight>e.clientHeight)return e;return null}Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return t}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return n}});

package/scrolling.mjs

@@ -0,0 +1,22 @@
+import { c as e } from "./platform.mjs";
+//#region src/utils/virtual/rowSearch.ts
+function t(e, t, n = e.length) {
+	let r = 0, i = n - 1;
+	if (i <= 0) return 0;
+	for (; r < i;) {
+		let n = r + i + 1 >>> 1;
+		e[n] <= t ? r = n : i = n - 1;
+	}
+	return r;
+}
+//#endregion
+//#region src/utils/scroll/scrollUtils.ts
+function n(t) {
+	let n = e(t), r = n?.ownerDocument?.defaultView;
+	if (!n || !r) return null;
+	let i = n.ownerDocument.scrollingElement ?? n.ownerDocument.documentElement;
+	for (let e = n.parentElement; e && e !== i && e !== n.ownerDocument.body; e = e.parentElement) if (/auto|scroll|overlay/.test(r.getComputedStyle(e).overflowY) && e.scrollHeight > e.clientHeight) return e;
+	return null;
+}
+//#endregion
+export { t as n, n as t };

package/utils/date/calendar.d.ts

@@ -0,0 +1,44 @@
+/** A day on the proleptic Gregorian calendar, with no time and no zone. `month` is 1–12. */
+export interface DateFields {
+    year: number;
+    month: number;
+    day: number;
+}
+/** A wall-clock time, with no date and no zone. */
+export interface TimeFields {
+    hour: number;
+    minute: number;
+    second: number;
+    millisecond: number;
+}
+export type DateTimeFields = DateFields & TimeFields;
+export declare const MS_PER_MINUTE = 60000;
+export declare const MS_PER_HOUR = 3600000;
+export declare const MS_PER_DAY = 86400000;
+export declare const MIDNIGHT: TimeFields;
+/** Floor division, so a negative epoch lands on the day before rather than the day after. */
+export declare function floorDiv(value: number, by: number): number;
+/** A remainder that is never negative. */
+export declare function mod(value: number, by: number): number;
+export declare function isLeapYear(year: number): boolean;
+export declare function daysInMonth(year: number, month: number): number;
+/** Days since 1970-01-01, for any year — Howard Hinnant's `days_from_civil`, pure integer arithmetic and no `Date`. */
+export declare function epochDay({ year, month, day }: DateFields): number;
+/** The inverse of `epochDay`. */
+export declare function fromEpochDay(days: number): DateFields;
+/** 0 is Sunday, which is what `Intl.Locale#getWeekInfo` counts from too once its 7 is taken as 0. */
+export declare function dayOfWeek(date: DateFields): number;
+/** A wall clock read as though it were UTC — the number every zone conversion starts from. */
+export declare function fieldsToMs(fields: DateTimeFields): number;
+export declare function msToFields(ms: number): DateTimeFields;
+export declare function addDays(date: DateFields, days: number): DateFields;
+/** Months forward or back, the day clamped to the month it lands in — 31 January plus a month is 28 or 29 February. */
+export declare function addMonths(date: DateFields, months: number): DateFields;
+export declare function compareDates(a: DateFields, b: DateFields): number;
+export declare function isValidDate({ year, month, day }: DateFields): boolean;
+export declare function isValidTime({ hour, minute, second, millisecond }: TimeFields): boolean;
+/** The ISO 8601 week: weeks start on Monday and week 1 holds the year's first Thursday. */
+export declare function isoWeek(date: DateFields): {
+    year: number;
+    week: number;
+};

package/utils/date/calendarModel.d.ts

@@ -0,0 +1,46 @@
+import { DateFields } from './calendar';
+/** One day cell of a month grid. */
+export interface CalendarDay {
+    /** `2026-10-19`. */
+    date: string;
+    day: number;
+    /** Whether it belongs to the month on show rather than the weeks either side of it. */
+    outside: boolean;
+}
+export interface CalendarWeek {
+    /** The ISO week number of the week's Thursday-anchored year. */
+    week: number;
+    days: CalendarDay[];
+}
+/** A day as fields, or `null` for anything that is not a date. */
+export declare function dayOf(value: string | null | undefined): DateFields | null;
+export declare function dayText(date: DateFields): string;
+/**
+ * Six weeks starting on the locale's first day, always six so the grid does not change height from month to
+ * month — the month on show plus the days around it that complete its weeks.
+ */
+export declare function monthGrid(year: number, month: number, firstDay: number): CalendarWeek[];
+export interface NavigationOptions {
+    rtl: boolean;
+    firstDay: number;
+}
+/**
+ * Where a key moves the focused day, APG's map: the arrows a day or a week (the sideways pair following the
+ * reading order), Home and End the week's ends, Page Up and Down a month, with Shift a year. `null` for any
+ * other key.
+ */
+export declare function moveFocus(focused: DateFields, key: string, shift: boolean, options: NavigationOptions): DateFields | null;
+export interface Bounds {
+    min?: DateFields | null;
+    max?: DateFields | null;
+}
+/** Whether a day is before `min` or after `max`. */
+export declare function isOutOfBounds(date: DateFields, bounds: Bounds): boolean;
+/** A day pulled inside the bounds. */
+export declare function clampDay(date: DateFields, bounds: Bounds): DateFields;
+/** A range in order, whichever end was picked first. */
+export declare function orderedRange(a: DateFields, b: DateFields): [DateFields, DateFields];
+/** Where a day sits relative to a range: its first day, its last, strictly inside, or not in it. */
+export declare function rangePosition(date: DateFields, start: DateFields | null, end: DateFields | null): 'start' | 'end' | 'middle' | null;
+/** Whether any day of a range is one nobody can choose — a range is refused across a blocked day. */
+export declare function rangeCrosses(start: DateFields, end: DateFields, isBlocked: (date: string) => boolean): boolean;