@esportsplus/ui 0.54.0 → 0.56.2

package/build/components/carousel-3d/index.js

@@ -0,0 +1,248 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect } from '@esportsplus/reactivity';
+import './scss/index.scss';
+const template_0cjkhuj2 = template_u1.template(`<button class='carousel-3d-button' type='button'><svg aria-hidden='true' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'><path />`);
+const template_0cjkhuj6 = template_u1.template(`<div class='carousel-3d'><div aria-roledescription='carousel' class='carousel-3d-stage' role='group' tabindex='0'><div class='carousel-3d-ring'></div></div><div class='carousel-3d-controls'><!--$--><p aria-atomic='true' aria-live='polite' class='carousel-3d-counter'><span class='carousel-3d-sr'><!--$-->, card </span><!--$--><span aria-hidden='true'> / </span><span class='carousel-3d-sr'> of `);
+const template_0cjkhujg = template_u1.template(`<div class='carousel-3d-card'><span class='carousel-3d-index'></span><p class='carousel-3d-title'><!--$--><span class='carousel-3d-note'>`);
+class ReactiveObject_0cjkhuj0 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+}
+const CAROUSEL_3D_BUTTON = Symbol.for('@esportsplus/ui/carousel-3d.button');
+const CAROUSEL_3D_CARD = Symbol.for('@esportsplus/ui/carousel-3d.card');
+const BACK_OPACITY = 0.35;
+const BACK_SCALE = 0.9;
+const CLICK_SLOP = 6;
+const DECELERATION = 0.998;
+const NEXT = 'm6 3.5 4.5 4.5L6 12.5';
+const PREVIOUS = 'M10 3.5 5.5 8l4.5 4.5';
+const PX_PER_CARD = 180;
+const REDUCED = '(prefers-reduced-motion: reduce)';
+const ROW_OPACITY = 0.5;
+const SAMPLE_WINDOW = 100;
+const STIFFNESS = (2 * Math.PI / 0.48) ** 2;
+const DAMPING = 2 * 0.8 * Math.sqrt(STIFFNESS);
+const SUBSTEP = 1 / 240;
+function nearestTurn(index, rotation, count) {
+    return index + Math.round((rotation - index) / count) * count;
+}
+function pad(value) {
+    return String(value).padStart(2, '0');
+}
+function project(velocity) {
+    return ((velocity / 1000) * DECELERATION) / (1 - DECELERATION);
+}
+function wrap(value, count) {
+    return ((Math.round(value) % count) + count) % count;
+}
+function template({ items, label, state = new ReactiveObject_0cjkhuj0(), ...attributes }) {
+    let bound = this?.attributes, cards = [], count = items.length, drag = null, frame = 0, media, radius = 0, reduce = false, ring = null, rotation = 0, samples = [], spacing = 0, stop, target = 0, time = 0, velocity = 0;
+    function button(direction) {
+        return (() => {
+            let root_0cjkhuj1 = template_0cjkhuj2(), element_0cjkhuj3 = root_0cjkhuj1.firstChild, element_0cjkhuj4 = element_0cjkhuj3.firstElementChild.firstElementChild;
+            template_u1.setProperty(element_0cjkhuj3, 'aria-label', direction === -1 ? 'Previous card' : 'Next card');
+            template_u1.setProperties(element_0cjkhuj3, bound?.[CAROUSEL_3D_BUTTON]);
+            template_u1.setProperties(element_0cjkhuj3, attributes[CAROUSEL_3D_BUTTON]);
+            template_u1.delegate(element_0cjkhuj3, 'click', () => step(direction));
+            template_u1.setProperty(element_0cjkhuj4, 'd', direction === -1 ? PREVIOUS : NEXT);
+            return root_0cjkhuj1;
+        })();
+    }
+    function goTo(next, initial = velocity) {
+        let index = wrap(next, count);
+        target = next;
+        if (state.active !== index) {
+            state.active = index;
+        }
+        if (reduce) {
+            halt();
+            rotation = next;
+            render();
+            return;
+        }
+        velocity = initial;
+        if (!frame) {
+            time = 0;
+            frame = requestAnimationFrame(tick);
+        }
+    }
+    function halt() {
+        cancelAnimationFrame(frame);
+        frame = 0;
+        velocity = 0;
+    }
+    function layout() {
+        if (!ring) {
+            return;
+        }
+        let style = getComputedStyle(ring);
+        reduce = media?.matches ?? false;
+        spacing = parseFloat(style.getPropertyValue('--card-width')) + parseFloat(style.getPropertyValue('--card-gap'));
+        radius = spacing / 2 / Math.tan(Math.PI / count);
+        ring.style.transform = reduce ? 'none' : `translateZ(${-radius}px)`;
+        ring.classList.toggle('--flat', reduce);
+        if (reduce) {
+            halt();
+            rotation = target = Math.round(rotation);
+        }
+        render();
+    }
+    function release(e) {
+        if (!drag || drag.id !== e.pointerId) {
+            return;
+        }
+        let { card, moved } = drag;
+        drag = null;
+        if (e.type === 'pointercancel') {
+            goTo(Math.round(rotation), 0);
+        }
+        else if (moved) {
+            let speed = sampled(e.timeStamp), reach = Math.max(-count, Math.min(project(speed), count));
+            goTo(Math.round(rotation + reach), speed);
+        }
+        else if (card !== null) {
+            goTo(nearestTurn(card, rotation, count), 0);
+        }
+        else {
+            goTo(Math.round(rotation), 0);
+        }
+    }
+    function render() {
+        for (let i = 0, n = cards.length; i < n; i++) {
+            let card = cards[i], distance = (((i - rotation) % count) + count) % count, offset = distance > count / 2 ? distance - count : distance;
+            if (reduce) {
+                card.style.opacity = String(Math.abs(offset) < 0.5 ? 1 : ROW_OPACITY);
+                card.style.transform = `translateX(${offset * spacing}px)`;
+                card.style.setProperty('--text', '1');
+                continue;
+            }
+            let facing = Math.cos((offset / count) * Math.PI * 2);
+            card.style.opacity = String(BACK_OPACITY + ((1 - BACK_OPACITY) * (facing + 1)) / 2);
+            card.style.transform = `rotateY(${(offset / count) * 360}deg) translateZ(${radius}px) scale(${BACK_SCALE + ((1 - BACK_SCALE) * (facing + 1)) / 2})`;
+            card.style.setProperty('--text', String(Math.min(Math.max((facing - 0.1) / 0.5, 0), 1)));
+        }
+    }
+    function sampled(now) {
+        let first = samples[0], last = samples[samples.length - 1];
+        if (!first || last.t <= first.t || now - last.t > SAMPLE_WINDOW / 2) {
+            return 0;
+        }
+        return (last.value - first.value) / ((last.t - first.t) / 1000);
+    }
+    function step(direction) {
+        goTo(target + direction);
+    }
+    function tick(now) {
+        let dt = time ? Math.min((now - time) / 1000, 1 / 30) : 1 / 60, steps = Math.max(1, Math.ceil(dt / SUBSTEP)), h = dt / steps;
+        time = now;
+        for (let i = 0; i < steps; i++) {
+            velocity += (STIFFNESS * (target - rotation) - DAMPING * velocity) * h;
+            rotation += velocity * h;
+        }
+        if (Math.abs(target - rotation) < 0.0005 && Math.abs(velocity) < 0.005) {
+            rotation = target;
+            velocity = 0;
+            frame = 0;
+            render();
+            return;
+        }
+        render();
+        frame = requestAnimationFrame(tick);
+    }
+    return (() => {
+        let root_0cjkhuj5 = template_0cjkhuj6(), element_0cjkhuj7 = root_0cjkhuj5.firstChild, element_0cjkhuj8 = element_0cjkhuj7.firstElementChild, element_0cjkhuj9 = element_0cjkhuj8.firstElementChild, element_0cjkhuja = element_0cjkhuj8.nextElementSibling.firstChild, element_0cjkhujb = element_0cjkhuj8.nextElementSibling.firstElementChild.firstElementChild.firstChild, element_0cjkhujc = element_0cjkhuj8.nextElementSibling.firstElementChild.firstChild.nextSibling, element_0cjkhujd = element_0cjkhuj8.nextElementSibling.firstElementChild, element_0cjkhuje = element_0cjkhuj8.nextElementSibling;
+        template_u1.setProperties(element_0cjkhuj7, bound);
+        template_u1.setProperties(element_0cjkhuj7, attributes);
+        template_u1.onconnect(element_0cjkhuj7, (element) => {
+            cards = Array.from(element.querySelectorAll('.carousel-3d-card'));
+            ring = element.querySelector('.carousel-3d-ring');
+            media = matchMedia(REDUCED);
+            media.addEventListener('change', layout);
+            layout();
+            stop = effect(() => {
+                let active = state.active;
+                if (active !== wrap(target, count)) {
+                    goTo(nearestTurn(active, rotation, count));
+                }
+            });
+        });
+        template_u1.ondisconnect(element_0cjkhuj7, () => {
+            halt();
+            media?.removeEventListener('change', layout);
+            stop?.();
+        });
+        template_u1.setProperty(element_0cjkhuj8, 'aria-label', label);
+        template_u1.delegate(element_0cjkhuj8, 'keydown', (e) => {
+            if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') {
+                return;
+            }
+            e.preventDefault();
+            step(e.key === 'ArrowLeft' ? -1 : 1);
+        });
+        template_u1.delegate(element_0cjkhuj8, 'pointercancel', release);
+        template_u1.delegate(element_0cjkhuj8, 'pointerdown', (e) => {
+            if (e.button !== 0 || drag) {
+                return;
+            }
+            let card = e.target.closest('[data-card]');
+            halt();
+            drag = {
+                card: card ? Number(card.dataset.card) : null,
+                from: rotation,
+                id: e.pointerId,
+                moved: false,
+                x: e.clientX
+            };
+            samples = [{ t: e.timeStamp, value: rotation }];
+            e.currentTarget.setPointerCapture(e.pointerId);
+        });
+        template_u1.delegate(element_0cjkhuj8, 'pointermove', (e) => {
+            if (!drag || drag.id !== e.pointerId) {
+                return;
+            }
+            let dx = e.clientX - drag.x;
+            if (!drag.moved) {
+                if (Math.abs(dx) < CLICK_SLOP) {
+                    return;
+                }
+                drag.moved = true;
+                drag.x = e.clientX;
+                return;
+            }
+            rotation = drag.from - dx / PX_PER_CARD;
+            samples.push({ t: e.timeStamp, value: rotation });
+            while (samples.length > 2 && e.timeStamp - samples[0].t > SAMPLE_WINDOW) {
+                samples.shift();
+            }
+            render();
+        });
+        template_u1.delegate(element_0cjkhuj8, 'pointerup', release);
+        template_u1.slot(element_0cjkhuj9, items.map((item, i) => {
+            let root_0cjkhujf = template_0cjkhujg(), element_0cjkhujh = root_0cjkhujf.firstChild, element_0cjkhuji = element_0cjkhujh.firstElementChild, element_0cjkhujj = element_0cjkhuji.nextElementSibling.firstChild, element_0cjkhujk = element_0cjkhuji.nextElementSibling.firstElementChild;
+            template_u1.setProperty(element_0cjkhujh, 'aria-hidden', () => String(state.active !== i));
+            template_u1.setProperty(element_0cjkhujh, 'data-card', i);
+            template_u1.setProperties(element_0cjkhujh, bound?.[CAROUSEL_3D_CARD]);
+            template_u1.setProperties(element_0cjkhujh, attributes[CAROUSEL_3D_CARD]);
+            template_u1.slot(element_0cjkhuji, pad(i + 1), 1);
+            template_u1.slot(element_0cjkhujj, item.title);
+            template_u1.slot(element_0cjkhujk, item.note, 1);
+            return root_0cjkhujf;
+        }), 1);
+        template_u1.slot(element_0cjkhuja, button(-1));
+        new template_u1.EffectSlot(element_0cjkhujb, () => items[state.active].title);
+        new template_u1.EffectSlot(element_0cjkhujc, () => pad(state.active + 1));
+        template_u1.slot(element_0cjkhujd, pad(count), 2);
+        template_u1.slot(element_0cjkhuje, button(1), 2);
+        return root_0cjkhuj5;
+    })();
+}
+export default Object.assign(template, { button: CAROUSEL_3D_BUTTON, card: CAROUSEL_3D_CARD });

package/build/components/carousel-3d/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.carousel-3d{--button-background:var(--color-grey-400);--button-box-shadow:var(--shadow-raised);--button-color:var(--color-text-500);--button-pressed-scale:.96;--button-size:44px;--card-background:var(--color-white-300);--card-border-radius:20px;--card-box-shadow:var(--shadow-raised);--card-gap:24px;--card-height:208px;--card-padding:20px;--card-width:168px;--focus-ring-color:oklch(from var(--color-text-500) l c h / .38);--max-width:520px;--muted-color:var(--color-text-300);--perspective:1100px;--shadow-raised:0 0 0 var(--border-width-400) oklch(from var(--color-black-500) l c h / .06), 0 1px 2px oklch(from var(--color-black-500) l c h / .06), 0 6px 16px -6px oklch(from var(--color-black-500) l c h / .12);--stage-height:260px;--title-color:var(--color-text-500);max-width:100%;width:var(--max-width);flex-direction:column;align-items:center;gap:20px;display:flex}.carousel-3d-button{background:var(--button-background);box-shadow:var(--button-box-shadow);color:var(--button-color);cursor:pointer;height:var(--button-size);touch-action:manipulation;-webkit-user-select:none;user-select:none;width:var(--button-size);border:0;border-radius:999px;outline:none;justify-content:center;align-items:center;padding:0;transition:scale .15s ease-out;display:flex}.carousel-3d-button svg{width:16px;height:16px}.carousel-3d-button:active{scale:var(--button-pressed-scale)}.carousel-3d-button:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:2px}.carousel-3d-card{--text:1;background:var(--card-background);border-radius:var(--card-border-radius);box-shadow:var(--card-box-shadow);box-sizing:border-box;height:var(--card-height);left:calc(var(--card-width) / -2);padding:var(--card-padding);top:calc(var(--card-height) / -2);width:var(--card-width);flex-direction:column;justify-content:space-between;display:flex;position:absolute}.carousel-3d-controls{align-items:center;gap:12px;display:flex}.carousel-3d-counter{color:var(--muted-color);font-variant-numeric:tabular-nums;text-align:center;width:64px;margin:0;font-family:ui-monospace,monospace;font-size:14px}.carousel-3d-index{color:var(--muted-color);font-variant-numeric:tabular-nums;opacity:var(--text);font-family:ui-monospace,monospace;font-size:12px}.carousel-3d-note{color:var(--muted-color);letter-spacing:normal;text-wrap:pretty;margin-top:6px;font-size:14px;font-weight:400;line-height:1.5;display:block}.carousel-3d-ring{transform-style:preserve-3d;position:absolute;top:50%;left:50%}.carousel-3d-ring.--flat .carousel-3d-card{transition:opacity .2s ease-out}.carousel-3d-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.carousel-3d-stage{cursor:grab;height:var(--stage-height);perspective:var(--perspective);touch-action:pan-y;-webkit-user-select:none;user-select:none;border-radius:16px;outline:none;width:100%;position:relative;overflow:hidden}.carousel-3d-stage:active{cursor:grabbing}.carousel-3d-stage:focus-visible{outline:2px solid var(--focus-ring-color)}.carousel-3d-title{color:var(--title-color);letter-spacing:-.02em;opacity:var(--text);text-wrap:balance;margin:0;font-size:18px;font-weight:500;line-height:1.375}@media (prefers-reduced-motion:reduce){.carousel-3d-button{transition:none}}}
+/*$vite$:1*/