@longline/aqua-ui 1.0.186 → 1.0.187

package/containers/Form/Validation.d.ts

@@ -196,7 +196,7 @@ declare class Validation {
      */
     private static validateEmail;
     /**
-     * Verify that value is before today.
+     * Verify that value is before or equal to today.
      */
     private static validateNofuture;
     /**

package/containers/Form/Validation.js

@@ -1,4 +1,3 @@
-import { isAfter, isBefore, parseISO } from "date-fns";
 var Validation = /** @class */ (function () {
     function Validation() {
     }
@@ -124,7 +123,7 @@ var Validation = /** @class */ (function () {
         return regex.test(String(value).toLowerCase());
     };
     /**
-     * Verify that value is before today.
+     * Verify that value is before or equal to today.
      */
     Validation.validateNofuture = function (value) {
         if (!value)
@@ -134,7 +133,7 @@ var Validation = /** @class */ (function () {
         // Abort if not a valid date:
         if (isNaN(d.getDate()))
             return false;
-        return isBefore(d, otherDate);
+        return d.getTime() <= otherDate.getTime();
     };
     /**
      * Verify that value is before date.
@@ -142,12 +141,12 @@ var Validation = /** @class */ (function () {
     Validation.validateBefore = function (value, otherDateStr) {
         if (!value)
             return true;
-        var otherDate = parseISO(otherDateStr);
+        var otherDate = new Date(otherDateStr);
         var d = new Date(value);
         // Abort if not a valid date:
         if (isNaN(d.getDate()))
             return false;
-        return isBefore(d, otherDate);
+        return d.getTime() < otherDate.getTime();
     };
     /**
      * Verify that value is after date.
@@ -155,12 +154,12 @@ var Validation = /** @class */ (function () {
     Validation.validateAfter = function (value, otherDateStr) {
         if (!value)
             return true;
-        var otherDate = parseISO(otherDateStr);
+        var otherDate = new Date(otherDateStr);
         var d = new Date(value);
         // Abort if not a valid date:
         if (isNaN(d.getDate()))
             return false;
-        return isAfter(d, otherDate);
+        return d.getTime() > otherDate.getTime();
     };
     Validation.getValidation = function (value, rules) {
         if (!rules)

package/formatters/DateTime/DateTime.d.ts

@@ -1,15 +1,14 @@
 import * as React from 'react';
-import { Locale } from "date-fns";
-type TType = 'longdate' | 'shortdate' | 'longdatetime' | 'shortdatetime' | 'longtime' | 'shorttime' | 'fuzzydistance' | 'strictdistance' | 'custom';
+type TType = 'longdate' | 'shortdate' | 'longdatetime' | 'shortdatetime' | 'longtime' | 'shorttime' | 'distance' | 'custom';
 interface IDateTimeProps {
     /**
      * Input date. This can either be a `Date` or a `string`.
      */
     value: string | Date;
     /**
-     * Optional `Locale`. This is a locale from https://date-fns.org/v4.1.0/docs/I18n.
+     * Optional `Locale`.
      */
-    locale?: Locale;
+    locale?: string;
 }
 interface IDateTimeFormatProps {
     /**
@@ -34,50 +33,31 @@ interface IProps extends IDateTimeProps, IDateTimeFormatProps, IAnimateProps {
 /**
  * `DateTime` formats a date or time to a string.
  *
- * If the input date fails to parse (in case of a `string`), or isn't a valid date (in case of a `Date`),
- * then the formatter falls back to today's date/time. An input of `null` is not rendered at all.
+ * If the input date fails to parse (in case of a `string`), or isn't a valid
+ * date (in case of a `Date`), then the formatter falls back to today's
+ * date/time. An input of `null` is not rendered at all.
  *
- * If `animated` is set, then date distances will be updated every second.
- *
- * Optionally, a `locale` is supported:
+ * If `animated` is set, then date distances will be updated every second
+ * (only applicable to `fuzzydistance` and `strictdistance` types).
  *
  * ```tsx
- * import { es } from 'date-fns/locale'
+ * <DateTime type='longdate' value='1992-03-08' locale="es"/>
+ * ```
  *
- * <DateTime type='longdate' value='1992-03-08' locale={es}/>
+ * You can also use static members of `DateTime` directly:
+ * ```tsx
+ * <DateTIme.LongDate value='1992-03-08'/>
  * ```
  */
 declare const DateTime: {
-    ({ type, animated, ...props }: IProps): React.JSX.Element;
+    ({ type, ...props }: IProps): React.JSX.Element;
     displayName: string;
-    LongDate: {
-        ({ value, locale }: IDateTimeProps): React.JSX.Element;
-        displayName: string;
-    };
-    ShortDate: {
-        (props: IDateTimeProps): React.JSX.Element;
-        displayName: string;
-    };
-    LongDateTime: {
-        (props: IDateTimeProps): React.JSX.Element;
-        displayName: string;
-    };
-    ShortDateTime: {
-        (props: IDateTimeProps): React.JSX.Element;
-        displayName: string;
-    };
-    LongTime: {
-        (props: IDateTimeProps): React.JSX.Element;
-        displayName: string;
-    };
-    ShortTime: React.MemoExoticComponent<({ value, locale, seconds }: import("./elements").IShortTimeProps) => React.JSX.Element>;
-    DistanceDate: {
-        ({ animated, ...props }: import("./elements").IDistanceDateProps): React.JSX.Element;
-        displayName: string;
-    };
-    Custom: {
-        ({ format, ...props }: IDateTimeProps & IDateTimeFormatProps): React.JSX.Element;
-        displayName: string;
-    };
+    LongDate: React.MemoExoticComponent<({ value, locale }: IDateTimeProps) => React.JSX.Element>;
+    ShortDate: React.MemoExoticComponent<({ value, locale }: IDateTimeProps) => React.JSX.Element>;
+    LongDateTime: React.MemoExoticComponent<({ value, locale }: IDateTimeProps) => React.JSX.Element>;
+    ShortDateTime: React.MemoExoticComponent<({ value, locale }: IDateTimeProps) => React.JSX.Element>;
+    LongTime: React.MemoExoticComponent<({ value, locale }: IDateTimeProps) => React.JSX.Element>;
+    ShortTime: React.MemoExoticComponent<({ value, locale }: IDateTimeProps) => React.JSX.Element>;
+    DistanceDate: React.MemoExoticComponent<({ value, animated, locale }: IDateTimeProps & IAnimateProps) => React.JSX.Element>;
 };
 export { DateTime, IDateTimeProps, IDateTimeFormatProps, IAnimateProps, IProps };

package/formatters/DateTime/DateTime.js

@@ -21,25 +21,28 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { Custom, DistanceDate, LongDate, LongDateTime, LongTime, ShortDate, ShortDateTime, ShortTime } from './elements';
+import { DistanceDate, LongDate, LongDateTime, LongTime, ShortDate, ShortDateTime, ShortTime } from './elements';
 /**
  * `DateTime` formats a date or time to a string.
  *
- * If the input date fails to parse (in case of a `string`), or isn't a valid date (in case of a `Date`),
- * then the formatter falls back to today's date/time. An input of `null` is not rendered at all.
+ * If the input date fails to parse (in case of a `string`), or isn't a valid
+ * date (in case of a `Date`), then the formatter falls back to today's
+ * date/time. An input of `null` is not rendered at all.
  *
- * If `animated` is set, then date distances will be updated every second.
- *
- * Optionally, a `locale` is supported:
+ * If `animated` is set, then date distances will be updated every second
+ * (only applicable to `fuzzydistance` and `strictdistance` types).
  *
  * ```tsx
- * import { es } from 'date-fns/locale'
+ * <DateTime type='longdate' value='1992-03-08' locale="es"/>
+ * ```
  *
- * <DateTime type='longdate' value='1992-03-08' locale={es}/>
+ * You can also use static members of `DateTime` directly:
+ * ```tsx
+ * <DateTIme.LongDate value='1992-03-08'/>
  * ```
  */
 var DateTime = function (_a) {
-    var _b = _a.type, type = _b === void 0 ? 'longdate' : _b, _c = _a.animated, animated = _c === void 0 ? false : _c, props = __rest(_a, ["type", "animated"]);
+    var _b = _a.type, type = _b === void 0 ? 'longdate' : _b, props = __rest(_a, ["type"]);
     switch (type) {
         case 'longdate': return React.createElement(LongDate, __assign({}, props));
         case 'shortdate': return React.createElement(ShortDate, __assign({}, props));
@@ -47,9 +50,7 @@ var DateTime = function (_a) {
         case 'shortdatetime': return React.createElement(ShortDateTime, __assign({}, props));
         case 'longtime': return React.createElement(LongTime, __assign({}, props));
         case 'shorttime': return React.createElement(ShortTime, __assign({}, props));
-        case 'fuzzydistance': return React.createElement(DistanceDate, __assign({}, props));
-        case 'strictdistance': return React.createElement(DistanceDate, __assign({ strict: true }, props));
-        case 'custom': return React.createElement(Custom, __assign({}, props));
+        case 'distance': return React.createElement(DistanceDate, __assign({}, props));
         default:
             return null;
     }
@@ -64,5 +65,4 @@ DateTime.ShortDateTime = ShortDateTime;
 DateTime.LongTime = LongTime;
 DateTime.ShortTime = ShortTime;
 DateTime.DistanceDate = DistanceDate;
-DateTime.Custom = Custom;
 export { DateTime };

package/formatters/DateTime/elements/DistanceDate.d.ts

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import { IAnimateProps, IDateTimeProps } from '../DateTime';
-interface IDistanceDateProps extends IDateTimeProps, IAnimateProps {
-    /**
-     * A strict formatter does not use helpers like 'almost', 'over',
-     * 'less than' and the like.
-     */
-    strict?: boolean;
-}
-declare const DistanceDate: {
-    ({ animated, ...props }: IDistanceDateProps): React.JSX.Element;
-    displayName: string;
-};
-export { DistanceDate, IDistanceDateProps };
+/**
+ * `DateTime.Distance` formats a date relative to "now", e.g.:
+ * "5 minutes ago", "in 2 days".
+ *
+ * If `animated` is true, the value updates every second.
+  *
+ * ```tsx
+ * <DateTime.Distance value="2024-05-28T14:30:00Z" />
+ * <DateTime.Distance value={someDate} animated strict locale={fr} />
+ * ```
+ */
+declare const DistanceDate: React.MemoExoticComponent<({ value, animated, locale }: IDateTimeProps & IAnimateProps) => React.JSX.Element>;
+export { DistanceDate };

package/formatters/DateTime/elements/DistanceDate.js

@@ -1,46 +1,78 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import * as React from 'react';
-import { format, formatDistanceToNow, formatDistanceToNowStrict } from 'date-fns';
 import { toDate } from './toDate';
-var DistanceDate = function (_a) {
-    var _b = _a.animated, animated = _b === void 0 ? false : _b, props = __rest(_a, ["animated"]);
-    var interval = React.useRef(null);
-    var _c = React.useState(0), timestamp = _c[0], setTimestamp = _c[1];
-    // Create an interval every second.
+/**
+ * `DateTime.Distance` formats a date relative to "now", e.g.:
+ * "5 minutes ago", "in 2 days".
+ *
+ * If `animated` is true, the value updates every second.
+  *
+ * ```tsx
+ * <DateTime.Distance value="2024-05-28T14:30:00Z" />
+ * <DateTime.Distance value={someDate} animated strict locale={fr} />
+ * ```
+ */
+var DistanceDate = React.memo(function (_a) {
+    var value = _a.value, _b = _a.animated, animated = _b === void 0 ? false : _b, locale = _a.locale;
+    var intervalRef = React.useRef(null);
+    var _c = React.useState(0), setTick = _c[1]; // trigger updates
+    var update = React.useCallback(function () {
+        setTick(Date.now());
+    }, []);
+    // Set up interval for animated updates
     React.useEffect(function () {
-        if (interval.current != null)
-            clearInterval(interval.current);
-        if (animated)
-            interval.current = window.setInterval(update, 1000);
+        if (animated) {
+            intervalRef.current = window.setInterval(update, 1000);
+        }
         return function () {
-            if (interval.current != null)
-                clearInterval(interval.current);
+            if (intervalRef.current != null) {
+                clearInterval(intervalRef.current);
+                intervalRef.current = null;
+            }
         };
-    }, [animated]);
-    var update = function () {
-        // Force the component to rerender by updating its state.
-        setTimestamp(Date.now());
-    };
-    if (props.value == null)
+    }, [animated, update]);
+    if (value == null)
+        return null;
+    var date = toDate(value);
+    if (isNaN(date.getTime()))
         return null;
-    var date = toDate(props.value);
-    var options = {
-        includeSeconds: true, // If false, only minutes are shown
-        addSuffix: true // Add "ago"
-    };
-    if (props.locale)
-        options.locale = props.locale;
-    return (React.createElement("span", { title: format(date, 'eeee, d MMMM yyyy', props.locale ? { locale: props.locale } : {}) }, props.strict ? formatDistanceToNowStrict(date, options) : formatDistanceToNow(date, options)));
-};
+    var now = new Date();
+    var diff = date.getTime() - now.getTime(); // ms difference
+    var absDiff = Math.abs(diff);
+    // Determine time unit and value
+    var unit = 'second';
+    var valueToFormat = Math.round(diff / 1000);
+    if (absDiff >= 1000 * 60 * 60 * 24 * 365) {
+        unit = 'year';
+        valueToFormat = Math.round(diff / (1000 * 60 * 60 * 24 * 365));
+    }
+    else if (absDiff >= 1000 * 60 * 60 * 24 * 30) {
+        unit = 'month';
+        valueToFormat = Math.round(diff / (1000 * 60 * 60 * 24 * 30));
+    }
+    else if (absDiff >= 1000 * 60 * 60 * 24) {
+        unit = 'day';
+        valueToFormat = Math.round(diff / (1000 * 60 * 60 * 24));
+    }
+    else if (absDiff >= 1000 * 60 * 60) {
+        unit = 'hour';
+        valueToFormat = Math.round(diff / (1000 * 60 * 60));
+    }
+    else if (absDiff >= 1000 * 60) {
+        unit = 'minute';
+        valueToFormat = Math.round(diff / (1000 * 60));
+    }
+    var rtf = new Intl.RelativeTimeFormat(locale || undefined, { numeric: 'auto' });
+    var formatted = rtf.format(valueToFormat, unit);
+    var title = date.toLocaleString(locale || undefined, {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+    });
+    return (React.createElement("time", { dateTime: date.toISOString(), title: title }, formatted));
+});
 DistanceDate.displayName = "DateTime.Distance";
 export { DistanceDate };

package/formatters/DateTime/elements/LongDate.d.ts

@@ -9,19 +9,16 @@ import { IDateTimeProps } from '../DateTime';
  * If the input is `null` or invalid, it returns `null` and renders nothing.
  *
  * Optionally, a `locale` can be provided to format the date in different
- * languages and regional formats using date-fns locales.
+ * languages and regional formats.
  *
  * The output is wrapped in a `<time>` element with a machine-readable
  * `dateTime` attribute.
  *
  * @example
  * ```tsx
- * <LongDate value={new Date()} />
- * <LongDate value="2023-01-01" locale={es} />
+ * <DateTime.LongDate value={new Date()} />
+ * <DateTime.LongDate value="2023-01-01" locale={es} />
  * ```
  */
-declare const LongDate: {
-    ({ value, locale }: IDateTimeProps): React.JSX.Element;
-    displayName: string;
-};
+declare const LongDate: React.MemoExoticComponent<({ value, locale }: IDateTimeProps) => React.JSX.Element>;
 export { LongDate };

package/formatters/DateTime/elements/LongDate.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { format } from 'date-fns';
 import { toDate } from './toDate';
 /**
  * `LongDate` formats a date value into a long date string, such as
@@ -10,28 +9,32 @@ import { toDate } from './toDate';
  * If the input is `null` or invalid, it returns `null` and renders nothing.
  *
  * Optionally, a `locale` can be provided to format the date in different
- * languages and regional formats using date-fns locales.
+ * languages and regional formats.
  *
  * The output is wrapped in a `<time>` element with a machine-readable
  * `dateTime` attribute.
  *
  * @example
  * ```tsx
- * <LongDate value={new Date()} />
- * <LongDate value="2023-01-01" locale={es} />
+ * <DateTime.LongDate value={new Date()} />
+ * <DateTime.LongDate value="2023-01-01" locale={es} />
  * ```
  */
-var LongDate = function (_a) {
+var LongDate = React.memo(function (_a) {
     var value = _a.value, locale = _a.locale;
     if (value == null)
         return null;
     var date = toDate(value);
     if (!date || isNaN(date.getTime()))
         return null;
-    var formatOptions = locale ? { locale: locale } : {};
-    var title = React.useMemo(function () { return format(date, 'eeee, d MMMM yyyy', formatOptions); }, [date, formatOptions]);
-    var display = React.useMemo(function () { return format(date, 'eee, d MMMM yyyy', formatOptions); }, [date, formatOptions]);
-    return (React.createElement("time", { dateTime: date.toISOString(), title: title }, display));
-};
+    console.log(locale);
+    var display = React.useMemo(function () { return new Intl.DateTimeFormat(locale || undefined, {
+        weekday: 'long',
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric',
+    }).format(date); }, [date, locale]);
+    return (React.createElement("time", { dateTime: date.toISOString(), title: display }, display));
+});
 LongDate.displayName = "DateTime.LongDate";
 export { LongDate };

package/formatters/DateTime/elements/LongDateTime.d.ts

@@ -12,19 +12,16 @@ import { IDateTimeProps } from '../DateTime';
  * the component returns `null` and renders nothing.
  *
  * Optionally, a `locale` prop can be provided to format the date/time string according
- * to locale-specific rules using date-fns locale support.
+ * to locale-specific rules.
  *
  * The formatted output is wrapped in a `<time>` element with a machine-readable `dateTime`
  * attribute to improve semantics and SEO.
  *
  * @example
  * ```tsx
- * <LongDateTime value={new Date()} />
- * <LongDateTime value="2023-01-01T14:30:45" locale={fr} />
+ * <DateTime.LongDateTime value={new Date()} />
+ * <DateTime.LongDateTime value="2023-01-01T14:30:45" locale={fr} />
  * ```
  */
-declare const LongDateTime: {
-    (props: IDateTimeProps): React.JSX.Element;
-    displayName: string;
-};
+declare const LongDateTime: React.MemoExoticComponent<({ value, locale }: IDateTimeProps) => React.JSX.Element>;
 export { LongDateTime };

package/formatters/DateTime/elements/LongDateTime.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { format } from 'date-fns';
 import { toDate } from './toDate';
 /**
  * `LongDateTime` formats a date/time value into a long, detailed string including
@@ -13,25 +12,35 @@ import { toDate } from './toDate';
  * the component returns `null` and renders nothing.
  *
  * Optionally, a `locale` prop can be provided to format the date/time string according
- * to locale-specific rules using date-fns locale support.
+ * to locale-specific rules.
  *
  * The formatted output is wrapped in a `<time>` element with a machine-readable `dateTime`
  * attribute to improve semantics and SEO.
  *
  * @example
  * ```tsx
- * <LongDateTime value={new Date()} />
- * <LongDateTime value="2023-01-01T14:30:45" locale={fr} />
+ * <DateTime.LongDateTime value={new Date()} />
+ * <DateTime.LongDateTime value="2023-01-01T14:30:45" locale={fr} />
  * ```
  */
-var LongDateTime = function (props) {
-    if (props.value == null)
+var LongDateTime = React.memo(function (_a) {
+    var value = _a.value, locale = _a.locale;
+    if (value == null)
         return null;
-    var date = toDate(props.value);
+    var date = toDate(value);
     if (isNaN(date.getTime()))
         return null; // Extra check for invalid dates
-    var localeOptions = props.locale ? { locale: props.locale } : {};
-    return (React.createElement("time", { dateTime: date.toISOString(), title: format(date, 'eeee, d MMMM yyyy HH:mm:ss', localeOptions) }, format(date, 'eee, d MMMM yyyy HH:mm:ss', localeOptions)));
-};
+    var display = React.useMemo(function () { return new Intl.DateTimeFormat(locale || undefined, {
+        weekday: 'long', // e.g. Tuesday
+        day: 'numeric', // e.g. 28
+        month: 'long', // e.g. May
+        year: 'numeric', // e.g. 2024
+        hour: '2-digit', // e.g. 14 (24-hour format)
+        minute: '2-digit', // e.g. 30
+        second: '2-digit', // e.g. 05
+        hour12: false // 24-hour time, remove if you want 12-hour time
+    }).format(date); }, [date, locale]);
+    return (React.createElement("time", { dateTime: date.toISOString(), title: display }, display));
+});
 LongDateTime.displayName = "DateTime.LongDateTime";
 export { LongDateTime };

package/formatters/DateTime/elements/LongTime.d.ts

@@ -15,12 +15,9 @@ import { IDateTimeProps } from '../DateTime';
  *
  * @example
  * ```tsx
- * <LongTime value={new Date()} />
- * <LongTime value="2023-01-01T14:30:45" />
+ * <DateTime.LongTime value={new Date()} />
+ * <DateTime.LongTime value="2023-01-01T14:30:45" />
  * ```
  */
-declare const LongTime: {
-    (props: IDateTimeProps): React.JSX.Element;
-    displayName: string;
-};
+declare const LongTime: React.MemoExoticComponent<({ value, locale }: IDateTimeProps) => React.JSX.Element>;
 export { LongTime };

package/formatters/DateTime/elements/LongTime.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { format } from 'date-fns';
 import { toDate } from './toDate';
 /**
  * `LongTime` formats a date/time value to show hours, minutes, and seconds,
@@ -16,17 +15,24 @@ import { toDate } from './toDate';
  *
  * @example
  * ```tsx
- * <LongTime value={new Date()} />
- * <LongTime value="2023-01-01T14:30:45" />
+ * <DateTime.LongTime value={new Date()} />
+ * <DateTime.LongTime value="2023-01-01T14:30:45" />
  * ```
  */
-var LongTime = function (props) {
-    if (props.value == null)
+var LongTime = React.memo(function (_a) {
+    var value = _a.value, locale = _a.locale;
+    if (value == null)
         return null;
-    var date = toDate(props.value);
+    var date = toDate(value);
     if (isNaN(date.getTime()))
         return null;
-    return (React.createElement("time", { dateTime: date.toISOString() }, format(date, 'HH:mm:ss')));
-};
+    var display = React.useMemo(function () { return new Intl.DateTimeFormat(locale || undefined, {
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false
+    }).format(date); }, [date, locale]);
+    return (React.createElement("time", { dateTime: date.toISOString() }, display));
+});
 LongTime.displayName = "DateTime.LongTime";
 export { LongTime };

package/formatters/DateTime/elements/ShortDate.d.ts

@@ -17,12 +17,9 @@ import { IDateTimeProps } from '../DateTime';
  *
  * @example
  * ```tsx
- * <ShortDate value={new Date()} />
- * <ShortDate value="2025-05-28" locale={someLocale} />
+ * <DateTime.ShortDate value={new Date()} />
+ * <DateTime.ShortDate value="2025-05-28" locale={someLocale} />
  * ```
  */
-declare const ShortDate: {
-    (props: IDateTimeProps): React.JSX.Element;
-    displayName: string;
-};
+declare const ShortDate: React.MemoExoticComponent<({ value, locale }: IDateTimeProps) => React.JSX.Element>;
 export { ShortDate };

package/formatters/DateTime/elements/ShortDate.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { format } from 'date-fns';
 import { toDate } from './toDate';
 /**
  * `ShortDate` formats a date value into a short date string,
@@ -18,20 +17,33 @@ import { toDate } from './toDate';
  *
  * @example
  * ```tsx
- * <ShortDate value={new Date()} />
- * <ShortDate value="2025-05-28" locale={someLocale} />
+ * <DateTime.ShortDate value={new Date()} />
+ * <DateTime.ShortDate value="2025-05-28" locale={someLocale} />
  * ```
  */
-var ShortDate = function (props) {
-    if (props.value == null)
+var ShortDate = React.memo(function (_a) {
+    var value = _a.value, locale = _a.locale;
+    if (value == null)
         return null;
-    var date = toDate(props.value);
+    var date = toDate(value);
     if (isNaN(date.getTime()))
         return null;
-    var longDateFormat = 'eeee, d MMMM yyyy';
-    var shortDateFormat = 'dd-MM-yyyy';
-    var localeOption = props.locale ? { locale: props.locale } : {};
-    return (React.createElement("time", { dateTime: date.toISOString(), title: format(date, longDateFormat, localeOption) }, format(date, shortDateFormat, localeOption)));
-};
+    var title = React.useMemo(function () { return new Intl.DateTimeFormat(locale || undefined, {
+        weekday: 'long', // e.g. Tuesday
+        day: 'numeric', // e.g. 28
+        month: 'long', // e.g. May
+        year: 'numeric', // e.g. 2024
+        hour: '2-digit', // e.g. 14 (24-hour format)
+        minute: '2-digit', // e.g. 30
+        second: '2-digit', // e.g. 05
+        hour12: false // 24-hour time, remove if you want 12-hour time
+    }).format(date); }, [date, locale]);
+    var display = React.useMemo(function () { return new Intl.DateTimeFormat(locale || undefined, {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+    }).format(date); }, [date, locale]);
+    return (React.createElement("time", { dateTime: date.toISOString(), title: title }, display));
+});
 ShortDate.displayName = "DateTime.ShortDate";
 export { ShortDate };

package/formatters/DateTime/elements/ShortDateTime.d.ts

@@ -17,12 +17,9 @@ import { IDateTimeProps } from '../DateTime';
  *
  * @example
  * ```tsx
- * <ShortDateTime value={new Date()} />
- * <ShortDateTime value="2025-05-28T14:30:45" locale={someLocale} />
+ * <DateTime.ShortDateTime value={new Date()} />
+ * <DateTime.ShortDateTime value="2025-05-28T14:30:45" locale={someLocale} />
  * ```
  */
-declare const ShortDateTime: {
-    (props: IDateTimeProps): React.JSX.Element;
-    displayName: string;
-};
+declare const ShortDateTime: React.MemoExoticComponent<({ value, locale }: IDateTimeProps) => React.JSX.Element>;
 export { ShortDateTime };

package/formatters/DateTime/elements/ShortDateTime.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { format } from 'date-fns';
 import { toDate } from './toDate';
 /**
  * `ShortDateTime` formats a date/time value as a short date and time string,
@@ -18,20 +17,45 @@ import { toDate } from './toDate';
  *
  * @example
  * ```tsx
- * <ShortDateTime value={new Date()} />
- * <ShortDateTime value="2025-05-28T14:30:45" locale={someLocale} />
+ * <DateTime.ShortDateTime value={new Date()} />
+ * <DateTime.ShortDateTime value="2025-05-28T14:30:45" locale={someLocale} />
  * ```
  */
-var ShortDateTime = function (props) {
-    if (props.value == null)
+var ShortDateTime = React.memo(function (_a) {
+    var value = _a.value, locale = _a.locale;
+    if (value == null)
         return null;
-    var date = toDate(props.value);
+    var date = toDate(value);
     if (isNaN(date.getTime()))
         return null;
-    var longDateTimeFormat = 'eeee, d MMMM yyyy HH:mm:ss';
-    var shortDateTimeFormat = 'dd-MM-yyyy HH:mm:ss';
-    var localeOption = props.locale ? { locale: props.locale } : {};
-    return (React.createElement("time", { dateTime: date.toISOString(), title: format(date, longDateTimeFormat, localeOption) }, format(date, shortDateTimeFormat, localeOption)));
-};
+    var title = React.useMemo(function () { return new Intl.DateTimeFormat(locale || undefined, {
+        weekday: 'long', // e.g. Tuesday
+        day: 'numeric', // e.g. 28
+        month: 'long', // e.g. May
+        year: 'numeric', // e.g. 2024
+        hour: '2-digit', // e.g. 14 (24-hour format)
+        minute: '2-digit', // e.g. 30
+        second: '2-digit', // e.g. 05
+        hour12: false // 24-hour time, remove if you want 12-hour time
+    }).format(date); }, [date, locale]);
+    // Format the date part with locale (will use locale separators and order)
+    var formattedDate = React.useMemo(function () { return new Intl.DateTimeFormat(locale || undefined, {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+    }).format(date); }, [date, locale]);
+    // Format the time part - note time is more consistent but can be locale-specific (e.g., 24h vs 12h)
+    // We force 24h with hour12: false.
+    var formattedTime = React.useMemo(function () { return new Intl.DateTimeFormat(locale || undefined, {
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false,
+    }).format(date); }, [date, locale]);
+    return (React.createElement("time", { dateTime: date.toISOString(), title: title },
+        formattedDate,
+        " ",
+        formattedTime));
+});
 ShortDateTime.displayName = "DateTime.ShortDateTime";
 export { ShortDateTime };

package/formatters/DateTime/elements/ShortTime.d.ts

@@ -1,19 +1,20 @@
 import * as React from 'react';
 import { IDateTimeProps } from '../DateTime';
-interface IShortTimeProps extends IDateTimeProps {
-    /**
-     * Seconds are shown if set.
-     */
-    seconds?: boolean;
-}
 /**
- * Formats a time value to a short string (HH:mm or HH:mm:ss).
- * Supports optional locale and seconds display.
+ * `ShortTime` formats a time value as a short string (HH:mm),
+ * supporting localization.
  *
+ * The component accepts a `Date` or a date string as input. If the input is `null`
+ * or invalid, it returns `null`.
+ *
+ * The output is wrapped in a semantic `<time>` element with a machine-readable
+ * `dateTime` attribute.
+ *
+ * @example
  * ```tsx
- * <ShortTime value={new Date()} />
- * <ShortTime value="2023-05-28T14:30:00" seconds locale={someLocale} />
+ * <DateTime.ShortTime value={new Date()} />
+ * <DateTime.ShortTime value="2023-05-28T14:30:00" locale={someLocale} />
  * ```
  */
-declare const ShortTime: React.MemoExoticComponent<({ value, locale, seconds }: IShortTimeProps) => React.JSX.Element>;
-export { ShortTime, IShortTimeProps };
+declare const ShortTime: React.MemoExoticComponent<({ value, locale }: IDateTimeProps) => React.JSX.Element>;
+export { ShortTime };

package/formatters/DateTime/elements/ShortTime.js

@@ -1,24 +1,35 @@
 import * as React from 'react';
-import { format } from 'date-fns';
 import { toDate } from './toDate';
 /**
- * Formats a time value to a short string (HH:mm or HH:mm:ss).
- * Supports optional locale and seconds display.
+ * `ShortTime` formats a time value as a short string (HH:mm),
+ * supporting localization.
  *
+ * The component accepts a `Date` or a date string as input. If the input is `null`
+ * or invalid, it returns `null`.
+ *
+ * The output is wrapped in a semantic `<time>` element with a machine-readable
+ * `dateTime` attribute.
+ *
+ * @example
  * ```tsx
- * <ShortTime value={new Date()} />
- * <ShortTime value="2023-05-28T14:30:00" seconds locale={someLocale} />
+ * <DateTime.ShortTime value={new Date()} />
+ * <DateTime.ShortTime value="2023-05-28T14:30:00" locale={someLocale} />
  * ```
  */
 var ShortTime = React.memo(function (_a) {
-    var value = _a.value, locale = _a.locale, _b = _a.seconds, seconds = _b === void 0 ? false : _b;
+    var value = _a.value, locale = _a.locale;
     if (value == null)
         return null;
     var date = toDate(value);
     if (isNaN(date.getTime()))
-        return null; // handle invalid dates gracefully
-    var formatString = seconds ? 'HH:mm:ss' : 'HH:mm';
-    return (React.createElement("span", null, format(date, formatString, { locale: locale })));
+        return null;
+    var options = {
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false
+    };
+    var formattedTime = React.useMemo(function () { return new Intl.DateTimeFormat(locale || undefined, options).format(date); }, [date, locale]);
+    return (React.createElement("time", { dateTime: date.toISOString() }, formattedTime));
 });
 ShortTime.displayName = "DateTime.ShortTime";
 export { ShortTime };

package/formatters/DateTime/elements/index.d.ts

@@ -5,4 +5,3 @@ export * from './LongDate';
 export * from './ShortDateTime';
 export * from './LongDateTime';
 export * from './DistanceDate';
-export * from './Custom';

package/formatters/DateTime/elements/index.js

@@ -5,4 +5,3 @@ export * from './LongDate';
 export * from './ShortDateTime';
 export * from './LongDateTime';
 export * from './DistanceDate';
-export * from './Custom';

package/inputs/DateInput/DateInput.js

@@ -28,7 +28,6 @@ import * as React from 'react';
 import styled, { css } from 'styled-components';
 import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
-import { parseISO } from 'date-fns';
 import { Selector } from './Selector';
 import { Body } from './Body';
 var DateInputBase = function (props) {
@@ -41,7 +40,7 @@ var DateInputBase = function (props) {
             return def;
         if (str instanceof Date)
             return str;
-        var date = parseISO(props.value);
+        var date = new Date(props.value);
         if (isNaN(date.getDate()))
             return def;
         return date;

package/inputs/Dropdown/Dropdown.d.ts

@@ -133,4 +133,4 @@ declare const Dropdown: {
         displayName: string;
     };
 };
-export { Dropdown, IDropdownProps };
+export { Dropdown };

package/inputs/Dropdown/index.d.ts

@@ -1 +1 @@
-export { Dropdown, IDropdownProps } from './Dropdown';
+export { Dropdown } from './Dropdown';

package/inputs/Input/Input.d.ts

@@ -66,10 +66,6 @@ interface IProps {
      * If set, the value of a `type=password` input can be revealed.
      */
     revealable?: boolean;
-    /** If set, dates and times (in inputs of type `date` or `time`) are shown in this format
-     * (refer to date-fns/format for format options).
-     */
-    format?: string;
     /**
      * If set, time pickers have a "seconds" field.
      * @default false

package/package.json

@@ -1,70 +1,66 @@
-{
-  "name": "@longline/aqua-ui",
-  "version": "1.0.186",
-  "description": "AquaUI",
-  "author": "Alexander van Oostenrijk / Longline Environment",
-  "license": "Commercial",
-  "homepage": "https://github.com/henck/aqua-ui#readme",
-  "main": "/index.js",
-  "module": "/index.js",
-  "types": "/index.d.ts",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/henck/aqua-ui.git"
-  },
-  "bugs": {
-    "url": "https://github.com/henck/aqua-ui/issues"
-  },
-  "scripts": {
-    "build": "webpack --config webpack.config.js && tsc --version && tsc",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "tsc": "tsc",
-    "pub": "npm version patch && webpack --config webpack.config.js && tsc && cd dist && npm publish"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^1.7.0",
-    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-interactions": "^8.2.9",
-    "@storybook/addon-links": "^8.2.9",
-    "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
-    "@storybook/blocks": "^8.2.9",
-    "@storybook/manager-api": "^8.2.9",
-    "@storybook/react": "^8.2.9",
-    "@storybook/react-webpack5": "^8.2.9",
-    "@storybook/test": "^8.2.9",
-    "@storybook/theming": "^8.2.9",
-    "copy-webpack-plugin": "^12.0.2",
-    "pngjs": "^7.0.0",
-    "storybook": "^8.2.9",
-    "svg-spritemap-webpack-plugin": "^4.5.1",
-    "typescript": "^5.5.4",
-    "webpack": "^5.94.0",
-    "webpack-cli": "^5.1.4"
-  },
-  "peerDependencies": {
-    "@popperjs/core": "^2.11.8",
-    "@react-spring/web": "^9.7.4",
-    "@tiptap/pm": "^2.7.2",
-    "@tiptap/react": "^2.7.2",
-    "@tiptap/starter-kit": "^2.7.2",
-    "@turf/helpers": "^7.1.0",
-    "@turf/tin": "^7.1.0",
-    "@types/geojson": "^7946.0.14",
-    "@types/mapbox-gl": "^3.4.1",
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
-    "awesome-debounce-promise": "^2.1.0",
-    "date-fns": "^4.1.0",
-    "gl-matrix": "^3.4.3",
-    "mapbox-gl": "^3.9.4",
-    "overlayscrollbars-react": "^0.5.6",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-map-gl": "^8.0.1",
-    "react-popper": "^2.3.0",
-    "react-router-dom": "^6.26.2",
-    "react-transition-state": "^2.2.0",
-    "styled-components": "^6.1.13"
-  }
-}
+{
+  "name": "@longline/aqua-ui",
+  "version": "1.0.187",
+  "description": "AquaUI",
+  "author": "Alexander van Oostenrijk / Longline Environment",
+  "license": "Commercial",
+  "homepage": "https://github.com/henck/aqua-ui#readme",
+  "main": "/index.js",
+  "module": "/index.js",
+  "types": "/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/henck/aqua-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/henck/aqua-ui/issues"
+  },
+  "scripts": {
+    "build": "webpack --config webpack.config.js && tsc --version && tsc",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "tsc": "tsc",
+    "pub": "npm version patch && webpack --config webpack.config.js && tsc && cd dist && npm publish"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.0.0",
+    "@storybook/addon-docs": "^9.0.0",
+    "@storybook/addon-links": "^9.0.0",
+    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
+    "@storybook/react-webpack5": "^9.0.0",
+    "copy-webpack-plugin": "^12.0.2",
+    "pngjs": "^7.0.0",
+    "storybook": "^9.0.0",
+    "svg-spritemap-webpack-plugin": "^4.5.1",
+    "typescript": "^5.5.4",
+    "webpack": "^5.94.0",
+    "webpack-cli": "^5.1.4"
+  },
+  "peerDependencies": {
+    "@popperjs/core": "^2.11.8",
+    "@react-spring/web": "^9.7.4",
+    "@tiptap/pm": "^2.7.2",
+    "@tiptap/react": "^2.7.2",
+    "@tiptap/starter-kit": "^2.7.2",
+    "@turf/helpers": "^7.1.0",
+    "@turf/tin": "^7.1.0",
+    "@types/geojson": "^7946.0.14",
+    "@types/mapbox-gl": "^3.4.1",
+    "@types/react": "^18.3.10",
+    "@types/react-dom": "^18.3.0",
+    "awesome-debounce-promise": "^2.1.0",
+    "gl-matrix": "^3.4.3",
+    "mapbox-gl": "^3.9.4",
+    "overlayscrollbars-react": "^0.5.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-map-gl": "^8.0.1",
+    "react-popper": "^2.3.0",
+    "react-router-dom": "^6.26.2",
+    "react-transition-state": "^2.2.0",
+    "styled-components": "^6.1.13"
+  },
+  "overrides": {
+    "storybook": "$storybook"
+  }
+}

package/formatters/DateTime/elements/Custom.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { IDateTimeFormatProps, IDateTimeProps } from '../DateTime';
-declare const Custom: {
-    ({ format, ...props }: IDateTimeProps & IDateTimeFormatProps): React.JSX.Element;
-    displayName: string;
-};
-export { Custom };

package/formatters/DateTime/elements/Custom.js

@@ -1,23 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import { format as dFormat } from 'date-fns';
-import { toDate } from './toDate';
-var Custom = function (_a) {
-    var _b = _a.format, format = _b === void 0 ? "dd-MM-yyyy" : _b, props = __rest(_a, ["format"]);
-    if (props.value == null)
-        return null;
-    var date = toDate(props.value);
-    return React.createElement(React.Fragment, null, dFormat(date, format, props.locale ? { locale: props.locale } : {}));
-};
-Custom.displayName = "DateTime.Custom";
-export { Custom };