@esportsplus/ui 0.56.3 → 0.57.0

package/build/components/date-range-picker/index.js

@@ -1,443 +0,0 @@
-import * as template_u1 from '@esportsplus/template';
-import * as reactivity_u0 from '@esportsplus/reactivity';
-import { computed, dispose, read, untrack } from '@esportsplus/reactivity';
-import './scss/index.scss';
-const template_1wcxcxi1 = template_u1.template(`<td class='date-range-picker-cell'>`);
-const template_1wcxcxi3 = template_u1.template(`<td class='date-range-picker-cell' role='gridcell'><button class='date-range-picker-day' type='button'><!--$-->`);
-const template_1wcxcxi7 = template_u1.template(`<span aria-hidden='true' class='date-range-picker-today'>`);
-const template_1wcxcxi9 = template_u1.template(`<div class='date-range-picker-month'><p class='date-range-picker-month-title'></p><table class='date-range-picker-grid' role='grid'><thead><tr></tr></thead><tbody>`);
-const template_1wcxcxif = template_u1.template(`<th scope='col'>`);
-const template_1wcxcxii = template_u1.template(`<tr>`);
-const template_1wcxcxil = template_u1.template(`<div class='date-range-picker-months'>`);
-const template_1wcxcxio = template_u1.template(`<div class='date-range-picker'><div aria-label='Presets' class='date-range-picker-presets' role='group'></div><div class='date-range-picker-area'><div class='date-range-picker-nav'><button aria-label='Previous month' class='button date-range-picker-step' 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 d='M10 3.5 5.5 8l4.5 4.5' /></svg></button><button aria-label='Next month' class='button date-range-picker-step' 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 d='m6 3.5 4.5 4.5L6 12.5' /></svg></button></div><span aria-live='polite' class='date-range-picker-live'></span></div><div class='date-range-picker-footer'><div class='date-range-picker-status'><p class='date-range-picker-summary'></p><p class='date-range-picker-hint'></p></div><button class='button date-range-picker-clear' type='button'> Clear </button><button class='button date-range-picker-apply' type='button'><span class='date-range-picker-apply-labels'><span class='date-range-picker-apply-label date-range-picker-apply-label--done'><svg aria-hidden='true' class='date-range-picker-apply-icon' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 16 16'><path d='m3.5 8.5 3 3 6-7' /></svg><span class='date-range-picker-apply-text'>Applied</span></span><span class='date-range-picker-apply-label date-range-picker-apply-label--idle'>Apply</span></span></button></div><span aria-live='polite' class='date-range-picker-live'>`);
-const template_1wcxcxi11 = template_u1.template(`<button class='button date-range-picker-preset' type='button'>`);
-class ReactiveObject_1wcxcxi0 extends reactivity_u0.ReactiveObject {
-    #applied = this[reactivity_u0.SIGNAL](false);
-    #focused;
-    #hover;
-    #single = this[reactivity_u0.SIGNAL](false);
-    #view;
-    constructor(_p0, _p1, _p2) {
-        super(null);
-        this.#focused = this[reactivity_u0.SIGNAL](_p0);
-        this.#hover = this[reactivity_u0.SIGNAL](_p1);
-        this.#view = this[reactivity_u0.SIGNAL](_p2);
-    }
-    get applied() {
-        return reactivity_u0.read(this.#applied);
-    }
-    set applied(_v0) {
-        reactivity_u0.write(this.#applied, _v0);
-    }
-    get focused() {
-        return reactivity_u0.read(this.#focused);
-    }
-    set focused(_v1) {
-        reactivity_u0.write(this.#focused, _v1);
-    }
-    get hover() {
-        return reactivity_u0.read(this.#hover);
-    }
-    set hover(_v2) {
-        reactivity_u0.write(this.#hover, _v2);
-    }
-    get single() {
-        return reactivity_u0.read(this.#single);
-    }
-    set single(_v3) {
-        reactivity_u0.write(this.#single, _v3);
-    }
-    get view() {
-        return reactivity_u0.read(this.#view);
-    }
-    set view(_v4) {
-        reactivity_u0.write(this.#view, _v4);
-    }
-}
-const CELLS = 42;
-const DATE_RANGE_PICKER_DAY = Symbol.for('@esportsplus/ui/date-range-picker.day');
-const EASE_OUT = 'cubic-bezier(0.23, 1, 0.32, 1)';
-const REDUCED_MOTION = '(prefers-reduced-motion: reduce)';
-const SLIDE = 56;
-const TWO_MONTHS_AT = 540;
-const WEEKDAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-function addDays(iso, days) {
-    let d = fromIso(iso);
-    return toIso(new Date(d.getFullYear(), d.getMonth(), d.getDate() + days));
-}
-function addMonths(iso, months) {
-    let d = fromIso(iso), last = new Date(d.getFullYear(), d.getMonth() + months + 1, 0);
-    return toIso(new Date(last.getFullYear(), last.getMonth(), Math.min(d.getDate(), last.getDate())));
-}
-function dayLabel(iso) {
-    return fromIso(iso).toLocaleDateString('en-US', { day: 'numeric', month: 'long', weekday: 'long', year: 'numeric' });
-}
-function daysBetween(a, b) {
-    return Math.round((fromIso(b).getTime() - fromIso(a).getTime()) / 86_400_000);
-}
-function describe(range) {
-    let days = daysBetween(range.start, range.end) + 1, sameYear = range.start.slice(0, 4) === range.end.slice(0, 4), span = range.start === range.end
-        ? short(range.start, true)
-        : `${short(range.start, !sameYear)} to ${short(range.end, true)}`;
-    return `${span} · ${days} day${days === 1 ? '' : 's'}`;
-}
-function fromIso(iso) {
-    let [y, m, d] = iso.split('-').map(Number);
-    return new Date(y, m - 1, d);
-}
-function monthEnd(month) {
-    return toIso(new Date(Math.floor(month / 12), (month % 12) + 1, 0));
-}
-function monthIndex(iso) {
-    let [y, m] = iso.split('-').map(Number);
-    return y * 12 + m - 1;
-}
-function monthStart(month) {
-    return toIso(new Date(Math.floor(month / 12), month % 12, 1));
-}
-function monthTitle(month) {
-    return new Date(Math.floor(month / 12), month % 12, 1).toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
-}
-function pad(n) {
-    return String(n).padStart(2, '0');
-}
-function presets(today) {
-    let month = monthIndex(today);
-    return [
-        { label: 'Last 7 days', range: { end: today, start: addDays(today, -6) } },
-        { label: 'Last 30 days', range: { end: today, start: addDays(today, -29) } },
-        { label: 'This month', range: { end: monthEnd(month), start: monthStart(month) } },
-        { label: 'Last month', range: { end: monthEnd(month - 1), start: monthStart(month - 1) } }
-    ];
-}
-function short(iso, withYear) {
-    return fromIso(iso).toLocaleDateString('en-US', { day: 'numeric', month: 'short', year: withYear ? 'numeric' : undefined });
-}
-function template({ onapply, state, today = toIso(new Date()), value, ...attributes } = {}) {
-    let applied, area, defaults = this?.attributes, entering = 0, id = `date-range-picker-${Math.random().toString(36).slice(2, 8)}`, observer, pending = null, s = state || reactivity_u0.reactive({ end: value?.end ?? null, start: value?.start ?? null }), ui = new ReactiveObject_1wcxcxi0(null, null, null), viewCount = computed(() => ui.single ? 1 : 2), viewMonth = computed(() => {
-        if (ui.view !== null) {
-            return ui.view;
-        }
-        let month = monthIndex(s.start ?? today);
-        return s.end && !ui.single && monthIndex(s.end) === month ? month - 1 : month;
-    }), rangeHi = computed(() => {
-        if (s.start !== null && s.end === null) {
-            return ui.hover ? (ui.hover < s.start ? s.start : ui.hover) : s.start;
-        }
-        return s.end;
-    }), rangeLo = computed(() => {
-        if (s.start !== null && s.end === null && ui.hover) {
-            return ui.hover < s.start ? ui.hover : s.start;
-        }
-        return s.start;
-    }), tabbable = computed(() => {
-        let focused = ui.focused ?? s.start ?? today, month = monthIndex(focused), shown = read(viewMonth);
-        return month >= shown && month < shown + read(viewCount) ? focused : monthStart(shown);
-    });
-    function band(iso, col, last) {
-        let hi = read(rangeHi), lo = read(rangeLo);
-        if (!inRange(iso)) {
-            return '';
-        }
-        let rowEnd = col === 6 || iso === last, rowStart = col === 0 || iso.endsWith('-01');
-        if ((iso === lo && rowEnd) || (iso === hi && rowStart)) {
-            return '';
-        }
-        return `--band${iso === lo ? ' --band-lo' : ''}${iso === hi ? ' --band-hi' : ''}${rowStart && iso !== lo ? ' --band-start' : ''}${rowEnd && iso !== hi ? ' --band-end' : ''}`;
-    }
-    function cell(iso, col, last) {
-        if (!iso) {
-            return template_1wcxcxi1();
-        }
-        return (() => {
-            let root_1wcxcxi2 = template_1wcxcxi3(), element_1wcxcxi4 = root_1wcxcxi2.firstChild, element_1wcxcxi5 = element_1wcxcxi4.firstElementChild, element_1wcxcxi6 = element_1wcxcxi5.firstChild;
-            template_u1.setProperty(element_1wcxcxi4, 'aria-selected', () => String(inRange(iso) || iso === s.start || iso === s.end));
-            template_u1.setList(element_1wcxcxi4, 'class', () => band(iso, col, last));
-            template_u1.setProperty(element_1wcxcxi5, 'aria-label', dayLabel(iso));
-            template_u1.setProperty(element_1wcxcxi5, 'data-date', iso);
-            template_u1.setProperties(element_1wcxcxi5, iso === today ? { 'aria-current': 'date' } : {});
-            template_u1.setProperties(element_1wcxcxi5, defaults?.[DATE_RANGE_PICKER_DAY]);
-            template_u1.setProperties(element_1wcxcxi5, attributes[DATE_RANGE_PICKER_DAY]);
-            template_u1.setList(element_1wcxcxi5, 'class', () => dayClass(iso));
-            template_u1.setProperty(element_1wcxcxi5, 'tabindex', () => {
-                let day = read(tabbable);
-                return day === iso ? '0' : '-1';
-            });
-            template_u1.slot(element_1wcxcxi6, Number(iso.slice(8)));
-            template_u1.slot(element_1wcxcxi5, iso === today && template_1wcxcxi7(), 2);
-            return root_1wcxcxi2;
-        })();
-    }
-    function dayClass(iso) {
-        if (iso === s.start || iso === s.end) {
-            return '--active';
-        }
-        let hi = read(rangeHi), lo = read(rangeLo);
-        return (iso === lo || iso === hi) && picking() && ui.hover ? '--edge' : '';
-    }
-    function focus(iso) {
-        pending = iso;
-        requestAnimationFrame(settle);
-    }
-    function goTo(iso) {
-        ui.focused = iso;
-        if (picking()) {
-            ui.hover = iso;
-        }
-        reveal(iso);
-        focus(iso);
-    }
-    function inRange(iso) {
-        let hi = read(rangeHi), lo = read(rangeLo);
-        return lo !== null && hi !== null && lo !== hi && iso >= lo && iso <= hi;
-    }
-    function keydown(e) {
-        let target = e.target.closest('[data-date]');
-        if (!target) {
-            return;
-        }
-        let focused = ui.focused ?? s.start ?? today, weekday = fromIso(focused).getDay(), years = e.shiftKey ? 12 : 1, moves = {
-            ArrowDown: () => addDays(focused, 7),
-            ArrowLeft: () => addDays(focused, -1),
-            ArrowRight: () => addDays(focused, 1),
-            ArrowUp: () => addDays(focused, -7),
-            End: () => addDays(focused, 6 - weekday),
-            Home: () => addDays(focused, -weekday),
-            PageDown: () => addMonths(focused, years),
-            PageUp: () => addMonths(focused, -years)
-        }, move = moves[e.key];
-        if (move) {
-            e.preventDefault();
-            goTo(move());
-        }
-        else if (e.key === 'Escape' && picking()) {
-            e.preventDefault();
-            s.start = null;
-            ui.hover = null;
-        }
-    }
-    function month(index) {
-        let first = fromIso(monthStart(index)), last = monthEnd(index), lead = first.getDay(), title = `${id}-${index}`, days = [];
-        for (let i = 0; i < CELLS; i++) {
-            let iso = toIso(new Date(first.getFullYear(), first.getMonth(), i - lead + 1));
-            days.push(monthIndex(iso) === index ? iso : null);
-        }
-        return (() => {
-            let root_1wcxcxi8 = template_1wcxcxi9(), element_1wcxcxia = root_1wcxcxi8.firstChild.firstElementChild, element_1wcxcxib = element_1wcxcxia.nextElementSibling, element_1wcxcxic = element_1wcxcxib.firstElementChild.firstElementChild, element_1wcxcxid = element_1wcxcxib.firstElementChild.nextElementSibling;
-            template_u1.setProperty(element_1wcxcxia, 'id', title);
-            template_u1.slot(element_1wcxcxia, monthTitle(index), 1);
-            template_u1.setProperty(element_1wcxcxib, 'aria-labelledby', title);
-            template_u1.slot(element_1wcxcxic, WEEKDAYS.map((day) => {
-                let root_1wcxcxie = template_1wcxcxif(), element_1wcxcxig = root_1wcxcxie.firstChild;
-                template_u1.setProperty(element_1wcxcxig, 'abbr', day);
-                template_u1.slot(element_1wcxcxig, day.slice(0, 2), 1);
-                return root_1wcxcxie;
-            }), 1);
-            template_u1.slot(element_1wcxcxid, [0, 1, 2, 3, 4, 5].map((week) => {
-                let root_1wcxcxih = template_1wcxcxii(), element_1wcxcxij = root_1wcxcxih.firstChild;
-                template_u1.slot(element_1wcxcxij, days.slice(week * 7, week * 7 + 7).map((iso, col) => cell(iso, col, last)), 1);
-                return root_1wcxcxih;
-            }), 1);
-            return root_1wcxcxi8;
-        })();
-    }
-    function months(view, count) {
-        return (() => {
-            let root_1wcxcxik = template_1wcxcxil(), element_1wcxcxim = root_1wcxcxik.firstChild;
-            template_u1.onconnect(element_1wcxcxim, (element) => {
-                let direction = Number(element.dataset.entering);
-                settle();
-                if (!direction) {
-                    return;
-                }
-                delete element.dataset.entering;
-                element.style.removeProperty('opacity');
-                element.animate(matchMedia(REDUCED_MOTION).matches
-                    ? { opacity: [0, 1] }
-                    : { filter: ['blur(4px)', 'blur(0px)'], opacity: [0, 1], transform: [`translateX(${direction * SLIDE}px)`, 'none'] }, { duration: 250, easing: EASE_OUT });
-            });
-            template_u1.onrender(element_1wcxcxim, (element) => {
-                if (!entering) {
-                    return;
-                }
-                element.dataset.entering = String(entering);
-                element.style.opacity = '0';
-                entering = 0;
-            });
-            template_u1.slot(element_1wcxcxim, Array.from({ length: count }, (_, i) => month(view + i)), 1);
-            return root_1wcxcxik;
-        })();
-    }
-    function picking() {
-        return s.start !== null && s.end === null;
-    }
-    function reveal(iso) {
-        let m = monthIndex(iso), shown = read(viewMonth);
-        if (m < shown) {
-            showView(m);
-        }
-        else if (m > shown + read(viewCount) - 1) {
-            showView(m - read(viewCount) + 1);
-        }
-        else {
-            showView(shown);
-        }
-    }
-    function select(iso) {
-        let start = s.start;
-        ui.applied = false;
-        ui.focused = iso;
-        reveal(iso);
-        if (!picking() || start === null) {
-            s.start = iso;
-            s.end = null;
-            ui.hover = iso;
-        }
-        else if (iso < start) {
-            s.end = start;
-            s.start = iso;
-            ui.hover = null;
-        }
-        else {
-            s.end = iso;
-            ui.hover = null;
-        }
-    }
-    function setRange(range) {
-        let shown = read(viewMonth);
-        ui.applied = false;
-        ui.hover = null;
-        s.end = range?.end ?? null;
-        s.start = range?.start ?? null;
-        if (!range) {
-            showView(shown);
-            return;
-        }
-        ui.focused = range.start;
-        let end = monthIndex(range.end), visible = monthIndex(range.start) >= shown && end <= shown + read(viewCount) - 1;
-        showView(visible ? shown : Math.max(monthIndex(range.start), end - read(viewCount) + 1));
-    }
-    function settle() {
-        let button = pending && area?.querySelector(`.date-range-picker-months:not([data-exiting]):not([data-stale]) [data-date='${pending}']`);
-        if (!button) {
-            return;
-        }
-        pending = null;
-        button.focus({ preventScroll: true });
-    }
-    function showView(next) {
-        let shown = read(viewMonth);
-        if (next !== shown && area) {
-            let current = area.querySelector(':scope > .date-range-picker-months:not([data-exiting]):not([data-stale])');
-            entering = next > shown ? 1 : -1;
-            if (current) {
-                current.dataset.stale = '';
-                let direction = entering, ghost = current.cloneNode(true);
-                ghost.dataset.exiting = '';
-                ghost.inert = true;
-                ghost.style.left = `${current.offsetLeft}px`;
-                ghost.style.top = `${current.offsetTop}px`;
-                ghost.style.width = `${current.offsetWidth}px`;
-                area.append(ghost);
-                ghost.animate(matchMedia(REDUCED_MOTION).matches
-                    ? { opacity: [1, 0] }
-                    : { filter: ['blur(0px)', 'blur(2px)'], opacity: [1, 0], transform: ['none', `translateX(${direction * -SLIDE * 0.6}px)`] }, { duration: 180, easing: EASE_OUT, fill: 'forwards' }).onfinish = () => ghost.remove();
-            }
-        }
-        ui.view = next;
-    }
-    function step(months) {
-        let focused = ui.focused ?? s.start ?? today;
-        showView(read(viewMonth) + months);
-        ui.focused = addMonths(focused, months);
-    }
-    function summary() {
-        if (s.start !== null && s.end !== null) {
-            return describe({ end: s.end, start: s.start });
-        }
-        return s.start !== null ? `From ${short(s.start, true)}` : 'No dates selected';
-    }
-    return (() => {
-        let root_1wcxcxin = template_1wcxcxio(), element_1wcxcxip = root_1wcxcxin.firstChild, element_1wcxcxiq = element_1wcxcxip.firstElementChild, element_1wcxcxir = element_1wcxcxiq.nextElementSibling, element_1wcxcxis = element_1wcxcxir.firstElementChild.firstElementChild, element_1wcxcxit = element_1wcxcxis.nextElementSibling, element_1wcxcxiu = element_1wcxcxir.firstElementChild.nextElementSibling, element_1wcxcxiv = element_1wcxcxir.nextElementSibling.firstElementChild.firstElementChild, element_1wcxcxiw = element_1wcxcxiv.nextElementSibling, element_1wcxcxix = element_1wcxcxir.nextElementSibling.firstElementChild.nextElementSibling, element_1wcxcxiy = element_1wcxcxix.nextElementSibling, element_1wcxcxiz = element_1wcxcxir.nextElementSibling.nextElementSibling;
-        template_u1.setProperties(element_1wcxcxip, defaults);
-        template_u1.setProperties(element_1wcxcxip, attributes);
-        template_u1.onconnect(element_1wcxcxip, (element) => {
-            observer = new ResizeObserver(([entry]) => {
-                ui.single = entry.contentRect.width < TWO_MONTHS_AT;
-            });
-            observer.observe(element);
-        });
-        template_u1.ondisconnect(element_1wcxcxip, () => {
-            clearTimeout(applied);
-            observer?.disconnect();
-            dispose(rangeHi);
-            dispose(rangeLo);
-            dispose(tabbable);
-            dispose(viewCount);
-            dispose(viewMonth);
-        });
-        template_u1.slot(element_1wcxcxiq, presets(today).map((chip) => {
-            let root_1wcxcxi10 = template_1wcxcxi11(), element_1wcxcxi12 = root_1wcxcxi10.firstChild;
-            template_u1.setProperty(element_1wcxcxi12, 'aria-pressed', () => String(s.start === chip.range.start && s.end === chip.range.end));
-            template_u1.delegate(element_1wcxcxi12, 'click', () => setRange(chip.range));
-            template_u1.slot(element_1wcxcxi12, chip.label, 1);
-            return root_1wcxcxi10;
-        }), 1);
-        template_u1.delegate(element_1wcxcxir, 'click', (e) => {
-            let day = e.target.closest('[data-date]');
-            if (day?.dataset.date) {
-                select(day.dataset.date);
-            }
-        });
-        template_u1.delegate(element_1wcxcxir, 'keydown', keydown);
-        template_u1.on(element_1wcxcxir, 'mouseleave', () => {
-            if (picking()) {
-                ui.hover = null;
-            }
-        });
-        template_u1.delegate(element_1wcxcxir, 'pointerover', (e) => {
-            if (e.pointerType === 'touch' || !picking()) {
-                return;
-            }
-            let day = e.target.closest('[data-date]');
-            if (day?.dataset.date && !day.closest('[data-exiting]')) {
-                ui.hover = day.dataset.date;
-            }
-        });
-        template_u1.onrender(element_1wcxcxir, (element) => {
-            area = element;
-        });
-        template_u1.delegate(element_1wcxcxis, 'click', () => step(-1));
-        template_u1.delegate(element_1wcxcxit, 'click', () => step(1));
-        new template_u1.EffectSlot(element_1wcxcxiu, () => Array.from({ length: read(viewCount) }, (_, i) => monthTitle(read(viewMonth) + i)).join(' and '), 1);
-        new template_u1.EffectSlot(element_1wcxcxir, () => {
-            let count = read(viewCount), view = read(viewMonth);
-            return untrack(() => months(view, count));
-        }, 2);
-        template_u1.setList(element_1wcxcxiv, 'class', () => s.start !== null && '--active');
-        new template_u1.EffectSlot(element_1wcxcxiv, summary, 1);
-        new template_u1.EffectSlot(element_1wcxcxiw, () => s.start !== null && s.end !== null ? '' : picking() ? 'Pick an end date' : 'Pick a start date', 1);
-        template_u1.setList(element_1wcxcxix, 'class', () => s.start === null && '--disabled');
-        template_u1.setProperty(element_1wcxcxix, 'inert', () => s.start === null);
-        template_u1.delegate(element_1wcxcxix, 'click', () => setRange(null));
-        template_u1.setList(element_1wcxcxiy, 'class', () => ui.applied && '--applied');
-        template_u1.setProperty(element_1wcxcxiy, 'disabled', () => s.start === null || s.end === null);
-        template_u1.delegate(element_1wcxcxiy, 'click', () => {
-            if (s.start === null || s.end === null) {
-                return;
-            }
-            onapply?.({ end: s.end, start: s.start });
-            ui.applied = true;
-            clearTimeout(applied);
-            applied = setTimeout(() => {
-                ui.applied = false;
-            }, 1600);
-        });
-        new template_u1.EffectSlot(element_1wcxcxiz, () => ui.applied ? `Applied ${summary()}` : '', 1);
-        return root_1wcxcxin;
-    })();
-}
-function toIso(d) {
-    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
-}
-export default Object.assign(template, { day: DATE_RANGE_PICKER_DAY, describe });

package/build/components/date-range-picker/scss/index.scss

@@ -1,2 +0,0 @@
-@layer components {.date-range-picker{--accent:var(--color-text-500);--accent-contrast:var(--color-white-300);--background:var(--color-white-300);--band:oklch(from var(--color-text-500) l c h / .07);--border:var(--color-border-300);--box-shadow:0 0 0 1px oklch(from var(--color-black-300) l c h / .06), 0 1px 2px oklch(from var(--color-black-300) l c h / .06), 0 6px 16px -6px oklch(from var(--color-black-300) l c h / .12);--color-muted:var(--color-text-300);--day-size:36px;--edge:oklch(from var(--color-text-500) l c h / .14);--focus-ring:oklch(from var(--color-text-500) l c h / .38);--font-size:calc(var(--font-size-400) * .875);--font-size-small:calc(var(--font-size-400) * .75);--font-size-title:calc(var(--font-size-400) * .9375);--foreground:var(--color-text-500);--hover:oklch(from var(--color-text-500) l c h / .05);--icon-duration:.446s;--icon-timing-function:linear(0, .118, .319, .509, .657, .769, .848, .901, .937, .96, .975, .984, .99, .994, 1);--radius:24px;--row-height:40px;--width:600px;background:var(--background);border-radius:var(--radius);box-shadow:var(--box-shadow);color:var(--foreground);font-size:var(--font-size);max-width:100%;width:var(--width);padding:16px}.date-range-picker-apply{--background-default:var(--accent);--color-default:var(--accent-contrast);--padding-horizontal:16px;--padding-vertical:0px;font-weight:var(--font-weight-500);border-radius:999px;height:36px}.date-range-picker-apply:disabled{opacity:.4}.date-range-picker-apply:not(:disabled):active{scale:.96}.date-range-picker-apply-label{grid-area:1/1;justify-content:center;align-items:center;gap:6px;display:flex}.date-range-picker-apply-label--idle,.date-range-picker-apply-text{transition:filter .2s ease-out,opacity .2s ease-out}.--applied .date-range-picker-apply-label--idle{filter:blur(4px);opacity:0}.date-range-picker-apply-icon{filter:blur(4px);opacity:0;height:16px;transition:filter var(--icon-duration) var(--icon-timing-function), opacity var(--icon-duration) var(--icon-timing-function), scale var(--icon-duration) var(--icon-timing-function);width:16px;scale:.25}.--applied .date-range-picker-apply-icon{filter:none;opacity:1;scale:1}.date-range-picker-apply-labels{display:grid}.date-range-picker-apply-text{filter:blur(4px);opacity:0}.--applied .date-range-picker-apply-text{filter:none;opacity:1}.date-range-picker-apply,.date-range-picker-clear,.date-range-picker-preset,.date-range-picker-step{font-size:var(--font-size);outline:0 solid var(--focus-ring);outline-offset:2px;-webkit-user-select:none;user-select:none}.date-range-picker-apply:focus-visible,.date-range-picker-clear:focus-visible,.date-range-picker-preset:focus-visible,.date-range-picker-step:focus-visible{outline-width:2px}.date-range-picker-area{height:calc(var(--row-height) + 32px + var(--row-height) * 6 + 8px);margin:-4px;padding:4px;position:relative;overflow:hidden}.date-range-picker-cell{height:var(--row-height);padding:0;position:relative}.date-range-picker-cell.--band:before{background:var(--band);content:"";position:absolute;inset:2px 0}.date-range-picker-cell.--band-end:before{border-top-right-radius:999px;border-bottom-right-radius:999px}.date-range-picker-cell.--band-hi:before{right:50%}.date-range-picker-cell.--band-lo:before{left:50%}.date-range-picker-cell.--band-start:before{border-top-left-radius:999px;border-bottom-left-radius:999px}.date-range-picker-clear{--background-hover:var(--hover);--color-default:var(--color-muted);--color-hover:var(--foreground);--padding-horizontal:14px;--padding-vertical:0px;outline-offset:0;border-radius:999px;height:36px}.date-range-picker-clear:active{scale:.96}.date-range-picker-clear.--disabled{opacity:.4}.date-range-picker-day{color:var(--foreground);cursor:pointer;font:inherit;font-variant-numeric:tabular-nums;height:var(--day-size);outline:0 solid var(--focus-ring);outline-offset:1px;touch-action:manipulation;-webkit-user-select:none;user-select:none;width:var(--day-size);background:0 0;border:0;border-radius:50%;justify-content:center;align-items:center;margin:0 auto;padding:0;transition:background-color .15s ease-out,scale .15s ease-out;display:flex;position:relative}.date-range-picker-day:active{scale:.96}.date-range-picker-day:focus-visible{outline-width:2px}.date-range-picker-day:hover{background:var(--band)}.date-range-picker-day.--edge{background:var(--edge)}.date-range-picker-day.--active{background:var(--accent);color:var(--accent-contrast)}.date-range-picker-footer{border-top:1px solid var(--border);align-items:center;gap:8px;height:56px;margin:12px -16px 0;padding:12px 16px 0;display:flex}.date-range-picker-grid{border-collapse:collapse;table-layout:fixed;width:100%}.date-range-picker-grid th{color:var(--color-muted);font-size:var(--font-size-small);font-weight:var(--font-weight-500);text-align:center;height:32px;padding:0}.date-range-picker-hint{color:var(--color-muted);font-size:var(--font-size-small);text-overflow:ellipsis;white-space:nowrap;height:16px;line-height:16px;overflow:hidden}.date-range-picker-live{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.date-range-picker-month{flex:1 1 0;min-width:0}.date-range-picker-month-title{font-size:var(--font-size-title);font-weight:var(--font-weight-500);height:var(--row-height);justify-content:center;align-items:center;display:flex}.date-range-picker-months{gap:24px;display:flex}.date-range-picker-months[data-exiting]{pointer-events:none;position:absolute}.date-range-picker-nav{pointer-events:none;z-index:1;justify-content:space-between;display:flex;position:absolute;inset:4px 4px auto}.date-range-picker-presets{scrollbar-width:none;gap:6px;margin:-4px -16px 8px;padding:4px 16px;display:flex;overflow-x:auto}.date-range-picker-preset{--background-hover:var(--hover);--color-default:var(--color-muted);--color-hover:var(--foreground);--padding-horizontal:14px;--padding-vertical:0px;box-shadow:inset 0 0 0 1px var(--border);border-radius:999px;flex-shrink:0;height:36px}.date-range-picker-preset:active{scale:.96}.date-range-picker-preset[aria-pressed=true]{--background-default:var(--accent);--background-hover:var(--accent);--color-default:var(--accent-contrast);--color-hover:var(--accent-contrast);box-shadow:none}.date-range-picker-status{flex:1 1 0;min-width:0}.date-range-picker-step{--background-hover:var(--hover);--color-default:var(--color-muted);--color-hover:var(--foreground);--padding-horizontal:0px;--padding-vertical:0px;outline-offset:0;pointer-events:auto;touch-action:manipulation;border-radius:50%;width:40px;height:40px}.date-range-picker-step:active{scale:.96}.date-range-picker-step svg{width:16px;height:16px}.date-range-picker-summary{color:var(--color-muted);font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.date-range-picker-summary.--active{color:var(--foreground)}.date-range-picker-today{background:currentColor;border-radius:50%;width:4px;height:4px;position:absolute;bottom:4px;left:50%;translate:-50%}@media (prefers-reduced-motion:reduce){.date-range-picker-apply-icon{filter:none;scale:1}.date-range-picker-day{transition:background-color .15s ease-out}}}
-/*$vite$:1*/

package/build/components/dynamic-island/index.d.ts

@@ -1,23 +0,0 @@
-import { type Attributes } from '@esportsplus/template';
-import './scss/index.scss';
-declare const DYNAMIC_ISLAND_TOGGLE: unique symbol;
-type A = Attributes & {
-    [DYNAMIC_ISLAND_TOGGLE]?: Attributes;
-    state?: State;
-};
-type Mode = 'idle' | 'music' | 'ring' | 'timer';
-type State = {
-    artist: string;
-    elapsed: number;
-    mode: Mode;
-    playing: boolean;
-    title: string;
-};
-declare function template(this: {
-    attributes?: Partial<A>;
-} | void, { state, ...attributes }?: A): DocumentFragment | Text;
-declare const _default: typeof template & {
-    readonly toggle: typeof DYNAMIC_ISLAND_TOGGLE;
-};
-export default _default;
-export type { Mode as DynamicIslandMode, State as DynamicIslandState };

package/build/components/dynamic-island/index.js

@@ -1,179 +0,0 @@
-import * as template_u1 from '@esportsplus/template';
-import * as reactivity_u0 from '@esportsplus/reactivity';
-import { effect, untrack } from '@esportsplus/reactivity';
-import './scss/index.scss';
-const template_1hsoevc3 = template_u1.template(`<div class='dynamic-island-content dynamic-island-content--idle '>`);
-const template_1hsoevc6 = template_u1.template(`<div class='dynamic-island-content dynamic-island-content--music '>`);
-const template_1hsoevc9 = template_u1.template(`<div class='dynamic-island-content dynamic-island-content--ring '>`);
-const template_1hsoevcc = template_u1.template(`<div class='dynamic-island-content dynamic-island-content--timer '>`);
-const template_1hsoevcf = template_u1.template(`<div class='dynamic-island-content  '>`);
-const template_1hsoevci = template_u1.template(`<div class='dynamic-island '><div class='dynamic-island-pill'><!--$--><!--$--><!--$--></div><span aria-live='polite' class='dynamic-island-sr'>`);
-const template_1hsoevcp = template_u1.template(`<span class='dynamic-island-lens'>`);
-const template_1hsoevcr = template_u1.template(`<svg aria-hidden='true' class='dynamic-island-icon' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 16 16'><circle cx='8' cy='9' r='5.25' /><path d='M8 6.5V9l1.5 1.25M6.5 1.75h3' /></svg><span class='dynamic-island-time'>`);
-const template_1hsoevct = template_u1.template(`<svg aria-hidden='true' class='dynamic-island-icon dynamic-island-bell' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'><path d='M4 11.25V7.5a4 4 0 0 1 8 0v3.75l1 1H3Z' /><path d='M6.75 13.75a1.25 1.25 0 0 0 2.5 0' /></svg><span class='dynamic-island-label'>Ringer on`);
-const template_1hsoevcv = template_u1.template(`<div class='dynamic-island-track'><span class='dynamic-island-title'></span><span class='dynamic-island-artist'></span></div><span aria-hidden='true' class='dynamic-island-eq '></span><button class='dynamic-island-toggle ' type='button'><svg aria-hidden='true' class='dynamic-island-play' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 16 16'><path d='M5.5 3.5v9l7-4.5Z' fill='currentColor' /></svg><svg aria-hidden='true' class='dynamic-island-pause' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 16 16'><path d='M5 3.5v9M11 3.5v9' />`);
-const template_1hsoevc11 = template_u1.template(`<span>`);
-class ReactiveObject_1hsoevc0 extends reactivity_u0.ReactiveObject {
-    #artist = this[reactivity_u0.SIGNAL]('M83');
-    #elapsed = this[reactivity_u0.SIGNAL](0);
-    #mode;
-    #playing = this[reactivity_u0.SIGNAL](true);
-    #title = this[reactivity_u0.SIGNAL]('Midnight City');
-    constructor(_p0) {
-        super(null);
-        this.#mode = this[reactivity_u0.SIGNAL](_p0);
-    }
-    get artist() {
-        return reactivity_u0.read(this.#artist);
-    }
-    set artist(_v0) {
-        reactivity_u0.write(this.#artist, _v0);
-    }
-    get elapsed() {
-        return reactivity_u0.read(this.#elapsed);
-    }
-    set elapsed(_v1) {
-        reactivity_u0.write(this.#elapsed, _v1);
-    }
-    get mode() {
-        return reactivity_u0.read(this.#mode);
-    }
-    set mode(_v2) {
-        reactivity_u0.write(this.#mode, _v2);
-    }
-    get playing() {
-        return reactivity_u0.read(this.#playing);
-    }
-    set playing(_v3) {
-        reactivity_u0.write(this.#playing, _v3);
-    }
-    get title() {
-        return reactivity_u0.read(this.#title);
-    }
-    set title(_v4) {
-        reactivity_u0.write(this.#title, _v4);
-    }
-}
-class ReactiveObject_1hsoevc1 extends reactivity_u0.ReactiveObject {
-    #announcement = this[reactivity_u0.SIGNAL]('');
-    constructor() {
-        super(null);
-    }
-    get announcement() {
-        return reactivity_u0.read(this.#announcement);
-    }
-    set announcement(_v0) {
-        reactivity_u0.write(this.#announcement, _v0);
-    }
-}
-const DYNAMIC_ISLAND_TOGGLE = Symbol.for('@esportsplus/ui/dynamic-island.toggle');
-const BARS = [
-    { delay: -120, duration: 520, rest: 0.55 },
-    { delay: -400, duration: 760, rest: 0.9 },
-    { delay: -250, duration: 610, rest: 0.4 },
-    { delay: -600, duration: 840, rest: 0.7 }
-];
-function describe(mode, playing, elapsed, title) {
-    if (mode === 'timer') {
-        return `Timer, ${Math.floor(elapsed / 60)}:${pad(elapsed % 60)}`;
-    }
-    if (mode === 'music') {
-        return `${playing ? 'Playing' : 'Paused'}, ${title}`;
-    }
-    if (mode === 'ring') {
-        return 'Ringer on';
-    }
-    return 'Idle';
-}
-function format(seconds) {
-    return `${pad(Math.floor(seconds / 60))}:${pad(seconds % 60)}`;
-}
-function pad(value) {
-    return String(value).padStart(2, '0');
-}
-function template({ state = new ReactiveObject_1hsoevc0('idle'), ...attributes } = {}) {
-    let bound = this?.attributes, stop, view = new ReactiveObject_1hsoevc1();
-    function content(mode, children) {
-        return (mode === "idle" ? (() => {
-            let root_1hsoevc2 = template_1hsoevc3(), element_1hsoevc4 = root_1hsoevc2.firstChild;
-            template_u1.setList(element_1hsoevc4, 'class', () => state.mode === mode && '--active');
-            template_u1.setProperty(element_1hsoevc4, 'inert', () => state.mode !== mode);
-            template_u1.slot(element_1hsoevc4, children, 1);
-            return root_1hsoevc2;
-        })() : mode === "music" ? (() => {
-            let root_1hsoevc5 = template_1hsoevc6(), element_1hsoevc7 = root_1hsoevc5.firstChild;
-            template_u1.setList(element_1hsoevc7, 'class', () => state.mode === mode && '--active');
-            template_u1.setProperty(element_1hsoevc7, 'inert', () => state.mode !== mode);
-            template_u1.slot(element_1hsoevc7, children, 1);
-            return root_1hsoevc5;
-        })() : mode === "ring" ? (() => {
-            let root_1hsoevc8 = template_1hsoevc9(), element_1hsoevca = root_1hsoevc8.firstChild;
-            template_u1.setList(element_1hsoevca, 'class', () => state.mode === mode && '--active');
-            template_u1.setProperty(element_1hsoevca, 'inert', () => state.mode !== mode);
-            template_u1.slot(element_1hsoevca, children, 1);
-            return root_1hsoevc8;
-        })() : mode === "timer" ? (() => {
-            let root_1hsoevcb = template_1hsoevcc(), element_1hsoevcd = root_1hsoevcb.firstChild;
-            template_u1.setList(element_1hsoevcd, 'class', () => state.mode === mode && '--active');
-            template_u1.setProperty(element_1hsoevcd, 'inert', () => state.mode !== mode);
-            template_u1.slot(element_1hsoevcd, children, 1);
-            return root_1hsoevcb;
-        })() : (() => {
-            let root_1hsoevce = template_1hsoevcf(), element_1hsoevcg = root_1hsoevce.firstChild;
-            template_u1.setList(element_1hsoevcg, 'class', template_u1.interpolate(["dynamic-island-content--", (mode)]));
-            template_u1.setList(element_1hsoevcg, 'class', () => state.mode === mode && '--active');
-            template_u1.setProperty(element_1hsoevcg, 'inert', () => state.mode !== mode);
-            template_u1.slot(element_1hsoevcg, children, 1);
-            return root_1hsoevce;
-        })());
-    }
-    return (() => {
-        let root_1hsoevch = template_1hsoevci(), element_1hsoevcj = root_1hsoevch.firstChild, element_1hsoevck = element_1hsoevcj.firstElementChild.firstChild, element_1hsoevcl = element_1hsoevck.nextSibling, element_1hsoevcm = element_1hsoevcl.nextSibling, element_1hsoevcn = element_1hsoevcj.firstElementChild, element_1hsoevco = element_1hsoevcn.nextElementSibling;
-        template_u1.setList(element_1hsoevcj, 'class', () => `dynamic-island--${state.mode}`);
-        template_u1.setProperties(element_1hsoevcj, bound);
-        template_u1.setProperties(element_1hsoevcj, attributes);
-        template_u1.onconnect(element_1hsoevcj, () => {
-            let initial = true;
-            stop = effect(() => {
-                let mode = state.mode, playing = state.playing;
-                if (initial) {
-                    initial = false;
-                    return;
-                }
-                view.announcement = untrack(() => describe(mode, playing, state.elapsed, state.title));
-            });
-        });
-        template_u1.ondisconnect(element_1hsoevcj, () => {
-            stop?.();
-        });
-        template_u1.slot(element_1hsoevck, content('idle', template_1hsoevcp()));
-        template_u1.slot(element_1hsoevcl, content('timer', (() => {
-            let root_1hsoevcq = template_1hsoevcr(), element_1hsoevcs = root_1hsoevcq.firstChild.nextSibling;
-            new template_u1.EffectSlot(element_1hsoevcs, () => format(state.elapsed), 1);
-            return root_1hsoevcq;
-        })()));
-        template_u1.slot(element_1hsoevcm, content('ring', template_1hsoevct()));
-        template_u1.slot(element_1hsoevcn, content('music', (() => {
-            let root_1hsoevcu = template_1hsoevcv(), element_1hsoevcw = root_1hsoevcu.firstChild.firstElementChild, element_1hsoevcx = element_1hsoevcw.nextElementSibling, element_1hsoevcy = root_1hsoevcu.firstChild.nextSibling, element_1hsoevcz = element_1hsoevcy.nextSibling;
-            new template_u1.EffectSlot(element_1hsoevcw, () => state.title, 1);
-            new template_u1.EffectSlot(element_1hsoevcx, () => state.artist, 1);
-            template_u1.setList(element_1hsoevcy, 'class', () => !state.playing && '--paused');
-            template_u1.slot(element_1hsoevcy, BARS.map((bar) => {
-                let root_1hsoevc10 = template_1hsoevc11(), element_1hsoevc12 = root_1hsoevc10.firstChild;
-                template_u1.setList(element_1hsoevc12, 'style', `--rest: ${bar.rest}; animation-delay: ${bar.delay}ms; animation-duration: ${bar.duration}ms;`);
-                return root_1hsoevc10;
-            }), 1);
-            template_u1.setProperty(element_1hsoevcz, 'aria-label', () => state.playing ? 'Pause' : 'Play');
-            template_u1.setList(element_1hsoevcz, 'class', () => state.playing && '--playing');
-            template_u1.setProperties(element_1hsoevcz, bound?.[DYNAMIC_ISLAND_TOGGLE]);
-            template_u1.setProperties(element_1hsoevcz, attributes[DYNAMIC_ISLAND_TOGGLE]);
-            template_u1.delegate(element_1hsoevcz, 'click', () => {
-                state.playing = !state.playing;
-            });
-            return root_1hsoevcu;
-        })()), 2);
-        new template_u1.EffectSlot(element_1hsoevco, () => view.announcement, 1);
-        return root_1hsoevch;
-    })();
-}
-export default Object.assign(template, { toggle: DYNAMIC_ISLAND_TOGGLE });