@reykjavik/hanna-react 0.10.169 → 0.10.171

package/Alert.d.ts

@@ -11,7 +11,7 @@ type AlertType = 'info' | 'success' | 'warning' | 'error' | 'critical';
 export declare const alertTypes: Record<string, 1>;
 export type AlertProps = {
     type: AlertType;
-    /** Defaults to `true` if an `onClose` handler or a `closeUrl` is passaed */
+    /** Defaults to `true` if an `onClose` or `closeUrl` handlers are passaed */
     closable?: boolean;
     /** The alert content */
     children?: ReactNode;
@@ -25,7 +25,7 @@ export type AlertProps = {
     instantShow?: boolean;
 } & SSRSupportProps & EitherObj<{
     /**
-     * Seconds until the Alert auto-closes.
+     * Number of **seconds** until the Alert auto-closes.
      * Mosueover and keyboard focus resets the timer.  \
      * NOTE: An `onClosed` handler is required when using this option.
      */

package/Alert.js

@@ -10,25 +10,42 @@ const env_js_1 = require("./utils/env.js");
 const utils_js_1 = require("./utils.js");
 // FIXME: Eventually import from @reykjavik/hanna-css
 const AlertCloseTransitionDuration = 400;
+/** How much to extend the remaining time when the auto-closing is interrupted (frozen) by mouseover or keyboard focus */
+const FREEZE_EXTENSION_MS = 750;
 const useAutoClosing = (autoClose, props) => {
-    const [temp, setTemp] = (0, react_1.useState)(0);
+    const startTime = (0, react_1.useRef)(Date.now());
+    const remainingMs = (0, react_1.useRef)(autoClose);
+    const [frost, setFrost] = (0, react_1.useState)(0);
     if (!autoClose) {
-        return { autoClosing: false };
+        return { autoCloseIn: undefined };
     }
     const thaw = (e) => {
-        setTemp((temp) => temp + 1);
+        // When it's about to thaw, make set a new start time to base future
+        // "remaining time" calculations on.
+        if (frost === 1) {
+            startTime.current = Date.now();
+        }
+        setFrost((frost) => frost - 1);
         const handler = props[e.type.startsWith('blur') ? 'onBlur' : 'onMouseLeave'];
-        // @ts-expect-error  (Proper fix ends up as too much code for this extreme edge case)
         handler && handler(e);
     };
     const freeze = (e) => {
-        setTemp((temp) => temp - 1);
+        // When there's no frost and it's about to freeze, make note
+        // of the remaining time. Furhter freezes should not update this.
+        if (!frost) {
+            console.log(remainingMs.current);
+            // Calculate the currently remaining time based on the last start time.
+            const newRemainingMs = remainingMs.current - (Date.now() - startTime.current);
+            // Extend the remainint time a bit to give usees some leeway,
+            // but never extend it beyond the original autoClose value.
+            remainingMs.current = Math.min(newRemainingMs + FREEZE_EXTENSION_MS, autoClose);
+        }
+        setFrost((frost) => frost + 1);
         const handler = props[e.type.startsWith('focus') ? 'onFocus' : 'onMouseEnter'];
-        // @ts-expect-error  (Resolving ends up as too much code for this extreme edge case)
         handler && handler(e);
     };
     return {
-        autoClosing: temp === 0,
+        autoCloseIn: frost === 0 ? remainingMs.current : undefined,
         autoClosingProps: Object.assign({ onMouseEnter: freeze, onMouseLeave: thaw, onFocus: freeze, onBlur: thaw }, (env_js_1.isPreact && {
             onfocusin: (e) => e.currentTarget !== e.target && freeze(e),
             onfocusout: (e) => e.currentTarget !== e.target && thaw(e),
@@ -51,7 +68,7 @@ exports.alertTypes = {
 const Alert = (props) => {
     var _a;
     const { type, childrenHTML, children, onClose, closeUrl, ssr, onClosed, instantShow, wrapperProps, } = props;
-    const autoClose = Math.max(props.autoClose || 0, 0);
+    const autoClose = Math.max(props.autoClose || 0, 0) * 1000;
     const closable = (_a = props.closable) !== null && _a !== void 0 ? _a : !!(onClose || (onClosed && !autoClose) || closeUrl != null);
     const closing = (0, react_1.useRef)();
     const isBrowser = (0, utils_js_1.useIsBrowserSide)(ssr);
@@ -76,13 +93,13 @@ const Alert = (props) => {
             }, AlertCloseTransitionDuration);
         }
     }, [onClose, onClosed]);
-    const { autoClosing, autoClosingProps } = useAutoClosing(autoClose, props);
+    const { autoCloseIn, autoClosingProps } = useAutoClosing(autoClose, props);
     (0, react_1.useEffect)(() => {
-        if (autoClosing) {
+        if (autoCloseIn) {
             let autoCloseTimeout;
             autoCloseTimeout = setTimeout(() => {
                 closeAlert();
-            }, autoClose * 1000);
+            }, autoCloseIn);
             return () => {
                 if (autoCloseTimeout) {
                     clearTimeout(autoCloseTimeout);
@@ -94,7 +111,7 @@ const Alert = (props) => {
                 }
             };
         }
-    }, [closeAlert, autoClosing, autoClose]);
+    }, [closeAlert, autoCloseIn]);
     return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('Alert', [!!exports.alertTypes[type] && type, closable && 'closable'], (wrapperProps || {}).className), role: "alert", hidden: !open || undefined }, autoClosingProps),
         childrenHTML ? (react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: childrenHTML } })) : (children),
         ' ',

package/CHANGELOG.md

@@ -4,6 +4,24 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.171
+
+_2026-04-02_
+
+- feat: Add component `StatusTag`
+- feat: Add component `Timeline`
+- `utils`:
+  - feat: Deprecate `domid` in favor of `dumbId` from `@reykjavik/hanna-utils`
+  - fix: Update className selector for `MobileMenuToggler` button in
+    `useHannaUIState()`
+
+## 0.10.170
+
+_2026-03-10_
+
+- `Alert`:
+  - fix: On freeze only extend auto-closing alerts' remaining time by a bit
+
 ## 0.10.169
 
 _2026-02-24_

package/Datepicker.d.ts

@@ -12,7 +12,7 @@ export type DatepickerProps = {
      * the `<input/>` element is still `type="text"` and it's `.value` is
      * the human-readable (parsed) date `string`.
      *
-     * Use this incombination with the `isoMode` prop to submit ISO-8601
+     * Use this in combination with the `isoMode` prop to submit ISO-8601
      * formatted input values
      */
     defaultValue?: Date;

package/MobileMenuToggler/_useMobileMenuToggling.js

@@ -10,7 +10,7 @@ const htmlClass = (className, add) => {
 const noop = () => undefined;
 const HamburgerMedias = { phone: 1, phablet: 1, tablet: 1 };
 const useMobileMenuToggling = (opts) => {
-    const { doInitialize, togglerElm = '.MainMenuToggler' } = typeof opts === 'boolean'
+    const { doInitialize, togglerElm = '.MainMenuToggler, .MobileMenuToggler' } = typeof opts === 'boolean'
         ? ({ doInitialize: opts })
         : !opts
             ? ({ doInitialize: true })

package/StatusTag.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { WrapperElmProps } from './utils.js';
+declare const colors: {
+    readonly none: undefined;
+    readonly blue: "color--blue";
+    readonly green: "color--green";
+    readonly yellow: "color--yellow";
+    readonly red: "color--red";
+};
+export type StatusTagColor = keyof typeof colors;
+export type StatusTagProps = {
+    /** Label takes preference over `children` */
+    label?: ReactNode;
+    /** Default: 'none' (grey) */
+    color?: StatusTagColor;
+    /** Hides/removes the colored indicator light ball/bulp. */
+    light?: 'off';
+    /** Make the status tag larger. Defaults to false. */
+    large?: boolean;
+    children?: ReactNode;
+} & WrapperElmProps<'span', 'children'>;
+export declare const StatusTag: (props: StatusTagProps) => JSX.Element;
+export {};

package/StatusTag.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusTag = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
+const colors = {
+    none: undefined,
+    blue: 'color--blue',
+    green: 'color--green',
+    yellow: 'color--yellow',
+    red: 'color--red',
+};
+const StatusTag = (props) => {
+    const { children, label, color, light, large, wrapperProps } = props;
+    return (react_1.default.createElement("span", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('StatusTag', [colors[color || 'none'], large && 'large', light === 'off' && 'light--off'], (wrapperProps || {}).className) }),
+        react_1.default.createElement("span", { className: "StatusTag__label" }, label || children)));
+};
+exports.StatusTag = StatusTag;

package/Timeline.d.ts

@@ -0,0 +1,47 @@
+import { TagPillColor } from '@reykjavik/hanna-react/TagPill';
+import { HannaLang } from '@reykjavik/hanna-utils/i18n';
+export type TimeLineItem = {
+    /** The main timeline item value */
+    title: string;
+    /** Flexible categorization field. Could for example contain a person/user's name  */
+    category?: string;
+    /** More details about the  */
+    description?: string;
+    /**
+     * The date/time of the timeline event.
+     *
+     * `Date` and `number` (timestamp) values are auto formatted according to the
+     * currently active `HannaLang`. If you need a non-default format pass it as a
+     * preformatted string.
+     */
+    date?: Date | number | string;
+    /** Displays a status tag next to the timeline item. */
+    status?: {
+        label: string;
+        color?: TagPillColor;
+    };
+    /**
+     * If no item is marked current, then the first item in the array is impilicitly the current one.
+     *
+     * If multiple items are marked current, then the first one is the current one.
+     */
+    current?: boolean;
+} | 'loading';
+export type TimelineProps = {
+    /** Optional title to show above the timeline. */
+    title?: string;
+    /** The items to display in the timeline. */
+    items: Array<TimeLineItem>;
+    /**
+     * If true, Item `Dates` will be formatted year, month day only, without the
+     * time of day (hours and minutes) visible.
+     *
+     * Default: `false`
+     */
+    hideTime?: boolean;
+    /** If true, the timeline will be sorted with the oldest item first. By default, the newest item is first. */
+    oldestFirst?: boolean;
+    /** Defaults to the current global `DEFAULT_LANG` */
+    lang?: HannaLang;
+};
+export declare const Timeline: (props: TimelineProps) => JSX.Element;

package/Timeline.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Timeline = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const Skeleton_1 = require("@reykjavik/hanna-react/Skeleton");
+const TagPill_1 = require("@reykjavik/hanna-react/TagPill");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
+const i18n_1 = require("@reykjavik/hanna-utils/i18n");
+const dateFormatters = {};
+const dateTimeFormatters = {};
+const getDateFormatter = (lang, hideTime) => hideTime
+    ? dateFormatters[lang] ||
+        (dateFormatters[lang] = new Intl.DateTimeFormat(lang, {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+        }))
+    : dateTimeFormatters[lang] ||
+        (dateTimeFormatters[lang] = new Intl.DateTimeFormat(lang, {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+        }));
+const Timeline = (props) => {
+    const { title, items, oldestFirst, lang = i18n_1.DEFAULT_LANG, hideTime } = props;
+    const dateFmt = getDateFormatter(lang, hideTime);
+    const currentIdx = Math.max(items.findIndex((item) => item !== 'loading' && !!item.current), 0);
+    return (react_1.default.createElement("div", { className: (0, hanna_utils_1.modifiedClass)('Timeline', [oldestFirst && 'oldestFirst']) },
+        title && react_1.default.createElement("h3", { className: "Timeline__title" }, title),
+        react_1.default.createElement("ul", { className: "Timeline__items" }, items.map((item, i) => {
+            if (item === 'loading') {
+                return (react_1.default.createElement("li", { key: i, className: "Timeline__item Timeline__item--loading" },
+                    react_1.default.createElement(Skeleton_1.Skeleton, { height: 1, wrapperProps: { className: 'Skeleton__circle' } }),
+                    react_1.default.createElement(Skeleton_1.Skeleton, { items: 1, height: 3, text: true })));
+            }
+            const { title, category: author, description, date, status } = item;
+            return (react_1.default.createElement("li", { key: i, className: (0, hanna_utils_1.modifiedClass)('Timeline__item', [
+                    i < currentIdx && 'future',
+                    i > currentIdx && 'past',
+                ]), "aria-current": currentIdx === i ? 'step' : undefined },
+                react_1.default.createElement("strong", { className: "Timeline__item__title" }, title),
+                status && react_1.default.createElement(TagPill_1.TagPill, { color: status.color }, status.label),
+                author && react_1.default.createElement("div", { className: "Timeline__item__category" }, author),
+                description && (react_1.default.createElement("div", { className: "Timeline__item__description" }, description)),
+                date && (react_1.default.createElement("div", { className: "Timeline__item__date" }, typeof date === 'string' ? date : dateFmt.format(date)))));
+        }))));
+};
+exports.Timeline = Timeline;

package/esm/Alert.d.ts

@@ -11,7 +11,7 @@ type AlertType = 'info' | 'success' | 'warning' | 'error' | 'critical';
 export declare const alertTypes: Record<string, 1>;
 export type AlertProps = {
     type: AlertType;
-    /** Defaults to `true` if an `onClose` handler or a `closeUrl` is passaed */
+    /** Defaults to `true` if an `onClose` or `closeUrl` handlers are passaed */
     closable?: boolean;
     /** The alert content */
     children?: ReactNode;
@@ -25,7 +25,7 @@ export type AlertProps = {
     instantShow?: boolean;
 } & SSRSupportProps & EitherObj<{
     /**
-     * Seconds until the Alert auto-closes.
+     * Number of **seconds** until the Alert auto-closes.
      * Mosueover and keyboard focus resets the timer.  \
      * NOTE: An `onClosed` handler is required when using this option.
      */

package/esm/Alert.js

@@ -6,25 +6,42 @@ import { isPreact } from './utils/env.js';
 import { useIsBrowserSide, } from './utils.js';
 // FIXME: Eventually import from @reykjavik/hanna-css
 const AlertCloseTransitionDuration = 400;
+/** How much to extend the remaining time when the auto-closing is interrupted (frozen) by mouseover or keyboard focus */
+const FREEZE_EXTENSION_MS = 750;
 const useAutoClosing = (autoClose, props) => {
-    const [temp, setTemp] = useState(0);
+    const startTime = useRef(Date.now());
+    const remainingMs = useRef(autoClose);
+    const [frost, setFrost] = useState(0);
     if (!autoClose) {
-        return { autoClosing: false };
+        return { autoCloseIn: undefined };
     }
     const thaw = (e) => {
-        setTemp((temp) => temp + 1);
+        // When it's about to thaw, make set a new start time to base future
+        // "remaining time" calculations on.
+        if (frost === 1) {
+            startTime.current = Date.now();
+        }
+        setFrost((frost) => frost - 1);
         const handler = props[e.type.startsWith('blur') ? 'onBlur' : 'onMouseLeave'];
-        // @ts-expect-error  (Proper fix ends up as too much code for this extreme edge case)
         handler && handler(e);
     };
     const freeze = (e) => {
-        setTemp((temp) => temp - 1);
+        // When there's no frost and it's about to freeze, make note
+        // of the remaining time. Furhter freezes should not update this.
+        if (!frost) {
+            console.log(remainingMs.current);
+            // Calculate the currently remaining time based on the last start time.
+            const newRemainingMs = remainingMs.current - (Date.now() - startTime.current);
+            // Extend the remainint time a bit to give usees some leeway,
+            // but never extend it beyond the original autoClose value.
+            remainingMs.current = Math.min(newRemainingMs + FREEZE_EXTENSION_MS, autoClose);
+        }
+        setFrost((frost) => frost + 1);
         const handler = props[e.type.startsWith('focus') ? 'onFocus' : 'onMouseEnter'];
-        // @ts-expect-error  (Resolving ends up as too much code for this extreme edge case)
         handler && handler(e);
     };
     return {
-        autoClosing: temp === 0,
+        autoCloseIn: frost === 0 ? remainingMs.current : undefined,
         autoClosingProps: Object.assign({ onMouseEnter: freeze, onMouseLeave: thaw, onFocus: freeze, onBlur: thaw }, (isPreact && {
             onfocusin: (e) => e.currentTarget !== e.target && freeze(e),
             onfocusout: (e) => e.currentTarget !== e.target && thaw(e),
@@ -47,7 +64,7 @@ export const alertTypes = {
 export const Alert = (props) => {
     var _a;
     const { type, childrenHTML, children, onClose, closeUrl, ssr, onClosed, instantShow, wrapperProps, } = props;
-    const autoClose = Math.max(props.autoClose || 0, 0);
+    const autoClose = Math.max(props.autoClose || 0, 0) * 1000;
     const closable = (_a = props.closable) !== null && _a !== void 0 ? _a : !!(onClose || (onClosed && !autoClose) || closeUrl != null);
     const closing = useRef();
     const isBrowser = useIsBrowserSide(ssr);
@@ -72,13 +89,13 @@ export const Alert = (props) => {
             }, AlertCloseTransitionDuration);
         }
     }, [onClose, onClosed]);
-    const { autoClosing, autoClosingProps } = useAutoClosing(autoClose, props);
+    const { autoCloseIn, autoClosingProps } = useAutoClosing(autoClose, props);
     useEffect(() => {
-        if (autoClosing) {
+        if (autoCloseIn) {
             let autoCloseTimeout;
             autoCloseTimeout = setTimeout(() => {
                 closeAlert();
-            }, autoClose * 1000);
+            }, autoCloseIn);
             return () => {
                 if (autoCloseTimeout) {
                     clearTimeout(autoCloseTimeout);
@@ -90,7 +107,7 @@ export const Alert = (props) => {
                 }
             };
         }
-    }, [closeAlert, autoClosing, autoClose]);
+    }, [closeAlert, autoCloseIn]);
     return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('Alert', [!!alertTypes[type] && type, closable && 'closable'], (wrapperProps || {}).className), role: "alert", hidden: !open || undefined }, autoClosingProps),
         childrenHTML ? (React.createElement("div", { dangerouslySetInnerHTML: { __html: childrenHTML } })) : (children),
         ' ',

package/esm/Datepicker.d.ts

@@ -12,7 +12,7 @@ export type DatepickerProps = {
      * the `<input/>` element is still `type="text"` and it's `.value` is
      * the human-readable (parsed) date `string`.
      *
-     * Use this incombination with the `isoMode` prop to submit ISO-8601
+     * Use this in combination with the `isoMode` prop to submit ISO-8601
      * formatted input values
      */
     defaultValue?: Date;

package/esm/MobileMenuToggler/_useMobileMenuToggling.js

@@ -7,7 +7,7 @@ const htmlClass = (className, add) => {
 const noop = () => undefined;
 const HamburgerMedias = { phone: 1, phablet: 1, tablet: 1 };
 export const useMobileMenuToggling = (opts) => {
-    const { doInitialize, togglerElm = '.MainMenuToggler' } = typeof opts === 'boolean'
+    const { doInitialize, togglerElm = '.MainMenuToggler, .MobileMenuToggler' } = typeof opts === 'boolean'
         ? ({ doInitialize: opts })
         : !opts
             ? ({ doInitialize: true })

package/esm/StatusTag.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { WrapperElmProps } from './utils.js';
+declare const colors: {
+    readonly none: undefined;
+    readonly blue: "color--blue";
+    readonly green: "color--green";
+    readonly yellow: "color--yellow";
+    readonly red: "color--red";
+};
+export type StatusTagColor = keyof typeof colors;
+export type StatusTagProps = {
+    /** Label takes preference over `children` */
+    label?: ReactNode;
+    /** Default: 'none' (grey) */
+    color?: StatusTagColor;
+    /** Hides/removes the colored indicator light ball/bulp. */
+    light?: 'off';
+    /** Make the status tag larger. Defaults to false. */
+    large?: boolean;
+    children?: ReactNode;
+} & WrapperElmProps<'span', 'children'>;
+export declare const StatusTag: (props: StatusTagProps) => JSX.Element;
+export {};

package/esm/StatusTag.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { modifiedClass } from '@reykjavik/hanna-utils';
+const colors = {
+    none: undefined,
+    blue: 'color--blue',
+    green: 'color--green',
+    yellow: 'color--yellow',
+    red: 'color--red',
+};
+export const StatusTag = (props) => {
+    const { children, label, color, light, large, wrapperProps } = props;
+    return (React.createElement("span", Object.assign({}, wrapperProps, { className: modifiedClass('StatusTag', [colors[color || 'none'], large && 'large', light === 'off' && 'light--off'], (wrapperProps || {}).className) }),
+        React.createElement("span", { className: "StatusTag__label" }, label || children)));
+};

package/esm/Timeline.d.ts

@@ -0,0 +1,47 @@
+import { TagPillColor } from '@reykjavik/hanna-react/TagPill';
+import { HannaLang } from '@reykjavik/hanna-utils/i18n';
+export type TimeLineItem = {
+    /** The main timeline item value */
+    title: string;
+    /** Flexible categorization field. Could for example contain a person/user's name  */
+    category?: string;
+    /** More details about the  */
+    description?: string;
+    /**
+     * The date/time of the timeline event.
+     *
+     * `Date` and `number` (timestamp) values are auto formatted according to the
+     * currently active `HannaLang`. If you need a non-default format pass it as a
+     * preformatted string.
+     */
+    date?: Date | number | string;
+    /** Displays a status tag next to the timeline item. */
+    status?: {
+        label: string;
+        color?: TagPillColor;
+    };
+    /**
+     * If no item is marked current, then the first item in the array is impilicitly the current one.
+     *
+     * If multiple items are marked current, then the first one is the current one.
+     */
+    current?: boolean;
+} | 'loading';
+export type TimelineProps = {
+    /** Optional title to show above the timeline. */
+    title?: string;
+    /** The items to display in the timeline. */
+    items: Array<TimeLineItem>;
+    /**
+     * If true, Item `Dates` will be formatted year, month day only, without the
+     * time of day (hours and minutes) visible.
+     *
+     * Default: `false`
+     */
+    hideTime?: boolean;
+    /** If true, the timeline will be sorted with the oldest item first. By default, the newest item is first. */
+    oldestFirst?: boolean;
+    /** Defaults to the current global `DEFAULT_LANG` */
+    lang?: HannaLang;
+};
+export declare const Timeline: (props: TimelineProps) => JSX.Element;

package/esm/Timeline.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Skeleton } from '@reykjavik/hanna-react/Skeleton';
+import { TagPill } from '@reykjavik/hanna-react/TagPill';
+import { modifiedClass } from '@reykjavik/hanna-utils';
+import { DEFAULT_LANG } from '@reykjavik/hanna-utils/i18n';
+const dateFormatters = {};
+const dateTimeFormatters = {};
+const getDateFormatter = (lang, hideTime) => hideTime
+    ? dateFormatters[lang] ||
+        (dateFormatters[lang] = new Intl.DateTimeFormat(lang, {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+        }))
+    : dateTimeFormatters[lang] ||
+        (dateTimeFormatters[lang] = new Intl.DateTimeFormat(lang, {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+        }));
+export const Timeline = (props) => {
+    const { title, items, oldestFirst, lang = DEFAULT_LANG, hideTime } = props;
+    const dateFmt = getDateFormatter(lang, hideTime);
+    const currentIdx = Math.max(items.findIndex((item) => item !== 'loading' && !!item.current), 0);
+    return (React.createElement("div", { className: modifiedClass('Timeline', [oldestFirst && 'oldestFirst']) },
+        title && React.createElement("h3", { className: "Timeline__title" }, title),
+        React.createElement("ul", { className: "Timeline__items" }, items.map((item, i) => {
+            if (item === 'loading') {
+                return (React.createElement("li", { key: i, className: "Timeline__item Timeline__item--loading" },
+                    React.createElement(Skeleton, { height: 1, wrapperProps: { className: 'Skeleton__circle' } }),
+                    React.createElement(Skeleton, { items: 1, height: 3, text: true })));
+            }
+            const { title, category: author, description, date, status } = item;
+            return (React.createElement("li", { key: i, className: modifiedClass('Timeline__item', [
+                    i < currentIdx && 'future',
+                    i > currentIdx && 'past',
+                ]), "aria-current": currentIdx === i ? 'step' : undefined },
+                React.createElement("strong", { className: "Timeline__item__title" }, title),
+                status && React.createElement(TagPill, { color: status.color }, status.label),
+                author && React.createElement("div", { className: "Timeline__item__category" }, author),
+                description && (React.createElement("div", { className: "Timeline__item__description" }, description)),
+                date && (React.createElement("div", { className: "Timeline__item__date" }, typeof date === 'string' ? date : dateFmt.format(date)))));
+        }))));
+};

package/esm/index.d.ts

@@ -8,12 +8,14 @@
 /// <reference path="./VerticalTabsTOC.d.tsx" />
 /// <reference path="./VSpacer.d.tsx" />
 /// <reference path="./Tooltip.d.tsx" />
+/// <reference path="./Timeline.d.tsx" />
 /// <reference path="./TextInput.d.tsx" />
 /// <reference path="./TextButton.d.tsx" />
 /// <reference path="./TextBlock.d.tsx" />
 /// <reference path="./TagPill.d.tsx" />
 /// <reference path="./Tabs.d.tsx" />
 /// <reference path="./SubHeading.d.tsx" />
+/// <reference path="./StatusTag.d.tsx" />
 /// <reference path="./Skeleton.d.tsx" />
 /// <reference path="./SiteSearchInput.d.tsx" />
 /// <reference path="./SiteSearchCurtain.d.tsx" />

package/esm/utils/useDomid.d.ts

@@ -1,7 +1,3 @@
-/**
- * Returns a short locally-unique ID string.
- */
-export declare const domid: () => string;
 /**
  * Returns a stable, unique ID string.
  *
@@ -14,3 +10,5 @@ export declare const domid: () => string;
  * mode and there's nothing we can do about it, except to ignore them.)
  */
 export declare const useDomid: (staticId?: string) => string;
+/** @deprecated Use `import { dumbId } from '@reykjavik/hanna-utils'` instead  (Will be removed in v0.3) */
+export declare const domid: () => string;

package/esm/utils/useDomid.js

@@ -1,12 +1,7 @@
 import React from 'react';
+import { dumbId } from '@reykjavik/hanna-utils';
 // @ts-expect-error  (transparently feature-detect useId hook, which is introduced in React@18)
 const useId = React.useId;
-const domid_prefix = `_${ /*@__PURE__*/`${Date.now()}-`.slice(6)}`;
-let domid_incr = 0;
-/**
- * Returns a short locally-unique ID string.
- */
-export const domid = () => domid_prefix + domid_incr++;
 /**
  * Returns a stable, unique ID string.
  *
@@ -26,7 +21,9 @@ export const useDomid = useId
     : (staticId) => {
         const idRef = React.useRef();
         if (!idRef.current) {
-            idRef.current = staticId || domid();
+            idRef.current = staticId || dumbId();
         }
         return idRef.current;
     };
+/** @deprecated Use `import { dumbId } from '@reykjavik/hanna-utils'` instead  (Will be removed in v0.3) */
+export const domid = dumbId;

package/index.d.ts

@@ -8,12 +8,14 @@
 /// <reference path="./VerticalTabsTOC.d.tsx" />
 /// <reference path="./VSpacer.d.tsx" />
 /// <reference path="./Tooltip.d.tsx" />
+/// <reference path="./Timeline.d.tsx" />
 /// <reference path="./TextInput.d.tsx" />
 /// <reference path="./TextButton.d.tsx" />
 /// <reference path="./TextBlock.d.tsx" />
 /// <reference path="./TagPill.d.tsx" />
 /// <reference path="./Tabs.d.tsx" />
 /// <reference path="./SubHeading.d.tsx" />
+/// <reference path="./StatusTag.d.tsx" />
 /// <reference path="./Skeleton.d.tsx" />
 /// <reference path="./SiteSearchInput.d.tsx" />
 /// <reference path="./SiteSearchCurtain.d.tsx" />

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.169",
+	"version": "0.10.171",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",
@@ -17,8 +17,8 @@
 		"@floating-ui/react": "^0.19.2",
 		"@hugsmidjan/qj": "^4.22.1",
 		"@hugsmidjan/react": "^0.4.32",
-		"@reykjavik/hanna-css": "^0.4.26",
-		"@reykjavik/hanna-utils": "^0.2.21",
+		"@reykjavik/hanna-css": "^0.4.27",
+		"@reykjavik/hanna-utils": "^0.2.22",
 		"@types/react-autosuggest": "^10.1.0",
 		"@types/react-datepicker": "^4.8.0",
 		"@types/react-transition-group": "^4.4.0",
@@ -85,6 +85,10 @@
 			"import": "./esm/Tooltip.js",
 			"require": "./Tooltip.js"
 		},
+		"./Timeline": {
+			"import": "./esm/Timeline.js",
+			"require": "./Timeline.js"
+		},
 		"./TextInput": {
 			"import": "./esm/TextInput.js",
 			"require": "./TextInput.js"
@@ -109,6 +113,10 @@
 			"import": "./esm/SubHeading.js",
 			"require": "./SubHeading.js"
 		},
+		"./StatusTag": {
+			"import": "./esm/StatusTag.js",
+			"require": "./StatusTag.js"
+		},
 		"./Skeleton": {
 			"import": "./esm/Skeleton.js",
 			"require": "./Skeleton.js"

package/utils/useDomid.d.ts

@@ -1,7 +1,3 @@
-/**
- * Returns a short locally-unique ID string.
- */
-export declare const domid: () => string;
 /**
  * Returns a stable, unique ID string.
  *
@@ -14,3 +10,5 @@ export declare const domid: () => string;
  * mode and there's nothing we can do about it, except to ignore them.)
  */
 export declare const useDomid: (staticId?: string) => string;
+/** @deprecated Use `import { dumbId } from '@reykjavik/hanna-utils'` instead  (Will be removed in v0.3) */
+export declare const domid: () => string;

package/utils/useDomid.js

@@ -1,17 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDomid = exports.domid = void 0;
+exports.domid = exports.useDomid = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 // @ts-expect-error  (transparently feature-detect useId hook, which is introduced in React@18)
 const useId = react_1.default.useId;
-const domid_prefix = `_${ /*@__PURE__*/`${Date.now()}-`.slice(6)}`;
-let domid_incr = 0;
-/**
- * Returns a short locally-unique ID string.
- */
-const domid = () => domid_prefix + domid_incr++;
-exports.domid = domid;
 /**
  * Returns a stable, unique ID string.
  *
@@ -31,7 +25,9 @@ exports.useDomid = useId
     : (staticId) => {
         const idRef = react_1.default.useRef();
         if (!idRef.current) {
-            idRef.current = staticId || (0, exports.domid)();
+            idRef.current = staticId || (0, hanna_utils_1.dumbId)();
         }
         return idRef.current;
     };
+/** @deprecated Use `import { dumbId } from '@reykjavik/hanna-utils'` instead  (Will be removed in v0.3) */
+exports.domid = hanna_utils_1.dumbId;