@groupteknology/vuno 3.0.0 → 4.0.0

package/dist/runtime/app/components/DatePicker/DatePicker.vue

@@ -0,0 +1,473 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, useAttrs, useId, useTemplateRef, watch } from "vue";
+import { useAnchor } from "#vuno/composables/internal/useAnchor";
+import { usePortal } from "#vuno/composables/internal/usePortal";
+import { useIcons, useLocale, useTheme } from "#vuno/composables/useTheme";
+import FormLabel from "#vuno/components/FormLabel/FormLabel.vue";
+import { addMonths, buildMonthGrid, clampDate, compareDays, dayLabel, formatDateText, isBetween, isSameDay, isWithinRange, monthLabel, nextFocusedDate, parseDateText, startOfDay, weekdayLabels, weekStart } from "./date";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+import PrimitiveInput from "#vuno/primitives/PrimitiveInput/PrimitiveInput.vue";
+defineOptions({ name: "DatePicker", inheritAttrs: false });
+const model = defineModel({ type: null, ...{ default: void 0 } });
+const props = defineProps({
+  id: { type: String, required: false, default: void 0 },
+  name: { type: String, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false, default: false },
+  required: { type: Boolean, required: false, default: false },
+  size: { type: String, required: false, default: "md" },
+  ui: { type: Object, required: false, default: void 0 },
+  helperText: { type: String, required: false, default: void 0 },
+  hideLabel: { type: Boolean, required: false, default: false },
+  invalid: { type: Boolean, required: false, default: false },
+  invalidText: { type: String, required: false, default: void 0 },
+  labelText: { type: String, required: true },
+  warn: { type: Boolean, required: false, default: false },
+  warnText: { type: String, required: false, default: void 0 },
+  allowInput: { type: Boolean, required: false, default: true },
+  closeOnSelect: { type: Boolean, required: false, default: true },
+  dateFormat: { type: String, required: false, default: "m/d/Y" },
+  datePickerType: { type: String, required: false, default: "simple" },
+  endInput: { type: Object, required: false, default: void 0 },
+  hideIcon: { type: Boolean, required: false, default: false },
+  iconDescription: { type: String, required: false, default: "Abrir calendario" },
+  locale: { type: String, required: false, default: void 0 },
+  maxDate: { type: String, required: false, default: void 0 },
+  minDate: { type: String, required: false, default: void 0 },
+  nextMonthAriaLabel: { type: String, required: false, default: "Mes siguiente" },
+  pattern: { type: String, required: false, default: void 0 },
+  placeholder: { type: String, required: false, default: void 0 },
+  portal: { type: [String, Boolean], required: false, default: void 0 },
+  prevMonthAriaLabel: { type: String, required: false, default: "Mes anterior" },
+  readonly: { type: Boolean, required: false, default: false },
+  short: { type: Boolean, required: false, default: false }
+});
+const attrs = useAttrs();
+const icons = useIcons();
+const locale = useLocale();
+const portalTarget = usePortal(() => props.portal);
+const uid = useId();
+const activeIndex = shallowRef(0);
+const boundary = shallowRef(void 0);
+const calendar = useTemplateRef("calendar");
+const endField = useTemplateRef("endField");
+const endText = ref("");
+const focused = shallowRef(startOfDay(/* @__PURE__ */ new Date()));
+const mounted = shallowRef(false);
+const open = shallowRef(false);
+const startField = useTemplateRef("startField");
+const startText = ref("");
+const today = shallowRef(startOfDay(/* @__PURE__ */ new Date()));
+const view = shallowRef(startOfDay(/* @__PURE__ */ new Date()));
+const range = computed(() => props.datePickerType === "range");
+const hasCalendar = computed(() => props.datePickerType !== "simple");
+const calendarId = `${uid}-calendar`;
+const startId = computed(() => props.id ?? `${uid}-start`);
+const endId = computed(() => props.endInput?.id ?? `${uid}-end`);
+const disabled = computed(() => !props.readonly && props.disabled);
+const startInvalid = computed(() => !props.readonly && !disabled.value && props.invalid);
+const startWarn = computed(() => !props.readonly && !disabled.value && !startInvalid.value && props.warn);
+const endInvalid = computed(() => !props.readonly && !disabled.value && Boolean(props.endInput?.invalid));
+const endWarn = computed(() => !props.readonly && !disabled.value && !endInvalid.value && Boolean(props.endInput?.warn));
+const ui = useTheme(
+  "datePicker",
+  () => props.ui,
+  () => ({ readOnly: props.readonly ? "true" : "false", short: props.short ? "true" : "false", state: startInvalid.value ? "invalid" : startWarn.value ? "warn" : "normal", type: props.datePickerType })
+);
+const endUi = useTheme(
+  "datePicker",
+  () => props.ui,
+  () => ({ readOnly: props.readonly ? "true" : "false", short: props.short ? "true" : "false", state: endInvalid.value ? "invalid" : endWarn.value ? "warn" : "normal", type: props.datePickerType })
+);
+const values = computed(() => Array.isArray(model.value) ? [model.value[0], model.value[1]] : [model.value ?? "", ""]);
+const minDate = computed(() => props.minDate ? parseDateText(props.minDate, props.dateFormat) : void 0);
+const maxDate = computed(() => props.maxDate ? parseDateText(props.maxDate, props.dateFormat) : void 0);
+const startDate = computed(() => parseDateText(values.value[0], props.dateFormat));
+const endDate = computed(() => parseDateText(values.value[1], props.dateFormat));
+const pending = computed(() => range.value && Boolean(values.value[0]) && !values.value[1]);
+const weekStartsOn = computed(() => weekStart(locale.value));
+const weeks = computed(() => buildMonthGrid(view.value, weekStartsOn.value));
+const weekdays = computed(() => weekdayLabels(locale.value, weekStartsOn.value));
+const monthText = computed(() => monthLabel(view.value, locale.value));
+const startMessage = computed(() => startInvalid.value ? props.invalidText : startWarn.value ? props.warnText : void 0);
+const endMessage = computed(() => endInvalid.value ? props.endInput?.invalidText : endWarn.value ? props.endInput?.warnText : void 0);
+const showStartHelper = computed(() => Boolean(props.helperText) && !startMessage.value);
+const showEndHelper = computed(() => Boolean(props.endInput?.helperText) && !endMessage.value);
+const startAttrs = computed(() => ({
+  ...attrs,
+  id: startId.value,
+  name: props.name,
+  "aria-describedby": startInvalid.value ? void 0 : startWarn.value && startMessage.value ? `${startId.value}-message` : showStartHelper.value ? `${startId.value}-helper` : void 0,
+  "aria-errormessage": startInvalid.value && startMessage.value ? `${startId.value}-message` : void 0,
+  "aria-invalid": startInvalid.value || void 0,
+  autocomplete: "off",
+  disabled: disabled.value,
+  pattern: props.pattern,
+  placeholder: props.placeholder,
+  readonly: props.readonly || !props.allowInput,
+  required: props.required
+}));
+const endAttrs = computed(() => ({
+  id: endId.value,
+  name: props.endInput?.name ?? (props.name ? `${props.name}-end` : void 0),
+  "aria-describedby": endInvalid.value ? void 0 : endWarn.value && endMessage.value ? `${endId.value}-message` : showEndHelper.value ? `${endId.value}-helper` : void 0,
+  "aria-errormessage": endInvalid.value && endMessage.value ? `${endId.value}-message` : void 0,
+  "aria-invalid": endInvalid.value || void 0,
+  autocomplete: "off",
+  disabled: disabled.value,
+  pattern: props.endInput?.pattern ?? props.pattern,
+  placeholder: props.endInput?.placeholder ?? props.placeholder,
+  readonly: props.readonly || !props.allowInput,
+  required: props.required
+}));
+const stateIcon = (invalid, warn) => invalid ? "carbon:warning-filled" : warn ? "carbon:warning-alt-filled" : "carbon:calendar";
+const fieldElement = (index) => (index === 1 ? endField.value : startField.value)?.$el ?? void 0;
+const dayName = (day) => dayLabel(day, locale.value);
+const isOutside = (day) => day.getMonth() !== view.value.getMonth();
+const isSelected = (day) => isSameDay(day, startDate.value) || isSameDay(day, endDate.value);
+const isUnavailable = (day) => !isWithinRange(day, minDate.value, maxDate.value);
+const isWithin = (day) => Boolean(range.value && startDate.value && endDate.value && isBetween(day, startDate.value, endDate.value));
+function emitValues(start, end) {
+  startText.value = start;
+  endText.value = end;
+  model.value = range.value ? [start, end] : start;
+}
+function commit(index, text) {
+  const trimmed = text.trim();
+  const parsed = trimmed ? parseDateText(trimmed, props.dateFormat) : void 0;
+  const next = [values.value[0], values.value[1]];
+  if (!trimmed) next[index] = "";
+  else if (parsed) next[index] = formatDateText(clampDate(parsed, minDate.value, maxDate.value), props.dateFormat, locale.value);
+  emitValues(next[0], next[1]);
+}
+function focusField() {
+  fieldElement(activeIndex.value)?.querySelector("input")?.focus();
+}
+function close(returnFocus = false) {
+  if (!open.value) return;
+  open.value = false;
+  if (returnFocus) focusField();
+}
+function pick(day) {
+  if (isUnavailable(day)) return;
+  const text = formatDateText(day, props.dateFormat, locale.value);
+  if (!range.value) {
+    emitValues(text, "");
+    if (props.closeOnSelect) close(true);
+    return;
+  }
+  if (!pending.value) return emitValues(text, "");
+  const first = startDate.value;
+  if (first && compareDays(day, first) < 0) emitValues(text, formatDateText(first, props.dateFormat, locale.value));
+  else emitValues(values.value[0], text);
+  if (props.closeOnSelect) close(true);
+}
+function focusDay() {
+  calendar.value?.querySelector("[data-focused]")?.focus();
+}
+function openCalendar(index) {
+  if (!hasCalendar.value || disabled.value || props.readonly) return;
+  today.value = startOfDay(/* @__PURE__ */ new Date());
+  activeIndex.value = index;
+  const anchorDate = (index === 1 ? endDate.value : startDate.value) ?? startDate.value ?? today.value;
+  focused.value = clampDate(anchorDate, minDate.value, maxDate.value);
+  view.value = focused.value;
+  open.value = true;
+}
+function toggleCalendar(index) {
+  if (open.value && activeIndex.value === index) return close(true);
+  openCalendar(index);
+}
+function shiftMonth(amount) {
+  view.value = addMonths(view.value, amount);
+}
+function onFieldKeydown(event, index) {
+  if (event.key === "Escape") return close();
+  if (event.key === "Enter") {
+    event.preventDefault();
+    commit(index, index === 1 ? endText.value : startText.value);
+    close();
+    return;
+  }
+  if (event.key !== "ArrowDown" || !hasCalendar.value) return;
+  event.preventDefault();
+  openCalendar(index);
+  void nextTick(focusDay);
+}
+function onGridKeydown(event) {
+  const next = nextFocusedDate(focused.value, event.key, event.shiftKey, weekStartsOn.value);
+  if (!next) return;
+  event.preventDefault();
+  focused.value = clampDate(next, minDate.value, maxDate.value);
+  view.value = focused.value;
+  void nextTick(focusDay);
+}
+function onPointerDownOutside(event) {
+  const target = event.target;
+  if (!target) return;
+  if (calendar.value?.contains(target)) return;
+  if (fieldElement(0)?.contains(target) || fieldElement(1)?.contains(target)) return;
+  close();
+}
+const { anchor, release } = useAnchor({
+  boundary: () => boundary.value,
+  distance: () => -2,
+  placement: () => "bottom-start"
+});
+watch(
+  values,
+  ([start, end]) => {
+    startText.value = start;
+    endText.value = end;
+  },
+  { immediate: true }
+);
+watch(open, (isOpen) => {
+  if (!isOpen) {
+    release();
+    document.removeEventListener("pointerdown", onPointerDownOutside, true);
+    return;
+  }
+  const field = fieldElement(activeIndex.value);
+  boundary.value = field?.closest("dialog") ?? void 0;
+  void nextTick(() => {
+    anchor(field, calendar.value ?? void 0);
+    focusDay();
+    document.addEventListener("pointerdown", onPointerDownOutside, true);
+  });
+});
+onMounted(() => mounted.value = true);
+onBeforeUnmount(() => {
+  release();
+  document.removeEventListener("pointerdown", onPointerDownOutside, true);
+});
+defineExpose({ focus: () => focusField() });
+</script>
+
+<template>
+    <div :class="ui.fields">
+        <div :class="ui.field">
+            <FormLabel
+                :disabled="disabled"
+                :for="startId"
+                :hideLabel="props.hideLabel"
+                :invalid="startInvalid"
+            >
+                {{ props.labelText }}
+            </FormLabel>
+
+            <PrimitiveInput
+                ref="startField"
+                :modelValue="startText"
+                v-bind="startAttrs"
+                :size="props.size"
+                :ui="{ base: ui.base, root: ui.root }"
+                @blur="commit(0, startText)"
+                @click="openCalendar(0)"
+                @keydown="onFieldKeydown($event, 0)"
+                @update:model-value="startText = String($event ?? '')"
+            >
+                <template
+                    v-if="hasCalendar && !props.hideIcon"
+                    #trailing
+                >
+                    <button
+                        :aria-controls="calendarId"
+                        :aria-expanded="open && activeIndex === 0"
+                        aria-haspopup="dialog"
+                        :aria-label="props.iconDescription"
+                        :class="ui.trigger"
+                        :disabled="disabled || props.readonly"
+                        type="button"
+                        @click="toggleCalendar(0)"
+                    >
+                        <Icon
+                            :class="ui.icon"
+                            :name="stateIcon(startInvalid, startWarn)"
+                        />
+                    </button>
+                </template>
+            </PrimitiveInput>
+
+            <p
+                v-if="startMessage"
+                :id="`${startId}-message`"
+                :class="ui.message"
+                role="alert"
+            >
+                {{ startMessage }}
+            </p>
+
+            <p
+                v-else-if="showStartHelper"
+                :id="`${startId}-helper`"
+                :class="ui.helper"
+            >
+                {{ props.helperText }}
+            </p>
+        </div>
+
+        <div
+            v-if="range"
+            :class="endUi.field"
+        >
+            <FormLabel
+                :disabled="disabled"
+                :for="endId"
+                :hideLabel="props.hideLabel"
+                :invalid="endInvalid"
+            >
+                {{ props.endInput?.labelText ?? "Fecha final" }}
+            </FormLabel>
+
+            <PrimitiveInput
+                ref="endField"
+                :modelValue="endText"
+                v-bind="endAttrs"
+                :size="props.size"
+                :ui="{ base: endUi.base, root: endUi.root }"
+                @blur="commit(1, endText)"
+                @click="openCalendar(1)"
+                @keydown="onFieldKeydown($event, 1)"
+                @update:model-value="endText = String($event ?? '')"
+            >
+                <template
+                    v-if="!props.hideIcon"
+                    #trailing
+                >
+                    <button
+                        :aria-controls="calendarId"
+                        :aria-expanded="open && activeIndex === 1"
+                        aria-haspopup="dialog"
+                        :aria-label="props.iconDescription"
+                        :class="endUi.trigger"
+                        :disabled="disabled || props.readonly"
+                        type="button"
+                        @click="toggleCalendar(1)"
+                    >
+                        <Icon
+                            :class="endUi.icon"
+                            :name="stateIcon(endInvalid, endWarn)"
+                        />
+                    </button>
+                </template>
+            </PrimitiveInput>
+
+            <p
+                v-if="endMessage"
+                :id="`${endId}-message`"
+                :class="endUi.message"
+                role="alert"
+            >
+                {{ endMessage }}
+            </p>
+
+            <p
+                v-else-if="showEndHelper"
+                :id="`${endId}-helper`"
+                :class="endUi.helper"
+            >
+                {{ props.endInput?.helperText }}
+            </p>
+        </div>
+
+        <Teleport
+            v-if="mounted && hasCalendar"
+            :to="portalTarget"
+        >
+            <div
+                v-if="open"
+                :id="calendarId"
+                ref="calendar"
+                :aria-label="props.labelText"
+                :class="ui.calendar"
+                role="dialog"
+                style="position: fixed; top: 0; left: 0"
+                tabindex="-1"
+                @keydown.escape="close(true)"
+            >
+                <div :class="ui.header">
+                    <button
+                        :aria-label="props.prevMonthAriaLabel"
+                        :class="ui.nav"
+                        type="button"
+                        @click="shiftMonth(-1)"
+                    >
+                        <Icon
+                            :class="ui.navIcon"
+                            :name="icons.paginationPrevious"
+                        />
+                    </button>
+
+                    <div
+                        aria-live="polite"
+                        :class="ui.month"
+                    >
+                        {{ monthText }}
+                    </div>
+
+                    <button
+                        :aria-label="props.nextMonthAriaLabel"
+                        :class="ui.nav"
+                        type="button"
+                        @click="shiftMonth(1)"
+                    >
+                        <Icon
+                            :class="ui.navIcon"
+                            :name="icons.paginationNext"
+                        />
+                    </button>
+                </div>
+
+                <table
+                    :class="ui.grid"
+                    role="grid"
+                    @keydown="onGridKeydown"
+                >
+                    <thead>
+                        <tr>
+                            <th
+                                v-for="weekday in weekdays"
+                                :key="weekday.long"
+                                :abbr="weekday.long"
+                                :class="ui.weekday"
+                                scope="col"
+                            >
+                                {{ weekday.narrow }}
+                            </th>
+                        </tr>
+                    </thead>
+
+                    <tbody>
+                        <tr
+                            v-for="(week, index) in weeks"
+                            :key="index"
+                        >
+                            <td
+                                v-for="day in week"
+                                :key="day.getTime()"
+                                :aria-selected="isSelected(day)"
+                            >
+                                <button
+                                    :aria-current="isSameDay(day, today) ? 'date' : void 0"
+                                    :aria-label="dayName(day)"
+                                    :class="ui.day"
+                                    :data-focused="isSameDay(day, focused) ? '' : void 0"
+                                    :data-outside="isOutside(day) ? '' : void 0"
+                                    :data-range="isWithin(day) ? '' : void 0"
+                                    :data-selected="isSelected(day) ? '' : void 0"
+                                    :data-today="isSameDay(day, today) ? '' : void 0"
+                                    :disabled="isUnavailable(day)"
+                                    :tabindex="isSameDay(day, focused) ? 0 : -1"
+                                    type="button"
+                                    @click="pick(day)"
+                                >
+                                    {{ day.getDate() }}
+                                </button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </Teleport>
+    </div>
+</template>

package/dist/runtime/app/components/DatePicker/DatePicker.vue.d.ts

@@ -0,0 +1,45 @@
+import type { DatePickerProps } from './DatePicker.types.js';
+type __VLS_Props = DatePickerProps;
+type __VLS_ModelProps = {
+    modelValue?: [string, string] | string | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | [string, string] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | [string, string] | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: import("../../types/control.js").ControlSize;
+    invalid: boolean;
+    warn: boolean;
+    short: boolean;
+    placeholder: string;
+    name: string;
+    hideLabel: boolean;
+    helperText: string;
+    readonly: boolean;
+    pattern: string;
+    id: string;
+    ui: Partial<Record<"header" | "base" | "root" | "icon" | "field" | "message" | "helper" | "calendar" | "day" | "fields" | "grid" | "month" | "nav" | "navIcon" | "trigger" | "weekday", string>> & Partial<Record<"header" | "base" | "root" | "icon" | "field" | "message" | "helper" | "calendar" | "day" | "fields" | "grid" | "month" | "nav" | "navIcon" | "trigger" | "weekday", string>>;
+    required: boolean;
+    iconDescription: string;
+    invalidText: string;
+    warnText: string;
+    portal: import("../../types/base.js").PortalTarget;
+    allowInput: boolean;
+    closeOnSelect: boolean;
+    dateFormat: string;
+    datePickerType: import("./DatePicker.types.js").DatePickerType;
+    endInput: import("./DatePicker.types.js").DatePickerInputProps;
+    hideIcon: boolean;
+    locale: string;
+    maxDate: string;
+    minDate: string;
+    nextMonthAriaLabel: string;
+    prevMonthAriaLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/DatePicker/date.d.ts

@@ -0,0 +1,104 @@
+/**
+ * Las fechas del selector: formato, lectura y rejilla del mes.
+ *
+ * El sistema de origen expone el formato con los tokens de flatpickr —`m/d/Y` de serie— y
+ * aquí se implementan sin traer la biblioteca: lo que hace falta es convertir
+ * entre una fecha y el texto del campo, y eso son dos funciones y una tabla de
+ * tokens. Traer flatpickr por esto añadiría una dependencia con su propio
+ * calendario, su propio DOM y su propio foco, justo lo que este paquete
+ * implementa con Vue.
+ *
+ * Todo trabaja con `Date` a medianoche local y toda la aritmética pasa por
+ * `new Date(year, month, day)`, que normaliza desbordes —el día 32 de enero es
+ * el 1 de febrero— y no se rompe en los cambios de hora, porque nunca suma
+ * milisegundos.
+ */
+/** Los seis por siete de un mes, completado con los días vecinos. */
+export type DateGrid = Date[][];
+export declare function startOfDay(value: Date): Date;
+export declare function addDays(value: Date, amount: number): Date;
+/**
+ * Suma meses conservando el día cuando existe, y el último cuando no.
+ *
+ * Sin el recorte, el 31 de enero más un mes cae en el 3 de marzo: `Date`
+ * desborda febrero sin avisar y el calendario salta de mes al pulsar la flecha,
+ * que es el defecto clásico de esta operación escrita a mano.
+ */
+export declare function addMonths(value: Date, amount: number): Date;
+/** Negativo, cero o positivo según el orden de los dos días. */
+export declare function compareDays(left: Date, right: Date): number;
+export declare function isSameDay(left: Date | undefined, right: Date | undefined): boolean;
+export declare function isWithinRange(value: Date, min?: Date, max?: Date): boolean;
+export declare function clampDate(value: Date, min?: Date, max?: Date): Date;
+/** Si el día cae dentro de los dos extremos, sin contarlos. */
+export declare function isBetween(value: Date, from: Date, to: Date): boolean;
+/**
+ * El primer día de la semana del idioma, no uno fijo.
+ *
+ * El calendario de origen empieza en domingo porque su idioma de serie es el
+ * inglés; en castellano empieza en lunes. `getWeekInfo` lo sabe y llega con el
+ * `Intl` de la plataforma, así que no hay tabla que mantener. Se comprueba que
+ * existe porque es reciente: donde no esté, se cae a ese domingo en vez
+ * de reventar.
+ *
+ * `firstDay` viene en ISO —1 es lunes y 7 domingo— y `getDay` cuenta desde el
+ * domingo en 0, así que el resto entre siete traduce entre las dos.
+ */
+export declare function weekStart(locale: string): number;
+/**
+ * La rejilla del mes que contiene `view`, empezando en `weekStartsOn`.
+ *
+ * Devuelve fechas reales y no números: la celda necesita saber su mes, si es hoy
+ * y si cae fuera del rango, y con un número habría que reconstruirla en cada
+ * comprobación.
+ */
+export declare function buildMonthGrid(view: Date, weekStartsOn: number): DateGrid;
+/** El mes y el año del encabezado, en el idioma activo. */
+export declare function monthLabel(view: Date, locale: string): string;
+/**
+ * Los rótulos de la fila de días, cortos para verse y largos para leerse.
+ *
+ * Vuno recorta el nombre del día a una o dos letras, que es lo que cabe en una
+ * celda de cuarenta píxeles, y eso deja una columna que un lector de pantalla no
+ * puede nombrar. El nombre completo va en `abbr`, que es el atributo que existe
+ * para esto en una cabecera de tabla.
+ */
+export declare function weekdayLabels(locale: string, weekStartsOn: number): {
+    long: string;
+    narrow: string;
+}[];
+/** El nombre accesible de una celda: el día entero, no su número. */
+export declare function dayLabel(value: Date, locale: string): string;
+/**
+ * La fecha como texto, con los tokens de fecha de flatpickr.
+ *
+ * Soporta `d`, `j`, `D`, `l`, `m`, `n`, `M`, `F`, `Y` e `y`, que son los que
+ * componen cualquier formato de fecha corriente, y la barra invertida escapa el
+ * carácter siguiente para poder escribir una letra literal. Lo que no sea un
+ * token pasa tal cual, así que los separadores no necesitan declararse.
+ */
+export declare function formatDateText(value: Date, pattern: string, locale: string): string;
+/**
+ * El texto del campo como fecha, o nada si no lo es.
+ *
+ * Intenta primero el formato declarado y después `YYYY-MM-DD`, porque una fecha
+ * que llega de una API o de una base de datos viene en ISO y rechazarla
+ * obligaría a cada proyecto a convertirla antes de pasarla al modelo.
+ *
+ * Un formato cuyo mes sea textual —`F` o `M`— no se puede interpretar y devuelve
+ * nada: el calendario sigue eligiendo fechas, pero escribirlas a mano requiere
+ * un mes numérico.
+ */
+export declare function parseDateText(text: string, pattern: string): Date | undefined;
+/**
+ * A dónde lleva una tecla de navegación desde el día enfocado.
+ *
+ * Vive aquí y no en el calendario porque es aritmética de fechas y se prueba
+ * sola: las flechas mueven un día o una semana, `PageUp` y `PageDown` un mes
+ * —con `Shift`, un año, como pide el patrón de calendario de WAI-ARIA— y `Home`
+ * y `End` van a los extremos de la semana, que dependen de dónde empiece.
+ *
+ * Devuelve nada cuando la tecla no navega, y ese `undefined` es el que usa quien
+ * llama para no impedir el comportamiento normal de esa tecla.
+ */
+export declare function nextFocusedDate(focused: Date, key: string, shiftKey: boolean, weekStartsOn: number): Date | undefined;