@scalewing/react 1.8.0 → 1.9.0

package/dist/date-entry.js

@@ -0,0 +1,106 @@
+import { dateFormatter, formatterDate } from './date-formatters.js';
+import { formatDateOnly, isValidDateParts, parseDateOnly, } from './date-only.js';
+const FALLBACK = {
+    order: ['month', 'day', 'year'],
+    separator: '/',
+};
+function isEntryPart(type) {
+    return type === 'day' || type === 'month' || type === 'year';
+}
+/**
+ * Reads the numeric field order and separator from `Intl` for `locale`, for
+ * example month/day/year with "/" for en-US and day.month.year for de.
+ */
+export function dateEntryPattern(locale) {
+    const parts = dateFormatter(locale, {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+    }).formatToParts(formatterDate({ year: 2023, month: 12, day: 31 }));
+    const order = parts.map((part) => part.type).filter(isEntryPart);
+    const separator = parts.find((part) => part.type === 'literal')?.value;
+    if (order.length !== 3 || new Set(order).size !== 3 || !separator?.trim())
+        return FALLBACK;
+    return {
+        order: [order[0], order[1], order[2]],
+        separator: separator.trim(),
+    };
+}
+const WIDTH = { day: 2, month: 2, year: 4 };
+/** Zero-padded, Latin digits in the pattern's order; empty for no date. */
+export function formatDateEntry(value, pattern) {
+    const parts = parseDateOnly(value);
+    if (!parts)
+        return '';
+    return pattern.order
+        .map((part) => String(parts[part]).padStart(WIDTH[part], '0'))
+        .join(pattern.separator);
+}
+/** A hint such as "MM/DD/YYYY" from the consumer's per-part letters. */
+export function dateEntryPlaceholder(pattern, letters) {
+    return pattern.order.map((part) => letters[part]).join(pattern.separator);
+}
+function splitDigits(text, pattern) {
+    const groups = text.match(/\d+/g) ?? [];
+    if (groups.length === 3)
+        return groups;
+    // Eight digits with no separators, as typed on a numeric keypad.
+    const digits = groups[0];
+    if (groups.length !== 1 || digits?.length !== 8)
+        return null;
+    let start = 0;
+    return pattern.order.map((part) => {
+        const group = digits.slice(start, start + WIDTH[part]);
+        start += WIDTH[part];
+        return group;
+    });
+}
+const ISO_ORDER = ['year', 'month', 'day'];
+/** The field order typed text uses: ISO when it starts with four digits. */
+function typedOrder(groups, pattern) {
+    return groups[0]?.length === 4 ? ISO_ORDER : pattern.order;
+}
+/**
+ * Whether typed text is finished, so a date it forms can be committed while
+ * the person is still typing: eight bare digits, or three fields whose last
+ * one is at full width (four year digits, two for a trailing day or month).
+ * A shorter last field may still grow, as "2024-03-1" on the way to
+ * "2024-03-10", so it waits for blur or Enter instead.
+ */
+export function isCompleteDateEntry(text, pattern) {
+    const groups = text.match(/\d+/g) ?? [];
+    if (groups.length === 1)
+        return groups[0]?.length === 8;
+    if (groups.length !== 3)
+        return false;
+    const last = typedOrder(groups, pattern)[2];
+    return groups[2]?.length === WIDTH[last];
+}
+/**
+ * Parses typed text in the pattern's order. Day and month take one or two
+ * digits, the year exactly four, and any non-digit run separates fields.
+ * Eight bare digits split by field width in the same order (MMDDYYYY for
+ * en-US). A four-digit first field reads as ISO year-month-day in every
+ * locale, since no locale starts a day or month with four digits. Returns
+ * the YYYY-MM-DD value, '' for blank text, or null when it is not a date.
+ */
+export function parseDateEntry(text, pattern) {
+    const trimmed = text.trim();
+    if (trimmed === '')
+        return '';
+    if (/\p{L}/u.test(trimmed))
+        return null;
+    const groups = splitDigits(trimmed, pattern);
+    if (!groups)
+        return null;
+    const order = typedOrder(groups, pattern);
+    const date = { year: 0, month: 0, day: 0 };
+    for (const [index, part] of order.entries()) {
+        const digits = groups[index] ?? '';
+        const width = part === 'year' ? digits.length === 4 : digits.length <= 2;
+        if (!width)
+            return null;
+        date[part] = Number(digits);
+    }
+    return isValidDateParts(date) ? formatDateOnly(date) : null;
+}

package/dist/date-field-labels.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Words the DateField control speaks or shows on its own. Products pass
+ * their translations; month and weekday names come from `Intl` instead.
+ */
+export type DateFieldLabels = {
+    /**
+     * Calendar button name; the field label describes the button. A page with
+     * several date fields may pass a distinct name per field.
+     */
+    chooseDate: string;
+    previousMonth: string;
+    nextMonth: string;
+    /** Month selector name in the calendar header. */
+    month: string;
+    /** Year selector name in the calendar header. */
+    year: string;
+    /** Selects today's date and closes the calendar. */
+    today: string;
+    /** Empties an optional field and closes the calendar. */
+    clear: string;
+    /**
+     * Shown when typed text is not a date; also the entry's form validation
+     * message while its text is not a date.
+     */
+    invalidEntry: string;
+    /**
+     * The entry's form validation message while its date, typed or given, is
+     * outside `min` and `max`.
+     */
+    outOfRange: string;
+    /** Placeholder letters, arranged in the locale's field order. */
+    dayPlaceholder: string;
+    monthPlaceholder: string;
+    yearPlaceholder: string;
+};
+export declare const defaultDateFieldLabels: DateFieldLabels;
+/** Consumer labels over the English defaults; empty strings fail closed. */
+export declare function resolveDateFieldLabels(labels?: Partial<DateFieldLabels>): DateFieldLabels;

package/dist/date-field-labels.js

@@ -0,0 +1,22 @@
+export const defaultDateFieldLabels = {
+    chooseDate: 'Choose date',
+    previousMonth: 'Previous month',
+    nextMonth: 'Next month',
+    month: 'Month',
+    year: 'Year',
+    today: 'Today',
+    clear: 'Clear',
+    invalidEntry: 'Enter a valid date.',
+    outOfRange: 'Choose a date in the allowed range.',
+    dayPlaceholder: 'DD',
+    monthPlaceholder: 'MM',
+    yearPlaceholder: 'YYYY',
+};
+/** Consumer labels over the English defaults; empty strings fail closed. */
+export function resolveDateFieldLabels(labels = {}) {
+    const resolved = { ...defaultDateFieldLabels, ...labels };
+    for (const [key, text] of Object.entries(resolved))
+        if (typeof text !== 'string' || text.trim() === '')
+            throw new RangeError(`labels.${key} must be non-empty text`);
+    return resolved;
+}

package/dist/date-field-locale.d.ts

@@ -0,0 +1,8 @@
+/** Used when neither the `locale` prop nor an ancestor `lang` names one. */
+export declare const DEFAULT_DATE_LOCALE = "en-US";
+/**
+ * The locale a date control formats with. An explicit `locale` must be a
+ * valid BCP 47 tag, or this throws. Otherwise the nearest `lang` attribute
+ * is used when the runtime supports it, then en-US.
+ */
+export declare function resolveDateLocale(locale: string | undefined, documentLang: string | null | undefined): string;

package/dist/date-field-locale.js

@@ -0,0 +1,27 @@
+/** Used when neither the `locale` prop nor an ancestor `lang` names one. */
+export const DEFAULT_DATE_LOCALE = 'en-US';
+function supported(tag) {
+    try {
+        return Intl.DateTimeFormat.supportedLocalesOf([tag]).length > 0;
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * The locale a date control formats with. An explicit `locale` must be a
+ * valid BCP 47 tag, or this throws. Otherwise the nearest `lang` attribute
+ * is used when the runtime supports it, then en-US.
+ */
+export function resolveDateLocale(locale, documentLang) {
+    if (locale !== undefined) {
+        try {
+            return Intl.getCanonicalLocales(locale)[0] ?? DEFAULT_DATE_LOCALE;
+        }
+        catch {
+            throw new RangeError('locale must be a BCP 47 language tag');
+        }
+    }
+    const lang = documentLang?.trim();
+    return lang && supported(lang) ? lang : DEFAULT_DATE_LOCALE;
+}

package/dist/date-formatters.d.ts

@@ -0,0 +1,13 @@
+import { type DateParts } from './date-only.js';
+/**
+ * One shared `Intl.DateTimeFormat` per locale and options, since building
+ * one is slow and a calendar formats dozens of dates per render. Every
+ * formatter reads UTC, so a cached one never meets a changed device time
+ * zone; pair it with `formatterDate`.
+ */
+export declare function dateFormatter(locale: string, options: Intl.DateTimeFormatOptions): Intl.DateTimeFormat;
+/**
+ * Noon UTC on a calendar date, for `dateFormatter` only. `setUTCFullYear`
+ * keeps years below 100 literal instead of mapping them to the 1900s.
+ */
+export declare function formatterDate({ year, month, day }: DateParts): Date;

package/dist/date-formatters.js

@@ -0,0 +1,28 @@
+const formatters = new Map();
+/**
+ * One shared `Intl.DateTimeFormat` per locale and options, since building
+ * one is slow and a calendar formats dozens of dates per render. Every
+ * formatter reads UTC, so a cached one never meets a changed device time
+ * zone; pair it with `formatterDate`.
+ */
+export function dateFormatter(locale, options) {
+    const key = `${locale}|${JSON.stringify(options)}`;
+    let formatter = formatters.get(key);
+    if (formatter === undefined) {
+        formatter = new Intl.DateTimeFormat(locale, {
+            ...options,
+            timeZone: 'UTC',
+        });
+        formatters.set(key, formatter);
+    }
+    return formatter;
+}
+/**
+ * Noon UTC on a calendar date, for `dateFormatter` only. `setUTCFullYear`
+ * keeps years below 100 literal instead of mapping them to the 1900s.
+ */
+export function formatterDate({ year, month, day }) {
+    const date = new Date(Date.UTC(2000, 0, 1, 12));
+    date.setUTCFullYear(year, month - 1, day);
+    return date;
+}

package/dist/date-only.d.ts

@@ -1,3 +1,26 @@
+/** A calendar date with no time and no zone. `month` is 1–12. */
+export type DateParts = {
+    year: number;
+    month: number;
+    day: number;
+};
+/** The first and last dates a four-digit YYYY-MM-DD value can hold. */
+export declare const EARLIEST_DATE_ONLY = "0001-01-01";
+export declare const LATEST_DATE_ONLY = "9999-12-31";
+export declare function daysInMonth(year: number, month: number): number;
+export declare function isValidDateParts({ year, month, day }: DateParts): boolean;
+export declare function parseDateOnly(value: string): DateParts | null;
 export declare function isDateOnly(value: string): boolean;
+export declare function formatDateOnly({ year, month, day }: DateParts): string;
 export declare function assertDateOnly(name: string, value: string, empty?: boolean): void;
+/** Validates a picker's value and bounds; an empty value means no selection. */
+export declare function assertDateBounds(value: string, min?: string, max?: string): void;
+/** Valid date-only strings compare lexicographically. */
 export declare function isOutsideDateRange(value: string, min?: string, max?: string): boolean;
+/**
+ * Moves a date-only value into `[min, max]` and into the four-digit years.
+ * Also accepts a zero-padded year 0 or 10000 string from day arithmetic.
+ */
+export declare function clampDateOnly(value: string, min?: string, max?: string): string;
+/** The date on the device's local wall calendar, never converted through UTC. */
+export declare function todayDateOnly(now?: Date): string;

package/dist/date-only.js

@@ -1,31 +1,85 @@
 const DATE_ONLY = /^(\d{4})-(\d{2})-(\d{2})$/;
-function daysInMonth(year, month) {
+/** The first and last dates a four-digit YYYY-MM-DD value can hold. */
+export const EARLIEST_DATE_ONLY = '0001-01-01';
+export const LATEST_DATE_ONLY = '9999-12-31';
+export function daysInMonth(year, month) {
     if (month === 2) {
         const leap = year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
         return leap ? 29 : 28;
     }
     return [4, 6, 9, 11].includes(month) ? 30 : 31;
 }
-export function isDateOnly(value) {
-    const parts = DATE_ONLY.exec(value);
-    if (!parts)
-        return false;
-    const year = Number(parts[1]);
-    const month = Number(parts[2]);
-    const day = Number(parts[3]);
-    return (year >= 1 &&
+export function isValidDateParts({ year, month, day }) {
+    return (Number.isInteger(year) &&
+        Number.isInteger(month) &&
+        Number.isInteger(day) &&
+        year >= 1 &&
+        year <= 9999 &&
         month >= 1 &&
         month <= 12 &&
         day >= 1 &&
         day <= daysInMonth(year, month));
 }
+export function parseDateOnly(value) {
+    const parts = DATE_ONLY.exec(value);
+    if (!parts)
+        return null;
+    const date = {
+        year: Number(parts[1]),
+        month: Number(parts[2]),
+        day: Number(parts[3]),
+    };
+    return isValidDateParts(date) ? date : null;
+}
+export function isDateOnly(value) {
+    return parseDateOnly(value) !== null;
+}
+export function formatDateOnly({ year, month, day }) {
+    const yyyy = String(year).padStart(4, '0');
+    const mm = String(month).padStart(2, '0');
+    const dd = String(day).padStart(2, '0');
+    return `${yyyy}-${mm}-${dd}`;
+}
 export function assertDateOnly(name, value, empty = false) {
     if (empty && value === '')
         return;
     if (!isDateOnly(value))
         throw new RangeError(`${name} must be a valid YYYY-MM-DD date`);
 }
+/** Validates a picker's value and bounds; an empty value means no selection. */
+export function assertDateBounds(value, min, max) {
+    assertDateOnly('value', value, true);
+    if (min !== undefined)
+        assertDateOnly('min', min);
+    if (max !== undefined)
+        assertDateOnly('max', max);
+    if (min !== undefined && max !== undefined && min > max)
+        throw new RangeError('min must not be after max');
+}
+/** Valid date-only strings compare lexicographically. */
 export function isOutsideDateRange(value, min, max) {
     return (value !== '' &&
         ((min !== undefined && value < min) || (max !== undefined && value > max)));
 }
+/**
+ * Moves a date-only value into `[min, max]` and into the four-digit years.
+ * Also accepts a zero-padded year 0 or 10000 string from day arithmetic.
+ */
+export function clampDateOnly(value, min = EARLIEST_DATE_ONLY, max = LATEST_DATE_ONLY) {
+    const low = min > EARLIEST_DATE_ONLY ? min : EARLIEST_DATE_ONLY;
+    const high = max < LATEST_DATE_ONLY ? max : LATEST_DATE_ONLY;
+    // A five-digit year sorts before '9999' as text, so length decides first.
+    if (value.length > 10 || value > high)
+        return high;
+    if (value < low)
+        return low;
+    return value;
+}
+/** The date on the device's local wall calendar, never converted through UTC. */
+export function todayDateOnly(now = new Date()) {
+    return formatDateOnly({
+        year: now.getFullYear(),
+        month: now.getMonth() + 1,
+        day: now.getDate(),
+    });
+}

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 export { ActionMenu, type ActionMenuItem, type ActionMenuProps, } from './components/ActionMenu.js';
+export { ActionBar, type ActionBarProps } from './components/ActionBar.js';
 export { Accordion } from './components/Accordion.js';
-export type { AccordionProps } from './components/Accordion.js';
+export type { AccordionProps, AccordionSize } from './components/Accordion.js';
 export { Switch, type SwitchProps } from './components/Switch.js';
-export { DateField, type DateFieldProps } from './components/DateField.js';
+export { DateField, type DateFieldLabels, type DateFieldProps, type WeekStart, } from './components/DateField.js';
 export { Checkbox, type CheckboxProps } from './components/Checkbox.js';
 export { Spinner, type SpinnerProps, type SpinnerSize, } from './components/Spinner.js';
 export { Progress, type ProgressProps, type ProgressTone, } from './components/Progress.js';
@@ -12,7 +13,7 @@ export { AppHeader, type AppHeaderProps } from './components/AppHeader.js';
 export { Badge, type BadgeProps, type BadgeSize, type BadgeTone, badgeSizes, badgeTones, } from './components/Badge.js';
 export { BarChart, type BarChartItem, type BarChartProps, } from './components/BarChart.js';
 export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, } from './components/Button.js';
-export { Box, type BoxElement, type BoxProps } from './components/Box.js';
+export { Box, type BoxBorder, type BoxElement, type BoxProps, } from './components/Box.js';
 export { ButtonGroup, type ButtonGroupJustify, type ButtonGroupProps, } from './components/ButtonGroup.js';
 export { Card, type CardProps, type CardVariant } from './components/Card.js';
 export { Dialog, type DialogProps, type DialogSize, } from './components/Dialog.js';
@@ -34,6 +35,7 @@ export { Text, type TextAlign, type TextElement, type TextProps, } from './compo
 export { ThemeProvider, useTheme, type ThemeProviderProps, } from './theme/ThemeProvider.js';
 export { utilityClassCatalog } from './css/stylesheet.js';
 export type { VisibilityProps } from './visibility-classes.js';
+export type { Breakpoint } from './css/breakpoints.js';
 export { Separator } from './components/Separator.js';
 export type { SeparatorOrientation, SeparatorProps, } from './components/Separator.js';
 export { Grid } from './components/Grid.js';

package/dist/index.js

@@ -1,7 +1,8 @@
 export { ActionMenu, } from './components/ActionMenu.js';
+export { ActionBar } from './components/ActionBar.js';
 export { Accordion } from './components/Accordion.js';
 export { Switch } from './components/Switch.js';
-export { DateField } from './components/DateField.js';
+export { DateField, } from './components/DateField.js';
 export { Checkbox } from './components/Checkbox.js';
 export { Spinner, } from './components/Spinner.js';
 export { Progress, } from './components/Progress.js';
@@ -11,7 +12,7 @@ export { AppHeader } from './components/AppHeader.js';
 export { Badge, badgeSizes, badgeTones, } from './components/Badge.js';
 export { BarChart, } from './components/BarChart.js';
 export { Button, } from './components/Button.js';
-export { Box } from './components/Box.js';
+export { Box, } from './components/Box.js';
 export { ButtonGroup, } from './components/ButtonGroup.js';
 export { Card } from './components/Card.js';
 export { Dialog, } from './components/Dialog.js';