@indietabletop/appkit 3.2.0-2 → 3.2.0-3

package/dist/internal.css.js

@@ -1,21 +0,0 @@
-import { createVar, style } from "@vanilla-extract/css";
-import { bounce } from "./animations.css.js";
-import { minion } from "./common.css.js";
-export const animationDelay = createVar();
-export const dot = style({
-    fill: "currentcolor",
-    opacity: 0.8,
-    animation: `${bounce} 2s ${animationDelay} infinite`,
-});
-export const padding = createVar();
-export const letterhead = style([
-    minion,
-    {
-        vars: { [padding]: "clamp(1rem, 8vw, 4rem)" },
-        backgroundColor: "white",
-        padding: `max(1rem, calc(${padding} - .5rem)) ${padding} ${padding}`,
-        borderRadius: "1rem",
-        marginInline: "auto",
-        maxInlineSize: "36rem",
-    },
-]);

package/dist/media.d.ts

@@ -1,39 +0,0 @@
-/**
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
- */
-export declare enum PrefersColorScheme {
-    LIGHT = "(prefers-color-scheme: light)",
-    DARK = "(prefers-color-scheme: dark)"
-}
-/**
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
- */
-export declare enum PrefersReducedMotion {
-    NO_PREFERENCE = "(prefers-reduced-motion: no-preference)",
-    REDUCE = "(prefers-reduced-motion: reduce)"
-}
-export declare enum Hover {
-    NONE = "(hover: none)",
-    HOVER = "(hover: hover) and (pointer: fine)"
-}
-export declare enum MediaType {
-    PRINT = "print",
-    SCREEN = "screen"
-}
-export declare enum MinHeight {
-    TALL = "(min-height: 40em)"
-}
-export declare enum MinWidth {
-    SMALL = "(min-width: 28em)",
-    MEDIUM = "(min-width: 50em)",
-    WIDE = "(min-width: 66em)",
-    X_WIDE = "(min-width: 80em)",
-    XX_WIDE = "(min-width: 140em)"
-}
-export declare enum DisplayMode {
-    STANDALONE = "(display-mode: standalone)"
-}
-export declare enum Pointer {
-    COARSE = "(pointer: coarse)",
-    FINE = "(pointer: fine)"
-}

package/dist/media.js

@@ -1,49 +0,0 @@
-/**
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
- */
-export var PrefersColorScheme;
-(function (PrefersColorScheme) {
-    PrefersColorScheme["LIGHT"] = "(prefers-color-scheme: light)";
-    PrefersColorScheme["DARK"] = "(prefers-color-scheme: dark)";
-})(PrefersColorScheme || (PrefersColorScheme = {}));
-/**
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
- */
-export var PrefersReducedMotion;
-(function (PrefersReducedMotion) {
-    PrefersReducedMotion["NO_PREFERENCE"] = "(prefers-reduced-motion: no-preference)";
-    PrefersReducedMotion["REDUCE"] = "(prefers-reduced-motion: reduce)";
-})(PrefersReducedMotion || (PrefersReducedMotion = {}));
-export var Hover;
-(function (Hover) {
-    Hover["NONE"] = "(hover: none)";
-    // Some Samsung phones incorrectly report that they have "hover" even though they
-    // do not. Adding the pointer query correctly filters these phones out.
-    Hover["HOVER"] = "(hover: hover) and (pointer: fine)";
-})(Hover || (Hover = {}));
-export var MediaType;
-(function (MediaType) {
-    MediaType["PRINT"] = "print";
-    MediaType["SCREEN"] = "screen";
-})(MediaType || (MediaType = {}));
-export var MinHeight;
-(function (MinHeight) {
-    MinHeight["TALL"] = "(min-height: 40em)";
-})(MinHeight || (MinHeight = {}));
-export var MinWidth;
-(function (MinWidth) {
-    MinWidth["SMALL"] = "(min-width: 28em)";
-    MinWidth["MEDIUM"] = "(min-width: 50em)";
-    MinWidth["WIDE"] = "(min-width: 66em)";
-    MinWidth["X_WIDE"] = "(min-width: 80em)";
-    MinWidth["XX_WIDE"] = "(min-width: 140em)";
-})(MinWidth || (MinWidth = {}));
-export var DisplayMode;
-(function (DisplayMode) {
-    DisplayMode["STANDALONE"] = "(display-mode: standalone)";
-})(DisplayMode || (DisplayMode = {}));
-export var Pointer;
-(function (Pointer) {
-    Pointer["COARSE"] = "(pointer: coarse)";
-    Pointer["FINE"] = "(pointer: fine)";
-})(Pointer || (Pointer = {}));

package/dist/structs.d.ts

@@ -1,20 +0,0 @@
-export declare function currentUser(): import("superstruct").Struct<{
-    id: string;
-    email: string;
-    isVerified: boolean;
-    prefersScrollbarVisibility?: "ALWAYS" | undefined;
-}, {
-    id: import("superstruct").Struct<string, null>;
-    email: import("superstruct").Struct<string, null>;
-    isVerified: import("superstruct").Struct<boolean, null>;
-    prefersScrollbarVisibility: import("superstruct").Struct<"ALWAYS" | undefined, {
-        ALWAYS: "ALWAYS";
-    }>;
-}>;
-export declare function sessionInfo(): import("superstruct").Struct<{
-    expiresTs: number;
-    createdTs: number;
-}, {
-    expiresTs: import("superstruct").Struct<number, null>;
-    createdTs: import("superstruct").Struct<number, null>;
-}>;

package/dist/structs.js

@@ -1,15 +0,0 @@
-import { boolean, enums, number, object, optional, string } from "superstruct";
-export function currentUser() {
-    return object({
-        id: string(),
-        email: string(),
-        isVerified: boolean(),
-        prefersScrollbarVisibility: optional(enums(["ALWAYS"])),
-    });
-}
-export function sessionInfo() {
-    return object({
-        expiresTs: number(),
-        createdTs: number(),
-    });
-}

package/dist/types.js

@@ -1 +0,0 @@
-import { currentUser, sessionInfo } from "./structs.js";

package/dist/use-async-op.d.ts

@@ -1,6 +0,0 @@
-import { type AsyncOp } from "./async-op.js";
-export declare function useAsyncOp<T, E>(): {
-    op: AsyncOp<T, E>;
-    setSuccess: (value: T) => void;
-    setFailure: (failure: E) => void;
-};

package/dist/use-async-op.js

@@ -1,12 +0,0 @@
-import { useCallback, useState } from "react";
-import { Failure, Pending, Success } from "./async-op.js";
-export function useAsyncOp() {
-    const [op, setOp] = useState(new Pending());
-    const setSuccess = useCallback((value) => {
-        setOp(new Success(value));
-    }, []);
-    const setFailure = useCallback((failure) => {
-        setOp(new Failure(failure));
-    }, []);
-    return { op, setSuccess, setFailure };
-}

package/dist/use-document-background-color.d.ts

@@ -1,4 +0,0 @@
-/**
- * Sets document background color, reverting it to previous color on unmount.
- */
-export declare function useDocumentBackgroundColor(bodyColor: string): void;

package/dist/use-document-background-color.js

@@ -1,14 +0,0 @@
-import { useEffect } from "react";
-/**
- * Sets document background color, reverting it to previous color on unmount.
- */
-export function useDocumentBackgroundColor(bodyColor) {
-    useEffect(() => {
-        const style = window.document.documentElement.style;
-        const originalColor = style.backgroundColor;
-        style.backgroundColor = bodyColor;
-        return () => {
-            style.backgroundColor = originalColor;
-        };
-    });
-}

package/dist/use-form.d.ts

@@ -1,29 +0,0 @@
-import { type FormStoreState } from "@ariakit/react";
-import { Failure, Success } from "./async-op.ts";
-type Validator<T> = (value: T) => string | null;
-type MaybePromise<T> = T | Promise<T>;
-export declare function useForm<T extends object, R>(props: {
-    defaultValues: T;
-    validate?: {
-        [K in keyof T]?: Validator<T[K]>;
-    };
-    /**
-     * Handles form submission login.
-     *
-     * This function should return a Success or Failure. Failures should always contain a string
-     * which will be used as the form error message.
-     */
-    onSubmit: (state: FormStoreState<T>) => MaybePromise<Success<R> | Failure<string>>;
-    /**
-     * If submission was successful (i.e. onSubmit returned a Success), will be run to perform any
-     * side-effect necessary.
-     *
-     * Typically this is used for navigation on mutating some local state.
-     */
-    onSuccess?: (value: R, state: FormStoreState<T>) => MaybePromise<void>;
-}): {
-    form: import("@ariakit/react").FormStore<T>;
-    submitName: string;
-    op: Success<R> | Failure<string> | null;
-};
-export {};

package/dist/use-form.js

@@ -1,33 +0,0 @@
-import { useFormStore } from "@ariakit/react";
-import { useState } from "react";
-import { Failure, Success } from "./async-op.js";
-export function useForm(props) {
-    const submitName = "submit";
-    const [op, setOp] = useState(null);
-    const form = useFormStore({
-        defaultValues: props.defaultValues,
-    });
-    form.useSubmit(async (state) => {
-        const submitOp = await props.onSubmit(state);
-        if (submitOp.isFailure) {
-            form.setError(submitName, submitOp.failure);
-        }
-        if (submitOp.isSuccess) {
-            await props.onSuccess?.(submitOp.value, state);
-        }
-        setOp(submitOp);
-    });
-    form.useValidate((state) => {
-        if (props.validate) {
-            const entries = Object.entries(props.validate);
-            for (const [key, validate] of entries) {
-                const value = state.values[key];
-                const message = validate(value);
-                if (message) {
-                    form.setError(key, message);
-                }
-            }
-        }
-    });
-    return { form, submitName, op };
-}

package/dist/use-is-installed.d.ts

@@ -1,8 +0,0 @@
-/**
- * Checks whether the app is installed.
- *
- * Note that this doesn't check whether the app is installed on the device at
- * all, only whether the currently running process is within an installed window
- * or running within a browser.
- */
-export declare function useIsInstalled(): boolean;

package/dist/use-media-query.d.ts

@@ -1 +0,0 @@
-export declare function useMediaQuery(query: string): boolean;

package/dist/use-media-query.js

@@ -1,15 +0,0 @@
-import { useState, useEffect } from "react";
-export function useMediaQuery(query) {
-    const [isMatch, setMatch] = useState(window.matchMedia(query).matches);
-    useEffect(() => {
-        const mql = window.matchMedia(query);
-        const handleChange = ({ matches }) => {
-            setMatch(matches);
-        };
-        mql.addEventListener("change", handleChange);
-        return () => {
-            mql.removeEventListener("change", handleChange);
-        };
-    }, [query]);
-    return isMatch;
-}

package/dist/use-reverting-state.d.ts

@@ -1,5 +0,0 @@
-/**
- * Sets a state that will automatically revert to null after specified number
- * of milliseconds.
- */
-export declare function useRevertingState<T>(initialState: T, revertAfterMs: number): readonly [T | null, import("react").Dispatch<import("react").SetStateAction<T | null>>];

package/dist/use-reverting-state.js

@@ -1,26 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-/**
- * Sets a state that will automatically revert to null after specified number
- * of milliseconds.
- */
-export function useRevertingState(initialState, revertAfterMs) {
-    const [state, setState] = useState(initialState);
-    const timeoutRef = useRef(null);
-    useEffect(() => {
-        const timeoutId = timeoutRef.current;
-        if (timeoutId) {
-            clearInterval(timeoutId);
-        }
-        if (state) {
-            timeoutRef.current = setTimeout(() => {
-                setState(null);
-            }, revertAfterMs);
-        }
-        return () => {
-            if (timeoutId) {
-                clearTimeout(timeoutId);
-            }
-        };
-    }, [revertAfterMs, state]);
-    return [state, setState];
-}

package/dist/use-scroll-restoration.d.ts

@@ -1,25 +0,0 @@
-/**
- * Handles scroll restoration on window.
- *
- * This hook behaves a little differently than the default browser scroll
- * restoration. This is due to limitations of Wouter (our router of choice)
- * as well the need to make the app feel more app-like.
- *
- * Every scroll position is remembered however the user has got to it (we
- * don't differentiate between new entries in browser history and back
- * navigation), but they are only restored if the user last visited the
- * location less than 60 minutes ago.
- */
-export declare function useScrollRestoration(
-/**
- * The current path, provided by your router of choice.
- */
-pathname: string, options?: {
-    /**
-     * A list of paths where scroll restoration should never be performed.
-     *
-     * This list should have stable identity for optimal performance. Make
-     * sure to use `useMemo` or define the list in module scope.
-     */
-    neverRestore?: string[];
-}): void;

package/dist/use-scroll-restoration.js

@@ -1,67 +0,0 @@
-import { useEffect, useLayoutEffect, useMemo } from "react";
-const scrollPositions = new Map();
-/**
- * Handles scroll restoration on window.
- *
- * This hook behaves a little differently than the default browser scroll
- * restoration. This is due to limitations of Wouter (our router of choice)
- * as well the need to make the app feel more app-like.
- *
- * Every scroll position is remembered however the user has got to it (we
- * don't differentiate between new entries in browser history and back
- * navigation), but they are only restored if the user last visited the
- * location less than 60 minutes ago.
- */
-export function useScrollRestoration(
-/**
- * The current path, provided by your router of choice.
- */
-pathname, options) {
-    // Standardise pathname, making sure that paths ending with and without
-    // a slash are treated equally
-    const normalizedPathname = pathname.replace(/\/$/, "") || "/";
-    const neverRestore = useMemo(() => new Set(options?.neverRestore), [options?.neverRestore]);
-    // Record scroll position for given pathname on pushState/replaceState.
-    useEffect(() => {
-        const handleEvent = () => {
-            const x = window.scrollX;
-            const y = window.scrollY;
-            scrollPositions.set(normalizedPathname, [Date.now(), x, y]);
-            console.info(`Set scroll position for '${normalizedPathname}' (x: ${x}, y: ${y}).`);
-        };
-        // These events are provided by Wouter. They are not native browser events!
-        window.addEventListener("pushState", handleEvent);
-        window.addEventListener("replaceState", handleEvent);
-        return () => {
-            window.removeEventListener("pushState", handleEvent);
-            window.removeEventListener("replaceState", handleEvent);
-        };
-    }, [normalizedPathname]);
-    // Restore scroll position if last visit was less than 60 minutes ago.
-    useLayoutEffect(() => {
-        const maxDiff = 60000 * 60; // 60 minutes
-        const coordinates = scrollPositions.get(normalizedPathname);
-        if (coordinates) {
-            if (!neverRestore.has(normalizedPathname)) {
-                const now = Date.now();
-                const [ts, x, y] = coordinates;
-                if (now - ts < maxDiff) {
-                    window.scrollTo(x, y);
-                    console.info(`Restoring scroll position for '${normalizedPathname}' (x: ${x}, y: ${y}).`);
-                }
-                else {
-                    window.scrollTo(0, 0);
-                    console.info(`Not restoring scroll position for '${normalizedPathname}'. Last visit >60 min ago.`);
-                }
-            }
-            else {
-                window.scrollTo(0, 0);
-                console.info(`Not restoring scroll position for '${normalizedPathname}'. Page is set never to restore.`);
-            }
-        }
-        else {
-            window.scrollTo(0, 0);
-            console.info(`Not restoring scroll position for '${normalizedPathname}'. Page not visited yet.`);
-        }
-    }, [normalizedPathname]);
-}