@esportsplus/ui 0.55.0 → 0.56.2

package/build/components/log/index.js

@@ -0,0 +1,125 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect, onCleanup, untrack } from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import './scss/index.scss';
+const template_0hsshhf3 = template_u1.template(`<span class='log-bridge ' aria-hidden='true' style=';;'>`);
+const template_0hsshhf5 = template_u1.template(`<svg class='log-chevron' aria-hidden='true' viewBox='0 0 24 24'><path d='M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z' fill='currentColor' />`);
+const template_0hsshhf6 = template_u1.template(`<span class='log-guide' aria-hidden='true'><svg width='12' height='15' viewBox='0 0 12 15' fill='none'><path d='M0.5 0 V8 Q0.5 14 6.5 14 H11.5' pathLength='1' stroke='currentColor' stroke-width='1' /></svg><span class='log-guide-line'>`);
+const template_0hsshhf8 = template_u1.template(`<div class='log-unit log-working ' role='status'><div class='log-unit-content'><div class='log-working-content'><span class='log-working-stars' aria-hidden='true'></span><span class='log-working-label'></span><span class='log-working-timer'><!--$-->s`);
+const template_0hsshhfe = template_u1.template(`<svg class='log-working-star' viewBox='0 0 24 24' style=';;;;'><path d='M12 0C13 7 17 11 24 12C17 13 13 17 12 24C11 17 7 13 0 12C7 11 11 7 12 0Z' fill='currentColor' />`);
+class ReactiveObject_0hsshhf0 extends reactivity_u0.ReactiveObject {
+    #revealed = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get revealed() {
+        return reactivity_u0.read(this.#revealed);
+    }
+    set revealed(_v0) {
+        reactivity_u0.write(this.#revealed, _v0);
+    }
+}
+class ReactiveObject_0hsshhf1 extends reactivity_u0.ReactiveObject {
+    #elapsed = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get elapsed() {
+        return reactivity_u0.read(this.#elapsed);
+    }
+    set elapsed(_v0) {
+        reactivity_u0.write(this.#elapsed, _v0);
+    }
+}
+const STARS = [
+    { scale: 1, x: 50, y: 46 },
+    { scale: 0.55, x: 18, y: 22 },
+    { scale: 0.45, x: 82, y: 26 },
+    { scale: 0.55, x: 78, y: 76 },
+    { scale: 0.4, x: 22, y: 78 }
+];
+const bridge = (active, height, offset) => {
+    let root_0hsshhf2 = template_0hsshhf3(), element_0hsshhf4 = root_0hsshhf2.firstChild;
+    template_u1.setList(element_0hsshhf4, 'class', () => active() && '--active');
+    template_u1.setList(element_0hsshhf4, 'style', template_u1.interpolate(["--height: ", (height), "px"]));
+    template_u1.setList(element_0hsshhf4, 'style', template_u1.interpolate([" --offset: ", (offset), "px"]));
+    return root_0hsshhf2;
+};
+const chevron = () => template_0hsshhf5();
+const guide = () => template_0hsshhf6();
+const progress = ({ delay, onComplete, state, units }) => {
+    let completed = false, controlled = state !== undefined, counter = state ?? new ReactiveObject_0hsshhf0(), timer, total = units + (controlled ? 0 : 1);
+    let revealed = () => Math.max(0, Math.min(counter.revealed, total)), stop = effect(() => {
+        if (total === 0 || revealed() < total) {
+            completed = false;
+            return;
+        }
+        if (!completed) {
+            completed = true;
+            untrack(() => onComplete?.());
+        }
+    });
+    function advance() {
+        if (counter.revealed >= total) {
+            return;
+        }
+        timer = setTimeout(() => {
+            counter.revealed++;
+            advance();
+        }, delay(counter.revealed));
+    }
+    onCleanup(() => {
+        clearTimeout(timer);
+        stop();
+    });
+    return {
+        revealed,
+        start: () => {
+            if (controlled) {
+                return;
+            }
+            clearTimeout(timer);
+            advance();
+        },
+        total
+    };
+};
+const working = (label, active) => {
+    let clock = new ReactiveObject_0hsshhf1(), interval;
+    let stop = effect(() => {
+        if (!active()) {
+            clearInterval(interval);
+            interval = undefined;
+            return;
+        }
+        if (interval !== undefined) {
+            return;
+        }
+        let start = performance.now();
+        clock.elapsed = 0;
+        interval = setInterval(() => {
+            clock.elapsed = (performance.now() - start) / 1000;
+        }, 100);
+    });
+    onCleanup(() => {
+        clearInterval(interval);
+        stop();
+    });
+    return (() => {
+        let root_0hsshhf7 = template_0hsshhf8(), element_0hsshhf9 = root_0hsshhf7.firstChild, element_0hsshhfa = element_0hsshhf9.firstElementChild.firstElementChild.firstElementChild, element_0hsshhfb = element_0hsshhfa.nextElementSibling, element_0hsshhfc = element_0hsshhfb.nextElementSibling.firstChild;
+        template_u1.setList(element_0hsshhf9, 'class', () => active() && '--active');
+        template_u1.setProperty(element_0hsshhf9, 'inert', () => !active());
+        template_u1.slot(element_0hsshhfa, STARS.map(({ scale, x, y }, i) => {
+            let root_0hsshhfd = template_0hsshhfe(), element_0hsshhff = root_0hsshhfd.firstChild;
+            template_u1.setList(element_0hsshhff, 'style', template_u1.interpolate(["--delay: ", ((1.4 * i * 0.7) / 5), "s"]));
+            template_u1.setList(element_0hsshhff, 'style', template_u1.interpolate([" --size: ", (14 * scale), "px"]));
+            template_u1.setList(element_0hsshhff, 'style', template_u1.interpolate([" left: ", (x), "%"]));
+            template_u1.setList(element_0hsshhff, 'style', template_u1.interpolate([" top: ", (y), "%"]));
+            return root_0hsshhfd;
+        }), 1);
+        template_u1.slot(element_0hsshhfb, label, 1);
+        new template_u1.EffectSlot(element_0hsshhfc, () => clock.elapsed.toFixed(1));
+        return root_0hsshhf7;
+    })();
+};
+export { bridge, chevron, guide, progress, working };

package/build/components/log/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.log{--font-family-mono:ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;--font-size:var(--font-size-300);--font-size-small:var(--font-size-200);--guide-color:var(--color-border-400);--shimmer-color:var(--color-text-400);--shimmer-highlight:var(--color-text-500);--soft:cubic-bezier(.22, 1, .36, 1);--text-primary:var(--color-text-500);--text-secondary:var(--color-text-400);--text-tertiary:var(--color-text-300);--working-color:var(--color-text-300)}.log,.log *{--line-height:calc(20 / 14)}@property --log-fade{syntax:"<length>";inherits:false;initial-value:0}.log{color:var(--text-secondary);font-size:var(--font-size);width:100%}.log button{color:inherit;cursor:pointer;font:inherit;text-align:start;background:0 0;border:0;margin:0;padding:0}.log ul{margin:0;padding:0;list-style:none}.log-bridge{background:var(--guide-color);height:var(--height);left:var(--offset);pointer-events:none;top:calc(var(--height) * -1);transform-origin:top;width:1px;transition:scale .12s linear;position:absolute;scale:1 0}.log-bridge.--active{scale:1}.log-chevron{color:var(--text-tertiary);flex-shrink:0;width:16px;height:16px;transition:color .15s,rotate .3s}[aria-expanded=true]>.log-chevron{rotate:180deg}:hover>.log-chevron{color:var(--text-secondary)}.log-guide{color:var(--guide-color);pointer-events:none;width:12px;position:absolute;inset-block:0;inset-inline-start:0}.log-guide svg{inset-inline-start:0;position:absolute;top:0}.log-guide path{stroke-dasharray:1;stroke-dashoffset:1px;transition:stroke-dashoffset .14s linear .12s}.log-guide-line{bottom:0;transform-origin:top;inset-inline-start:0;background:currentColor;width:1px;transition:scale .12s linear;position:absolute;top:8px;scale:1 0}.log-row{padding-inline-start:16px;position:relative}.log-row:first-child .log-guide path{transition-delay:0s}.log-row.--active .log-guide path{stroke-dashoffset:0}.log-row.--active:has(+.log-row.--active) .log-guide-line{scale:1}.log-shimmer{-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(100deg, var(--shimmer-color) 16%, var(--shimmer-color) 38%, var(--shimmer-highlight) 50%, var(--shimmer-color) 62%, var(--shimmer-color) 84%);color:#0000;will-change:background-position;background-position:200%;background-size:300% 100%;animation:3.4s linear infinite log-shimmer}.log-unit{--log-fade:22px;filter:blur(6px);-webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - var(--log-fade)), transparent calc(100% + 1px));-webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - var(--log-fade)), transparent calc(100% + 1px));mask-image:linear-gradient(to bottom, #000 calc(100% - var(--log-fade)), transparent calc(100% + 1px));opacity:0;transition:--log-fade .44s var(--soft), filter .42s var(--soft), grid-template-rows .38s var(--soft), opacity .42s var(--soft), translate .42s var(--soft);grid-template-rows:0fr;display:grid;overflow:hidden;translate:0 4px}.log-unit.--active{--log-fade:0px;filter:blur();opacity:1;grid-template-rows:1fr;translate:0}.log-unit-content{min-width:0;min-height:0}.log-working{color:var(--working-color)}.log-working-content{align-items:center;gap:10px;padding-block:4px;display:flex}.log-working-label{-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(100deg, color-mix(in oklab, var(--working-color) 55%, transparent) 30%, var(--working-color) 50%, color-mix(in oklab, var(--working-color) 55%, transparent) 70%);color:#0000;font-weight:var(--font-weight-500);will-change:background-position;background-position:200%;background-size:300% 100%;animation:2.6s linear infinite log-shimmer}.log-working-star{animation:log-star 1.4s ease-in-out var(--delay) infinite;height:var(--size);margin:calc(var(--size) / -2) 0 0 calc(var(--size) / -2);width:var(--size);position:absolute;scale:0}.log-working-stars{color:color-mix(in oklab, currentColor 75%, transparent);flex-shrink:0;width:21px;height:21px;display:block;position:relative}.log-working-timer{color:var(--text-tertiary);font-family:var(--font-family-mono);font-size:var(--font-size-small);font-variant-numeric:tabular-nums}@media (prefers-reduced-motion:reduce){.log-bridge,.log-chevron,.log-guide path,.log-guide-line,.log-unit{transition:none}.log-shimmer,.log-working-label{color:inherit;background:0 0;animation:none}.log-working-star{opacity:.7;animation:none;scale:1}}@keyframes log-shimmer{0%{background-position:200%}to{background-position:-100%}}@keyframes log-star{0%,to{opacity:0;scale:0}40%{opacity:1;scale:1}60%{opacity:.9;scale:.8}}}
+/*$vite$:1*/

package/build/components/long-press/bind.d.ts

@@ -0,0 +1,21 @@
+import type { Attributes } from '@esportsplus/template';
+type LongPress = {
+    attributes: Attributes<HTMLElement>;
+    state: {
+        fired: boolean;
+        holding: boolean;
+        step: number;
+    };
+    steps: number;
+};
+type Options = {
+    disabled?: boolean;
+    duration?: number;
+    haptic?: boolean;
+    moveTolerance?: number;
+    onlongpress: VoidFunction;
+    onlongpresscancel?: VoidFunction;
+    steps?: number;
+};
+export default _default;
+declare function _default({ disabled, duration, haptic, moveTolerance, onlongpress, onlongpresscancel, steps }: Options): LongPress;

package/build/components/long-press/bind.js

@@ -0,0 +1,136 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+class ReactiveObject_1d5h4ga0 extends reactivity_u0.ReactiveObject {
+    #fired = this[reactivity_u0.SIGNAL](false);
+    #holding = this[reactivity_u0.SIGNAL](false);
+    #step = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get fired() {
+        return reactivity_u0.read(this.#fired);
+    }
+    set fired(_v0) {
+        reactivity_u0.write(this.#fired, _v0);
+    }
+    get holding() {
+        return reactivity_u0.read(this.#holding);
+    }
+    set holding(_v1) {
+        reactivity_u0.write(this.#holding, _v1);
+    }
+    get step() {
+        return reactivity_u0.read(this.#step);
+    }
+    set step(_v2) {
+        reactivity_u0.write(this.#step, _v2);
+    }
+}
+const SETTLE = 260;
+export default ({ disabled = false, duration = 550, haptic = true, moveTolerance = 8, onlongpress, onlongpresscancel, steps = 12 }) => {
+    let cells = Math.max(1, Math.round(steps)), frame = 0, origin = null, phase = 'idle', settle, startedAt = 0, state = new ReactiveObject_1d5h4ga0();
+    function begin(point) {
+        if (disabled || phase !== 'idle') {
+            return;
+        }
+        phase = 'holding';
+        origin = point ?? null;
+        startedAt = performance.now();
+        state.holding = true;
+        state.step = 0;
+        frame = requestAnimationFrame(tick);
+    }
+    function end() {
+        if (phase !== 'holding') {
+            return;
+        }
+        reset();
+        onlongpresscancel?.();
+    }
+    function reset() {
+        cancelAnimationFrame(frame);
+        clearTimeout(settle);
+        frame = 0;
+        origin = null;
+        phase = 'idle';
+        state.fired = false;
+        state.holding = false;
+        state.step = 0;
+    }
+    function tick(now) {
+        let progress = Math.min(1, (now - startedAt) / duration), step = Math.floor(progress * cells);
+        if (state.step !== step) {
+            state.step = step;
+        }
+        if (progress < 1) {
+            frame = requestAnimationFrame(tick);
+            return;
+        }
+        frame = 0;
+        phase = 'fired';
+        state.fired = true;
+        state.holding = false;
+        state.step = cells;
+        if (haptic) {
+            navigator.vibrate?.(12);
+        }
+        onlongpress();
+        settle = setTimeout(() => {
+            if (phase === 'fired') {
+                reset();
+            }
+        }, SETTLE);
+    }
+    return {
+        attributes: {
+            onblur: end,
+            onclick: (e) => {
+                if (phase === 'fired') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+            },
+            oncontextmenu: (e) => e.preventDefault(),
+            ondisconnect: reset,
+            ondocumentvisibilitychange: () => {
+                if (document.hidden) {
+                    end();
+                }
+            },
+            onkeydown: (e) => {
+                if (e.repeat) {
+                    return;
+                }
+                if (e.key === ' ' || e.key === 'Enter') {
+                    e.preventDefault();
+                    begin();
+                }
+            },
+            onkeyup: (e) => {
+                if (e.key === ' ' || e.key === 'Enter' || e.key === 'Escape') {
+                    end();
+                }
+            },
+            onpointercancel: end,
+            onpointerdown: (e) => {
+                if (e.button !== 0 && e.pointerType === 'mouse') {
+                    return;
+                }
+                e.currentTarget.setPointerCapture?.(e.pointerId);
+                begin({ x: e.clientX, y: e.clientY });
+            },
+            onpointerleave: end,
+            onpointermove: (e) => {
+                if (phase !== 'holding' || !origin) {
+                    return;
+                }
+                if (Math.hypot(e.clientX - origin.x, e.clientY - origin.y) > moveTolerance) {
+                    end();
+                }
+            },
+            onpointerup: end,
+            onwindowblur: end
+        },
+        state,
+        steps: cells
+    };
+};

package/build/components/long-press/button.d.ts

@@ -0,0 +1,21 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    disabled?: boolean;
+    duration?: number;
+    onlongpress: VoidFunction;
+    onlongpresscancel?: VoidFunction;
+    steps?: number;
+};
+declare const _default: {
+    (): template_u1.Renderable<any>;
+    <T extends A>(attributes: T): template_u1.Renderable<any>;
+    <T extends string>(content: T): template_u1.Renderable<any>;
+    (attributes: A, content?: string | undefined): template_u1.Renderable<any>;
+    bind(context: {
+        attributes?: Partial<A> | undefined;
+        content?: string | undefined;
+    }): any;
+};
+export default _default;

package/build/components/long-press/button.js

@@ -0,0 +1,25 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import bind from './bind.js';
+import './scss/index.scss';
+const template_0q58mnb1 = template_u1.template(`<button class='button long-press' type='button'><span class='long-press-label'><span class='long-press-label-base'></span><span aria-hidden='true' class='long-press-label-fill'></span></span><span class='long-press-hint'> Press and hold for <!--$--> seconds to confirm `);
+let uid = 0;
+export default component(({ disabled = false, duration = 550, onlongpress, onlongpresscancel, steps = 12, ...attributes }, label) => {
+    let id = `long-press-${++uid}`, press = bind({ disabled, duration, onlongpress, onlongpresscancel, steps });
+    return (() => {
+        let root_0q58mnb0 = template_0q58mnb1(), element_0q58mnb2 = root_0q58mnb0.firstChild, element_0q58mnb3 = element_0q58mnb2.firstElementChild.firstElementChild, element_0q58mnb4 = element_0q58mnb3.nextElementSibling, element_0q58mnb5 = element_0q58mnb2.firstElementChild.nextElementSibling, element_0q58mnb6 = element_0q58mnb5.firstChild.nextSibling;
+        template_u1.setProperty(element_0q58mnb2, 'aria-describedby', template_u1.interpolate([(id), "-hint"]));
+        template_u1.setProperty(element_0q58mnb2, 'aria-disabled', disabled);
+        template_u1.setProperty(element_0q58mnb2, 'aria-labelledby', template_u1.interpolate([(id), "-label"]));
+        template_u1.setProperty(element_0q58mnb2, 'data-state', () => press.state.fired ? 'fired' : press.state.holding ? 'holding' : 'idle');
+        template_u1.setList(element_0q58mnb2, 'style', () => `--progress: ${press.state.step / press.steps}`);
+        template_u1.setProperties(element_0q58mnb2, attributes);
+        template_u1.setProperties(element_0q58mnb2, press.attributes);
+        template_u1.setProperty(element_0q58mnb3, 'id', template_u1.interpolate([(id), "-label"]));
+        template_u1.slot(element_0q58mnb3, label, 1);
+        template_u1.slot(element_0q58mnb4, label, 1);
+        template_u1.setProperty(element_0q58mnb5, 'id', template_u1.interpolate([(id), "-hint"]));
+        template_u1.slot(element_0q58mnb6, Math.round(duration / 100) / 10);
+        return root_0q58mnb0;
+    })();
+});