@bgord/ui 0.8.0 → 0.8.2

package/dist/components/dialog.d.ts

@@ -1,6 +1,5 @@
-import type React from "react";
-import * as hooks from "../hooks";
-export type DialogPropsType = hooks.UseToggleReturnType & React.JSX.IntrinsicElements["dialog"] & {
+import { type UseToggleReturnType } from "../hooks";
+export type DialogPropsType = UseToggleReturnType & React.JSX.IntrinsicElements["dialog"] & {
     locked?: boolean;
 };
 export declare function Dialog(props: DialogPropsType): import("react/jsx-runtime").JSX.Element;

package/dist/components/dialog.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { extractUseToggle, useClickOutside, useScrollLock, useShortcuts, } from "../hooks";
+import { noop } from "../services/noop";
+export function Dialog(props) {
+    const { locked: _locked, ..._props } = props;
+    const locked = _locked ?? false;
+    const { toggle: dialog, rest } = extractUseToggle(_props);
+    const ref = useRef(null);
+    useEffect(() => {
+        if (props.on)
+            ref.current?.showModal();
+        else
+            ref.current?.close();
+    }, [props.on]);
+    useShortcuts({ Escape: locked ? noop : dialog.disable });
+    useScrollLock(props.on);
+    useClickOutside(ref, locked ? noop : dialog.disable);
+    return (_jsx("dialog", { ref: ref, tabIndex: 0, "aria-modal": "true", "data-disp": props.on ? "flex" : "none", "data-dir": "column", "data-mx": "auto", "data-p": "5", "data-position": "fixed", "data-z": "2", "data-bg": "neutral-900", "data-br": "xs", "data-backdrop": "stronger", "data-animation": "grow-fade-in", ...rest }));
+}

package/dist/components/index.js

@@ -0,0 +1 @@
+export * from "./dialog";

package/dist/hooks/index.d.ts

@@ -5,6 +5,7 @@ export * from "./use-file";
 export * from "./use-focus-shortcut";
 export * from "./use-hover";
 export * from "./use-meta-enter-submit";
+export * from "./use-mutation";
 export * from "./use-number-field";
 export * from "./use-scroll-lock";
 export * from "./use-shortcuts";

package/dist/hooks/index.js

@@ -0,0 +1,13 @@
+export * from "./use-click-outside";
+export * from "./use-date-field";
+export * from "./use-exit-action";
+export * from "./use-file";
+export * from "./use-focus-shortcut";
+export * from "./use-hover";
+export * from "./use-meta-enter-submit";
+export * from "./use-mutation";
+export * from "./use-number-field";
+export * from "./use-scroll-lock";
+export * from "./use-shortcuts";
+export * from "./use-text-field";
+export * from "./use-toggle";

package/dist/hooks/use-click-outside.js

@@ -0,0 +1,31 @@
+import { useEffect } from "react";
+export function useClickOutside(ref, handler) {
+    useEffect(() => {
+        if (typeof document === "undefined")
+            return; // SSR-guard
+        function listener(event) {
+            const element = ref.current;
+            if (!element)
+                return;
+            if (element.contains(event.target)) {
+                if (event.target === element) {
+                    const { left, right, top, bottom } = element.getBoundingClientRect();
+                    const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
+                    const clientY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
+                    const targetsElement = clientX >= left && clientX <= right && clientY >= top && clientY <= bottom;
+                    if (targetsElement)
+                        return;
+                }
+                else
+                    return;
+            }
+            handler(event);
+        }
+        document.addEventListener("mousedown", listener);
+        document.addEventListener("touchstart", listener);
+        return () => {
+            document.removeEventListener("mousedown", listener);
+            document.removeEventListener("touchstart", listener);
+        };
+    }, [ref, handler]);
+}

package/dist/hooks/use-date-field.js

@@ -0,0 +1,36 @@
+import { useState } from "react";
+import { DateField } from "../services/date-field";
+export function useDateField(config) {
+    const defaultValue = new DateField(config.defaultValue);
+    const [value, setValue] = useState(defaultValue.get());
+    const [dom, setDom] = useState(DateField.isEmpty(defaultValue.get()) ? "" : defaultValue.get());
+    const setCurrentValue = (next) => {
+        const date = new DateField(next).get();
+        setValue(date);
+        setDom(DateField.isEmpty(date) ? "" : String(date));
+    };
+    const onChange = (event) => {
+        const element = event.currentTarget;
+        const value = element.value;
+        setDom(value);
+        if (value === "")
+            return setValue(DateField.EMPTY);
+        if (!/^\d{4}-\d{2}-\d{2}$/.test(value))
+            return;
+        if (!element.validity.valid)
+            return;
+        setValue(value);
+    };
+    return {
+        defaultValue: defaultValue.get(),
+        value,
+        set: setCurrentValue,
+        handleChange: onChange,
+        clear: () => setCurrentValue(defaultValue.get()),
+        label: { props: { htmlFor: config.name } },
+        input: { props: { id: config.name, name: config.name, value: dom, onChange } },
+        changed: !DateField.compare(value, defaultValue.get()),
+        unchanged: DateField.compare(value, defaultValue.get()),
+        empty: DateField.isEmpty(value),
+    };
+}

package/dist/hooks/use-exit-action.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 type UseExitActionAnimationType = string;
 type UseExitActionOptionsType = {
     action: () => Promise<unknown>;

package/dist/hooks/use-exit-action.js

@@ -0,0 +1,23 @@
+import { useState } from "react";
+var UseExitActionPhase;
+(function (UseExitActionPhase) {
+    UseExitActionPhase["idle"] = "idle";
+    UseExitActionPhase["exiting"] = "exiting";
+    UseExitActionPhase["gone"] = "gone";
+})(UseExitActionPhase || (UseExitActionPhase = {}));
+export function useExitAction(options) {
+    const [phase, setPhase] = useState(UseExitActionPhase.idle);
+    const trigger = (event) => {
+        event.preventDefault();
+        if (phase === "idle")
+            setPhase(UseExitActionPhase.exiting);
+    };
+    const onAnimationEnd = async (event) => {
+        if (event.animationName !== options.animation)
+            return;
+        setPhase(UseExitActionPhase.gone);
+        await options.action();
+    };
+    const attach = phase === "exiting" ? { "data-animation": options.animation, onAnimationEnd } : undefined;
+    return { visible: phase !== "gone", attach, trigger };
+}

package/dist/hooks/use-file.js

@@ -0,0 +1,52 @@
+import { useMemo, useState } from "react";
+export var UseFileState;
+(function (UseFileState) {
+    UseFileState["idle"] = "idle";
+    UseFileState["selected"] = "selected";
+    UseFileState["error"] = "error";
+})(UseFileState || (UseFileState = {}));
+export function useFile(name, config) {
+    const maxSizeBytes = config?.maxSizeBytes ?? Number.POSITIVE_INFINITY;
+    const [key, setKey] = useState(0);
+    const [state, setState] = useState(UseFileState.idle);
+    const [file, setFile] = useState(null);
+    function selectFile(event) {
+        const files = event.currentTarget.files;
+        if (!files?.[0])
+            return;
+        const file = files[0];
+        if (file.size > maxSizeBytes) {
+            setState(UseFileState.error);
+            return;
+        }
+        if (!config.mimeTypes.includes(file.type)) {
+            setState(UseFileState.error);
+            return;
+        }
+        setFile(file);
+        setState(UseFileState.selected);
+        return file;
+    }
+    function clearFile() {
+        setKey((key) => key + 1);
+        setFile(null);
+        setState(UseFileState.idle);
+    }
+    const preview = useMemo(() => (file ? URL.createObjectURL(file) : undefined), [file]);
+    function matches(states) {
+        return states.some((given) => given === state);
+    }
+    const props = {
+        actions: { selectFile, clearFile },
+        input: { props: { id: name, name, multiple: false, accept: config.mimeTypes.join(",") }, key },
+        label: { props: { htmlFor: name } },
+        matches,
+    };
+    if (state === UseFileState.idle) {
+        return { data: null, isError: false, isIdle: true, isSelected: false, state, ...props };
+    }
+    if (state === UseFileState.selected) {
+        return { data: file, isError: false, isIdle: false, isSelected: true, preview, state, ...props };
+    }
+    return { data: null, isError: true, isIdle: false, isSelected: false, state, ...props };
+}

package/dist/hooks/use-focus-shortcut.js

@@ -0,0 +1,12 @@
+import { useCallback, useMemo, useRef } from "react";
+import { useShortcuts } from "./use-shortcuts";
+export function useFocusKeyboardShortcut(shortcut) {
+    const ref = useRef(null);
+    const handleFocus = useCallback(() => {
+        if (ref.current) {
+            ref.current.focus();
+        }
+    }, []);
+    useShortcuts({ [shortcut]: handleFocus });
+    return useMemo(() => ({ ref }), []);
+}

package/dist/hooks/use-hover.js

@@ -0,0 +1,22 @@
+import { useCallback, useRef } from "react";
+import { useToggle } from "./use-toggle";
+export function useHover(config) {
+    const enabled = config?.enabled ?? true;
+    const toggle = useToggle({ name: "_internal" });
+    const element = useRef(null);
+    const enterEvent = typeof window !== "undefined" && "PointerEvent" in window ? "pointerenter" : "mouseenter";
+    const leaveEvent = typeof window !== "undefined" && "PointerEvent" in window ? "pointerleave" : "mouseleave";
+    const ref = useCallback((node) => {
+        const previous = element.current;
+        if (previous) {
+            previous.removeEventListener(enterEvent, toggle.enable);
+            previous.removeEventListener(leaveEvent, toggle.disable);
+        }
+        element.current = node;
+        if (node && enabled) {
+            node.addEventListener(enterEvent, toggle.enable);
+            node.addEventListener(leaveEvent, toggle.disable);
+        }
+    }, [enterEvent, leaveEvent, enabled, toggle.enable, toggle.disable]);
+    return { attach: { ref }, hovering: toggle.on && enabled };
+}

package/dist/hooks/use-meta-enter-submit.js

@@ -0,0 +1,10 @@
+import { useCallback } from "react";
+export function useMetaEnterSubmit() {
+    const onKeyDown = useCallback((event) => {
+        if (!event.metaKey || event.key !== "Enter")
+            return;
+        event.preventDefault();
+        event.currentTarget.form?.requestSubmit();
+    }, []);
+    return { onKeyDown };
+}

package/dist/hooks/use-mutation.d.ts

@@ -0,0 +1,26 @@
+export declare enum MutationState {
+    idle = "idle",
+    loading = "loading",
+    error = "error",
+    done = "done"
+}
+type MutationErrorType = unknown;
+type UseMutationOptions = {
+    perform: () => Promise<Response>;
+    onSuccess?: (response: Response) => void | Promise<void>;
+    onError?: (error: MutationErrorType) => void | Promise<void>;
+    autoResetDelayMs?: number;
+};
+type UseMutationReturnType = {
+    state: MutationState;
+    error: MutationErrorType;
+    isIdle: boolean;
+    isLoading: boolean;
+    isError: boolean;
+    isDone: boolean;
+    mutate: () => Promise<Response | undefined>;
+    handleSubmit: React.FormEventHandler<HTMLFormElement>;
+    reset: () => void;
+};
+export declare function useMutation(options: UseMutationOptions): UseMutationReturnType;
+export {};

package/dist/hooks/use-mutation.js

@@ -0,0 +1,57 @@
+import { useCallback, useState } from "react";
+export var MutationState;
+(function (MutationState) {
+    MutationState["idle"] = "idle";
+    MutationState["loading"] = "loading";
+    MutationState["error"] = "error";
+    MutationState["done"] = "done";
+})(MutationState || (MutationState = {}));
+export function useMutation(options) {
+    const [state, setState] = useState(MutationState.idle);
+    const [error, setError] = useState(null);
+    const reset = useCallback(() => {
+        setError(null);
+        setState(MutationState.idle);
+    }, []);
+    const mutate = useCallback(async () => {
+        if (state === MutationState.loading)
+            return;
+        setError(null);
+        setState(MutationState.loading);
+        try {
+            const response = await options.perform();
+            if (!response.ok) {
+                setState(MutationState.error);
+                setError(null);
+                await options.onError?.(null);
+                return;
+            }
+            setState(MutationState.done);
+            await options.onSuccess?.(response);
+            if (options.autoResetDelayMs) {
+                setTimeout(() => setState(MutationState.idle), options.autoResetDelayMs);
+            }
+            return response;
+        }
+        catch (error) {
+            setState(MutationState.error);
+            setError(error);
+            await options.onError?.(error);
+        }
+    }, [state, options]);
+    const handleSubmit = useCallback(async (event) => {
+        event.preventDefault();
+        await mutate();
+    }, [mutate]);
+    return {
+        state,
+        error,
+        isIdle: state === MutationState.idle,
+        isLoading: state === MutationState.loading,
+        isError: state === MutationState.error,
+        isDone: state === MutationState.done,
+        mutate,
+        handleSubmit,
+        reset,
+    };
+}

package/dist/hooks/use-number-field.js

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { NumberField } from "../services/number-field";
+export function useNumberField(config) {
+    const defaultValue = new NumberField(config.defaultValue);
+    const [value, setValue] = useState(defaultValue.get());
+    const [dom, setDom] = useState(NumberField.isEmpty(defaultValue.get()) ? "" : String(defaultValue.get()));
+    const setCurrentValue = (next) => {
+        const number = new NumberField(next).get();
+        setValue(number);
+        setDom(NumberField.isEmpty(number) ? "" : String(number));
+    };
+    const onChange = (event) => {
+        const element = event.currentTarget;
+        const dom = element.value;
+        setDom(dom);
+        if (dom === "")
+            return setValue(NumberField.EMPTY);
+        // Validating before setting the state value
+        // to avoid undefined when typing 1. when trying to input 1.5
+        const value = element.valueAsNumber;
+        if (!Number.isFinite(value))
+            return;
+        if (!event.currentTarget.validity.valid)
+            return;
+        setValue(value);
+    };
+    return {
+        defaultValue: defaultValue.get(),
+        value,
+        set: setCurrentValue,
+        handleChange: onChange,
+        clear: () => setCurrentValue(defaultValue.get()),
+        label: { props: { htmlFor: config.name } },
+        input: { props: { id: config.name, name: config.name, value: dom, onChange } },
+        changed: !NumberField.compare(value, defaultValue.get()),
+        unchanged: NumberField.compare(value, defaultValue.get()),
+        empty: NumberField.isEmpty(value),
+    };
+}

package/dist/hooks/use-scroll-lock.js

@@ -0,0 +1,13 @@
+import { useEffect } from "react";
+export function useScrollLock(enabled = true) {
+    useEffect(() => {
+        if (typeof document === "undefined")
+            return;
+        const original = document.body.style.overflow;
+        if (enabled)
+            document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.overflow = original;
+        };
+    }, [enabled]);
+}

package/dist/hooks/use-shortcuts.js

@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+import { tinykeys } from "tinykeys";
+export function useShortcuts(config, options) {
+    const enabled = options?.enabled ?? true;
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const unsubscribe = tinykeys(window, config);
+        return () => unsubscribe();
+    }, [config, enabled]);
+}

package/dist/hooks/use-text-field.js

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+import { TextField } from "../services/text-field";
+export function useTextField(config) {
+    const defaultValue = new TextField(config.defaultValue);
+    const [value, setValue] = useState(defaultValue.get());
+    const setCurrentValue = (next) => setValue(new TextField(next).get());
+    const onChange = (event) => setCurrentValue(event.currentTarget.value);
+    useEffect(() => {
+        setCurrentValue(defaultValue.get());
+    }, [config.defaultValue]);
+    return {
+        defaultValue: defaultValue.get(),
+        value,
+        set: setCurrentValue,
+        handleChange: onChange,
+        clear: () => setCurrentValue(defaultValue.get()),
+        label: { props: { htmlFor: config.name } },
+        input: {
+            props: {
+                id: config.name,
+                name: config.name,
+                value: TextField.isEmpty(value) ? "" : value,
+                onChange,
+            },
+        },
+        changed: !TextField.compare(value, defaultValue.get()),
+        unchanged: TextField.compare(value, defaultValue.get()),
+        empty: TextField.isEmpty(value),
+    };
+}

package/dist/hooks/use-toggle.js

@@ -0,0 +1,22 @@
+import { useState } from "react";
+export function useToggle({ name, defaultValue = false }) {
+    const [on, setOn] = useState(defaultValue);
+    const enable = () => setOn(true);
+    const disable = () => setOn(false);
+    const toggle = () => setOn((v) => !v);
+    const off = !on;
+    const props = {
+        controller: {
+            "aria-expanded": on ? "true" : "false",
+            "aria-controls": name,
+            role: "button",
+            tabIndex: 0,
+        },
+        target: { id: name, role: "region", "aria-hidden": on ? "false" : "true" },
+    };
+    return { on, off, enable, disable, toggle, props };
+}
+export function extractUseToggle(_props) {
+    const { on, off, enable, disable, toggle, props, ...rest } = _props;
+    return { toggle: { on, off, enable, disable, toggle, props }, rest: rest };
+}

package/dist/index.js

@@ -1 +1,3 @@
-import{useEffect as Z,useRef as G}from"react";import{useEffect as A}from"react";function R(e,t){A(()=>{if(typeof document>"u")return;function n(r){let o=e.current;if(!o)return;if(o.contains(r.target))if(r.target===o){let{left:i,right:a,top:s,bottom:l}=o.getBoundingClientRect(),p=r instanceof MouseEvent?r.clientX:r.touches[0].clientX,y=r instanceof MouseEvent?r.clientY:r.touches[0].clientY;if(p>=i&&p<=a&&y>=s&&y<=l)return}else return;t(r)}return document.addEventListener("mousedown",n),document.addEventListener("touchstart",n),()=>{document.removeEventListener("mousedown",n),document.removeEventListener("touchstart",n)}},[e,t])}import{useState as w}from"react";class m{static EMPTY=void 0;value=m.EMPTY;constructor(e){this.value=m.isEmpty(e)?m.EMPTY:e}get(){return this.value}isEmpty(){return m.isEmpty(this.value)}static isEmpty(e){return e===void 0||e===null||e===""}static compare(e,t){if(m.isEmpty(e)&&m.isEmpty(t))return!0;return e===t}}function fe(e){let t=new m(e.defaultValue),[n,r]=w(t.get()),[o,i]=w(m.isEmpty(t.get())?"":t.get()),a=(l)=>{let p=new m(l).get();r(p),i(m.isEmpty(p)?"":String(p))},s=(l)=>{let p=l.currentTarget,y=p.value;if(i(y),y==="")return r(m.EMPTY);if(!/^\d{4}-\d{2}-\d{2}$/.test(y))return;if(!p.validity.valid)return;r(y)};return{defaultValue:t.get(),value:n,set:a,handleChange:s,clear:()=>a(t.get()),label:{props:{htmlFor:e.name}},input:{props:{id:e.name,name:e.name,value:o,onChange:s}},changed:!m.compare(n,t.get()),unchanged:m.compare(n,t.get()),empty:m.isEmpty(n)}}import M from"react";function he(e){let[t,n]=M.useState("idle"),r=(a)=>{if(a.preventDefault(),t==="idle")n("exiting")},o=async(a)=>{if(a.animationName!==e.animation)return;n("gone"),await e.action()},i=t==="exiting"?{"data-animation":e.animation,onAnimationEnd:o}:void 0;return{visible:t!=="gone",attach:i,trigger:r}}import{useMemo as H,useState as F}from"react";var k;((r)=>{r.idle="idle";r.selected="selected";r.error="error"})(k||={});function Fe(e,t){let n=t?.maxSizeBytes??Number.POSITIVE_INFINITY,[r,o]=F(0),[i,a]=F("idle"),[s,l]=F(null);function p(f){let x=f.currentTarget.files;if(!x?.[0])return;let h=x[0];if(h.size>n){a("error");return}if(!t.mimeTypes.includes(h.type)){a("error");return}return l(h),a("selected"),h}function y(){o((f)=>f+1),l(null),a("idle")}let T=H(()=>s?URL.createObjectURL(s):void 0,[s]);function L(f){return f.some((x)=>x===i)}let U={actions:{selectFile:p,clearFile:y},input:{props:{id:e,name:e,multiple:!1,accept:t.mimeTypes.join(",")},key:r},label:{props:{htmlFor:e}},matches:L};if(i==="idle")return{data:null,isError:!1,isIdle:!0,isSelected:!1,state:i,...U};if(i==="selected")return{data:s,isError:!1,isIdle:!1,isSelected:!0,preview:T,state:i,...U};return{data:null,isError:!0,isIdle:!1,isSelected:!1,state:i,...U}}import{useCallback as W,useMemo as q,useRef as X}from"react";import{useEffect as O}from"react";import{tinykeys as P}from"tinykeys";function E(e,t){let n=t?.enabled??!0;O(()=>{if(!n)return;let r=P(window,e);return()=>r()},[e,n])}function ve(e){let t=X(null),n=W(()=>{if(t.current)t.current.focus()},[]);return E({[e]:n}),q(()=>({ref:t}),[])}import{useCallback as K,useRef as Y}from"react";import{useState as B}from"react";function D({name:e,defaultValue:t=!1}){let[n,r]=B(t);return{on:n,off:!n,enable:()=>r(!0),disable:()=>r(!1),toggle:()=>r((p)=>!p),props:{controller:{"aria-expanded":n?"true":"false","aria-controls":e,role:"button",tabIndex:0},target:{id:e,role:"region","aria-hidden":n?"false":"true"}}}}function C(e){let{on:t,off:n,enable:r,disable:o,toggle:i,props:a,...s}=e;return{toggle:{on:t,off:n,enable:r,disable:o,toggle:i,props:a},rest:s}}function He(e){let t=e?.enabled??!0,n=D({name:"_internal"}),r=Y(null),o=typeof window<"u"&&"PointerEvent"in window?"pointerenter":"mouseenter",i=typeof window<"u"&&"PointerEvent"in window?"pointerleave":"mouseleave";return{attach:{ref:K((s)=>{let l=r.current;if(l)l.removeEventListener(o,n.enable),l.removeEventListener(i,n.disable);if(r.current=s,s&&t)s.addEventListener(o,n.enable),s.addEventListener(i,n.disable)},[o,i,t,n.enable,n.disable])},hovering:n.on&&t}}import{useCallback as $}from"react";function Pe(){return{onKeyDown:$((t)=>{if(!t.metaKey||t.key!=="Enter")return;t.preventDefault(),t.currentTarget.form?.requestSubmit()},[])}}import{useState as v}from"react";class d{static EMPTY=void 0;value=d.EMPTY;constructor(e){this.value=d.isEmpty(e)?d.EMPTY:e}get(){return this.value}isEmpty(){return d.isEmpty(this.value)}static isEmpty(e){return e===void 0||e===null||Number.isNaN(e)}static compare(e,t){if(d.isEmpty(e)&&d.isEmpty(t))return!0;return e===t}}function Ke(e){let t=new d(e.defaultValue),[n,r]=v(t.get()),[o,i]=v(d.isEmpty(t.get())?"":String(t.get())),a=(l)=>{let p=new d(l).get();r(p),i(d.isEmpty(p)?"":String(p))},s=(l)=>{let p=l.currentTarget,y=p.value;if(i(y),y==="")return r(d.EMPTY);let T=p.valueAsNumber;if(!Number.isFinite(T))return;if(!l.currentTarget.validity.valid)return;r(T)};return{defaultValue:t.get(),value:n,set:a,handleChange:s,clear:()=>a(t.get()),label:{props:{htmlFor:e.name}},input:{props:{id:e.name,name:e.name,value:o,onChange:s}},changed:!d.compare(n,t.get()),unchanged:d.compare(n,t.get()),empty:d.isEmpty(n)}}import{useEffect as J}from"react";function V(e=!0){J(()=>{if(typeof document>"u")return;let t=document.body.style.overflow;if(e)document.body.style.overflow="hidden";return()=>{document.body.style.overflow=t}},[e])}import{useEffect as _,useState as j}from"react";class u{static EMPTY=void 0;value=u.EMPTY;constructor(e){this.value=u.isEmpty(e)?u.EMPTY:e}get(){return this.value}isEmpty(){return u.isEmpty(this.value)}static isEmpty(e){return e===void 0||e===""||e===null}static compare(e,t){if(u.isEmpty(e)&&u.isEmpty(t))return!0;return e===t}}function Ze(e){let t=new u(e.defaultValue),[n,r]=j(t.get()),o=(a)=>r(new u(a).get()),i=(a)=>o(a.currentTarget.value);return _(()=>{o(t.get())},[e.defaultValue]),{defaultValue:t.get(),value:n,set:o,handleChange:i,clear:()=>o(t.get()),label:{props:{htmlFor:e.name}},input:{props:{id:e.name,name:e.name,value:u.isEmpty(n)?"":n,onChange:i}},changed:!u.compare(n,t.get()),unchanged:u.compare(n,t.get()),empty:u.isEmpty(n)}}function g(){}import{jsxDEV as N}from"react/jsx-dev-runtime";function ut(e){let t=e.locked??!1,{toggle:n,rest:r}=C(e),o=G(null);return Z(()=>{if(e.on)o.current?.showModal();else o.current?.close()},[e.on]),E({Escape:t?g:n.disable}),V(e.on),R(o,t?g:n.disable),N("dialog",{ref:o,tabIndex:0,"aria-modal":"true","data-disp":e.on?"flex":"none","data-dir":"column","data-mx":"auto","data-p":"5","data-position":"fixed","data-z":"2","data-bg":"neutral-900","data-br":"xs","data-backdrop":"stronger","data-animation":"grow-fade-in",...r},void 0,!1,void 0,this)}var xt={email:{inputMode:"email",autoComplete:"email",autoCapitalize:"none",spellCheck:"false"},password:{new:{autoComplete:"new-password"},current:{autoComplete:"current-password"}},off:{autoComplete:"off",spellCheck:!1}};class Q{static async copy(e){let t=e.onSuccess??g;if(!navigator.clipboard)return;await navigator.clipboard.writeText(e.text),t()}}import ee from"js-cookie";class te{static extractFrom(e){return e.headers.get("cookie")??""}static set(e,t){ee.set(e,t)}}class ne{static fromRevision(e){return{"if-match":String(e)}}}function Rt(e){return function(){for(let t of e)t()}}class re{static allUnchanged(e){return e.every((t)=>t.unchanged)}static allEmpty(e){return e.every((t)=>t.empty)}static anyEmpty(e){return e.some((t)=>t.empty)}static anyUnchanged(e){return e.some((t)=>t.unchanged)}static anyChanged(e){return e.some((t)=>t.changed)}}class oe{static input(e){let t=e.required??!0;if(e.min&&!e.max)return{pattern:`.{${e.min}}`,required:t};if(e.min&&e.max)return{pattern:`.{${e.min},${e.max}}`,required:t};if(!e.min&&e.max)return{pattern:`.{,${e.max}}`,required:t};return{pattern:void 0,required:t}}static textarea(e){let t=e.required??!0;if(e.min&&!e.max)return{minLength:e.min,required:t};if(e.min&&e.max)return{minLength:e.min,maxLength:e.max,required:t};if(!e.min&&e.max)return{maxLength:e.max,required:t};return{required:t}}static exact(e){let t=e.required??!0;return{pattern:e.text,required:t}}static date={min:{today:()=>new Date().toISOString().split("T")[0],tomorrow:()=>{let e=new Date;return new Date(e.setDate(e.getDate()+1)).toISOString().split("T")[0]},yesterday:()=>{let e=new Date;return new Date(e.setDate(e.getDate()-1)).toISOString().split("T")[0]}},max:{today:()=>new Date().toISOString().split("T")[0],tomorrow:()=>{let e=new Date;return new Date(e.setDate(e.getDate()+1)).toISOString().split("T")[0]},yesterday:()=>{let e=new Date;return new Date(e.setDate(e.getDate()-1)).toISOString().split("T")[0]}}}}function vt(){if(typeof window>"u")return;return window}var It=(e)=>[{rel:"preload",as:"style",href:e},{rel:"stylesheet",href:e}],Lt=(e)=>({type:"module",src:e}),At=[{charSet:"utf-8"},{name:"viewport",content:"width=device-width, initial-scale=1"}];import{polishPlurals as ie}from"polish-plurals";function I(e){if(e.language==="en"){let t=e.plural??`${e.singular}s`;if(e.value===1)return e.singular;return t}if(e.language==="pl"){let t=e.value??1;if(t===1)return e.singular;return ie(e.singular,String(e.plural),String(e.genitive),t)}return console.warn(`[@bgord/frontend] missing pluralization function for language: ${e.language}.`),e.singular}function Ot(e=12){return{times(t){let n=e*t,r={height:{height:c(n)},minHeight:{minHeight:c(n)},maxHeight:{maxHeight:c(n)},width:{width:c(n)},minWidth:{minWidth:c(n)},maxWidth:{maxWidth:c(n)},square:{height:c(n),width:c(n)}},o={height:{style:{height:c(n)}},minHeight:{style:{minHeight:c(n)}},maxHeight:{style:{maxHeight:c(n)}},width:{style:{width:c(n)}},minWidth:{style:{minWidth:c(n)}},maxWidth:{style:{maxWidth:c(n)}},square:{style:{height:c(n),width:c(n)}}};return{px:c(n),raw:n,style:o,...r}}}}function c(e){return`${e}px`}class ae{static get(){return{"time-zone-offset":new Date().getTimezoneOffset().toString()}}}import{createContext as se,use as b,useCallback as le}from"react";var S=se({translations:{},language:"en",supportedLanguages:{en:"en"}});function Bt(){let e=b(S);if(e===void 0)throw Error("useTranslations must be used within the TranslationsContext");return le((n,r)=>{let o=e.translations[n];if(!o)return console.warn(`[@bgord/ui] missing translation for key: ${n}`),n;if(!r)return o;return Object.entries(r).reduce((i,[a,s])=>{let l=new RegExp(`{{${a}}}`,"g");return i.replace(l,String(s))},o)},[e.translations])}function pe(){let e=b(S);if(e===void 0)throw Error("useLanguage must be used within the TranslationsContext");return e.language}function Kt(){let e=b(S);if(e===void 0)throw Error("useSupportedLanguages must be used within the TranslationsContext");return e.supportedLanguages}function Yt(){let e=pe();return(t)=>I({...t,language:e})}class ce{static fromRevision(e){return{"if-match":`W/${e}`}}}export{Bt as useTranslations,D as useToggle,Ze as useTextField,Kt as useSupportedLanguages,E as useShortcuts,V as useScrollLock,Yt as usePluralize,Ke as useNumberField,Pe as useMetaEnterSubmit,pe as useLanguage,He as useHover,ve as useFocusKeyboardShortcut,Fe as useFile,he as useExitAction,fe as useDateField,R as useClickOutside,I as pluralize,g as noop,vt as getSafeWindow,C as extractUseToggle,Rt as exec,ce as WeakETag,k as UseFileState,S as TranslationsContext,ae as TimeZoneOffset,u as TextField,Ot as Rhythm,d as NumberField,At as META,Lt as JS,oe as Form,re as Fields,ne as ETag,ut as Dialog,m as DateField,te as Cookies,Q as Clipboard,It as CSS,xt as Autocomplete};
+export * from "./components";
+export * from "./hooks";
+export * from "./services";

package/dist/services/absolute-url.d.ts

@@ -0,0 +1 @@
+export declare function absoluteUrl(path: string, request: Request | null): string | URL;

package/dist/services/absolute-url.js

@@ -0,0 +1,15 @@
+export function absoluteUrl(path, request) {
+    if (!request)
+        return path;
+    const incoming = new URL(request.url);
+    // Respect reverse-proxy TLS
+    const xfproto = request.headers.get("x-forwarded-proto");
+    const forwarded = request.headers.get("forwarded");
+    const isHttps = xfproto === "https" || (forwarded && /proto=https/i.test(forwarded));
+    // Build a clean origin (protocol + host), no path/search/hash
+    const origin = `${isHttps ? "https:" : incoming.protocol}//${incoming.host}`;
+    // Let WHATWG URL do the right thing:
+    // - if `path` is relative with "?...", it becomes pathname + search (NO %3F)
+    // - if `path` is absolute, it’s used as-is
+    return new URL(path, origin);
+}

package/dist/services/autocomplete.js

@@ -0,0 +1,5 @@
+export const Autocomplete = {
+    email: { inputMode: "email", autoComplete: "email", autoCapitalize: "none", spellCheck: "false" },
+    password: { new: { autoComplete: "new-password" }, current: { autoComplete: "current-password" } },
+    off: { autoComplete: "off", spellCheck: false },
+};

package/dist/services/clipboard.js

@@ -0,0 +1,10 @@
+import { noop } from "./noop";
+export class Clipboard {
+    static async copy(options) {
+        const onSuccess = options.onSuccess ?? noop;
+        if (!navigator.clipboard)
+            return;
+        await navigator.clipboard.writeText(options.text);
+        onSuccess();
+    }
+}

package/dist/services/cookies.js

@@ -0,0 +1,9 @@
+import JsCookie from "js-cookie";
+export class Cookies {
+    static extractFrom(request) {
+        return request.headers.get("cookie") ?? "";
+    }
+    static set(name, value) {
+        JsCookie.set(name, value);
+    }
+}

package/dist/services/date-field.js

@@ -0,0 +1,21 @@
+export class DateField {
+    static EMPTY = undefined;
+    value = DateField.EMPTY;
+    constructor(value) {
+        this.value = DateField.isEmpty(value) ? DateField.EMPTY : value;
+    }
+    get() {
+        return this.value;
+    }
+    isEmpty() {
+        return DateField.isEmpty(this.value);
+    }
+    static isEmpty(value) {
+        return value === undefined || value === null || value === "";
+    }
+    static compare(one, another) {
+        if (DateField.isEmpty(one) && DateField.isEmpty(another))
+            return true;
+        return one === another;
+    }
+}

package/dist/services/etag.js

@@ -0,0 +1,5 @@
+export class ETag {
+    static fromRevision(revision) {
+        return { "if-match": String(revision) };
+    }
+}

package/dist/services/exec.js

@@ -0,0 +1,6 @@
+export function exec(list) {
+    return function () {
+        for (const fn of list)
+            fn();
+    };
+}

package/dist/services/fields.js

@@ -0,0 +1,17 @@
+export class Fields {
+    static allUnchanged(fields) {
+        return fields.every((field) => field.unchanged);
+    }
+    static allEmpty(fields) {
+        return fields.every((field) => field.empty);
+    }
+    static anyEmpty(fields) {
+        return fields.some((field) => field.empty);
+    }
+    static anyUnchanged(fields) {
+        return fields.some((field) => field.unchanged);
+    }
+    static anyChanged(fields) {
+        return fields.some((field) => field.changed);
+    }
+}

package/dist/services/form.d.ts

@@ -1,4 +1,3 @@
-import type React from "react";
 type PatternTextConfigType = {
     min?: number;
     max?: number;

package/dist/services/form.js

@@ -0,0 +1,54 @@
+export class Form {
+    static input(config) {
+        const required = config.required ?? true;
+        if (config.min && !config.max)
+            return { pattern: `.{${config.min}}`, required };
+        if (config.min && config.max)
+            return { pattern: `.{${config.min},${config.max}}`, required };
+        if (!config.min && config.max)
+            return { pattern: `.{,${config.max}}`, required };
+        return { pattern: undefined, required };
+    }
+    static textarea(config) {
+        const required = config.required ?? true;
+        if (config.min && !config.max)
+            return { minLength: config.min, required };
+        if (config.min && config.max)
+            return { minLength: config.min, maxLength: config.max, required };
+        if (!config.min && config.max)
+            return { maxLength: config.max, required };
+        return { required };
+    }
+    static exact(config) {
+        const required = config.required ?? true;
+        return { pattern: config.text, required };
+    }
+    static date = {
+        min: {
+            today: () => new Date().toISOString().split("T")[0],
+            tomorrow: () => {
+                const today = new Date();
+                const tomorrow = new Date(today.setDate(today.getDate() + 1));
+                return tomorrow.toISOString().split("T")[0];
+            },
+            yesterday: () => {
+                const today = new Date();
+                const yesterday = new Date(today.setDate(today.getDate() - 1));
+                return yesterday.toISOString().split("T")[0];
+            },
+        },
+        max: {
+            today: () => new Date().toISOString().split("T")[0],
+            tomorrow: () => {
+                const today = new Date();
+                const tomorrow = new Date(today.setDate(today.getDate() + 1));
+                return tomorrow.toISOString().split("T")[0];
+            },
+            yesterday: () => {
+                const today = new Date();
+                const yesterday = new Date(today.setDate(today.getDate() - 1));
+                return yesterday.toISOString().split("T")[0];
+            },
+        },
+    };
+}

package/dist/services/get-safe-window.js

@@ -0,0 +1,5 @@
+export function getSafeWindow() {
+    if (typeof window === "undefined")
+        return undefined;
+    return window;
+}

package/dist/services/head.js

@@ -0,0 +1,9 @@
+export const CSS = (href) => [
+    { rel: "preload", as: "style", href },
+    { rel: "stylesheet", href },
+];
+export const JS = (src) => ({ type: "module", src });
+export const META = [
+    { charSet: "utf-8" },
+    { name: "viewport", content: "width=device-width, initial-scale=1" },
+];

package/dist/services/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./absolute-url";
 export * from "./autocomplete";
 export * from "./clipboard";
 export * from "./cookies";

package/dist/services/index.js

@@ -0,0 +1,19 @@
+export * from "./absolute-url";
+export * from "./autocomplete";
+export * from "./clipboard";
+export * from "./cookies";
+export * from "./date-field";
+export * from "./etag";
+export * from "./exec";
+export * from "./fields";
+export * from "./form";
+export * from "./get-safe-window";
+export * from "./head";
+export * from "./noop";
+export * from "./number-field";
+export * from "./pluralize";
+export * from "./rhythm";
+export * from "./text-field";
+export * from "./time-zone-offset";
+export * from "./translations";
+export * from "./weak-etag";

package/dist/services/noop.js

@@ -0,0 +1 @@
+export function noop() { }

package/dist/services/number-field.js

@@ -0,0 +1,23 @@
+export class NumberField {
+    // Empty value is `undefined` here instead of `null`,
+    // because HTML elements accept it as an empty value.
+    static EMPTY = undefined;
+    value = NumberField.EMPTY;
+    constructor(value) {
+        this.value = NumberField.isEmpty(value) ? NumberField.EMPTY : value;
+    }
+    get() {
+        return this.value;
+    }
+    isEmpty() {
+        return NumberField.isEmpty(this.value);
+    }
+    static isEmpty(value) {
+        return value === undefined || value === null || Number.isNaN(value);
+    }
+    static compare(one, another) {
+        if (NumberField.isEmpty(one) && NumberField.isEmpty(another))
+            return true;
+        return one === another;
+    }
+}

package/dist/services/pluralize.js

@@ -0,0 +1,23 @@
+import { polishPlurals } from "polish-plurals";
+var PluralizationSupportedLanguages;
+(function (PluralizationSupportedLanguages) {
+    PluralizationSupportedLanguages["en"] = "en";
+    PluralizationSupportedLanguages["pl"] = "pl";
+})(PluralizationSupportedLanguages || (PluralizationSupportedLanguages = {}));
+export function pluralize(options) {
+    if (options.language === PluralizationSupportedLanguages.en) {
+        const plural = options.plural ?? `${options.singular}s`;
+        if (options.value === 1)
+            return options.singular;
+        return plural;
+    }
+    if (options.language === PluralizationSupportedLanguages.pl) {
+        const value = options.value ?? 1;
+        if (value === 1)
+            return options.singular;
+        return polishPlurals(options.singular, String(options.plural), String(options.genitive), value);
+    }
+    // biome-ignore lint: lint/suspicious/noConsole
+    console.warn(`[@bgord/frontend] missing pluralization function for language: ${options.language}.`);
+    return options.singular;
+}

package/dist/services/rhythm.js

@@ -0,0 +1,30 @@
+const DEFAULT_BASE_PX = 12;
+export function Rhythm(base = DEFAULT_BASE_PX) {
+    return {
+        times(times) {
+            const result = base * times;
+            const dimensions = {
+                height: { height: px(result) },
+                minHeight: { minHeight: px(result) },
+                maxHeight: { maxHeight: px(result) },
+                width: { width: px(result) },
+                minWidth: { minWidth: px(result) },
+                maxWidth: { maxWidth: px(result) },
+                square: { height: px(result), width: px(result) },
+            };
+            const style = {
+                height: { style: { height: px(result) } },
+                minHeight: { style: { minHeight: px(result) } },
+                maxHeight: { style: { maxHeight: px(result) } },
+                width: { style: { width: px(result) } },
+                minWidth: { style: { minWidth: px(result) } },
+                maxWidth: { style: { maxWidth: px(result) } },
+                square: { style: { height: px(result), width: px(result) } },
+            };
+            return { px: px(result), raw: result, style, ...dimensions };
+        },
+    };
+}
+function px(number) {
+    return `${number}px`;
+}

package/dist/services/text-field.js

@@ -0,0 +1,23 @@
+export class TextField {
+    // Empty value is `undefined` here instead of `null`,
+    // because HTML elements accept it as an empty value.
+    static EMPTY = undefined;
+    value = TextField.EMPTY;
+    constructor(value) {
+        this.value = TextField.isEmpty(value) ? TextField.EMPTY : value;
+    }
+    get() {
+        return this.value;
+    }
+    isEmpty() {
+        return TextField.isEmpty(this.value);
+    }
+    static isEmpty(value) {
+        return value === undefined || value === "" || value === null;
+    }
+    static compare(one, another) {
+        if (TextField.isEmpty(one) && TextField.isEmpty(another))
+            return true;
+        return one === another;
+    }
+}

package/dist/services/time-zone-offset.js

@@ -0,0 +1,5 @@
+export class TimeZoneOffset {
+    static get() {
+        return { "time-zone-offset": new Date().getTimezoneOffset().toString() };
+    }
+}

package/dist/services/translations.js

@@ -0,0 +1,44 @@
+import { createContext, use, useCallback } from "react";
+import { pluralize } from "./pluralize";
+export const TranslationsContext = createContext({
+    translations: {},
+    language: "en",
+    supportedLanguages: { en: "en" },
+});
+export function useTranslations() {
+    const value = use(TranslationsContext);
+    if (value === undefined)
+        throw new Error("useTranslations must be used within the TranslationsContext");
+    const translate = useCallback((key, variables) => {
+        const translation = value.translations[key];
+        if (!translation) {
+            // biome-ignore lint: lint/suspicious/noConsole
+            console.warn(`[@bgord/ui] missing translation for key: ${key}`);
+            return key;
+        }
+        if (!variables)
+            return translation;
+        return Object.entries(variables).reduce((result, [placeholder, value]) => {
+            const replacer = new RegExp(`{{${placeholder}}}`, "g");
+            return result.replace(replacer, String(value));
+        }, translation);
+    }, [value.translations]);
+    return translate;
+}
+export function useLanguage() {
+    const value = use(TranslationsContext);
+    if (value === undefined)
+        throw new Error("useLanguage must be used within the TranslationsContext");
+    return value.language;
+}
+export function useSupportedLanguages() {
+    const value = use(TranslationsContext);
+    if (value === undefined) {
+        throw new Error("useSupportedLanguages must be used within the TranslationsContext");
+    }
+    return value.supportedLanguages;
+}
+export function usePluralize() {
+    const language = useLanguage();
+    return (options) => pluralize({ ...options, language });
+}

package/dist/services/weak-etag.js

@@ -0,0 +1,5 @@
+export class WeakETag {
+    static fromRevision(revision) {
+        return { "if-match": `W/${revision}` };
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bgord/ui",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "type": "module",
   "exports": {
     ".": {

package/readme.md

@@ -34,12 +34,14 @@ src/
 │   ├── use-focus-shortcut.ts
 │   ├── use-hover.ts
 │   ├── use-meta-enter-submit.ts
+│   ├── use-mutation.ts
 │   ├── use-number-field.ts
 │   ├── use-scroll-lock.ts
 │   ├── use-shortcuts.ts
 │   ├── use-text-field.ts
 │   └── use-toggle.ts
 └── services
+    ├── absolute-url.ts
     ├── autocomplete.ts
     ├── clipboard.ts
     ├── cookies.ts