@beautinique/frontend-components 1.0.7 → 1.0.8

package/dist/layout/ScrollToTop.d.ts

@@ -0,0 +1,36 @@
+export interface IScrollToTop {
+    /**
+     * The current path of the page, from the router (`useLocation().pathname`). The scroll happens
+     * when it changes. The query and the hash are not part of it: a search that only changes `?page=2`
+     * does not throw people back to the top.
+     */
+    pathname: string;
+    /**
+     * The `id` of the element that scrolls: the one that holds the page. Nothing happens when the page
+     * has no element with this id.
+     * @default 'main'
+     */
+    id?: string;
+    /**
+     * `'smooth'` is turned into `'auto'` for a person who asked their system for less motion.
+     * @default 'auto'
+     */
+    behavior?: ScrollBehavior;
+    /** @default 'start' */
+    block?: ScrollLogicalPosition;
+    /** @default 'nearest' */
+    inline?: ScrollLogicalPosition;
+    /**
+     * Leaves the page where it is when the component first shows, and scrolls only on the changes of
+     * `pathname` after that. Needed when the browser puts the page back where it was on a reload.
+     * @default false
+     */
+    skipInitial?: boolean;
+}
+/**
+ * Scrolls an element of the page (`#main` unless told another) to the top each time the path
+ * changes, as a router does not do it for a single page app. It draws nothing; put it once, inside
+ * the layout that has the element.
+ */
+export declare const ScrollToTop: ({ pathname, id, behavior, block, inline, skipInitial, }: IScrollToTop) => null;
+//# sourceMappingURL=ScrollToTop.d.ts.map

package/dist/layout/ScrollToTop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollToTop.d.ts","sourceRoot":"","sources":["../../src/layout/ScrollToTop.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,YAAY;IAC3B;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,uBAAuB;IACvB,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,yBAAyB;IACzB,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,yDAOzB,YAAY,SAsBd,CAAC"}

package/dist/layout/index.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+var react = require('react');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var ScrollToTop = /* @__PURE__ */ __name(({
+  pathname,
+  id = "main",
+  behavior = "auto",
+  block = "start",
+  inline = "nearest",
+  skipInitial = false
+}) => {
+  const scrolledPath = react.useRef(skipInitial ? pathname : void 0);
+  react.useEffect(() => {
+    if (scrolledPath.current === pathname) return;
+    scrolledPath.current = pathname;
+    const element = document.getElementById(id);
+    if (!element) return;
+    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    element.scrollIntoView({
+      behavior: behavior === "smooth" && reduceMotion ? "auto" : behavior,
+      block,
+      inline
+    });
+  }, [pathname, id, behavior, block, inline]);
+  return null;
+}, "ScrollToTop");
+
+exports.ScrollToTop = ScrollToTop;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/layout/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/layout/ScrollToTop.tsx"],"names":["useRef","useEffect"],"mappings":";;;;;;AAqCO,IAAM,8BAAc,MAAA,CAAA,CAAC;AAAA,EAC1B,QAAA;AAAA,EACA,EAAA,GAAK,MAAA;AAAA,EACL,QAAA,GAAW,MAAA;AAAA,EACX,KAAA,GAAQ,OAAA;AAAA,EACR,MAAA,GAAS,SAAA;AAAA,EACT,WAAA,GAAc;AAChB,CAAA,KAAoB;AAGlB,EAAA,MAAM,YAAA,GAAeA,YAAA,CAAO,WAAA,GAAc,QAAA,GAAW,MAAS,CAAA;AAE9D,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAA,CAAa,YAAY,QAAA,EAAU;AACvC,IAAA,YAAA,CAAa,OAAA,GAAU,QAAA;AAEvB,IAAA,MAAM,OAAA,GAAU,QAAA,CAAS,cAAA,CAAe,EAAE,CAAA;AAC1C,IAAA,IAAI,CAAC,OAAA,EAAS;AAEd,IAAA,MAAM,YAAA,GAAe,MAAA,CAAO,UAAA,CAAW,kCAAkC,CAAA,CAAE,OAAA;AAE3E,IAAA,OAAA,CAAQ,cAAA,CAAe;AAAA,MACrB,QAAA,EAAU,QAAA,KAAa,QAAA,IAAY,YAAA,GAAe,MAAA,GAAS,QAAA;AAAA,MAC3D,KAAA;AAAA,MACA;AAAA,KACD,CAAA;AAAA,EACH,GAAG,CAAC,QAAA,EAAU,IAAI,QAAA,EAAU,KAAA,EAAO,MAAM,CAAC,CAAA;AAE1C,EAAA,OAAO,IAAA;AACT,CAAA,EA7B2B,aAAA","file":"index.cjs","sourcesContent":["import { useEffect, useRef } from 'react';\n\nexport interface IScrollToTop {\n  /**\n   * The current path of the page, from the router (`useLocation().pathname`). The scroll happens\n   * when it changes. The query and the hash are not part of it: a search that only changes `?page=2`\n   * does not throw people back to the top.\n   */\n  pathname: string;\n  /**\n   * The `id` of the element that scrolls: the one that holds the page. Nothing happens when the page\n   * has no element with this id.\n   * @default 'main'\n   */\n  id?: string;\n  /**\n   * `'smooth'` is turned into `'auto'` for a person who asked their system for less motion.\n   * @default 'auto'\n   */\n  behavior?: ScrollBehavior;\n  /** @default 'start' */\n  block?: ScrollLogicalPosition;\n  /** @default 'nearest' */\n  inline?: ScrollLogicalPosition;\n  /**\n   * Leaves the page where it is when the component first shows, and scrolls only on the changes of\n   * `pathname` after that. Needed when the browser puts the page back where it was on a reload.\n   * @default false\n   */\n  skipInitial?: boolean;\n}\n\n/**\n * Scrolls an element of the page (`#main` unless told another) to the top each time the path\n * changes, as a router does not do it for a single page app. It draws nothing; put it once, inside\n * the layout that has the element.\n */\nexport const ScrollToTop = ({\n  pathname,\n  id = 'main',\n  behavior = 'auto',\n  block = 'start',\n  inline = 'nearest',\n  skipInitial = false,\n}: IScrollToTop) => {\n  // The path that was scrolled for last. A change of `id`, `behavior`, `block` or `inline` alone is\n  // not a new page, so it does not scroll. With `skipInitial` the first path counts as scrolled already.\n  const scrolledPath = useRef(skipInitial ? pathname : undefined);\n\n  useEffect(() => {\n    if (scrolledPath.current === pathname) return;\n    scrolledPath.current = pathname;\n\n    const element = document.getElementById(id);\n    if (!element) return;\n\n    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n    element.scrollIntoView({\n      behavior: behavior === 'smooth' && reduceMotion ? 'auto' : behavior,\n      block,\n      inline,\n    });\n  }, [pathname, id, behavior, block, inline]);\n\n  return null;\n};\n"]}

package/dist/layout/index.d.cts

@@ -0,0 +1,2 @@
+export { type IScrollToTop, ScrollToTop } from './ScrollToTop.js';
+//# sourceMappingURL=index.d.cts.map

package/dist/layout/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/layout/index.d.ts

@@ -0,0 +1,2 @@
+export { type IScrollToTop, ScrollToTop } from './ScrollToTop.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/layout/index.js

@@ -0,0 +1,31 @@
+import { useRef, useEffect } from 'react';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var ScrollToTop = /* @__PURE__ */ __name(({
+  pathname,
+  id = "main",
+  behavior = "auto",
+  block = "start",
+  inline = "nearest",
+  skipInitial = false
+}) => {
+  const scrolledPath = useRef(skipInitial ? pathname : void 0);
+  useEffect(() => {
+    if (scrolledPath.current === pathname) return;
+    scrolledPath.current = pathname;
+    const element = document.getElementById(id);
+    if (!element) return;
+    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    element.scrollIntoView({
+      behavior: behavior === "smooth" && reduceMotion ? "auto" : behavior,
+      block,
+      inline
+    });
+  }, [pathname, id, behavior, block, inline]);
+  return null;
+}, "ScrollToTop");
+
+export { ScrollToTop };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/layout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/layout/ScrollToTop.tsx"],"names":[],"mappings":";;;;AAqCO,IAAM,8BAAc,MAAA,CAAA,CAAC;AAAA,EAC1B,QAAA;AAAA,EACA,EAAA,GAAK,MAAA;AAAA,EACL,QAAA,GAAW,MAAA;AAAA,EACX,KAAA,GAAQ,OAAA;AAAA,EACR,MAAA,GAAS,SAAA;AAAA,EACT,WAAA,GAAc;AAChB,CAAA,KAAoB;AAGlB,EAAA,MAAM,YAAA,GAAe,MAAA,CAAO,WAAA,GAAc,QAAA,GAAW,MAAS,CAAA;AAE9D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAA,CAAa,YAAY,QAAA,EAAU;AACvC,IAAA,YAAA,CAAa,OAAA,GAAU,QAAA;AAEvB,IAAA,MAAM,OAAA,GAAU,QAAA,CAAS,cAAA,CAAe,EAAE,CAAA;AAC1C,IAAA,IAAI,CAAC,OAAA,EAAS;AAEd,IAAA,MAAM,YAAA,GAAe,MAAA,CAAO,UAAA,CAAW,kCAAkC,CAAA,CAAE,OAAA;AAE3E,IAAA,OAAA,CAAQ,cAAA,CAAe;AAAA,MACrB,QAAA,EAAU,QAAA,KAAa,QAAA,IAAY,YAAA,GAAe,MAAA,GAAS,QAAA;AAAA,MAC3D,KAAA;AAAA,MACA;AAAA,KACD,CAAA;AAAA,EACH,GAAG,CAAC,QAAA,EAAU,IAAI,QAAA,EAAU,KAAA,EAAO,MAAM,CAAC,CAAA;AAE1C,EAAA,OAAO,IAAA;AACT,CAAA,EA7B2B,aAAA","file":"index.js","sourcesContent":["import { useEffect, useRef } from 'react';\n\nexport interface IScrollToTop {\n  /**\n   * The current path of the page, from the router (`useLocation().pathname`). The scroll happens\n   * when it changes. The query and the hash are not part of it: a search that only changes `?page=2`\n   * does not throw people back to the top.\n   */\n  pathname: string;\n  /**\n   * The `id` of the element that scrolls: the one that holds the page. Nothing happens when the page\n   * has no element with this id.\n   * @default 'main'\n   */\n  id?: string;\n  /**\n   * `'smooth'` is turned into `'auto'` for a person who asked their system for less motion.\n   * @default 'auto'\n   */\n  behavior?: ScrollBehavior;\n  /** @default 'start' */\n  block?: ScrollLogicalPosition;\n  /** @default 'nearest' */\n  inline?: ScrollLogicalPosition;\n  /**\n   * Leaves the page where it is when the component first shows, and scrolls only on the changes of\n   * `pathname` after that. Needed when the browser puts the page back where it was on a reload.\n   * @default false\n   */\n  skipInitial?: boolean;\n}\n\n/**\n * Scrolls an element of the page (`#main` unless told another) to the top each time the path\n * changes, as a router does not do it for a single page app. It draws nothing; put it once, inside\n * the layout that has the element.\n */\nexport const ScrollToTop = ({\n  pathname,\n  id = 'main',\n  behavior = 'auto',\n  block = 'start',\n  inline = 'nearest',\n  skipInitial = false,\n}: IScrollToTop) => {\n  // The path that was scrolled for last. A change of `id`, `behavior`, `block` or `inline` alone is\n  // not a new page, so it does not scroll. With `skipInitial` the first path counts as scrolled already.\n  const scrolledPath = useRef(skipInitial ? pathname : undefined);\n\n  useEffect(() => {\n    if (scrolledPath.current === pathname) return;\n    scrolledPath.current = pathname;\n\n    const element = document.getElementById(id);\n    if (!element) return;\n\n    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n    element.scrollIntoView({\n      behavior: behavior === 'smooth' && reduceMotion ? 'auto' : behavior,\n      block,\n      inline,\n    });\n  }, [pathname, id, behavior, block, inline]);\n\n  return null;\n};\n"]}

package/dist/lib/content.d.cts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+/**
+ * Whether React would show something for `content`. `null`, `undefined`, booleans and an empty string
+ * show nothing; `0` does show (the text "0"), which is why this is not a plain truthiness check.
+ */
+export declare const hasContent: (content: ReactNode) => boolean;
+//# sourceMappingURL=content.d.cts.map

package/dist/lib/content.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.d.cts","sourceRoot":"","sources":["../../src/lib/content.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,SAAS,SAAS,YAK7B,CAAC"}

package/dist/lib/content.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+/**
+ * Whether React would show something for `content`. `null`, `undefined`, booleans and an empty string
+ * show nothing; `0` does show (the text "0"), which is why this is not a plain truthiness check.
+ */
+export declare const hasContent: (content: ReactNode) => boolean;
+//# sourceMappingURL=content.d.ts.map

package/dist/lib/content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../src/lib/content.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,SAAS,SAAS,YAK7B,CAAC"}

package/dist/lib/countdown.d.cts

@@ -0,0 +1,13 @@
+/**
+ * A number of seconds to wait as a whole number that is never negative. A value that is not a number
+ * of seconds (`NaN`, `Infinity`, a negative one) is no wait at all: a countdown that cannot end would
+ * lock the button for good.
+ */
+export declare const toSeconds: (seconds: number) => number;
+/**
+ * The whole seconds left until `endsAt` (a time in ms, as `Date.now()` gives), counted up: 0.2 s left
+ * is shown as 1, so the countdown shows 0 only once it is over.
+ */
+export declare const getSecondsLeft: (endsAt: number, now: number) => number;
+export declare const isPromiseLike: (value: unknown) => value is PromiseLike<unknown>;
+//# sourceMappingURL=countdown.d.cts.map

package/dist/lib/countdown.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"countdown.d.cts","sourceRoot":"","sources":["../../src/lib/countdown.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,SAAS,GAAI,SAAS,MAAM,WACuB,CAAC;AAEjE;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,QAAQ,MAAM,EAAE,KAAK,MAAM,WACX,CAAC;AAEhD,eAAO,MAAM,aAAa,GAAI,OAAO,OAAO,KAAG,KAAK,IAAI,WAAW,CAAC,OAAO,CAIzC,CAAC"}

package/dist/lib/countdown.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A number of seconds to wait as a whole number that is never negative. A value that is not a number
+ * of seconds (`NaN`, `Infinity`, a negative one) is no wait at all: a countdown that cannot end would
+ * lock the button for good.
+ */
+export declare const toSeconds: (seconds: number) => number;
+/**
+ * The whole seconds left until `endsAt` (a time in ms, as `Date.now()` gives), counted up: 0.2 s left
+ * is shown as 1, so the countdown shows 0 only once it is over.
+ */
+export declare const getSecondsLeft: (endsAt: number, now: number) => number;
+export declare const isPromiseLike: (value: unknown) => value is PromiseLike<unknown>;
+//# sourceMappingURL=countdown.d.ts.map

package/dist/lib/countdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"countdown.d.ts","sourceRoot":"","sources":["../../src/lib/countdown.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,SAAS,GAAI,SAAS,MAAM,WACuB,CAAC;AAEjE;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,QAAQ,MAAM,EAAE,KAAK,MAAM,WACX,CAAC;AAEhD,eAAO,MAAM,aAAa,GAAI,OAAO,OAAO,KAAG,KAAK,IAAI,WAAW,CAAC,OAAO,CAIzC,CAAC"}

package/dist/lib/stepper.d.cts

@@ -0,0 +1,9 @@
+export type TStepState = 'completed' | 'active' | 'upcoming';
+/**
+ * The step that is the current one: `activeStep` kept inside the steps. A number past the ends (or
+ * with a fraction) is put on the nearest step, and `NaN` is the first, so a wrong value never makes
+ * every step look completed or none look current.
+ */
+export declare const getCurrentStep: (activeStep: number, count: number) => number;
+export declare const getStepState: (index: number, currentStep: number) => TStepState;
+//# sourceMappingURL=stepper.d.cts.map

package/dist/lib/stepper.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.d.cts","sourceRoot":"","sources":["../../src/lib/stepper.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE7D;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,YAAY,MAAM,EAAE,OAAO,MAAM,WAGW,CAAC;AAE5E,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,EAAE,aAAa,MAAM,KAAG,UAIjE,CAAC"}

package/dist/lib/stepper.d.ts

@@ -0,0 +1,9 @@
+export type TStepState = 'completed' | 'active' | 'upcoming';
+/**
+ * The step that is the current one: `activeStep` kept inside the steps. A number past the ends (or
+ * with a fraction) is put on the nearest step, and `NaN` is the first, so a wrong value never makes
+ * every step look completed or none look current.
+ */
+export declare const getCurrentStep: (activeStep: number, count: number) => number;
+export declare const getStepState: (index: number, currentStep: number) => TStepState;
+//# sourceMappingURL=stepper.d.ts.map

package/dist/lib/stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../src/lib/stepper.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE7D;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,YAAY,MAAM,EAAE,OAAO,MAAM,WAGW,CAAC;AAE5E,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,EAAE,aAAa,MAAM,KAAG,UAIjE,CAAC"}

package/dist/linear-gradient/LinearGradient.d.cts

@@ -0,0 +1,13 @@
+import type { ComponentProps } from 'react';
+/** The edge of its container the gradient sits on. It is solid there and fades out going inwards. */
+export type TGradientPosition = 'top' | 'bottom' | 'left' | 'right';
+export interface ILinearGradient extends Omit<ComponentProps<'div'>, 'children'> {
+    position: TGradientPosition;
+}
+/**
+ * A fade, in the background colour, over one edge of a scrollable area: it tells that there is more
+ * to scroll without a hard cut. Put it inside a container that is `relative`. It is only decoration:
+ * it does not catch the pointer and assistive technology skips it.
+ */
+export declare const LinearGradient: ({ position, className, ...divProps }: ILinearGradient) => import("react").JSX.Element;
+//# sourceMappingURL=LinearGradient.d.cts.map

package/dist/linear-gradient/LinearGradient.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinearGradient.d.cts","sourceRoot":"","sources":["../../src/linear-gradient/LinearGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,qGAAqG;AACrG,MAAM,MAAM,iBAAiB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEpE,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC9E,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAWD;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,sCAA2C,eAAe,gCAOxF,CAAC"}

package/dist/linear-gradient/LinearGradient.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps } from 'react';
+/** The edge of its container the gradient sits on. It is solid there and fades out going inwards. */
+export type TGradientPosition = 'top' | 'bottom' | 'left' | 'right';
+export interface ILinearGradient extends Omit<ComponentProps<'div'>, 'children'> {
+    position: TGradientPosition;
+}
+/**
+ * A fade, in the background colour, over one edge of a scrollable area: it tells that there is more
+ * to scroll without a hard cut. Put it inside a container that is `relative`. It is only decoration:
+ * it does not catch the pointer and assistive technology skips it.
+ */
+export declare const LinearGradient: ({ position, className, ...divProps }: ILinearGradient) => import("react").JSX.Element;
+//# sourceMappingURL=LinearGradient.d.ts.map

package/dist/linear-gradient/LinearGradient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinearGradient.d.ts","sourceRoot":"","sources":["../../src/linear-gradient/LinearGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,qGAAqG;AACrG,MAAM,MAAM,iBAAiB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEpE,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC9E,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAWD;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,sCAA2C,eAAe,gCAOxF,CAAC"}

package/dist/linear-gradient/index.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var BASE_CSS = "from-primary-invert pointer-events-none absolute z-1 to-transparent";
+var POSITION_CSS = {
+  top: "inset-x-0 top-0 h-10 md:h-20 bg-linear-to-b",
+  bottom: "inset-x-0 bottom-0 h-10 md:h-20 bg-linear-to-t",
+  left: "inset-y-0 left-0 w-10 md:w-20 bg-linear-to-r",
+  right: "inset-y-0 right-0 w-10 md:w-20 bg-linear-to-l"
+};
+var LinearGradient = /* @__PURE__ */ __name(({ position, className = "", ...divProps }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    "aria-hidden": "true",
+    ...divProps,
+    className: `${BASE_CSS} ${Object.hasOwn(POSITION_CSS, position) ? POSITION_CSS[position] : ""} ${className}`
+  }
+), "LinearGradient");
+
+exports.LinearGradient = LinearGradient;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/linear-gradient/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/linear-gradient/LinearGradient.tsx"],"names":["jsx"],"mappings":";;;;;;AASA,IAAM,QAAA,GAAW,qEAAA;AAEjB,IAAM,YAAA,GAAkD;AAAA,EACtD,GAAA,EAAK,6CAAA;AAAA,EACL,MAAA,EAAQ,gDAAA;AAAA,EACR,IAAA,EAAM,8CAAA;AAAA,EACN,KAAA,EAAO;AACT,CAAA;AAOO,IAAM,cAAA,2BAAkB,EAAE,QAAA,EAAU,YAAY,EAAA,EAAI,GAAG,UAAS,qBACrEA,cAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACC,aAAA,EAAY,MAAA;AAAA,IACX,GAAG,QAAA;AAAA,IAEJ,SAAA,EAAW,CAAA,EAAG,QAAQ,CAAA,CAAA,EAAI,OAAO,MAAA,CAAO,YAAA,EAAc,QAAQ,CAAA,GAAI,YAAA,CAAa,QAAQ,CAAA,GAAI,EAAE,IAAI,SAAS,CAAA;AAAA;AAC5G,CAAA,EAN4B,gBAAA","file":"index.cjs","sourcesContent":["import type { ComponentProps } from 'react';\n\n/** The edge of its container the gradient sits on. It is solid there and fades out going inwards. */\nexport type TGradientPosition = 'top' | 'bottom' | 'left' | 'right';\n\nexport interface ILinearGradient extends Omit<ComponentProps<'div'>, 'children'> {\n  position: TGradientPosition;\n}\n\nconst BASE_CSS = 'from-primary-invert pointer-events-none absolute z-1 to-transparent';\n\nconst POSITION_CSS: Record<TGradientPosition, string> = {\n  top: 'inset-x-0 top-0 h-10 md:h-20 bg-linear-to-b',\n  bottom: 'inset-x-0 bottom-0 h-10 md:h-20 bg-linear-to-t',\n  left: 'inset-y-0 left-0 w-10 md:w-20 bg-linear-to-r',\n  right: 'inset-y-0 right-0 w-10 md:w-20 bg-linear-to-l',\n};\n\n/**\n * A fade, in the background colour, over one edge of a scrollable area: it tells that there is more\n * to scroll without a hard cut. Put it inside a container that is `relative`. It is only decoration:\n * it does not catch the pointer and assistive technology skips it.\n */\nexport const LinearGradient = ({ position, className = '', ...divProps }: ILinearGradient) => (\n  <div\n    aria-hidden=\"true\"\n    {...divProps}\n    // a position that is not one (code that is not type checked) draws nothing, not \"undefined\"\n    className={`${BASE_CSS} ${Object.hasOwn(POSITION_CSS, position) ? POSITION_CSS[position] : ''} ${className}`}\n  />\n);\n"]}

package/dist/linear-gradient/index.d.cts

@@ -0,0 +1,2 @@
+export { type ILinearGradient, LinearGradient, type TGradientPosition } from './LinearGradient.js';
+//# sourceMappingURL=index.d.cts.map

package/dist/linear-gradient/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../src/linear-gradient/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAE,cAAc,EAAE,KAAK,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/linear-gradient/index.d.ts

@@ -0,0 +1,2 @@
+export { type ILinearGradient, LinearGradient, type TGradientPosition } from './LinearGradient.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/linear-gradient/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/linear-gradient/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAE,cAAc,EAAE,KAAK,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/linear-gradient/index.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var BASE_CSS = "from-primary-invert pointer-events-none absolute z-1 to-transparent";
+var POSITION_CSS = {
+  top: "inset-x-0 top-0 h-10 md:h-20 bg-linear-to-b",
+  bottom: "inset-x-0 bottom-0 h-10 md:h-20 bg-linear-to-t",
+  left: "inset-y-0 left-0 w-10 md:w-20 bg-linear-to-r",
+  right: "inset-y-0 right-0 w-10 md:w-20 bg-linear-to-l"
+};
+var LinearGradient = /* @__PURE__ */ __name(({ position, className = "", ...divProps }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    "aria-hidden": "true",
+    ...divProps,
+    className: `${BASE_CSS} ${Object.hasOwn(POSITION_CSS, position) ? POSITION_CSS[position] : ""} ${className}`
+  }
+), "LinearGradient");
+
+export { LinearGradient };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/linear-gradient/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/linear-gradient/LinearGradient.tsx"],"names":[],"mappings":";;;;AASA,IAAM,QAAA,GAAW,qEAAA;AAEjB,IAAM,YAAA,GAAkD;AAAA,EACtD,GAAA,EAAK,6CAAA;AAAA,EACL,MAAA,EAAQ,gDAAA;AAAA,EACR,IAAA,EAAM,8CAAA;AAAA,EACN,KAAA,EAAO;AACT,CAAA;AAOO,IAAM,cAAA,2BAAkB,EAAE,QAAA,EAAU,YAAY,EAAA,EAAI,GAAG,UAAS,qBACrE,GAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACC,aAAA,EAAY,MAAA;AAAA,IACX,GAAG,QAAA;AAAA,IAEJ,SAAA,EAAW,CAAA,EAAG,QAAQ,CAAA,CAAA,EAAI,OAAO,MAAA,CAAO,YAAA,EAAc,QAAQ,CAAA,GAAI,YAAA,CAAa,QAAQ,CAAA,GAAI,EAAE,IAAI,SAAS,CAAA;AAAA;AAC5G,CAAA,EAN4B,gBAAA","file":"index.js","sourcesContent":["import type { ComponentProps } from 'react';\n\n/** The edge of its container the gradient sits on. It is solid there and fades out going inwards. */\nexport type TGradientPosition = 'top' | 'bottom' | 'left' | 'right';\n\nexport interface ILinearGradient extends Omit<ComponentProps<'div'>, 'children'> {\n  position: TGradientPosition;\n}\n\nconst BASE_CSS = 'from-primary-invert pointer-events-none absolute z-1 to-transparent';\n\nconst POSITION_CSS: Record<TGradientPosition, string> = {\n  top: 'inset-x-0 top-0 h-10 md:h-20 bg-linear-to-b',\n  bottom: 'inset-x-0 bottom-0 h-10 md:h-20 bg-linear-to-t',\n  left: 'inset-y-0 left-0 w-10 md:w-20 bg-linear-to-r',\n  right: 'inset-y-0 right-0 w-10 md:w-20 bg-linear-to-l',\n};\n\n/**\n * A fade, in the background colour, over one edge of a scrollable area: it tells that there is more\n * to scroll without a hard cut. Put it inside a container that is `relative`. It is only decoration:\n * it does not catch the pointer and assistive technology skips it.\n */\nexport const LinearGradient = ({ position, className = '', ...divProps }: ILinearGradient) => (\n  <div\n    aria-hidden=\"true\"\n    {...divProps}\n    // a position that is not one (code that is not type checked) draws nothing, not \"undefined\"\n    className={`${BASE_CSS} ${Object.hasOwn(POSITION_CSS, position) ? POSITION_CSS[position] : ''} ${className}`}\n  />\n);\n"]}

package/dist/resend/Resend.d.cts

@@ -0,0 +1,37 @@
+import { type ComponentProps } from 'react';
+export interface IResend extends Omit<ComponentProps<'p'>, 'children'> {
+    /** What is said before the countdown or the button, e.g. `"Didn't get the code?"`. */
+    label: string;
+    /**
+     * How many seconds to wait before it can be asked again. The wait starts when the component is
+     * shown (the thing was just sent) and again after each resend, with the `count` of that moment, so
+     * an app can stop making people wait after a few tries by passing 0. A change of `count` in the
+     * middle of a wait does not change that wait; to start over (a new email address), give the
+     * component a new `key`.
+     */
+    count: number;
+    /**
+     * Asks again. When it returns a promise, the button waits for it (it cannot be pressed twice, and
+     * says it is sending) and the wait starts when it resolves; if it rejects there is no wait, the
+     * button can be pressed again and the error is reported to the window like any uncaught error.
+     * Handle the errors you can recover from (a toast) inside it.
+     */
+    onResend: () => unknown;
+    /** @default 'Resend' */
+    resendLabel?: string;
+    /** What comes before the seconds while waiting. @default 'Resend in' */
+    countdownLabel?: string;
+    /** The button while `onResend` is waiting for its promise. @default 'Sending…' */
+    sendingLabel?: string;
+    /** Read out by assistive technology when the wait ends. @default 'You can resend now' */
+    readyLabel?: string;
+    /** How the seconds are written. @default (seconds) => `${seconds}s` */
+    formatSeconds?: (seconds: number) => string;
+}
+/**
+ * "Didn't get the code? Resend in 30s" and, once the wait is over, a button to ask again. The wait is
+ * measured against the clock, not counted tick by tick, so a tab that was in the background or a
+ * laptop that slept does not leave people waiting longer than the time that really went by.
+ */
+export declare const Resend: ({ label, count, onResend, resendLabel, countdownLabel, sendingLabel, readyLabel, formatSeconds, className, ...pProps }: IResend) => import("react").JSX.Element;
+//# sourceMappingURL=Resend.d.cts.map

package/dist/resend/Resend.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Resend.d.cts","sourceRoot":"","sources":["../../src/resend/Resend.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAA+B,MAAM,OAAO,CAAC;AAKzE,MAAM,WAAW,OAAQ,SAAQ,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC;IACpE,sFAAsF;IACtF,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,QAAQ,EAAE,MAAM,OAAO,CAAC;IACxB,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wEAAwE;IACxE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kFAAkF;IAClF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yFAAyF;IACzF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uEAAuE;IACvE,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;CAC7C;AAUD;;;;GAIG;AACH,eAAO,MAAM,MAAM,GAAI,wHAWpB,OAAO,gCAmHT,CAAC"}

package/dist/resend/Resend.d.ts

@@ -0,0 +1,37 @@
+import { type ComponentProps } from 'react';
+export interface IResend extends Omit<ComponentProps<'p'>, 'children'> {
+    /** What is said before the countdown or the button, e.g. `"Didn't get the code?"`. */
+    label: string;
+    /**
+     * How many seconds to wait before it can be asked again. The wait starts when the component is
+     * shown (the thing was just sent) and again after each resend, with the `count` of that moment, so
+     * an app can stop making people wait after a few tries by passing 0. A change of `count` in the
+     * middle of a wait does not change that wait; to start over (a new email address), give the
+     * component a new `key`.
+     */
+    count: number;
+    /**
+     * Asks again. When it returns a promise, the button waits for it (it cannot be pressed twice, and
+     * says it is sending) and the wait starts when it resolves; if it rejects there is no wait, the
+     * button can be pressed again and the error is reported to the window like any uncaught error.
+     * Handle the errors you can recover from (a toast) inside it.
+     */
+    onResend: () => unknown;
+    /** @default 'Resend' */
+    resendLabel?: string;
+    /** What comes before the seconds while waiting. @default 'Resend in' */
+    countdownLabel?: string;
+    /** The button while `onResend` is waiting for its promise. @default 'Sending…' */
+    sendingLabel?: string;
+    /** Read out by assistive technology when the wait ends. @default 'You can resend now' */
+    readyLabel?: string;
+    /** How the seconds are written. @default (seconds) => `${seconds}s` */
+    formatSeconds?: (seconds: number) => string;
+}
+/**
+ * "Didn't get the code? Resend in 30s" and, once the wait is over, a button to ask again. The wait is
+ * measured against the clock, not counted tick by tick, so a tab that was in the background or a
+ * laptop that slept does not leave people waiting longer than the time that really went by.
+ */
+export declare const Resend: ({ label, count, onResend, resendLabel, countdownLabel, sendingLabel, readyLabel, formatSeconds, className, ...pProps }: IResend) => import("react").JSX.Element;
+//# sourceMappingURL=Resend.d.ts.map

package/dist/resend/Resend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Resend.d.ts","sourceRoot":"","sources":["../../src/resend/Resend.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAA+B,MAAM,OAAO,CAAC;AAKzE,MAAM,WAAW,OAAQ,SAAQ,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC;IACpE,sFAAsF;IACtF,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,QAAQ,EAAE,MAAM,OAAO,CAAC;IACxB,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wEAAwE;IACxE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kFAAkF;IAClF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yFAAyF;IACzF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uEAAuE;IACvE,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;CAC7C;AAUD;;;;GAIG;AACH,eAAO,MAAM,MAAM,GAAI,wHAWpB,OAAO,gCAmHT,CAAC"}

package/dist/resend/index.cjs

@@ -0,0 +1,138 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/lib/countdown.ts
+var toSeconds = /* @__PURE__ */ __name((seconds) => Number.isFinite(seconds) ? Math.max(Math.ceil(seconds), 0) : 0, "toSeconds");
+var getSecondsLeft = /* @__PURE__ */ __name((endsAt, now) => Math.max(Math.ceil((endsAt - now) / 1e3), 0), "getSecondsLeft");
+var isPromiseLike = /* @__PURE__ */ __name((value) => typeof value === "object" && value !== null && "then" in value && typeof value.then === "function", "isPromiseLike");
+var BASE_CSS = "text-fill-transparent w-fit";
+var FORCED_COLORS_CSS = "forced-colors:bg-none forced-colors:[-webkit-text-fill-color:currentColor]";
+var GRADIENT_CSS = {
+  accent: "bg-accent-duo",
+  silver: "bg-silver-duo"
+};
+var GradientText = /* @__PURE__ */ __name(({
+  as,
+  type,
+  text,
+  children,
+  className = "",
+  ...rest
+}) => {
+  const Component = as ?? "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      ...rest,
+      className: `${BASE_CSS} ${GRADIENT_CSS[type]} ${FORCED_COLORS_CSS} ${className}`,
+      children: children ?? text
+    }
+  );
+}, "GradientText");
+var defaultFormatSeconds = /* @__PURE__ */ __name((seconds) => `${String(seconds)}s`, "defaultFormatSeconds");
+var BUTTON_CSS = "cursor-pointer rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-crayola-c disabled:cursor-wait disabled:opacity-60";
+var Resend = /* @__PURE__ */ __name(({
+  label,
+  count,
+  onResend,
+  resendLabel = "Resend",
+  countdownLabel = "Resend in",
+  sendingLabel = "Sending\u2026",
+  readyLabel = "You can resend now",
+  formatSeconds = defaultFormatSeconds,
+  className = "",
+  ...pProps
+}) => {
+  const [wait, setWait] = react.useState(() => ({ seconds: toSeconds(count) }));
+  const [secondsLeft, setSecondsLeft] = react.useState(wait.seconds);
+  const [isReady, setIsReady] = react.useState(false);
+  const [isSending, setIsSending] = react.useState(false);
+  const isSendingRef = react.useRef(false);
+  const countRef = react.useRef(count);
+  react.useEffect(() => {
+    countRef.current = count;
+  }, [count]);
+  react.useEffect(() => {
+    if (wait.seconds <= 0) return;
+    const endsAt = Date.now() + wait.seconds * 1e3;
+    let shown = wait.seconds;
+    const update = /* @__PURE__ */ __name(() => {
+      const left = getSecondsLeft(endsAt, Date.now());
+      if (left !== shown) {
+        shown = left;
+        setSecondsLeft(left);
+      }
+      if (left > 0) return;
+      window.clearInterval(timer);
+      setIsReady(true);
+    }, "update");
+    const timer = window.setInterval(update, 250);
+    document.addEventListener("visibilitychange", update);
+    return () => {
+      window.clearInterval(timer);
+      document.removeEventListener("visibilitychange", update);
+    };
+  }, [wait]);
+  const startWait = /* @__PURE__ */ __name(() => {
+    const seconds = toSeconds(countRef.current);
+    setIsReady(false);
+    setSecondsLeft(seconds);
+    setWait({ seconds });
+  }, "startWait");
+  const resend = /* @__PURE__ */ __name(async () => {
+    if (isSendingRef.current) return;
+    const result = onResend();
+    if (!isPromiseLike(result)) {
+      startWait();
+      return;
+    }
+    isSendingRef.current = true;
+    setIsSending(true);
+    try {
+      await result;
+      startWait();
+    } finally {
+      isSendingRef.current = false;
+      setIsSending(false);
+    }
+  }, "resend");
+  return /* @__PURE__ */ jsxRuntime.jsxs("p", { ...pProps, className: `space-x-2 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(GradientText, { text: label, type: "silver", className: "text-xs sm:text-sm" }),
+    secondsLeft > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { role: "timer", className: "text-muted text-xs sm:text-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(GradientText, { text: countdownLabel, type: "silver" }),
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx(GradientText, { text: formatSeconds(secondsLeft), type: "accent", className: "font-semibold" })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        disabled: isSending,
+        "aria-busy": isSending || void 0,
+        onClick: () => {
+          resend().catch((error) => {
+            reportError(error);
+          });
+        },
+        className: BUTTON_CSS,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          GradientText,
+          {
+            type: "accent",
+            text: isSending ? sendingLabel : resendLabel,
+            className: "text-xs font-semibold sm:text-sm"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { role: "status", className: "sr-only", children: isReady ? readyLabel : "" })
+  ] });
+}, "Resend");
+
+exports.Resend = Resend;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/resend/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/countdown.ts","../../src/ui/GradientText.tsx","../../src/resend/Resend.tsx"],"names":["jsx","useState","useRef","useEffect","jsxs"],"mappings":"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","file":"index.cjs","sourcesContent":["/**\n * A number of seconds to wait as a whole number that is never negative. A value that is not a number\n * of seconds (`NaN`, `Infinity`, a negative one) is no wait at all: a countdown that cannot end would\n * lock the button for good.\n */\nexport const toSeconds = (seconds: number) =>\n  Number.isFinite(seconds) ? Math.max(Math.ceil(seconds), 0) : 0;\n\n/**\n * The whole seconds left until `endsAt` (a time in ms, as `Date.now()` gives), counted up: 0.2 s left\n * is shown as 1, so the countdown shows 0 only once it is over.\n */\nexport const getSecondsLeft = (endsAt: number, now: number) =>\n  Math.max(Math.ceil((endsAt - now) / 1000), 0);\n\nexport const isPromiseLike = (value: unknown): value is PromiseLike<unknown> =>\n  typeof value === 'object' &&\n  value !== null &&\n  'then' in value &&\n  typeof value.then === 'function';\n","import type { ComponentPropsWithRef, ElementType, ReactNode } from 'react';\n\n/** `accent`: the blue gradient of the brand. `silver`: the quiet grey one. */\nexport type TGradientTextType = 'accent' | 'silver';\n\n/** The text is given as `text`, or as `children` (anything React can show), not both. */\ntype TGradientTextContent =\n  { text: string; children?: never } | { children: ReactNode; text?: never };\n\ninterface IGradientTextOwnProps<TAs extends ElementType> {\n  /**\n   * What renders the text: an element (`'a'`, `'p'`, ...) or a component, e.g. the `Link` of the\n   * router, which then gets its own props (`to`) next to these.\n   * @default 'span'\n   */\n  as?: TAs;\n  type: TGradientTextType;\n  className?: string;\n}\n\nexport type IGradientText<TAs extends ElementType = 'span'> = IGradientTextOwnProps<TAs> &\n  TGradientTextContent &\n  Omit<ComponentPropsWithRef<TAs>, 'as' | 'type' | 'className' | 'text' | 'children'>;\n\nconst BASE_CSS = 'text-fill-transparent w-fit';\n// In forced-colors mode (Windows high contrast) the browser draws no background, so a text that is\n// only a transparent fill over a gradient would vanish: there it takes the colour of the system.\nconst FORCED_COLORS_CSS =\n  'forced-colors:bg-none forced-colors:[-webkit-text-fill-color:currentColor]';\n\nconst GRADIENT_CSS: Record<TGradientTextType, string> = {\n  accent: 'bg-accent-duo',\n  silver: 'bg-silver-duo',\n};\n\n/**\n * Text filled with a gradient. A link is a text that is rendered by a link component:\n * `<GradientText as={Link} to=\"/terms\" type=\"accent\" text=\"Terms\" />`; the router is the app's, not\n * this package's.\n */\nexport const GradientText = <TAs extends ElementType = 'span'>({\n  as,\n  type,\n  text,\n  children,\n  className = '',\n  ...rest\n}: IGradientText<TAs>) => {\n  const Component: ElementType = as ?? 'span';\n\n  return (\n    <Component\n      {...rest}\n      className={`${BASE_CSS} ${GRADIENT_CSS[type]} ${FORCED_COLORS_CSS} ${className}`}\n    >\n      {children ?? text}\n    </Component>\n  );\n};\n","import { type ComponentProps, useEffect, useRef, useState } from 'react';\n\nimport { getSecondsLeft, isPromiseLike, toSeconds } from '../lib/countdown.js';\nimport { GradientText } from '../ui/GradientText.js';\n\nexport interface IResend extends Omit<ComponentProps<'p'>, 'children'> {\n  /** What is said before the countdown or the button, e.g. `\"Didn't get the code?\"`. */\n  label: string;\n  /**\n   * How many seconds to wait before it can be asked again. The wait starts when the component is\n   * shown (the thing was just sent) and again after each resend, with the `count` of that moment, so\n   * an app can stop making people wait after a few tries by passing 0. A change of `count` in the\n   * middle of a wait does not change that wait; to start over (a new email address), give the\n   * component a new `key`.\n   */\n  count: number;\n  /**\n   * Asks again. When it returns a promise, the button waits for it (it cannot be pressed twice, and\n   * says it is sending) and the wait starts when it resolves; if it rejects there is no wait, the\n   * button can be pressed again and the error is reported to the window like any uncaught error.\n   * Handle the errors you can recover from (a toast) inside it.\n   */\n  onResend: () => unknown;\n  /** @default 'Resend' */\n  resendLabel?: string;\n  /** What comes before the seconds while waiting. @default 'Resend in' */\n  countdownLabel?: string;\n  /** The button while `onResend` is waiting for its promise. @default 'Sending…' */\n  sendingLabel?: string;\n  /** Read out by assistive technology when the wait ends. @default 'You can resend now' */\n  readyLabel?: string;\n  /** How the seconds are written. @default (seconds) => `${seconds}s` */\n  formatSeconds?: (seconds: number) => string;\n}\n\nconst defaultFormatSeconds = (seconds: number) => `${String(seconds)}s`;\n\n// No `outline-hidden` here: in Tailwind v4 it sets `--tw-outline-style: none`, which the\n// `focus-visible:outline-2` below uses for its style, so the ring would never be drawn. A button only\n// shows the browser's own ring for the keyboard anyway (`:focus-visible`), never for a click.\nconst BUTTON_CSS =\n  'cursor-pointer rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-crayola-c disabled:cursor-wait disabled:opacity-60';\n\n/**\n * \"Didn't get the code? Resend in 30s\" and, once the wait is over, a button to ask again. The wait is\n * measured against the clock, not counted tick by tick, so a tab that was in the background or a\n * laptop that slept does not leave people waiting longer than the time that really went by.\n */\nexport const Resend = ({\n  label,\n  count,\n  onResend,\n  resendLabel = 'Resend',\n  countdownLabel = 'Resend in',\n  sendingLabel = 'Sending…',\n  readyLabel = 'You can resend now',\n  formatSeconds = defaultFormatSeconds,\n  className = '',\n  ...pProps\n}: IResend) => {\n  // What is rendered first is the same on the server and in the browser: the wait starts when the\n  // component is on the page (the effect below), never from the time the render happened.\n  const [wait, setWait] = useState(() => ({ seconds: toSeconds(count) }));\n  const [secondsLeft, setSecondsLeft] = useState(wait.seconds);\n  const [isReady, setIsReady] = useState(false);\n  const [isSending, setIsSending] = useState(false);\n  const isSendingRef = useRef(false);\n  const countRef = useRef(count);\n\n  useEffect(() => {\n    countRef.current = count;\n  }, [count]);\n\n  useEffect(() => {\n    if (wait.seconds <= 0) return;\n\n    const endsAt = Date.now() + wait.seconds * 1000;\n    let shown = wait.seconds;\n\n    const update = () => {\n      const left = getSecondsLeft(endsAt, Date.now());\n\n      // Several ticks fall in every second; the state is only set (and React only asked to render,\n      // which it sometimes does even for a value that is the same) when the second changes.\n      if (left !== shown) {\n        shown = left;\n        setSecondsLeft(left);\n      }\n      if (left > 0) return;\n\n      window.clearInterval(timer);\n      setIsReady(true);\n    };\n\n    // Several times a second, not once: a tick that comes a little late still shows the right second.\n    const timer = window.setInterval(update, 250);\n    // A background tab runs timers rarely; come back to the right number as soon as it is seen.\n    document.addEventListener('visibilitychange', update);\n\n    return () => {\n      window.clearInterval(timer);\n      document.removeEventListener('visibilitychange', update);\n    };\n  }, [wait]);\n\n  const startWait = () => {\n    const seconds = toSeconds(countRef.current);\n\n    setIsReady(false);\n    setSecondsLeft(seconds);\n    setWait({ seconds });\n  };\n\n  const resend = async () => {\n    if (isSendingRef.current) return;\n\n    const result = onResend();\n\n    // `onResend` that does not return a promise (most) starts the wait at once, as the click.\n    if (!isPromiseLike(result)) {\n      startWait();\n\n      return;\n    }\n\n    isSendingRef.current = true;\n    setIsSending(true);\n\n    try {\n      await result;\n      startWait();\n    } finally {\n      isSendingRef.current = false;\n      setIsSending(false);\n    }\n  };\n\n  return (\n    <p {...pProps} className={`space-x-2 ${className}`}>\n      <GradientText text={label} type=\"silver\" className=\"text-xs sm:text-sm\" />\n\n      {secondsLeft > 0 ? (\n        <span role=\"timer\" className=\"text-muted text-xs sm:text-sm\">\n          <GradientText text={countdownLabel} type=\"silver\" />{' '}\n          <GradientText text={formatSeconds(secondsLeft)} type=\"accent\" className=\"font-semibold\" />\n        </span>\n      ) : (\n        <button\n          type=\"button\"\n          disabled={isSending}\n          aria-busy={isSending || undefined}\n          onClick={() => {\n            // `reportError` is what the browser does for an error nobody caught: it is reported to\n            // `window` (and to the error tracker of the app) instead of vanishing in a dropped promise.\n            resend().catch((error: unknown) => {\n              reportError(error);\n            });\n          }}\n          className={BUTTON_CSS}\n        >\n          <GradientText\n            type=\"accent\"\n            text={isSending ? sendingLabel : resendLabel}\n            className=\"text-xs font-semibold sm:text-sm\"\n          />\n        </button>\n      )}\n\n      {/* Said once, when the wait ends: a person using a screen reader cannot see the button appear. */}\n      <span role=\"status\" className=\"sr-only\">\n        {isReady ? readyLabel : ''}\n      </span>\n    </p>\n  );\n};\n"]}

package/dist/resend/index.d.cts

@@ -0,0 +1,2 @@
+export { type IResend, Resend } from './Resend.js';
+//# sourceMappingURL=index.d.cts.map

package/dist/resend/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../src/resend/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC"}