@longline/aqua-ui 1.0.183 → 1.0.186

package/controls/TertiaryButton/TertiaryButton.js

@@ -27,15 +27,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 var TertiaryButtonBase = function (props) {
-    var handleClick = function (e) {
-        if (props.disabled)
-            return;
-        if (props.onClick)
-            props.onClick(e);
-    };
-    return (React.createElement("button", { className: props.className, onClick: handleClick }, props.children));
+    return React.createElement("button", { className: props.className, type: "button", disabled: props.disabled, onClick: props.onClick }, props.children);
 };
-var TertiaryButtonStyled = styled(TertiaryButtonBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject([" \n  // Size:\n  height: 42px;\n  min-width: 92px;\n  padding-left: 16px;   // TODO: Check this\n  padding-right: 16px;  // TODO: Check this\n\n  // Font\n  font: ", ";\n  color: ", ";\n\n  // Presentation:\n  background-color: ", ";\n  border-radius: ", "px;\n  transition: background-color ease-in-out ", "ms, box-shadow ease-in-out ", "ms;\n  border: none;\n  cursor: pointer;\n  text-transform: uppercase;\n  user-select: none;\n  outline: none;\n\n  // Content alignment:\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  flex-wrap: no-wrap;\n  white-space: nowrap;\n  \n  // Shadow:\n  box-shadow: ", ";\n  &:hover {\n    box-shadow: ", ";\n  }\n  &:active {\n    ", " \n  }\n\n  // Disabled:\n  ", "\n"], [" \n  // Size:\n  height: 42px;\n  min-width: 92px;\n  padding-left: 16px;   // TODO: Check this\n  padding-right: 16px;  // TODO: Check this\n\n  // Font\n  font: ", ";\n  color: ", ";\n\n  // Presentation:\n  background-color: ", ";\n  border-radius: ", "px;\n  transition: background-color ease-in-out ", "ms, box-shadow ease-in-out ", "ms;\n  border: none;\n  cursor: pointer;\n  text-transform: uppercase;\n  user-select: none;\n  outline: none;\n\n  // Content alignment:\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  flex-wrap: no-wrap;\n  white-space: nowrap;\n  \n  // Shadow:\n  box-shadow: ", ";\n  &:hover {\n    box-shadow: ", ";\n  }\n  &:active {\n    ", " \n  }\n\n  // Disabled:\n  ", "\n"
+var TertiaryButtonStyled = styled(TertiaryButtonBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject([" \n  // Size:\n  height: 42px;\n  min-width: 92px;\n  padding-left: 16px;\n  padding-right: 16px;\n\n  // Font\n  font: ", ";\n  color: ", ";\n\n  // Presentation:\n  background-color: ", ";\n  border-radius: ", "px;\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms;\n  border: none;\n  cursor: pointer;\n  text-transform: uppercase;\n  user-select: none;\n  outline: none;\n\n  // Content alignment:\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n  \n  // Shadow:\n  box-shadow: ", ";\n  &:hover {\n    box-shadow: ", ";\n  }\n  &:active {\n    ", " \n  }\n\n  // Disabled:\n  ", "\n"], [" \n  // Size:\n  height: 42px;\n  min-width: 92px;\n  padding-left: 16px;\n  padding-right: 16px;\n\n  // Font\n  font: ", ";\n  color: ", ";\n\n  // Presentation:\n  background-color: ", ";\n  border-radius: ", "px;\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms;\n  border: none;\n  cursor: pointer;\n  text-transform: uppercase;\n  user-select: none;\n  outline: none;\n\n  // Content alignment:\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n  \n  // Shadow:\n  box-shadow: ", ";\n  &:hover {\n    box-shadow: ", ";\n  }\n  &:active {\n    ", " \n  }\n\n  // Disabled:\n  ", "\n"
     /**
      * The `TertiaryButton` is connected to a specific area or component such as
      * an `InfoBox`. It renders as a `<button>` element.
@@ -61,5 +55,6 @@ var TertiaryButton = function (_a) {
     var _b = _a.disabled, disabled = _b === void 0 ? false : _b, props = __rest(_a, ["disabled"]);
     return React.createElement(TertiaryButtonStyled, __assign({ disabled: disabled }, props));
 };
+TertiaryButton.displayName = "TertiaryButton";
 export { TertiaryButton };
 var templateObject_1, templateObject_2, templateObject_3;

package/controls/View/EllipsizedContent.d.ts

@@ -7,5 +7,8 @@ interface IProps {
     /** Is the View in `ghost` mode? */
     ghost?: boolean;
 }
-declare const EllipsizedContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IProps, never>> & string & Omit<(props: IProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+declare const EllipsizedContent: {
+    (props: IProps): React.JSX.Element;
+    displayName: string;
+};
 export { EllipsizedContent };

package/controls/View/EllipsizedContent.js

@@ -2,6 +2,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import * as React from 'react';
 import styled from 'styled-components';
 var EllipsizedContentBase = function (props) {
@@ -9,6 +20,8 @@ var EllipsizedContentBase = function (props) {
         React.createElement(Ellipsize, null, !props.ghost && props.children));
 };
 var Ellipsize = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;  \n  width: 100%;\n"], ["\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;  \n  width: 100%;\n"])));
-var EllipsizedContent = styled(EllipsizedContentBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 36px;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 36px;\n"])));
+var EllipsizedContentStyled = styled(EllipsizedContentBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 36px;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 36px;\n"])));
+var EllipsizedContent = function (props) { return React.createElement(EllipsizedContentStyled, __assign({}, props)); };
+EllipsizedContent.displayName = "EllipsizedContent";
 export { EllipsizedContent };
 var templateObject_1, templateObject_2;

package/controls/View/ScrollingContent.d.ts

@@ -9,5 +9,8 @@ interface IProps {
     /** Height of the view, in CSS units. */
     height: string;
 }
-declare const ScrollingContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IProps, never>> & string & Omit<(props: IProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+declare const ScrollingContent: {
+    (props: IProps): React.JSX.Element;
+    displayName: string;
+};
 export { ScrollingContent };

package/controls/View/ScrollingContent.js

@@ -2,6 +2,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import * as React from 'react';
 import styled from 'styled-components';
 import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
@@ -17,6 +28,8 @@ var ScrollingContentBase = function (props) {
                 overflowY: "auto",
             } }, !props.ghost && props.children));
 };
-var ScrollingContent = styled(ScrollingContentBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  height: 100%;\n"], ["\n  position: relative;\n  height: 100%;\n"])));
+var ScrollingContentStyled = styled(ScrollingContentBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  height: 100%;\n"], ["\n  position: relative;\n  height: 100%;\n"])));
+var ScrollingContent = function (props) { return React.createElement(ScrollingContentStyled, __assign({}, props)); };
+ScrollingContent.displayName = "ScrollingContent";
 export { ScrollingContent };
 var templateObject_1;

package/controls/View/View.d.ts

@@ -4,6 +4,7 @@ interface IProps {
     className?: string;
     /**
      * The `View`'s children are its value. Can be JSX.
+     * @ignore
      */
     children?: React.ReactNode;
     /**
@@ -16,6 +17,7 @@ interface IProps {
     hint?: React.ReactNode;
     /**
      * If set, hint area will not have a background color.
+     * @default false
      */
     noHintBg?: boolean;
     /**
@@ -54,5 +56,8 @@ interface IProps {
  * <View label="Email address">{email}</View>
  * ```
  */
-declare const View: ({ ghost, ...props }: IProps) => React.JSX.Element;
+declare const View: {
+    ({ ghost, ...props }: IProps): React.JSX.Element;
+    displayName: string;
+};
 export { View, IProps };

package/controls/View/View.js

@@ -31,16 +31,16 @@ import { ScrollingContent } from './ScrollingContent';
 import { EllipsizedContent } from './EllipsizedContent';
 import { Ghost } from '../Ghost';
 var ViewBase = function (props) {
-    return (React.createElement("div", { className: props.className },
+    return React.createElement("div", { className: props.className },
         props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: 0, top: 0, right: 0, bottom: 0, zIndex: 100 } }),
         React.createElement(Label, null, props.badge ? (React.createElement(BadgeWrapper, null,
             props.label,
             " ",
             React.createElement(Badge, null, props.badge))) : (props.label)),
         React.createElement(Content, null, props.height
-            ? React.createElement(ScrollingContent, { ghost: props.ghost, height: props.height, children: props.children })
-            : React.createElement(EllipsizedContent, { ghost: props.ghost, children: props.children })),
-        props.hint && React.createElement(HintContent, null, props.hint)));
+            ? React.createElement(ScrollingContent, { ghost: props.ghost, height: props.height }, props.children)
+            : React.createElement(EllipsizedContent, { ghost: props.ghost }, props.children)),
+        props.hint && React.createElement(HintContent, null, props.hint));
 };
 var Content = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 22px;\n  bottom: 22px;\n  left: 0;\n  right: 0;\n  padding-left: 12px;\n  padding-right: 12px;\n"], ["\n  position: absolute;\n  top: 22px;\n  bottom: 22px;\n  left: 0;\n  right: 0;\n  padding-left: 12px;\n  padding-right: 12px;\n"])));
 var HintContent = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 3px;\n  left: 12px;\n  right: 12px;\n\n  font: ", ";\n  color: ", ";\n  user-select: none;\n  // Hints don't wrap and are ellipsized:\n  white-space: nowrap;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n"], ["\n  position: absolute;\n  bottom: 3px;\n  left: 12px;\n  right: 12px;\n\n  font: ", ";\n  color: ", ";\n  user-select: none;\n  // Hints don't wrap and are ellipsized:\n  white-space: nowrap;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n"])), function (p) { return p.theme.font.bodySmall; }, function (p) { return p.theme.colors.neutral[80]; });
@@ -76,5 +76,6 @@ var View = function (_a) {
     var _b = _a.ghost, ghost = _b === void 0 ? false : _b, props = __rest(_a, ["ghost"]);
     return React.createElement(ViewStyled, __assign({ ghost: ghost }, props));
 };
+View.displayName = "View";
 export { View };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/formatters/DateTime/DateTime.d.ts

@@ -1,12 +1,7 @@
 import * as React from 'react';
 import { Locale } from "date-fns";
 type TType = 'longdate' | 'shortdate' | 'longdatetime' | 'shortdatetime' | 'longtime' | 'shorttime' | 'fuzzydistance' | 'strictdistance' | 'custom';
-interface IProps {
-    /**
-     * Preset format.
-     * @default longdate
-     */
-    type?: TType;
+interface IDateTimeProps {
     /**
      * Input date. This can either be a `Date` or a `string`.
      */
@@ -15,16 +10,27 @@ interface IProps {
      * Optional `Locale`. This is a locale from https://date-fns.org/v4.1.0/docs/I18n.
      */
     locale?: Locale;
+}
+interface IDateTimeFormatProps {
     /**
      * Optional custom format string.
      */
     format?: string;
+}
+interface IAnimateProps {
     /**
      * If set, distance formatting will be animated.
      * @default false
      */
     animated?: boolean;
 }
+interface IProps extends IDateTimeProps, IDateTimeFormatProps, IAnimateProps {
+    /**
+     * Preset format.
+     * @default longdate
+     */
+    type?: TType;
+}
 /**
  * `DateTime` formats a date or time to a string.
  *
@@ -41,5 +47,37 @@ interface IProps {
  * <DateTime type='longdate' value='1992-03-08' locale={es}/>
  * ```
  */
-declare const DateTime: ({ type, animated, ...props }: IProps) => React.JSX.Element;
-export { DateTime, IProps };
+declare const DateTime: {
+    ({ type, animated, ...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;
+    };
+};
+export { DateTime, IDateTimeProps, IDateTimeFormatProps, IAnimateProps, IProps };

package/formatters/DateTime/DateTime.js

@@ -21,14 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { ShortDate } from "./elements/ShortDate";
-import { LongDate } from "./elements/LongDate";
-import { DistanceDate } from "./elements/Distance";
-import { ShortDateTime } from "./elements/ShortDateTime";
-import { LongDateTime } from "./elements/LongDateTime";
-import { LongTime } from './elements/LongTime';
-import { ShortTime } from './elements/ShortTime';
-import { Custom } from "./elements/Custom";
+import { Custom, DistanceDate, LongDate, LongDateTime, LongTime, ShortDate, ShortDateTime, ShortTime } from './elements';
 /**
  * `DateTime` formats a date or time to a string.
  *
@@ -54,11 +47,22 @@ 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({ animated: animated }, props));
-        case 'strictdistance': return React.createElement(DistanceDate, __assign({ animated: animated, strict: true }, 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));
         default:
             return null;
     }
 };
+DateTime.displayName = "DateTime";
+// Bonus: users can either use the `type` prop, or import the individual 
+// components directly:
+DateTime.LongDate = LongDate;
+DateTime.ShortDate = ShortDate;
+DateTime.LongDateTime = LongDateTime;
+DateTime.ShortDateTime = ShortDateTime;
+DateTime.LongTime = LongTime;
+DateTime.ShortTime = ShortTime;
+DateTime.DistanceDate = DistanceDate;
+DateTime.Custom = Custom;
 export { DateTime };

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

@@ -1,18 +1,7 @@
 import * as React from 'react';
-import { Locale } from 'date-fns';
-interface IProps {
-    /**
-     * Date/time to format.
-     */
-    value: Date | string;
-    /**
-     * Format string.
-     */
-    format?: string;
-    /**
-     * Optional locale.
-     */
-    locale?: Locale;
-}
-declare const Custom: ({ format, ...props }: IProps) => React.JSX.Element;
-export { Custom, IProps };
+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

@@ -19,4 +19,5 @@ var Custom = function (_a) {
     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 };

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

@@ -0,0 +1,14 @@
+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 };

package/formatters/DateTime/elements/{Distance.js → DistanceDate.js}

@@ -42,4 +42,5 @@ var DistanceDate = function (_a) {
         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)));
 };
+DistanceDate.displayName = "DateTime.Distance";
 export { DistanceDate };

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

@@ -1,17 +1,27 @@
 import * as React from 'react';
-import { Locale } from 'date-fns';
-interface IProps {
-    /**
-     * Date to format.
-     */
-    value: Date | string;
-    /**
-     * Optional locale.
-     */
-    locale?: Locale;
-}
+import { IDateTimeProps } from '../DateTime';
+/**
+ * `LongDate` formats a date value into a long date string, such as
+ * "Mon, 1 January 2023". It also sets a full date description as the
+ * title attribute for better accessibility.
+ *
+ * The component accepts either a `Date` object or a date string as `value`.
+ * 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.
+ *
+ * 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} />
+ * ```
+ */
 declare const LongDate: {
-    (props: IProps): React.JSX.Element;
+    ({ value, locale }: IDateTimeProps): React.JSX.Element;
     displayName: string;
 };
-export { LongDate, IProps };
+export { LongDate };

package/formatters/DateTime/elements/LongDate.js

@@ -1,11 +1,37 @@
 import * as React from 'react';
 import { format } from 'date-fns';
 import { toDate } from './toDate';
-var LongDate = function (props) {
-    if (props.value == null)
+/**
+ * `LongDate` formats a date value into a long date string, such as
+ * "Mon, 1 January 2023". It also sets a full date description as the
+ * title attribute for better accessibility.
+ *
+ * The component accepts either a `Date` object or a date string as `value`.
+ * 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.
+ *
+ * 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} />
+ * ```
+ */
+var LongDate = function (_a) {
+    var value = _a.value, locale = _a.locale;
+    if (value == null)
         return null;
-    var date = toDate(props.value);
-    return (React.createElement("span", { title: format(date, 'eeee, d MMMM yyyy', props.locale ? { locale: props.locale } : {}) }, format(date, 'eee, d MMMM yyyy', props.locale ? { locale: props.locale } : {})));
+    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));
 };
-LongDate.displayName = "Date.Long";
+LongDate.displayName = "DateTime.LongDate";
 export { LongDate };

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

@@ -1,14 +1,30 @@
 import * as React from 'react';
-import { Locale } from 'date-fns';
-interface IProps {
-    /**
-     * Date/time to format.
-     */
-    value: Date | string;
-    /**
-     * Optional locale.
-     */
-    locale?: Locale;
-}
-declare const LongDateTime: (props: IProps) => React.JSX.Element;
-export { LongDateTime, IProps };
+import { IDateTimeProps } from '../DateTime';
+/**
+ * `LongDateTime` formats a date/time value into a long, detailed string including
+ * the full date and time with seconds, for example:
+ * "Mon, 1 January 2023 14:30:45".
+ *
+ * It also sets the full date/time as the `title` attribute for accessibility and UX,
+ * so users can see the full timestamp on hover.
+ *
+ * Accepts a `Date` object or a date string as `value`. If `value` is `null` or invalid,
+ * 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.
+ *
+ * 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} />
+ * ```
+ */
+declare const LongDateTime: {
+    (props: IDateTimeProps): React.JSX.Element;
+    displayName: string;
+};
+export { LongDateTime };

package/formatters/DateTime/elements/LongDateTime.js

@@ -1,10 +1,37 @@
 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
+ * the full date and time with seconds, for example:
+ * "Mon, 1 January 2023 14:30:45".
+ *
+ * It also sets the full date/time as the `title` attribute for accessibility and UX,
+ * so users can see the full timestamp on hover.
+ *
+ * Accepts a `Date` object or a date string as `value`. If `value` is `null` or invalid,
+ * 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.
+ *
+ * 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} />
+ * ```
+ */
 var LongDateTime = function (props) {
     if (props.value == null)
         return null;
     var date = toDate(props.value);
-    return (React.createElement("span", { title: format(date, 'eeee, d MMMM yyyy HH:mm:ss', props.locale ? { locale: props.locale } : {}) }, format(date, 'eee, d MMMM yyyy HH:mm:ss', props.locale ? { locale: props.locale } : {})));
+    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)));
 };
+LongDateTime.displayName = "DateTime.LongDateTime";
 export { LongDateTime };

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

@@ -1,14 +1,26 @@
 import * as React from 'react';
-import { Locale } from 'date-fns';
-interface IProps {
-    /**
-     * Time to format.
-     */
-    value: Date | string;
-    /**
-     * Optional locale.
-     */
-    locale?: Locale;
-}
-declare const LongTime: (props: IProps) => React.JSX.Element;
-export { LongTime, IProps };
+import { IDateTimeProps } from '../DateTime';
+/**
+ * `LongTime` formats a date/time value to show hours, minutes, and seconds,
+ * using 24-hour format (e.g., "14:30:45").
+ *
+ * Accepts a `Date` object or a date string as `value`. Returns `null` if the input
+ * is `null` or cannot be parsed as a valid date.
+ *
+ * Optionally, a `locale` prop can be passed, though it does not affect the
+ * time format here but is accepted for consistency.
+ *
+ * The formatted time is wrapped in a semantic `<time>` element with a
+ * machine-readable `dateTime` attribute.
+ *
+ * @example
+ * ```tsx
+ * <LongTime value={new Date()} />
+ * <LongTime value="2023-01-01T14:30:45" />
+ * ```
+ */
+declare const LongTime: {
+    (props: IDateTimeProps): React.JSX.Element;
+    displayName: string;
+};
+export { LongTime };

package/formatters/DateTime/elements/LongTime.js

@@ -1,10 +1,32 @@
 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,
+ * using 24-hour format (e.g., "14:30:45").
+ *
+ * Accepts a `Date` object or a date string as `value`. Returns `null` if the input
+ * is `null` or cannot be parsed as a valid date.
+ *
+ * Optionally, a `locale` prop can be passed, though it does not affect the
+ * time format here but is accepted for consistency.
+ *
+ * The formatted time is wrapped in a semantic `<time>` element with a
+ * machine-readable `dateTime` attribute.
+ *
+ * @example
+ * ```tsx
+ * <LongTime value={new Date()} />
+ * <LongTime value="2023-01-01T14:30:45" />
+ * ```
+ */
 var LongTime = function (props) {
     if (props.value == null)
         return null;
     var date = toDate(props.value);
-    return (React.createElement("span", null, format(date, 'HH:mm:ss')));
+    if (isNaN(date.getTime()))
+        return null;
+    return (React.createElement("time", { dateTime: date.toISOString() }, format(date, 'HH:mm:ss')));
 };
+LongTime.displayName = "DateTime.LongTime";
 export { LongTime };

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

@@ -1,14 +1,28 @@
 import * as React from 'react';
-import { Locale } from 'date-fns';
-interface IProps {
-    /**
-     * Date to format.
-     */
-    value: Date | string;
-    /**
-     * Optional locale.
-     */
-    locale?: Locale;
-}
-declare const ShortDate: (props: IProps) => React.JSX.Element;
-export { ShortDate, IProps };
+import { IDateTimeProps } from '../DateTime';
+/**
+ * `ShortDate` formats a date value into a short date string,
+ * using the format `dd-MM-yyyy` (e.g., `28-05-2025`).
+ *
+ * It shows a tooltip with the full date in a long, human-readable format,
+ * e.g., `"Wednesday, 28 May 2025"`.
+ *
+ * Accepts a `Date` object or a date string as `value`. Returns `null` if input
+ * is `null` or invalid.
+ *
+ * Optionally supports a `locale` prop that affects the date formatting and tooltip.
+ *
+ * The date is wrapped in a semantic `<time>` element with a machine-readable
+ * `dateTime` attribute.
+ *
+ * @example
+ * ```tsx
+ * <ShortDate value={new Date()} />
+ * <ShortDate value="2025-05-28" locale={someLocale} />
+ * ```
+ */
+declare const ShortDate: {
+    (props: IDateTimeProps): React.JSX.Element;
+    displayName: string;
+};
+export { ShortDate };