sheer-ui 0.4.2 → 0.5.0

package/dist/internal/date-time/announcer.d.ts

@@ -0,0 +1,9 @@
+type AnnouncementKind = 'assertive' | 'polite';
+export type Announcer = ReturnType<typeof getAnnouncer>;
+/**
+ * Creates an announcer object that can be used to make `aria-live` announcements to screen readers.
+ */
+export declare function getAnnouncer(doc: Document | null): {
+    announce(value: string | null | number, kind?: AnnouncementKind, timeout?: number): NodeJS.Timeout | undefined;
+};
+export {};

package/dist/internal/date-time/announcer.js

@@ -0,0 +1,61 @@
+import { srOnlyStylesString } from '../tools/index.js';
+import { isHTMLElement } from '../tools/utils/dom.js';
+import { BROWSER } from 'esm-env';
+function getAriaNotifyDocument(doc) {
+    const ariaNotify = doc?.ariaNotify;
+    return typeof ariaNotify === 'function' ? doc : null;
+}
+const getAnnouncementText = (value) => typeof value === 'number' ? value.toString() : value === null ? 'Empty' : value.trim();
+/**
+ * Creates or gets an announcer element which is used to announce messages to screen readers.
+ * Within the date components, we use this to announce when the values of the individual segments
+ * change, as without it we get inconsistent behavior across screen readers.
+ */
+function initAnnouncer(doc) {
+    if (!BROWSER || !doc)
+        return null;
+    let el = doc.querySelector('[data-bits-announcer]');
+    const createLog = (kind) => {
+        const log = Object.assign(doc.createElement('div'), { role: 'log', ariaLive: kind });
+        log.setAttribute('aria-relevant', 'additions');
+        return log;
+    };
+    if (!isHTMLElement(el)) {
+        const div = doc.createElement('div');
+        div.style.cssText = srOnlyStylesString;
+        div.setAttribute('data-bits-announcer', '');
+        div.append(createLog('assertive'), createLog('polite'));
+        doc.body.prepend(div);
+        el = div;
+    }
+    return {
+        getLog: (kind) => {
+            const log = isHTMLElement(el) ? el.querySelector(`[aria-live="${kind}"]`) : null;
+            return isHTMLElement(log) ? log : null;
+        },
+    };
+}
+/**
+ * Creates an announcer object that can be used to make `aria-live` announcements to screen readers.
+ */
+export function getAnnouncer(doc) {
+    const announcer = getAriaNotifyDocument(doc) ? null : initAnnouncer(doc);
+    return {
+        announce(value, kind = 'assertive', timeout = 7500) {
+            if (!BROWSER || !doc)
+                return;
+            const text = getAnnouncementText(value);
+            const nativeDoc = getAriaNotifyDocument(doc);
+            if (nativeDoc) {
+                nativeDoc.ariaNotify(text, { priority: kind === 'assertive' ? 'high' : 'normal' });
+                return;
+            }
+            if (!announcer)
+                return;
+            const log = announcer.getLog(kind);
+            const content = Object.assign(doc.createElement('div'), { textContent: text });
+            kind === 'assertive' ? log?.replaceChildren(content) : log?.appendChild(content);
+            return setTimeout(() => content.remove(), timeout);
+        },
+    };
+}

package/dist/internal/date-time/calendar-helpers.svelte.d.ts

@@ -0,0 +1,124 @@
+import { type DateValue } from '@internationalized/date';
+import { type ReadableBox, type WritableBox } from '../tools/index.js';
+import type { Formatter } from './formatter.js';
+import type { DateMatcher, Month } from '../index.js';
+/** Is `node` a calendar cell? */
+export declare const isCalendarDayNode: (node: unknown) => node is HTMLElement;
+/** Date values strictly between `start` and `end` (exclusive of both). */
+export declare const getDaysBetween: (start: DateValue, end: DateValue) => DateValue[];
+export type CreateMonthProps = {
+    dateObj: DateValue;
+    /** 0 = Sunday, 1 = Monday, etc. */
+    weekStartsOn: number | undefined;
+    /** Always render 6 weeks, even if the month doesn't span that many. */
+    fixedWeeks: boolean;
+    locale: string;
+};
+type SetMonthProps = CreateMonthProps & {
+    numberOfMonths: number | undefined;
+    currentMonths?: Month<DateValue>[];
+};
+export declare const createMonths: ({ numberOfMonths, dateObj, ...monthProps }: SetMonthProps) => Month<DateValue>[];
+type ShiftCalendarPageProps = {
+    months: Month<DateValue>[];
+    placeholder: WritableBox<DateValue>;
+    pagedNavigation: boolean;
+    numberOfMonths: number;
+    direction: 1 | -1;
+    setAnchor: (value: DateValue) => void;
+};
+export declare function shiftCalendarPage({ months, placeholder, pagedNavigation, numberOfMonths, direction, setAnchor }: ShiftCalendarPageProps): void;
+export declare const shiftCalendarYear: (placeholder: WritableBox<DateValue>, years: number) => import("@internationalized/date").CalendarDate | import("@internationalized/date").CalendarDateTime | import("@internationalized/date").ZonedDateTime;
+export declare const setCalendarYear: (placeholder: WritableBox<DateValue>, year: number) => import("@internationalized/date").CalendarDate | import("@internationalized/date").CalendarDateTime | import("@internationalized/date").ZonedDateTime;
+export declare const setCalendarMonth: (placeholder: WritableBox<DateValue>, month: number) => import("@internationalized/date").CalendarDate | import("@internationalized/date").CalendarDateTime | import("@internationalized/date").ZonedDateTime;
+export declare const isOutsideCalendarView: (visibleMonths: DateValue[], date: DateValue) => boolean;
+export declare const getSelectableCells: (calendarNode: HTMLElement | null) => HTMLElement[];
+/** Reads `data-value` off `node` and writes it into `placeholder`. Shared by calendar + range calendar. */
+export declare const setPlaceholderToNodeValue: (node: HTMLElement, placeholder: WritableBox<DateValue>) => void;
+type ShiftCalendarFocusProps = {
+    node: HTMLElement;
+    add: number;
+    placeholder: WritableBox<DateValue>;
+    calendarNode: HTMLElement | null;
+    isPrevButtonDisabled: boolean;
+    isNextButtonDisabled: boolean;
+    months: Month<DateValue>[];
+    numberOfMonths: number;
+};
+/** Shared logic for shifting focus between cells in the calendar and range calendar. */
+export declare function shiftCalendarFocus({ node, add, placeholder, calendarNode, isPrevButtonDisabled, isNextButtonDisabled, months, numberOfMonths, }: ShiftCalendarFocusProps): void;
+type HandleCalendarKeydownProps = {
+    event: KeyboardEvent;
+    handleCellClick: (event: Event, date: DateValue) => void;
+    shiftFocus: (node: HTMLElement, add: number) => void;
+    placeholderValue: DateValue;
+};
+/** Shared keyboard event handler for the calendar and range calendar. */
+export declare function handleCalendarKeydown({ event, handleCellClick, shiftFocus, placeholderValue }: HandleCalendarKeydownProps): void;
+type GetWeekdaysProps = {
+    months: Month<DateValue>[];
+    weekdayFormat: Intl.DateTimeFormatOptions['weekday'];
+    formatter: Formatter;
+};
+export declare const getWeekdays: ({ months, formatter, weekdayFormat }: GetWeekdaysProps) => string[];
+type CreateAccessibleHeadingProps = {
+    calendarNode: HTMLElement;
+    label: string;
+    accessibleHeadingId: string;
+};
+/** Creates a visually-hidden accessible heading for the calendar. Returns a cleanup fn. */
+export declare function createAccessibleHeading({ calendarNode, label, accessibleHeadingId }: CreateAccessibleHeadingProps): () => void;
+type GetIsNextButtonDisabledProps = {
+    maxValue: DateValue | undefined;
+    months: Month<DateValue>[];
+    disabled: boolean;
+};
+export declare function getIsNextButtonDisabled({ maxValue, months, disabled }: GetIsNextButtonDisabledProps): boolean;
+type GetIsPrevButtonDisabledProps = {
+    minValue: DateValue | undefined;
+    months: Month<DateValue>[];
+    disabled: boolean;
+};
+export declare function getIsPrevButtonDisabled({ minValue, months, disabled }: GetIsPrevButtonDisabledProps): boolean;
+type GetCalendarHeadingValueProps = {
+    months: Month<DateValue>[];
+    formatter: Formatter;
+    locale: string;
+};
+export declare function getCalendarHeadingValue({ months, formatter }: GetCalendarHeadingValueProps): string;
+type GetCalendarElementProps = {
+    fullCalendarLabel: string;
+    id: string;
+    isInvalid: boolean;
+    disabled: boolean;
+    readonly: boolean;
+};
+export declare const getCalendarElementProps: ({ fullCalendarLabel, id, isInvalid, disabled, readonly }: GetCalendarElementProps) => {
+    readonly id: string;
+    readonly role: "application";
+    readonly 'aria-label': string;
+    readonly 'data-invalid': "" | undefined;
+    readonly 'data-disabled': "" | undefined;
+    readonly 'data-readonly': "" | undefined;
+};
+export type CalendarParts = 'root' | 'grid' | 'cell' | 'next-button' | 'prev-button' | 'day' | 'grid-body' | 'grid-head' | 'grid-row' | 'head-cell' | 'header' | 'heading' | 'month-select' | 'year-select';
+export declare function pickerOpenFocus(e: Event): void;
+export declare function getFirstNonDisabledDateInView(calendarRef: HTMLElement): DateValue | undefined;
+/** Keeps the placeholder off disabled dates, so keyboard users always have a focusable cell. */
+export declare function useEnsureNonDisabledPlaceholder({ ref, placeholder, defaultPlaceholder, minValue, maxValue, isDateDisabled, }: {
+    ref: WritableBox<HTMLElement | null>;
+    placeholder: WritableBox<DateValue | undefined>;
+    isDateDisabled: ReadableBox<DateMatcher>;
+    minValue: ReadableBox<DateValue | undefined>;
+    maxValue: ReadableBox<DateValue | undefined>;
+    defaultPlaceholder: DateValue;
+}): void;
+export declare const getDateWithPreviousTime: (date: DateValue | undefined, prev: DateValue | undefined) => DateValue | undefined;
+export declare const calendarAttrs: import("../attrs.js").CreateBitsAttrsReturn<readonly ["root", "grid", "cell", "next-button", "prev-button", "day", "grid-body", "grid-head", "grid-row", "head-cell", "header", "heading", "month-select", "year-select"]>;
+type GetDefaultYearsProps = {
+    placeholderYear: number;
+    minValue: DateValue | undefined;
+    maxValue: DateValue | undefined;
+};
+export declare function getDefaultYears(opts: GetDefaultYearsProps): number[];
+export {};

package/dist/internal/date-time/calendar-helpers.svelte.js

@@ -0,0 +1,263 @@
+import { endOfMonth, isSameDay, isSameMonth, startOfMonth } from '@internationalized/date';
+import { srOnlyStylesString } from '../tools/index.js';
+import { tick, untrack } from 'svelte';
+import { getDaysInMonth, getLastFirstDayOfWeek, getNextLastDayOfWeek, hasTime, isAfter, isBefore, parseAnyDateValue, parseStringToDateValue, toDate, } from './utils.js';
+import { createBitsAttrs, boolToEmptyStrOrUndef } from '../attrs.js';
+import { chunk, isValidIndex } from '../arrays.js';
+import { isHTMLElement } from '../tools/utils/dom.js';
+import { BROWSER } from 'esm-env';
+import { kbd, SELECTION_KEYS } from '../kbd.js';
+/** Is `node` a calendar cell? */
+export const isCalendarDayNode = (node) => isHTMLElement(node) && node.hasAttribute('data-bits-day');
+/** Date values strictly between `start` and `end` (exclusive of both). */
+export const getDaysBetween = (start, end) => {
+    const days = [];
+    for (let d = start.add({ days: 1 }); d.compare(end) < 0; d = d.add({ days: 1 }))
+        days.push(d);
+    return days;
+};
+/**
+ * Builds a `{ value, dates, weeks }` calendar-month object: `value` is the month's
+ * date, `dates` is every day shown (including lead/trail days from neighboring
+ * months), `weeks` chunks those into rows of 7 for grid rendering.
+ */
+function createMonth({ dateObj, weekStartsOn, fixedWeeks, locale }) {
+    const datesArray = Array.from({ length: getDaysInMonth(dateObj) }, (_, i) => dateObj.set({ day: i + 1 }));
+    const firstDayOfMonth = startOfMonth(dateObj);
+    const lastDayOfMonth = endOfMonth(dateObj);
+    const [weekStart, weekLocale] = weekStartsOn !== undefined ? [weekStartsOn, 'en-US'] : [0, locale];
+    const lastSunday = getLastFirstDayOfWeek(firstDayOfMonth, weekStart, weekLocale);
+    const nextSaturday = getNextLastDayOfWeek(lastDayOfMonth, weekStart, weekLocale);
+    const lastMonthDays = getDaysBetween(lastSunday.subtract({ days: 1 }), firstDayOfMonth);
+    const nextMonthDays = getDaysBetween(lastDayOfMonth, nextSaturday.add({ days: 1 }));
+    const totalDays = lastMonthDays.length + datesArray.length + nextMonthDays.length;
+    if (fixedWeeks && totalDays < 42) {
+        const extraDays = 42 - totalDays;
+        const startFrom = nextMonthDays.at(-1) ?? dateObj.add({ months: 1 }).set({ day: 1 });
+        const wasEmpty = nextMonthDays.length === 0;
+        if (wasEmpty)
+            nextMonthDays.push(startFrom);
+        nextMonthDays.push(...Array.from({ length: wasEmpty ? extraDays - 1 : extraDays }, (_, i) => startFrom.add({ days: i + 1 })));
+    }
+    const allDays = lastMonthDays.concat(datesArray, nextMonthDays);
+    return { value: dateObj, dates: allDays, weeks: chunk(allDays, 7) };
+}
+export const createMonths = ({ numberOfMonths = 1, dateObj, ...monthProps }) => {
+    const months = [createMonth({ ...monthProps, dateObj })];
+    for (let i = 1; i < numberOfMonths; i++)
+        months.push(createMonth({ ...monthProps, dateObj: dateObj.add({ months: i }) }));
+    return months;
+};
+export function shiftCalendarPage({ months, placeholder, pagedNavigation, numberOfMonths, direction, setAnchor }) {
+    const first = months[0]?.value;
+    if (!first)
+        return;
+    const step = pagedNavigation ? numberOfMonths : 1;
+    const target = direction === 1 ? first.add({ months: step }) : first.subtract({ months: step });
+    setAnchor(target);
+    placeholder.current = target;
+}
+export const shiftCalendarYear = (placeholder, years) => (placeholder.current = placeholder.current.add({ years }));
+export const setCalendarYear = (placeholder, year) => (placeholder.current = placeholder.current.set({ year }));
+export const setCalendarMonth = (placeholder, month) => (placeholder.current = placeholder.current.set({ month }));
+export const isOutsideCalendarView = (visibleMonths, date) => !visibleMonths.some((month) => isSameMonth(date, month));
+export const getSelectableCells = (calendarNode) => calendarNode
+    ? Array.from(calendarNode.querySelectorAll('[data-bits-day]:not([data-disabled]):not([data-outside-visible-months])')).filter(isHTMLElement)
+    : [];
+/** Reads `data-value` off `node` and writes it into `placeholder`. Shared by calendar + range calendar. */
+export const setPlaceholderToNodeValue = (node, placeholder) => {
+    const cellValue = node.getAttribute('data-value');
+    if (cellValue)
+        placeholder.current = parseStringToDateValue(cellValue, placeholder.current);
+};
+/** Shared logic for shifting focus between cells in the calendar and range calendar. */
+export function shiftCalendarFocus({ node, add, placeholder, calendarNode, isPrevButtonDisabled, isNextButtonDisabled, months, numberOfMonths, }) {
+    const candidateCells = getSelectableCells(calendarNode);
+    if (!candidateCells.length)
+        return;
+    const nextIndex = candidateCells.indexOf(node) + add;
+    // Easy case: next cell is within the displayed range.
+    if (isValidIndex(nextIndex, candidateCells)) {
+        const nextCell = candidateCells[nextIndex];
+        setPlaceholderToNodeValue(nextCell, placeholder);
+        return nextCell.focus();
+    }
+    // Overflowed the displayed cells — shift a month and refetch.
+    const goingBack = nextIndex < 0;
+    if (goingBack ? isPrevButtonDisabled : isNextButtonDisabled)
+        return;
+    const firstMonth = months[0]?.value;
+    if (!firstMonth)
+        return;
+    placeholder.current = goingBack ? firstMonth.subtract({ months: numberOfMonths }) : firstMonth.add({ months: numberOfMonths });
+    // Without a tick here, it seems to be too quick for the DOM to update
+    tick().then(() => {
+        const newCandidateCells = getSelectableCells(calendarNode);
+        if (!newCandidateCells.length)
+            return;
+        const newIndex = goingBack ? newCandidateCells.length - Math.abs(nextIndex) : nextIndex - candidateCells.length;
+        if (!isValidIndex(newIndex, newCandidateCells))
+            return;
+        const newCell = newCandidateCells[newIndex];
+        // NOTE: original only synced placeholder on the "going back" path — preserved as-is.
+        if (goingBack)
+            setPlaceholderToNodeValue(newCell, placeholder);
+        return newCell.focus();
+    });
+}
+const ARROW_KEYS = [kbd.ARROW_DOWN, kbd.ARROW_UP, kbd.ARROW_LEFT, kbd.ARROW_RIGHT];
+const kbdFocusMap = {
+    [kbd.ARROW_DOWN]: 7,
+    [kbd.ARROW_UP]: -7,
+    [kbd.ARROW_LEFT]: -1,
+    [kbd.ARROW_RIGHT]: 1,
+};
+/** Shared keyboard event handler for the calendar and range calendar. */
+export function handleCalendarKeydown({ event, handleCellClick, shiftFocus, placeholderValue }) {
+    const currentCell = event.target;
+    if (!isCalendarDayNode(currentCell))
+        return;
+    // oxlint-disable-next-line no-explicit-any
+    const isArrow = ARROW_KEYS.includes(event.key);
+    if (!isArrow && !SELECTION_KEYS.includes(event.key))
+        return;
+    event.preventDefault();
+    if (isArrow) {
+        const add = kbdFocusMap[event.key];
+        if (add !== undefined)
+            shiftFocus(currentCell, add);
+        return;
+    }
+    const cellValue = currentCell.getAttribute('data-value');
+    if (cellValue)
+        handleCellClick(event, parseStringToDateValue(cellValue, placeholderValue));
+}
+export const getWeekdays = ({ months, formatter, weekdayFormat }) => (months[0]?.weeks[0] ?? []).map((date) => formatter.dayOfWeek(toDate(date), weekdayFormat));
+/** Creates a visually-hidden accessible heading for the calendar. Returns a cleanup fn. */
+export function createAccessibleHeading({ calendarNode, label, accessibleHeadingId }) {
+    const doc = calendarNode.ownerDocument;
+    const div = doc.createElement('div');
+    div.style.cssText = srOnlyStylesString;
+    const h2 = doc.createElement('h2');
+    Object.assign(h2, {
+        textContent: label,
+        id: accessibleHeadingId,
+        ariaLive: 'polite',
+        ariaAtomic: 'true',
+    });
+    calendarNode.insertBefore(div, calendarNode.firstChild);
+    div.appendChild(h2);
+    return () => {
+        const heading = doc.getElementById(accessibleHeadingId);
+        if (!heading)
+            return;
+        div.remove();
+        heading.remove();
+    };
+}
+export function getIsNextButtonDisabled({ maxValue, months, disabled }) {
+    if (!maxValue || !months.length)
+        return false;
+    if (disabled)
+        return true;
+    const lastMonth = months.at(-1)?.value;
+    return lastMonth ? isAfter(lastMonth.add({ months: 1 }).set({ day: 1 }), maxValue) : false;
+}
+export function getIsPrevButtonDisabled({ minValue, months, disabled }) {
+    if (!minValue || !months.length)
+        return false;
+    if (disabled)
+        return true;
+    const firstMonth = months[0]?.value;
+    return firstMonth ? isBefore(firstMonth.subtract({ months: 1 }).set({ day: 35 }), minValue) : false;
+}
+export function getCalendarHeadingValue({ months, formatter }) {
+    if (!months.length)
+        return '';
+    const startMonth = toDate(months[0].value);
+    if (months.length === 1)
+        return formatter.fullMonthAndYear(startMonth);
+    const endMonth = toDate(months.at(-1).value);
+    const startMonthName = formatter.fullMonth(startMonth);
+    const endMonthName = formatter.fullMonth(endMonth);
+    const startYear = formatter.fullYear(startMonth);
+    const endYear = formatter.fullYear(endMonth);
+    return startYear === endYear
+        ? `${startMonthName} - ${endMonthName} ${endYear}`
+        : `${startMonthName} ${startYear} - ${endMonthName} ${endYear}`;
+}
+export const getCalendarElementProps = ({ fullCalendarLabel, id, isInvalid, disabled, readonly }) => ({
+    id,
+    role: 'application',
+    'aria-label': fullCalendarLabel,
+    'data-invalid': boolToEmptyStrOrUndef(isInvalid),
+    'data-disabled': boolToEmptyStrOrUndef(disabled),
+    'data-readonly': boolToEmptyStrOrUndef(readonly),
+});
+export function pickerOpenFocus(e) {
+    const doc = e.target.ownerDocument;
+    const nodeToFocus = doc.querySelector('[data-bits-day][data-focused]');
+    if (!nodeToFocus)
+        return;
+    e.preventDefault();
+    nodeToFocus.focus();
+}
+export function getFirstNonDisabledDateInView(calendarRef) {
+    if (!BROWSER)
+        return;
+    const [el] = calendarRef.querySelectorAll('[data-bits-day]:not([aria-disabled=true])');
+    const value = el?.getAttribute('data-value');
+    const type = el?.getAttribute('data-type');
+    if (!value || !type)
+        return;
+    return parseAnyDateValue(value, type);
+}
+/** Keeps the placeholder off disabled dates, so keyboard users always have a focusable cell. */
+export function useEnsureNonDisabledPlaceholder({ ref, placeholder, defaultPlaceholder, minValue, maxValue, isDateDisabled, }) {
+    const isDisabled = (date) => isDateDisabled.current(date) ||
+        (!!minValue.current && isBefore(date, minValue.current)) ||
+        (!!maxValue.current && isBefore(maxValue.current, date));
+    $effect(() => {
+        ref.current;
+        untrack(() => {
+            if (!ref.current)
+                return;
+            // If the placeholder is still the (disabled) default, swap it for the
+            // first available date in view so the calendar remains keyboard-reachable.
+            // If every date in view is disabled, that's a dev-side config error.
+            if (placeholder.current && isSameDay(placeholder.current, defaultPlaceholder) && isDisabled(defaultPlaceholder)) {
+                placeholder.current = getFirstNonDisabledDateInView(ref.current) ?? defaultPlaceholder;
+            }
+        });
+    });
+}
+export const getDateWithPreviousTime = (date, prev) => date && prev && hasTime(date) && hasTime(prev)
+    ? date.set({ hour: prev.hour, minute: prev.minute, millisecond: prev.millisecond, second: prev.second })
+    : date;
+export const calendarAttrs = createBitsAttrs({
+    component: 'calendar',
+    parts: [
+        'root',
+        'grid',
+        'cell',
+        'next-button',
+        'prev-button',
+        'day',
+        'grid-body',
+        'grid-head',
+        'grid-row',
+        'head-cell',
+        'header',
+        'heading',
+        'month-select',
+        'year-select',
+    ],
+});
+export function getDefaultYears(opts) {
+    const latestYear = Math.max(opts.placeholderYear, new Date().getFullYear());
+    const initialMinYear = latestYear - 100;
+    const minYear = opts.minValue?.year ?? (opts.placeholderYear < initialMinYear ? opts.placeholderYear - 10 : initialMinYear);
+    const maxYear = opts.maxValue?.year ?? latestYear + 10;
+    const start = Math.min(minYear, maxYear);
+    return Array.from({ length: maxYear - start + 1 }, (_, i) => start + i);
+}

package/dist/internal/date-time/field/helpers.d.ts

@@ -0,0 +1,84 @@
+import type { DateValue } from '@internationalized/date';
+import type { Formatter } from '../formatter.js';
+import type { DateAndTimeSegmentObj, DateSegmentPart, EditableSegmentPart, SegmentContentObj, SegmentPart, SegmentStateMap, SegmentValueObj } from '../types.js';
+import type { Granularity, HourCycle, TimeSegmentValueObj } from '../types.js';
+export declare function initializeSegmentValues(): TimeSegmentValueObj;
+export declare function initializeSegmentValues(granularity: Granularity): SegmentValueObj;
+type SharedContentProps = {
+    granularity: Granularity;
+    dateRef: DateValue;
+    formatter: Formatter;
+    hideTimeZone: boolean;
+    hourCycle: HourCycle | undefined;
+};
+type CreateContentObjProps = SharedContentProps & {
+    segmentValues: SegmentValueObj;
+    locale: string;
+};
+type CreateContentProps = CreateContentObjProps;
+export declare function createContent(props: CreateContentProps): {
+    obj: SegmentContentObj;
+    arr: {
+        part: SegmentPart;
+        value: string;
+    }[];
+};
+export declare const initSegmentStates: () => SegmentStateMap;
+export declare const isDateSegmentPart: (part: unknown) => part is DateSegmentPart;
+export declare const isSegmentPart: (part: string) => part is EditableSegmentPart;
+export declare const isAnySegmentPart: (part: unknown) => part is SegmentPart;
+type GetValueFromSegments = {
+    segmentObj: SegmentValueObj;
+    fieldNode: HTMLElement | null;
+    dateRef: DateValue;
+};
+export declare function getValueFromSegments(props: GetValueFromSegments): DateValue;
+/**
+ * Check if all the segments being used have been filled.
+ * We use this to determine when we should set the value
+ * store of the date field(s).
+ *
+ * @param segmentValues - The current `SegmentValueObj`
+ * @param fieldNode  - The id of the date field
+ */
+export declare function areAllSegmentsFilled(segmentValues: SegmentValueObj, fieldNode: HTMLElement | null): boolean;
+/**
+ * Determines if the provided object is a valid `DateAndTimeSegmentObj`
+ * by checking if it has the correct keys and values for each key.
+ */
+export declare function isDateAndTimeSegmentObj(obj: unknown): obj is DateAndTimeSegmentObj;
+/**
+ * Infer the granularity to use based on the
+ * value and granularity props.
+ */
+export declare function inferGranularity(value: DateValue, granularity: Granularity | undefined): Granularity;
+export declare function isAcceptableSegmentKey(key: string): boolean;
+export declare const isAcceptableDayPeriodKey: (key: string) => boolean;
+export declare const isArrowUp: (key: string) => key is "ArrowUp";
+export declare const isArrowDown: (key: string) => key is "ArrowDown";
+export declare const isBackspace: (key: string) => key is "Backspace";
+/**
+ * Determines if the element with the provided id is the first focusable
+ * segment in the date field with the provided fieldId.
+ *
+ * @param id - The id of the element to check if it's the first segment
+ * @param fieldNode - The id of the date field associated with the segment
+ */
+export declare function isFirstSegment(id: string, fieldNode: HTMLElement | null): boolean;
+type SetDescriptionProps = {
+    id: string;
+    formatter: Formatter;
+    value: DateValue;
+    doc: Document;
+};
+/**
+ * Creates or updates a description element for a date field
+ * which enables screen readers to read the date field's value.
+ *
+ * This element is hidden from view, and is portalled to the body
+ * so it can be associated via `aria-describedby` and read by
+ * screen readers as the user interacts with the date field.
+ */
+export declare function setDescription(props: SetDescriptionProps): void;
+export declare function getDefaultHourCycle(locale: string): 12 | 24;
+export {};