@a-type/ui 0.1.2 → 0.1.4

package/dist/esm/components/liveUpdateTextField/LiveUpdateTextField.js

@@ -0,0 +1,68 @@
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { debounce } from '@a-type/utils';
+import { Input } from '../input/Input.js';
+import { TextArea } from '../textArea/TextArea.js';
+/**
+ * An extension of TextField which keeps a local realtime value in state and
+ * periodically reports changes to the parent. Use this to connect
+ * to the API and update a value from the field directly.
+ *
+ * This component is optimistic and will not respond to external changes while focused.
+ */
+export const LiveUpdateTextField = forwardRef(function LiveUpdateTextField(_a, ref) {
+    var { value, onChange, debounceMs = 500, onFocus, onBlur, textArea, type } = _a, rest = __rest(_a, ["value", "onChange", "debounceMs", "onFocus", "onBlur", "textArea", "type"]);
+    const [displayValue, setDisplayValue] = useState(value || '');
+    const ignoreUpdates = useRef(false);
+    const didChange = useRef(false);
+    const handleFocus = useCallback((ev) => {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(ev);
+        ignoreUpdates.current = true;
+    }, [onFocus]);
+    const handleBlur = useCallback((ev) => {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(ev);
+        ignoreUpdates.current = false;
+        // immediately send update if the user typed anything.
+        // otherwise pull the latest remote value
+        if (didChange.current) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(displayValue);
+        }
+        else {
+            setDisplayValue(value || '');
+        }
+        didChange.current = false;
+    }, [onBlur, displayValue, onChange, value]);
+    useEffect(() => {
+        if (ignoreUpdates.current) {
+            return;
+        }
+        setDisplayValue(value || '');
+    }, [value]);
+    // every once in a while, send an update to parent
+    const debouncedOnChange = useMemo(() => debounce(onChange || (() => { }), debounceMs), [onChange, debounceMs]);
+    // update local state instantly and parent eventually
+    const handleChange = useCallback((ev) => {
+        setDisplayValue(ev.target.value);
+        debouncedOnChange(ev.target.value);
+        didChange.current = true;
+    }, [debouncedOnChange]);
+    if (textArea) {
+        return (_jsx(TextArea, Object.assign({ ref: ref, onFocus: handleFocus, onBlur: handleBlur, value: displayValue, onChange: handleChange, autoSize: true }, rest)));
+    }
+    else {
+        return (_jsx(Input, Object.assign({ ref: ref, onFocus: handleFocus, onBlur: handleBlur, value: displayValue, onChange: handleChange, type: type }, rest)));
+    }
+});
+//# sourceMappingURL=LiveUpdateTextField.js.map

package/dist/esm/components/liveUpdateTextField/LiveUpdateTextField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveUpdateTextField.js","sourceRoot":"","sources":["../../../../src/components/liveUpdateTextField/LiveUpdateTextField.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/liveUpdateTextField/index.d.ts

@@ -0,0 +1 @@
+export * from './LiveUpdateTextField.js';

package/dist/esm/components/liveUpdateTextField/index.js

@@ -0,0 +1,2 @@
+export * from './LiveUpdateTextField.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/liveUpdateTextField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/liveUpdateTextField/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}

package/dist/esm/components/liveUpdateTextField.d.ts

@@ -0,0 +1 @@
+export * from './liveUpdateTextField/index.js';

package/dist/esm/components/liveUpdateTextField.js

@@ -0,0 +1,2 @@
+export * from './liveUpdateTextField/index.js';
+//# sourceMappingURL=liveUpdateTextField.js.map

package/dist/esm/components/liveUpdateTextField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"liveUpdateTextField.js","sourceRoot":"","sources":["../../../src/components/liveUpdateTextField.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC"}

package/dist/esm/components/note/Note.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface NoteProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+export declare function Note({ className, children, ...rest }: NoteProps): JSX.Element;

package/dist/esm/components/note/Note.js

@@ -0,0 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+export function Note(_a) {
+    var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
+    return (_jsx("div", Object.assign({ className: classNames('pr-20px', className) }, rest, { children: _jsxs("div", Object.assign({ className: "flex flex-col p-2 border border-solid border-primary-dark bg-primary-wash color-black relative text-sm italic border-r-0" }, { children: [children, _jsx("div", Object.assign({ className: "w-20px h-[calc(100%-18px)] absolute bottom--0.5px right--20px border-0 border-solid border-primary-dark border-r border-b bg-primary-wash" }, { children: _jsx("div", { className: `absolute top--20px left-0 border-10px border-0 border-solid border-transparent border-b-primary-dark border-l-primary-dark after:(content-[""] absolute top--7px left--9px border-8px border-solid border-transparent border-b-primary-wash border-l-primary-wash)` }) }))] })) })));
+}
+//# sourceMappingURL=Note.js.map

package/dist/esm/components/note/Note.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Note.js","sourceRoot":"","sources":["../../../../src/components/note/Note.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AAMpC,MAAM,UAAU,IAAI,CAAC,EAA2C;QAA3C,EAAE,SAAS,EAAE,QAAQ,OAAsB,EAAjB,IAAI,cAA9B,yBAAgC,CAAF;IAClD,OAAO,CACN,4BAAK,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,SAAS,CAAC,IAAM,IAAI,cACzD,6BAAK,SAAS,EAAC,0HAA0H,iBACvI,QAAQ,EACT,4BAAK,SAAS,EAAC,2IAA2I,gBACzJ,cACC,SAAS,EAAE,oQAAoQ,GAC9Q,IACG,KACD,IACD,CACN,CAAC;AACH,CAAC"}

package/dist/esm/components/note/index.d.ts

@@ -0,0 +1 @@
+export * from './Note.js';

package/dist/esm/components/note/index.js

@@ -0,0 +1,2 @@
+export * from './Note.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/note/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/note/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/dist/esm/components/note.d.ts

@@ -0,0 +1 @@
+export * from './note/index.js';

package/dist/esm/components/note.js

@@ -0,0 +1,2 @@
+export * from './note/index.js';
+//# sourceMappingURL=note.js.map

package/dist/esm/components/note.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"note.js","sourceRoot":"","sources":["../../../src/components/note.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/dist/esm/components/numberStepper/NumberStepper.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export interface NumberStepperProps {
+    value: number;
+    onChange: (value: number) => void;
+    highlightChange?: boolean;
+    steps?: number[];
+    increment?: number;
+    renderValue?: (value: number) => ReactNode;
+    className?: string;
+}
+export declare function NumberStepper({ value, onChange, highlightChange, steps, increment: incrementAmount, renderValue, className, ...rest }: NumberStepperProps): JSX.Element;

package/dist/esm/components/numberStepper/NumberStepper.js

@@ -0,0 +1,49 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fractionToText } from '@a-type/utils';
+import { MinusIcon, PlusIcon } from '@radix-ui/react-icons';
+import classNames from 'classnames';
+import { Button } from '../button.js';
+export function NumberStepper(_a) {
+    var _b;
+    var { value, onChange, highlightChange, steps, increment: incrementAmount = 1, renderValue = fractionToText, className } = _a, rest = __rest(_a, ["value", "onChange", "highlightChange", "steps", "increment", "renderValue", "className"]);
+    const index = (_b = steps === null || steps === void 0 ? void 0 : steps.indexOf(value)) !== null && _b !== void 0 ? _b : 0;
+    const increment = () => {
+        if (steps) {
+            if (index === steps.length - 1) {
+                return;
+            }
+            onChange(steps[index + 1]);
+        }
+        else {
+            onChange(value + incrementAmount);
+        }
+    };
+    const decrement = () => {
+        if (steps) {
+            if (index === 0) {
+                return;
+            }
+            onChange(steps[index - 1]);
+        }
+        else {
+            onChange(value - incrementAmount);
+        }
+    };
+    const canIncrement = steps ? index < steps.length - 1 : true;
+    const canDecrement = steps ? index > 0 : true;
+    return (_jsxs("div", Object.assign({ className: classNames('flex items-center border-default rounded-lg overflow-hidden w-min-content flex-shrink-0', {
+            'bg-accent-wash color-black': !!highlightChange && value !== 1,
+        }, className) }, rest, { children: [_jsx(Button, Object.assign({ color: "ghost", onClick: decrement, disabled: !canDecrement }, { children: _jsx(MinusIcon, {}) })), _jsx("div", Object.assign({ className: "w-80px text-center" }, { children: renderValue(value) })), _jsx(Button, Object.assign({ color: "ghost", onClick: increment, disabled: !canIncrement }, { children: _jsx(PlusIcon, {}) }))] })));
+}
+//# sourceMappingURL=NumberStepper.js.map

package/dist/esm/components/numberStepper/NumberStepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberStepper.js","sourceRoot":"","sources":["../../../../src/components/numberStepper/NumberStepper.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAYtC,MAAM,UAAU,aAAa,CAAC,EAST;;QATS,EAC5B,KAAK,EACL,QAAQ,EACR,eAAe,EACf,KAAK,EACL,SAAS,EAAE,eAAe,GAAG,CAAC,EAC9B,WAAW,GAAG,cAAc,EAC5B,SAAS,OAEU,EADhB,IAAI,cARqB,0FAS7B,CADQ;IAEP,MAAM,KAAK,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,KAAK,CAAC,mCAAI,CAAC,CAAC;IAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,IAAI,KAAK,EAAE;YACT,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC9B,OAAO;aACR;YACD,QAAQ,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;SAC5B;aAAM;YACL,QAAQ,CAAC,KAAK,GAAG,eAAe,CAAC,CAAC;SACnC;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,IAAI,KAAK,EAAE;YACT,IAAI,KAAK,KAAK,CAAC,EAAE;gBACf,OAAO;aACR;YACD,QAAQ,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;SAC5B;aAAM;YACL,QAAQ,CAAC,KAAK,GAAG,eAAe,CAAC,CAAC;SACnC;IACH,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC7D,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAE9C,OAAO,CACL,6BACE,SAAS,EAAE,UAAU,CACnB,yFAAyF,EACzF;YACE,4BAA4B,EAAE,CAAC,CAAC,eAAe,IAAI,KAAK,KAAK,CAAC;SAC/D,EACD,SAAS,CACV,IACG,IAAI,eAER,KAAC,MAAM,kBAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,YAAY,gBAC/D,KAAC,SAAS,KAAG,IACN,EACT,4BAAK,SAAS,EAAC,oBAAoB,gBAAE,WAAW,CAAC,KAAK,CAAC,IAAO,EAC9D,KAAC,MAAM,kBAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,YAAY,gBAC/D,KAAC,QAAQ,KAAG,IACL,KACL,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/components/numberStepper/index.d.ts

@@ -0,0 +1 @@
+export * from './NumberStepper.js';

package/dist/esm/components/numberStepper/index.js

@@ -0,0 +1,2 @@
+export * from './NumberStepper.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/numberStepper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/numberStepper/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/dist/esm/components/numberStepper.d.ts

@@ -0,0 +1 @@
+export * from './numberStepper/index.js';

package/dist/esm/components/numberStepper.js

@@ -0,0 +1,2 @@
+export * from './numberStepper/index.js';
+//# sourceMappingURL=numberStepper.js.map

package/dist/esm/components/numberStepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"numberStepper.js","sourceRoot":"","sources":["../../../src/components/numberStepper.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}

package/dist/esm/components/particles/ParticleContext.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { Particles } from './particlesState.js';
+export declare function useParticles(): Particles | null;
+export declare const ParticlesProvider: import("react").Provider<Particles | null>;

package/dist/esm/components/particles/ParticleContext.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+const ParticleContext = createContext(null);
+export function useParticles() {
+    const particles = useContext(ParticleContext);
+    return particles;
+}
+export const ParticlesProvider = ParticleContext.Provider;
+//# sourceMappingURL=ParticleContext.js.map

package/dist/esm/components/particles/ParticleContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParticleContext.js","sourceRoot":"","sources":["../../../../src/components/particles/ParticleContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGlD,MAAM,eAAe,GAAG,aAAa,CAAmB,IAAI,CAAC,CAAC;AAE9D,MAAM,UAAU,YAAY;IAC3B,MAAM,SAAS,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAC9C,OAAO,SAAS,CAAC;AAClB,CAAC;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,eAAe,CAAC,QAAQ,CAAC"}

package/dist/esm/components/particles/ParticleLayer.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export declare function ParticleLayer({ children }: {
+    children: ReactNode;
+}): JSX.Element;

package/dist/esm/components/particles/ParticleLayer.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Particles } from './particlesState.js';
+import { createPortal } from 'react-dom';
+import { ParticlesProvider } from './ParticleContext.js';
+export function ParticleLayer({ children }) {
+    const [particles] = useState(() => new Particles({ initialPoolSize: 100 }));
+    return (_jsxs(ParticlesProvider, Object.assign({ value: particles }, { children: [createPortal(_jsx("canvas", { ref: particles.setCanvas, className: "fixed inset-0 w-full h-full z-overdraw pointer-events-none" }), document.body), children] })));
+}
+//# sourceMappingURL=ParticleLayer.js.map

package/dist/esm/components/particles/ParticleLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParticleLayer.js","sourceRoot":"","sources":["../../../../src/components/particles/ParticleLayer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzD,MAAM,UAAU,aAAa,CAAC,EAAE,QAAQ,EAA2B;IAClE,MAAM,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,SAAS,CAAC,EAAE,eAAe,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;IAE5E,OAAO,CACN,MAAC,iBAAiB,kBAAC,KAAK,EAAE,SAAS,iBACjC,YAAY,CACZ,iBACC,GAAG,EAAE,SAAS,CAAC,SAAS,EACxB,SAAS,EAAC,4DAA4D,GACrE,EACF,QAAQ,CAAC,IAAI,CACb,EACA,QAAQ,KACU,CACpB,CAAC;AACH,CAAC"}

package/dist/esm/components/particles/index.d.ts

@@ -0,0 +1,3 @@
+export { ParticleLayer } from './ParticleLayer.js';
+export { useParticles } from './ParticleContext.js';
+export { createCircleParticles, elementExplosion as circleParticleExplosion, createElementBorderInitializer, } from './particlesState.js';

package/dist/esm/components/particles/index.js

@@ -0,0 +1,4 @@
+export { ParticleLayer } from './ParticleLayer.js';
+export { useParticles } from './ParticleContext.js';
+export { createCircleParticles, elementExplosion as circleParticleExplosion, createElementBorderInitializer, } from './particlesState.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/particles/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/particles/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EACL,qBAAqB,EACrB,gBAAgB,IAAI,uBAAuB,EAC3C,8BAA8B,GAC/B,MAAM,qBAAqB,CAAC"}

package/dist/esm/components/particles/particlesState.d.ts

@@ -0,0 +1,100 @@
+export declare class Particles {
+    private canvas;
+    private ctx;
+    private state;
+    private lastFrameTimestamp;
+    private disabled;
+    private particles;
+    private freeParticles;
+    private resizeObserver;
+    constructor({ initialPoolSize }: {
+        initialPoolSize: number;
+    });
+    setCanvas: (canvas: HTMLCanvasElement | null) => void;
+    private resume;
+    private pause;
+    private draw;
+    private renderParticles;
+    addParticles: (spawn: ParticleSpawn) => void;
+    private extendPool;
+    elementExplosion: ({ element, color, borders, lifespan, force, drag, forceFuzz, angleFuzz, ...rest }: {
+        element: HTMLElement;
+        color?: string | [string, string] | undefined;
+        count: number;
+        startRadius?: number | undefined;
+        endRadius?: number | undefined;
+        borders?: BorderName[] | undefined;
+        lifespan?: number | undefined;
+        force?: number | undefined;
+        drag?: number | undefined;
+        forceFuzz?: number | undefined;
+        angleFuzz?: number | undefined;
+    }) => ParticleSpawn;
+    windowBorderExplosion: ({ color, border, lifespan, ...rest }: {
+        color?: string | [string, string] | undefined;
+        count: number;
+        startRadius?: number | undefined;
+        endRadius?: number | undefined;
+        border?: BorderName | undefined;
+        lifespan?: number | undefined;
+    }) => ParticleSpawn;
+}
+type ParticleBehavior = (ctx: CanvasRenderingContext2D, x: number, y: number, lifetime: number, lifespan: number) => void;
+type ParticleSpawn = {
+    count: number;
+    behavior: ParticleBehavior;
+    initializer: ParticleInitializer;
+};
+type ParticleInitializer = (index: number) => {
+    x: number;
+    y: number;
+    lifespan: number;
+    velocityX: number;
+    velocityY: number;
+    drag: number;
+};
+export declare function createCircleParticles({ count, startRadius, endRadius, initializer, color, }: {
+    count: number;
+    startRadius?: number;
+    endRadius?: number;
+    initializer: ParticleInitializer;
+    color?: string | [string, string];
+}): ParticleSpawn;
+type BorderName = 'top' | 'right' | 'bottom' | 'left';
+export declare const createElementBorderInitializer: ({ element, borders, force, drag, lifespan, forceFuzz, angleFuzz, }: {
+    element: HTMLElement;
+    borders?: BorderName[] | undefined;
+    force?: number | undefined;
+    drag?: number | undefined;
+    lifespan?: number | undefined;
+    forceFuzz?: number | undefined;
+    angleFuzz?: number | undefined;
+}) => ParticleInitializer;
+export declare const elementExplosion: ({ element, color, borders, lifespan, force, drag, forceFuzz, angleFuzz, ...rest }: {
+    element: HTMLElement;
+    color?: string | [string, string] | undefined;
+    count: number;
+    startRadius?: number | undefined;
+    endRadius?: number | undefined;
+    borders?: BorderName[] | undefined;
+    lifespan?: number | undefined;
+    force?: number | undefined;
+    drag?: number | undefined;
+    forceFuzz?: number | undefined;
+    angleFuzz?: number | undefined;
+}) => ParticleSpawn;
+export declare const createWindowBorderInitializer: ({ force, drag, border, lifespan, }: {
+    force?: number | undefined;
+    drag?: number | undefined;
+    border?: BorderName | undefined;
+    lifespan?: number | undefined;
+}) => ParticleInitializer;
+export declare const windowBorderExplosion: ({ color, border, lifespan, ...rest }: {
+    color?: string | [string, string] | undefined;
+    count: number;
+    startRadius?: number | undefined;
+    endRadius?: number | undefined;
+    border?: BorderName | undefined;
+    lifespan?: number | undefined;
+}) => ParticleSpawn;
+export {};