@blockle/blocks-react 3.1.0 → 3.2.0

package/dist/components/display/Tag/Tag.d.ts

@@ -0,0 +1,28 @@
+import { ComponentThemes, HTMLElementProps } from '@blockle/blocks-core';
+import { default as React } from 'react';
+type TagTheme = ComponentThemes['tag'];
+export type TagProps = {
+    /**
+     * Render the single child element instead of a `span`, with the Tag's
+     * classes and attributes merged onto it
+     */
+    asChild?: boolean;
+    children: React.ReactNode;
+    /**
+     * Content placed after the text, such as an `IconButton` that removes the
+     * Tag. It is sized to the Tag's line height, so it doesn't make the Tag
+     * taller.
+     */
+    endSlot?: React.ReactNode;
+    intent?: TagTheme['variants']['intent'];
+    ref?: React.Ref<HTMLSpanElement>;
+    size?: TagTheme['variants']['size'];
+    /**
+     * Content placed before the text, such as an `Icon`, an avatar `img` or an
+     * emoji. It is sized to the Tag's line height.
+     */
+    startSlot?: React.ReactNode;
+} & Omit<HTMLElementProps<HTMLSpanElement>, 'children' | 'ref' | 'size'>;
+export declare const Tag: React.FC<TagProps>;
+export {};
+//# sourceMappingURL=Tag.d.ts.map

package/dist/components/display/Tag/Tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../src/components/display/Tag/Tag.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,KAAK,QAAQ,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;AAEvC,MAAM,MAAM,QAAQ,GAAG;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,GAAG,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,KAAK,GAAG,MAAM,CAAC,CAAC;AAQzE,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAoClC,CAAC"}

package/dist/components/display/Tag/Tag.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { classnames } from "@blockle/blocks-core";
+import { createSlottable } from "@blockle/blocks-react-slot";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+const [Template, Slot] = createSlottable("span");
+function hasContent(node) {
+  return node !== void 0 && node !== null && node !== false && node !== "";
+}
+const Tag = ({
+  asChild,
+  children,
+  className,
+  endSlot,
+  intent,
+  size,
+  startSlot,
+  ...restProps
+}) => {
+  const tagClassName = useComponentStyles("tag", {
+    root: true,
+    variants: { intent, size }
+  });
+  const startSlotClassName = useComponentStyles(
+    "tag",
+    { startSlot: true },
+    false
+  );
+  const endSlotClassName = useComponentStyles("tag", { endSlot: true }, false);
+  return /* @__PURE__ */ jsxs(
+    Template,
+    {
+      asChild,
+      className: classnames(tagClassName, className),
+      ...restProps,
+      children: [
+        hasContent(startSlot) && /* @__PURE__ */ jsx("span", { className: startSlotClassName, children: startSlot }),
+        /* @__PURE__ */ jsx(Slot, { children }),
+        hasContent(endSlot) && /* @__PURE__ */ jsx("span", { className: endSlotClassName, children: endSlot })
+      ]
+    }
+  );
+};
+export {
+  Tag
+};

package/dist/components/feedback/Alert/Alert.d.ts

@@ -2,15 +2,24 @@ import { ComponentThemes, HTMLElementProps } from '@blockle/blocks-core';
 type AlertTheme = ComponentThemes['alert'];
 export type AlertProps = {
     children?: React.ReactNode;
+    /**
+     * Content placed after the message, such as a `Button`, or an `IconButton`
+     * to dismiss the Alert. The message takes the remaining width.
+     */
+    endSlot?: React.ReactNode;
     intent?: AlertTheme['variants']['intent'];
-    onRequestClose?: () => void;
     /**
-     * Accessible name of the close button, rendered when `onRequestClose` is set.
-     * Pass your own wording to translate it.
-     * @default 'Close'
+     * `alert` announces the message as urgent, for a message shown in response
+     * to something that just happened. Use `status` for a lasting notice, such
+     * as a banner that stays while a record is archived.
+     * @default 'alert'
+     */
+    role?: 'alert' | 'status';
+    /**
+     * Content placed before the message, such as an icon
      */
-    closeLabel?: string;
-} & HTMLElementProps<HTMLDivElement>;
+    startSlot?: React.ReactNode;
+} & Omit<HTMLElementProps<HTMLDivElement>, 'role'>;
 export declare const Alert: React.FC<AlertProps>;
 export {};
 //# sourceMappingURL=Alert.d.ts.map

package/dist/components/feedback/Alert/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Alert/Alert.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAO9B,KAAK,UAAU,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC1C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,gBAAgB,CAAC,cAAc,CAAC,CAAC;AAErC,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA0DtC,CAAC"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Alert/Alert.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAK9B,KAAK,UAAU,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC1C;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,GAAG,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,CAAC;AAEnD,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA8BtC,CAAC"}

package/dist/components/feedback/Alert/Alert.js

@@ -2,15 +2,14 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { classnames } from "@blockle/blocks-core";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
-import { Button } from "../../form/Button/Button.js";
 import { Box } from "../../layout/Box/Box.js";
-import { closeButton } from "./Alert.css.js";
 const Alert = ({
   intent = "info",
   children,
-  onRequestClose,
-  closeLabel = "Close",
   className,
+  endSlot,
+  role = "alert",
+  startSlot,
   ...restProps
 }) => {
   const containerClassName = useComponentStyles("alert", {
@@ -20,44 +19,16 @@ const Alert = ({
   return /* @__PURE__ */ jsxs(
     Box,
     {
-      role: "alert",
+      role,
       className: classnames(containerClassName, className),
       display: "flex",
       alignItems: "center",
-      justifyContent: "space-between",
+      gap: 2,
       ...restProps,
       children: [
-        /* @__PURE__ */ jsx("div", { children }),
-        onRequestClose ? /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "small",
-            className: closeButton,
-            "aria-label": closeLabel,
-            onClick: () => onRequestClose?.(),
-            children: /* @__PURE__ */ jsxs(
-              "svg",
-              {
-                role: "presentation",
-                xmlns: "http://www.w3.org/2000/svg",
-                width: "24",
-                height: "24",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                children: [
-                  /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
-                  /* @__PURE__ */ jsx("path", { d: "M18 6l-12 12" }),
-                  /* @__PURE__ */ jsx("path", { d: "M6 6l12 12" })
-                ]
-              }
-            )
-          }
-        ) : null
+        startSlot,
+        /* @__PURE__ */ jsx(Box, { flexGrow: 1, children }),
+        endSlot
       ]
     }
   );

package/dist/components/feedback/Toast/ToastContext.d.ts

@@ -1,6 +1,12 @@
 import { AlertProps } from '../Alert/Alert.js';
 export type Toast = {
     id: string;
+    /**
+     * Milliseconds before the toast removes itself. The countdown pauses while
+     * any toast is hovered or focused, or the page is hidden. Leave it out to
+     * keep the toast until it's closed, and always leave it out when the toast
+     * contains an action, such as an "Undo" button.
+     */
     duration?: number;
     children?: React.ReactNode;
     intent?: AlertProps['intent'];

package/dist/components/feedback/Toast/ToastContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastContext.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Toast/ToastContext.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEpD,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAC5B,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,YAAY,kDAA+C,CAAC"}
+{"version":3,"file":"ToastContext.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Toast/ToastContext.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEpD,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAC5B,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,YAAY,kDAA+C,CAAC"}

package/dist/components/feedback/Toast/ToastProvider.d.ts

@@ -3,6 +3,12 @@ export type { ToastPlacement };
 type ToastPosition = 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right';
 export type ToastProviderProps = {
     children?: React.ReactNode;
+    /**
+     * Accessible name of each Toast's close button. Pass your own wording to
+     * translate it.
+     * @default 'Close'
+     */
+    closeLabel?: string;
     /** Where the toasts sit on the screen. Defaults to `bottom` */
     placement?: ToastPlacement;
     /**

package/dist/components/feedback/Toast/ToastProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Toast/ToastProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AA4BvE,YAAY,EAAE,cAAc,EAAE,CAAC;AAE/B,KAAK,aAAa,GACd,aAAa,GACb,eAAe,GACf,cAAc,GACd,UAAU,GACV,YAAY,GACZ,WAAW,CAAC;AAWhB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+DAA+D;IAC/D,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAoGtD,CAAC"}
+{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Toast/ToastProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AA+BvE,YAAY,EAAE,cAAc,EAAE,CAAC;AAE/B,KAAK,aAAa,GACd,aAAa,GACb,eAAe,GACf,cAAc,GACd,UAAU,GACV,YAAY,GACZ,WAAW,CAAC;AAWhB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqLtD,CAAC"}

package/dist/components/feedback/Toast/ToastProvider.js

@@ -1,12 +1,15 @@
 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { classnames } from "@blockle/blocks-core";
-import { useState, useRef, useCallback, useMemo } from "react";
+import { useState, useRef, useCallback, useEffect, useMemo } from "react";
 import { flushSync } from "react-dom";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { CloseIcon } from "../../../icons/icons.js";
+import { IconButton } from "../../form/IconButton/IconButton.js";
 import { Alert } from "../Alert/Alert.js";
 import { toast, stack, placement } from "./Toast.css.js";
 import { ToastContext } from "./ToastContext.js";
+import { useCountdowns } from "./useCountdowns.js";
 function makeTransition(transition) {
   if (document.startViewTransition) {
     const viewTransition = document.startViewTransition(() => {
@@ -30,6 +33,7 @@ const placementByPosition = {
 };
 const ToastProvider = ({
   children,
+  closeLabel = "Close",
   placement: placementProp,
   position
 }) => {
@@ -45,37 +49,66 @@ const ToastProvider = ({
   const [toasts, setToasts] = useState([]);
   const toastsRef = useRef(toasts);
   toastsRef.current = toasts;
-  const removeToast = useCallback((id) => {
+  const stackRef = useRef(null);
+  const hoveredIdsRef = useRef(/* @__PURE__ */ new Set());
+  const focusWithinRef = useRef(false);
+  const commitRemoval = useCallback((id) => {
     makeTransition(() => {
       setToasts((prev) => prev.filter((toast2) => toast2.id !== id));
     });
   }, []);
-  const addToast = useCallback((toast2) => {
-    const toasts2 = toastsRef.current;
-    const match = toasts2.findIndex(({ id }) => id === toast2.id) !== -1;
-    function updateState(prev) {
-      const match2 = prev.findIndex(({ id }) => id === toast2.id) !== -1;
-      if (match2) {
-        return prev.map((item) => item.id === toast2.id ? toast2 : item);
+  const countdowns = useCountdowns(commitRemoval);
+  const syncPaused = useCallback(() => {
+    countdowns.setPaused(
+      hoveredIdsRef.current.size > 0 || focusWithinRef.current || document.visibilityState === "hidden"
+    );
+  }, [countdowns]);
+  const removeToast = useCallback(
+    (id) => {
+      countdowns.clear(id);
+      hoveredIdsRef.current.delete(id);
+      syncPaused();
+      commitRemoval(id);
+    },
+    [countdowns, syncPaused, commitRemoval]
+  );
+  const addToast = useCallback(
+    (toast2) => {
+      const toasts2 = toastsRef.current;
+      const match = toasts2.findIndex(({ id }) => id === toast2.id) !== -1;
+      function updateState(prev) {
+        const match2 = prev.findIndex(({ id }) => id === toast2.id) !== -1;
+        if (match2) {
+          return prev.map((item) => item.id === toast2.id ? toast2 : item);
+        }
+        return [...prev, toast2];
       }
-      return [...prev, toast2];
-    }
-    if (match) {
-      setToasts(updateState);
-      return;
-    }
-    makeTransition(() => {
-      setToasts(updateState);
-    });
-    if (toast2.duration) {
-      const toastId = toast2.id;
-      setTimeout(() => {
-        makeTransition(() => {
-          setToasts((prev) => prev.filter((toast22) => toast22.id !== toastId));
-        });
-      }, toast2.duration);
-    }
-  }, []);
+      syncPaused();
+      if (toast2.duration) {
+        countdowns.set(toast2.id, toast2.duration);
+      } else {
+        countdowns.clear(toast2.id);
+      }
+      if (match) {
+        setToasts(updateState);
+        return;
+      }
+      makeTransition(() => {
+        setToasts(updateState);
+      });
+    },
+    [countdowns, syncPaused]
+  );
+  useEffect(() => {
+    document.addEventListener("visibilitychange", syncPaused);
+    return () => {
+      document.removeEventListener("visibilitychange", syncPaused);
+    };
+  }, [syncPaused]);
+  useEffect(() => {
+    focusWithinRef.current = stackRef.current?.contains(document.activeElement) ?? false;
+    syncPaused();
+  }, [toasts, syncPaused]);
   const contextValue = useMemo(
     () => ({
       add: addToast,
@@ -93,6 +126,7 @@ const ToastProvider = ({
           placement[placement$1],
           rootClassName
         ),
+        ref: stackRef,
         children: toasts.map(({ id, children: children2, intent }) => /* @__PURE__ */ jsx(
           Alert,
           {
@@ -101,9 +135,36 @@ const ToastProvider = ({
             style: {
               viewTransitionName: `toast-${id}`
             },
-            onRequestClose: () => {
-              removeToast(id);
+            onPointerEnter: () => {
+              hoveredIdsRef.current.add(id);
+              syncPaused();
+            },
+            onPointerLeave: () => {
+              hoveredIdsRef.current.delete(id);
+              syncPaused();
+            },
+            onFocus: () => {
+              focusWithinRef.current = true;
+              syncPaused();
+            },
+            onBlur: (event) => {
+              const stack2 = stackRef.current;
+              focusWithinRef.current = !!stack2 && (stack2.contains(event.relatedTarget) || stack2.contains(document.activeElement));
+              syncPaused();
             },
+            endSlot: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                label: closeLabel,
+                variant: "ghost",
+                size: "small",
+                intent: "neutral",
+                onClick: () => {
+                  removeToast(id);
+                },
+                children: /* @__PURE__ */ jsx(CloseIcon, {})
+              }
+            ),
             children: children2
           },
           id

package/dist/components/feedback/Toast/useCountdowns.d.ts

@@ -0,0 +1,14 @@
+export type Countdowns = {
+    /** Starts a countdown of `duration` for `id`, replacing any it had */
+    set: (id: string, duration: number) => void;
+    /** Drops the countdown of `id` without calling `onEnd` */
+    clear: (id: string) => void;
+    /** Pauses or resumes every countdown; a resumed one runs its time left */
+    setPaused: (paused: boolean) => void;
+};
+/**
+ * Pausable countdowns keyed by id, calling `onEnd` with the id once its
+ * time has run. They only count down while mounted, and are stopped on unmount.
+ */
+export declare function useCountdowns(onEnd: (id: string) => void): Countdowns;
+//# sourceMappingURL=useCountdowns.d.ts.map

package/dist/components/feedback/Toast/useCountdowns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCountdowns.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Toast/useCountdowns.ts"],"names":[],"mappings":"AAUA,MAAM,MAAM,UAAU,GAAG;IACvB,sEAAsE;IACtE,GAAG,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,0DAA0D;IAC1D,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5B,0EAA0E;IAC1E,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,GAAG,UAAU,CAsFrE"}

package/dist/components/feedback/Toast/useCountdowns.js

@@ -0,0 +1,74 @@
+"use client";
+import { useRef, useMemo, useEffect } from "react";
+function useCountdowns(onEnd) {
+  const onEndRef = useRef(onEnd);
+  onEndRef.current = onEnd;
+  const countdownsRef = useRef(/* @__PURE__ */ new Map());
+  const pausedRef = useRef(false);
+  const mountedRef = useRef(false);
+  const countdowns = useMemo(() => {
+    function run(id, countdown) {
+      countdown.startedAt = Date.now();
+      countdown.timeout = setTimeout(() => {
+        countdownsRef.current.delete(id);
+        onEndRef.current(id);
+      }, countdown.remaining);
+    }
+    function stop(countdown) {
+      clearTimeout(countdown.timeout);
+      if (countdown.startedAt !== void 0) {
+        countdown.remaining -= Date.now() - countdown.startedAt;
+        countdown.startedAt = void 0;
+      }
+    }
+    function isRunning() {
+      return mountedRef.current && !pausedRef.current;
+    }
+    function clear(id) {
+      const countdown = countdownsRef.current.get(id);
+      if (countdown) {
+        stop(countdown);
+        countdownsRef.current.delete(id);
+      }
+    }
+    function sync() {
+      for (const [id, countdown] of countdownsRef.current) {
+        stop(countdown);
+        if (isRunning()) {
+          run(id, countdown);
+        }
+      }
+    }
+    return {
+      set(id, duration) {
+        clear(id);
+        const countdown = { remaining: duration };
+        countdownsRef.current.set(id, countdown);
+        if (isRunning()) {
+          run(id, countdown);
+        }
+      },
+      clear,
+      setPaused(paused) {
+        if (paused === pausedRef.current) {
+          return;
+        }
+        pausedRef.current = paused;
+        sync();
+      },
+      sync
+    };
+  }, []);
+  useEffect(() => {
+    mountedRef.current = true;
+    countdowns.sync();
+    return () => {
+      mountedRef.current = false;
+      countdowns.sync();
+    };
+  }, [countdowns]);
+  return countdowns;
+}
+export {
+  useCountdowns
+};

package/dist/components/form/Button/Button.d.ts

@@ -1,6 +1,16 @@
 import { Atoms, ComponentThemes, HTMLElementProps, MarginAtoms } from '@blockle/blocks-core';
 import { default as React } from 'react';
 type ButtonTheme = ComponentThemes['button'];
+type ButtonIntentProps = {
+    /**
+     * Use the surrounding text color; only for the ghost and outline variants
+     */
+    intent: 'inherit';
+    variant: Exclude<ButtonTheme['variants']['variant'], 'solid'>;
+} | {
+    intent?: Exclude<ButtonTheme['variants']['intent'], 'inherit'>;
+    variant?: ButtonTheme['variants']['variant'];
+};
 export type ButtonProps = {
     alignSelf?: Atoms['alignSelf'];
     asChild?: boolean;
@@ -8,14 +18,12 @@ export type ButtonProps = {
     disabled?: boolean;
     endSlot?: React.ReactNode;
     inlineSize?: Atoms['inlineSize'];
-    intent?: ButtonTheme['variants']['intent'];
     loading?: boolean;
     popovertarget?: string;
     size?: ButtonTheme['variants']['size'];
     startSlot?: React.ReactNode;
     type?: 'button' | 'submit' | 'reset';
-    variant?: ButtonTheme['variants']['variant'];
-} & Omit<HTMLElementProps<HTMLButtonElement>, 'size'> & MarginAtoms;
+} & ButtonIntentProps & Omit<HTMLElementProps<HTMLButtonElement>, 'size'> & MarginAtoms;
 export declare const Button: React.FC<ButtonProps>;
 export {};
 //# sourceMappingURL=Button.d.ts.map

package/dist/components/form/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,KAAK,EAEV,KAAK,eAAe,EAGpB,KAAK,gBAAgB,EACrB,KAAK,WAAW,EACjB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,KAAK,WAAW,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,OAAO,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,CAAC;CAC9C,GAAG,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,GACnD,WAAW,CAAC;AAId,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAsDxC,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,KAAK,EAEV,KAAK,eAAe,EAGpB,KAAK,gBAAgB,EACrB,KAAK,WAAW,EACjB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,KAAK,WAAW,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;AAE7C,KAAK,iBAAiB,GAClB;IACE;;OAEG;IACH,MAAM,EAAE,SAAS,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC;CAC/D,GACD;IACE,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC,CAAC;IAC/D,OAAO,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,CAAC;CAC9C,CAAC;AAEN,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACtC,GAAG,iBAAiB,GACnB,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,GACjD,WAAW,CAAC;AAId,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAsDxC,CAAC"}

package/dist/components/form/Checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACzE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;AAEvC,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+C5C,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACzE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;AAEvC,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAiD5C,CAAC"}

package/dist/components/form/Checkbox/Checkbox.js

@@ -3,6 +3,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { classnames } from "@blockle/blocks-core";
 import { useId } from "react";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { CheckIcon } from "../../../icons/icons.js";
 import { Label } from "../Label/Label.js";
 import { input, icon, container } from "./checkbox.css.js";
 const Checkbox = ({
@@ -35,7 +36,12 @@ const Checkbox = ({
             ...restProps
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: classnames(icon, iconClassName), "aria-hidden": true, children: /* @__PURE__ */ jsx(DefaultIcon, {}) })
+        /* @__PURE__ */ jsx("div", { className: classnames(icon, iconClassName), "aria-hidden": true, children: /* @__PURE__ */ jsx(
+          CheckIcon,
+          {
+            style: { width: "1rem", height: "1rem", display: "block" }
+          }
+        ) })
       ]
     }
   );
@@ -47,30 +53,6 @@ const Checkbox = ({
     children && /* @__PURE__ */ jsx(Label, { required, htmlFor: inputId, children })
   ] });
 };
-const DefaultIcon = () => {
-  return (
-    // TOOD - replace with actual icon component renderer
-    /* @__PURE__ */ jsx(
-      "svg",
-      {
-        viewBox: "0 0 24 24",
-        fill: "none",
-        strokeWidth: "1.5",
-        stroke: "currentColor",
-        style: { width: "1rem", height: "1rem", display: "block" },
-        role: "presentation",
-        children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            d: "m4.5 12.75 6 6 9-13.5"
-          }
-        )
-      }
-    )
-  );
-};
 export {
   Checkbox
 };

package/dist/components/form/IconButton/IconButton.d.ts

@@ -0,0 +1,29 @@
+import { ComponentThemes, HTMLElementProps, MarginAtoms } from '@blockle/blocks-core';
+import { default as React } from 'react';
+type IconButtonTheme = ComponentThemes['iconButton'];
+type IconButtonIntentProps = {
+    /**
+     * Use the surrounding text color; only for the ghost and outline variants
+     */
+    intent: 'inherit';
+    variant: Exclude<IconButtonTheme['variants']['variant'], 'solid'>;
+} | {
+    intent?: Exclude<IconButtonTheme['variants']['intent'], 'inherit'>;
+    variant?: IconButtonTheme['variants']['variant'];
+};
+export type IconButtonProps = {
+    asChild?: boolean;
+    children: React.ReactNode;
+    disabled?: boolean;
+    /**
+     * Accessible name of the button, rendered as `aria-label`
+     */
+    label: string;
+    loading?: boolean;
+    shape?: IconButtonTheme['variants']['shape'];
+    size?: IconButtonTheme['variants']['size'];
+    type?: 'button' | 'submit' | 'reset';
+} & IconButtonIntentProps & Omit<HTMLElementProps<HTMLButtonElement>, 'size'> & MarginAtoms;
+export declare const IconButton: React.FC<IconButtonProps>;
+export {};
+//# sourceMappingURL=IconButton.d.ts.map

package/dist/components/form/IconButton/IconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/form/IconButton/IconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,eAAe,EAGpB,KAAK,gBAAgB,EACrB,KAAK,WAAW,EACjB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,KAAK,eAAe,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC;AAErD,KAAK,qBAAqB,GACtB;IACE;;OAEG;IACH,MAAM,EAAE,SAAS,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC;CACnE,GACD;IACE,MAAM,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC,CAAC;IACnE,OAAO,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,CAAC;CAClD,CAAC;AAEN,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC;IAC7C,IAAI,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACtC,GAAG,qBAAqB,GACvB,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,GACjD,WAAW,CAAC;AAId,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgEhD,CAAC"}