@hashsome/ui 0.8.0 → 0.9.0

package/dist/layout/spinner.d.ts

@@ -1,3 +1,4 @@
+import { type PaletteKey } from 'e-prim';
 /** A turning ring: something is in progress and will not say how long it takes. Kept turning when the
  * app is set to reduced motion (`data-keep-motion`): a spinner that stopped would look stuck, and one
  * small turning icon costs next to nothing. */
@@ -8,6 +9,8 @@ export declare function Spinner({ size, label }: {
 /** A ring that turns around the edge of a round button (give the button `position: relative`): the
  * button is waiting for an answer and will not take another press. Kept turning under reduced motion
  * for the same reason `Spinner` is. */
-export declare function SpinnerRing({ label }: {
+export declare function SpinnerRing({ label, color, }: {
     label?: string;
+    /** A palette color: the theme's accent by default. Pass `accentText` for a button that is itself accent-colored (or filled with a color of the app's own). */
+    color?: PaletteKey;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/layout/spinner.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { keyframes } from '@emotion/react';
+import { Box } from 'e-prim';
 import { Icon } from '../icon.js';
 const turn = keyframes({ to: { transform: 'rotate(360deg)' } });
 /** A turning ring: something is in progress and will not say how long it takes. Kept turning when the
@@ -17,12 +18,6 @@ export function Spinner({ size = 16, label = 'Loading' }) {
 /** A ring that turns around the edge of a round button (give the button `position: relative`): the
  * button is waiting for an answer and will not take another press. Kept turning under reduced motion
  * for the same reason `Spinner` is. */
-export function SpinnerRing({ label = 'Loading' }) {
-    return (_jsx("span", { role: "status", "aria-label": label, "data-keep-motion": true, css: ({ palette }) => ({
-            position: 'absolute',
-            inset: 0,
-            pointerEvents: 'none',
-            color: palette.accent,
-            animation: `${turn} 0.9s linear infinite`,
-        }), children: _jsx("svg", { viewBox: "0 0 100 100", width: "100%", height: "100%", "aria-hidden": "true", children: _jsx("circle", { cx: "50", cy: "50", r: "47", fill: "none", stroke: "currentColor", strokeWidth: "5", strokeLinecap: "round", strokeDasharray: "75 221" }) }) }));
+export function SpinnerRing({ label = 'Loading', color = 'accent', }) {
+    return (_jsx(Box, { as: "span", role: "status", "aria-label": label, "data-keep-motion": true, position: "absolute", color: color, css: { inset: 0, pointerEvents: 'none', animation: `${turn} 0.9s linear infinite` }, children: _jsx("svg", { viewBox: "0 0 100 100", width: "100%", height: "100%", "aria-hidden": "true", children: _jsx("circle", { cx: "50", cy: "50", r: "47", fill: "none", stroke: "currentColor", strokeWidth: "5", strokeLinecap: "round", strokeDasharray: "75 221" }) }) }));
 }

package/dist/layout/task-tile.d.ts

@@ -0,0 +1,28 @@
+import type { IconName } from '../icon-data.ts';
+import type { EntityStatus } from '../status.ts';
+/** Where a recurring task stands: not due for a while, due before long, or past its date. */
+export type TaskState = 'ok' | 'dueSoon' | 'overdue';
+export interface TaskTileProps {
+    /** What is to be done, e.g. `Septic additive`. */
+    label: string;
+    /** Icon id, e.g. `lu:wrench`. */
+    icon?: IconName;
+    /** Where the task stands. Whoever has the task decides it: how soon is "soon" is different for a weekly task and a yearly one. */
+    state: TaskState;
+    /** When it is next due. Shown as "Due in 2 days" or "Overdue by 3 days". */
+    dueAt?: Date | undefined;
+    /** When it was last done, shown in the question that marks it done again. */
+    lastDoneAt?: Date | undefined;
+    /** Status of the thing behind it, as for `Tile`: anything but `ready` shows why instead and disables the tile. */
+    status?: EntityStatus;
+    /** The person confirmed it is done, on this day (today unless they chose another, in case it was forgotten at the time). Rejecting shows the error in the dialog and leaves it open. */
+    onComplete: (doneOn: Date) => void | Promise<void>;
+}
+/** The line under a task's name. */
+export declare function taskLine(state: TaskState, dueAt: Date | undefined, now: Date): string;
+/**
+ * A recurring task as a tile: its name, where it stands (up to date, due soon, overdue) and when it is due.
+ * Tapping it asks whether it is done, with the day it was done on (today, or an earlier one if it was
+ * forgotten), and only a confirmation calls `onComplete`, so a stray tap does nothing.
+ */
+export declare function TaskTile({ label, icon, state, dueAt, lastDoneAt, status, onComplete, }: TaskTileProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/layout/task-tile.js

@@ -0,0 +1,78 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { Flex, Typography } from 'e-prim';
+import { useEffect, useState } from 'react';
+import { ConfirmDialog } from './confirm-dialog.js';
+import { IconButton, Tile } from './tile.js';
+const DAY_MS = 86_400_000;
+const startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
+/** How many calendar days from `now` to `then`: negative when `then` has passed. */
+const daysTo = (then, now) => Math.round((startOfDay(then).getTime() - startOfDay(now).getTime()) / DAY_MS);
+const plural = (n) => `${n} day${n === 1 ? '' : 's'}`;
+const short = (date) => date.toLocaleDateString(undefined, { day: 'numeric', month: 'short' });
+/** The line under a task's name. */
+export function taskLine(state, dueAt, now) {
+    if (!dueAt) {
+        return state === 'overdue' ? 'Overdue' : state === 'dueSoon' ? 'Due soon' : 'Up to date';
+    }
+    const days = daysTo(dueAt, now);
+    if (state === 'ok') {
+        return `Next ${short(dueAt)}`;
+    }
+    if (days === 0) {
+        return 'Due today';
+    }
+    if (days > 0) {
+        return days === 1 ? 'Due tomorrow' : `Due in ${plural(days)}`;
+    }
+    return `Overdue by ${plural(-days)}`;
+}
+/** The palette color of each state's line. */
+const TONE = { ok: 'textMuted', dueSoon: 'warm', overdue: 'danger' };
+/**
+ * A recurring task as a tile: its name, where it stands (up to date, due soon, overdue) and when it is due.
+ * Tapping it asks whether it is done, with the day it was done on (today, or an earlier one if it was
+ * forgotten), and only a confirmation calls `onComplete`, so a stray tap does nothing.
+ */
+export function TaskTile({ label, icon, state, dueAt, lastDoneAt, status = 'ready', onComplete, }) {
+    const [open, setOpen] = useState(false);
+    // How many days before today it was done: 0 is today.
+    const [daysAgo, setDaysAgo] = useState(0);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState();
+    // The words under the name follow the clock: "Due tomorrow" becomes "Due today" at midnight.
+    const [now, setNow] = useState(() => new Date());
+    useEffect(() => {
+        const id = setInterval(() => setNow(new Date()), 60_000);
+        return () => clearInterval(id);
+    }, []);
+    const ask = () => {
+        setDaysAgo(0);
+        setError(undefined);
+        setOpen(true);
+    };
+    const confirm = async () => {
+        setBusy(true);
+        try {
+            await onComplete(daysAgo === 0 ? new Date() : startOfDay(new Date(now.getTime() - daysAgo * DAY_MS)));
+            setOpen(false);
+        }
+        catch (failure) {
+            setError(failure instanceof Error ? failure.message : String(failure));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Tile, { label: label, ...(icon ? { icon } : {}), status: status, onPress: ask, secondary: _jsx(Typography, { as: "span", variant: "secondary", css: ({ colorByKey }) => ({ color: colorByKey(TONE[state]) }), children: taskLine(state, dueAt, now) }) }), _jsx(ConfirmDialog, { open: open, title: `Mark “${label}” as done?`, description: lastDoneAt ? `Last done ${short(lastDoneAt)}.` : undefined, confirmLabel: "Mark as done", busy: busy, onConfirm: () => void confirm(), onCancel: () => setOpen(false), children: _jsxs(Flex, { direction: "column", gap: 2, children: [_jsx(DayStepper, { label: "Done on", daysAgo: daysAgo, now: now, onChange: setDaysAgo }), error ? (_jsx(Typography, { as: "span", variant: "secondary", color: "danger", role: "alert", children: error })) : null] }) })] }));
+}
+/** A day chosen by stepping back from today one at a time, which is what is wanted for a task that was done a day or two ago and is quicker, and far smaller, than a calendar. It cannot go past today. */
+function DayStepper({ label, daysAgo, now, onChange, }) {
+    const day = new Date(now.getTime() - daysAgo * DAY_MS);
+    const words = daysAgo === 0
+        ? 'Today'
+        : daysAgo === 1
+            ? 'Yesterday'
+            : day.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' });
+    return (_jsxs(Flex, { align: "center", justify: "space-between", gap: 3, role: "group", "aria-label": label, children: [_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: label }), _jsxs(Flex, { align: "center", gap: 2, children: [_jsx(IconButton, { icon: "lu:chevron-left", label: "Previous day", glyph: 16, onClick: () => onChange(daysAgo + 1) }), _jsx(Typography, { as: "span", variant: "bodyStrong", css: { minWidth: 96, textAlign: 'center' }, children: words }), _jsx(IconButton, { icon: "lu:chevron-right", label: "Next day", glyph: 16, disabled: daysAgo === 0, onClick: () => onChange(daysAgo - 1) })] })] }));
+}

package/dist/layout/use-timed.d.ts

@@ -0,0 +1,7 @@
+/** Whether something that plays for a fixed time is playing. `start` begins it, and it is over `ms`
+ * later whatever else happens; starting it while it plays does nothing, so a press cannot be repeated until
+ * the animation it set off is over. */
+export declare function useTimed(ms: number): {
+    active: boolean;
+    start: () => boolean;
+};

package/dist/layout/use-timed.js

@@ -0,0 +1,22 @@
+import { useEffect, useRef, useState } from 'react';
+/** Whether something that plays for a fixed time is playing. `start` begins it, and it is over `ms`
+ * later whatever else happens; starting it while it plays does nothing, so a press cannot be repeated until
+ * the animation it set off is over. */
+export function useTimed(ms) {
+    const [active, setActive] = useState(false);
+    const timer = useRef(undefined);
+    // Cleared with the component: a timer left running would set state on what is gone.
+    useEffect(() => () => clearTimeout(timer.current), []);
+    const start = () => {
+        if (timer.current !== undefined) {
+            return false;
+        }
+        setActive(true);
+        timer.current = setTimeout(() => {
+            timer.current = undefined;
+            setActive(false);
+        }, ms);
+        return true;
+    };
+    return { active, start };
+}

package/dist/theme/grid.d.ts

@@ -28,3 +28,6 @@ export declare function centeringOffsets(available: number, module: number): {
     top: number;
     bottom: number;
 };
+/** The width of the page navigation rail (`NavRail`), whose icons are centered in it. Things that sit at the
+ * left edge of the screen over a dashboard (the debug button) are centered on the same line. */
+export declare const NAV_RAIL = 76;

package/dist/theme/grid.js

@@ -36,3 +36,6 @@ export function centeringOffsets(available, module) {
     const top = Math.floor(leftover / 2);
     return { top, bottom: leftover - top };
 }
+/** The width of the page navigation rail (`NavRail`), whose icons are centered in it. Things that sit at the
+ * left edge of the screen over a dashboard (the debug button) are centered on the same line. */
+export const NAV_RAIL = 76;

package/dist/theme/index.js

@@ -35,6 +35,7 @@ const shared = {
         scrim: 20,
         drawer: 21,
         popover: 30,
+        modal: 40,
     },
     shadow: {
         drawer: '0 20px 48px rgba(0, 0, 0, 0.5)',
@@ -81,6 +82,7 @@ export const darkTheme = {
         onAccent: '#1B1B1F',
         warm: '#E3B341',
         danger: '#F2554A',
+        success: '#34D399',
         line: '#726C6A',
         rail: '#141216',
         border: 'rgba(255, 255, 255, 0.09)',
@@ -100,6 +102,7 @@ export const lightTheme = {
         onAccent: '#1B1B1F',
         warm: '#E3B341',
         danger: '#F2554A',
+        success: '#34D399',
         line: '#4A4540',
         rail: '#EAE4DA',
         border: 'rgba(0, 0, 0, 0.08)',

package/dist/theme/tokens.d.ts

@@ -20,6 +20,8 @@ declare module 'e-prim' {
         onAccent: string;
         warm: string;
         danger: string;
+        /** Something fine or connected (a status dot, a healthy link). */
+        success: string;
         line: string;
         /** The left nav rail / bottom nav dock's background — a third near-black, distinct from
          * `bg`/`surface`. */
@@ -54,6 +56,8 @@ declare module 'e-prim' {
         dropdown: number;
         /** A floating panel anchored to a control (the date picker's calendar), above what it sits in. */
         popover: number;
+        /** A dialog (`ConfirmDialog`) and the scrim behind it, over everything else on the page. */
+        modal: number;
     }
     interface TTypography {
         /** A tile's own name (`Tile`'s label). */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashsome/ui",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Design system components and hooks",
   "type": "module",
   "exports": {
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@emotion/react": "11.14.0",
-    "@hashsome/core": "0.8.0",
+    "@hashsome/core": "0.9.0",
     "e-prim": "2.0.1",
     "motion": "13.4.5",
     "react": "19.3.0",