@esportsplus/ui 0.56.4 → 0.57.0

package/build/components/plan-card/index.js

@@ -1,257 +0,0 @@
-import * as template_u1 from '@esportsplus/template';
-import * as reactivity_u0 from '@esportsplus/reactivity';
-import { effect, onCleanup, untrack } from '@esportsplus/reactivity';
-import './scss/index.scss';
-const template_1sxgp013 = template_u1.template(`<article class='plan-card'><header class='plan-card-header'><span aria-hidden='true' class='plan-card-icon'></span><h3 class='plan-card-title'></h3></header><!--$--><div class='plan-card-todos' role='group'><div class='plan-card-todos-header'><svg aria-hidden='true' class='plan-card-todos-icon' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='M3.5 5.5 5 7l2.5-2.5M3.5 11.5 5 13l2.5-2.5M3.5 17.5 5 19l2.5-2.5M11 6h9M11 12h9M11 18h9' /></svg><span class='plan-card-todos-label'>To-dos</span><span class='plan-card-todos-count'></span></div><ul class='plan-card-list'><!--$--></ul></div><footer class='plan-card-footer'><span aria-live='polite' class='plan-card-status'></span><span class='plan-card-buttons'><!--$--><button class='plan-card-button plan-card-button--primary' type='button'><!--$--><kbd aria-hidden='true' class='plan-card-kbd'><kbd></kbd><kbd><svg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='M18 6v6a3 3 0 0 1-3 3H5M9 11l-4 4 4 4' />`);
-const template_1sxgp01j = template_u1.template(`<svg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='M3 7l6-3 6 3 6-3v13l-6 3-6-3-6 3V7M9 4v13M15 7v13' />`);
-const template_1sxgp01l = template_u1.template(`<span class='plan-card-actions'><!--$-->`);
-const template_1sxgp01p = template_u1.template(`<button aria-label='Download the plan' class='plan-card-action' data-tooltip='Download' type='button'><svg aria-hidden='true' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 11l5 5 5-5M12 4v12' />`);
-const template_1sxgp01s = template_u1.template(`<button aria-label='Open the full plan' class='plan-card-action' data-tooltip='Open' type='button'><svg aria-hidden='true' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='M16 4h4v4M14 10l6-6M8 20H4v-4M4 20l6-6' />`);
-const template_1sxgp01v = template_u1.template(`<p class='plan-card-description'>`);
-const template_1sxgp01y = template_u1.template(`<div class='plan-card-todo '><svg aria-hidden='true' class='plan-card-todo-icon' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path /></svg><span class='plan-card-todo-label'>`);
-const template_1sxgp0113 = template_u1.template(`<li>`);
-const template_1sxgp0116 = template_u1.template(`<li class='plan-card-fold'><div class='plan-card-fold-inner'>`);
-const template_1sxgp011a = template_u1.template(`<li><button class='plan-card-toggle' type='button'><span aria-hidden='true' class='plan-card-toggle-icon'><svg class='plan-card-toggle-more' fill='currentColor' viewBox='0 0 24 24'><circle cx='5' cy='12' r='1.75' /><circle cx='12' cy='12' r='1.75' /><circle cx='19' cy='12' r='1.75' /></svg><svg class='plan-card-toggle-less' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='m6 15 6-6 6 6' /></svg></span><span class='plan-card-toggle-labels'><span class='plan-card-toggle-label plan-card-toggle-label--more'><!--$--> more</span><span class='plan-card-toggle-label plan-card-toggle-label--less'>Show less`);
-const template_1sxgp011g = template_u1.template(`<svg aria-hidden='true' class='plan-card-status-icon' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18ZM8.5 12l2.5 2.5 4.5-5' /></svg><span>`);
-const template_1sxgp011j = template_u1.template(`<button aria-label='Cancel auto approval' class='plan-card-cancel' data-tooltip='Cancel' type='button'><svg aria-hidden='true' class='plan-card-ring' viewBox='0 0 18 18'><circle class='plan-card-ring-track' cx='9' cy='9' r='7' /><circle class='plan-card-ring-progress' cx='9' cy='9' r='7' /></svg><span aria-hidden='true' class='plan-card-cancel-icon'><svg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' viewBox='0 0 24 24'><path d='M18 6 6 18M6 6l12 12' /></svg></span></button><span> Auto Approve in <span class='plan-card-digits'></span>s `);
-const template_1sxgp011o = template_u1.template(`<button class='plan-card-button plan-card-button--secondary' type='button'> View Plan `);
-class ReactiveObject_1sxgp010 extends reactivity_u0.ReactiveObject {
-    #approved = this[reactivity_u0.SIGNAL](false);
-    #countdown;
-    #expanded = this[reactivity_u0.SIGNAL](false);
-    constructor(_p0) {
-        super(null);
-        this.#countdown = this[reactivity_u0.SIGNAL](_p0);
-    }
-    get approved() {
-        return reactivity_u0.read(this.#approved);
-    }
-    set approved(_v0) {
-        reactivity_u0.write(this.#approved, _v0);
-    }
-    get countdown() {
-        return reactivity_u0.read(this.#countdown);
-    }
-    set countdown(_v1) {
-        reactivity_u0.write(this.#countdown, _v1);
-    }
-    get expanded() {
-        return reactivity_u0.read(this.#expanded);
-    }
-    set expanded(_v2) {
-        reactivity_u0.write(this.#expanded, _v2);
-    }
-}
-class ReactiveObject_1sxgp011 extends reactivity_u0.ReactiveObject {
-    #value = this[reactivity_u0.SIGNAL](false);
-    constructor() {
-        super(null);
-    }
-    get value() {
-        return reactivity_u0.read(this.#value);
-    }
-    set value(_v0) {
-        reactivity_u0.write(this.#value, _v0);
-    }
-}
-const EASE_OUT = 'cubic-bezier(0.23, 1, 0.32, 1)';
-const PLAN_CARD_APPROVE = Symbol.for('@esportsplus/ui/plan-card.approve');
-const PLAN_CARD_VIEW = Symbol.for('@esportsplus/ui/plan-card.view');
-const RING = 2 * Math.PI * 7;
-let uid = 0;
-function mac() {
-    return /Mac|iPhone|iPad/.test(navigator.platform);
-}
-function reduced() {
-    return matchMedia('(prefers-reduced-motion: reduce)').matches;
-}
-const planCard = ({ autoApprove = 10, description, icon, onapprove, ondownload, onexpand, onview, peek = 3, state, title, todos, ...attributes }) => {
-    let digits, id = `plan-card-${++uid}`, observer, s = state ?? new ReactiveObject_1sxgp010(autoApprove > 0 ? autoApprove : -1), started = new ReactiveObject_1sxgp011(), timer, total = untrack(() => s.countdown);
-    function approve(auto) {
-        if (s.approved) {
-            return;
-        }
-        clearInterval(timer);
-        s.approved = true;
-        onapprove?.(auto);
-    }
-    function cancel() {
-        clearInterval(timer);
-        s.countdown = -1;
-    }
-    function start() {
-        if (started.value || s.approved || s.countdown <= 0) {
-            return;
-        }
-        started.value = true;
-        timer = setInterval(() => {
-            if (s.countdown <= 0) {
-                clearInterval(timer);
-                return;
-            }
-            s.countdown -= 1;
-            if (s.countdown === 0) {
-                approve(true);
-            }
-        }, 1000);
-    }
-    function write(value, animate) {
-        if (!digits) {
-            return;
-        }
-        let reduce = reduced(), text = String(Math.max(value, 0));
-        while (digits.children.length > text.length) {
-            digits.lastElementChild.remove();
-        }
-        for (let i = 0, n = text.length; i < n; i++) {
-            let span = digits.children[i];
-            if (span?.textContent === text[i]) {
-                continue;
-            }
-            let next = document.createElement('span');
-            next.className = 'plan-card-digit';
-            next.textContent = text[i];
-            if (span) {
-                span.replaceWith(next);
-            }
-            else {
-                digits.append(next);
-            }
-            if (animate && !reduce) {
-                next.animate([
-                    { filter: 'blur(1.5px)', opacity: 0, translate: '0 -4px' },
-                    { filter: 'blur(0px)', opacity: 1, translate: '0 0' }
-                ], { delay: i * 40, duration: 260, easing: EASE_OUT, fill: 'backwards' });
-            }
-        }
-    }
-    let hidden = Math.max(todos.length - peek, 0), previous, stop = effect(() => {
-        let countdown = s.countdown;
-        untrack(() => write(countdown, previous !== undefined));
-        previous = countdown;
-    });
-    onCleanup(() => {
-        clearInterval(timer);
-        observer?.disconnect();
-        stop();
-    });
-    return (() => {
-        let root_1sxgp012 = template_1sxgp013(), element_1sxgp014 = root_1sxgp012.firstChild, element_1sxgp015 = element_1sxgp014.firstElementChild.firstElementChild, element_1sxgp016 = element_1sxgp015.nextElementSibling, element_1sxgp017 = element_1sxgp014.firstElementChild, element_1sxgp018 = element_1sxgp014.firstChild.nextSibling, element_1sxgp019 = element_1sxgp017.nextElementSibling, element_1sxgp01a = element_1sxgp019.firstElementChild.firstElementChild.nextElementSibling, element_1sxgp01b = element_1sxgp01a.nextElementSibling, element_1sxgp01c = element_1sxgp019.firstElementChild.nextElementSibling, element_1sxgp01d = element_1sxgp01c.firstChild, element_1sxgp01e = element_1sxgp019.nextElementSibling.firstElementChild, element_1sxgp01f = element_1sxgp01e.nextElementSibling.firstChild, element_1sxgp01g = element_1sxgp01e.nextElementSibling.firstElementChild, element_1sxgp01h = element_1sxgp01g.firstChild, element_1sxgp01i = element_1sxgp01g.firstElementChild.firstElementChild;
-        template_u1.setProperties(element_1sxgp014, attributes);
-        template_u1.setProperty(element_1sxgp014, 'aria-labelledby', `${id}-title`);
-        template_u1.setList(element_1sxgp014, 'class', () => s.approved && '--approved');
-        template_u1.onconnect(element_1sxgp014, (element) => {
-            if (s.countdown <= 0) {
-                return;
-            }
-            observer = new IntersectionObserver((entries) => {
-                if (!entries.some((entry) => entry.isIntersecting)) {
-                    return;
-                }
-                observer?.disconnect();
-                start();
-            }, { threshold: 0.5 });
-            observer.observe(element);
-        });
-        template_u1.delegate(element_1sxgp014, 'keydown', (e) => {
-            if (e.key === 'Enter' && (mac() ? e.metaKey : e.ctrlKey)) {
-                e.preventDefault();
-                approve(false);
-            }
-        });
-        template_u1.slot(element_1sxgp015, icon ?? template_1sxgp01j(), 1);
-        template_u1.setProperty(element_1sxgp016, 'id', template_u1.interpolate([(id), "-title"]));
-        template_u1.slot(element_1sxgp016, title, 1);
-        template_u1.slot(element_1sxgp017, (ondownload || onexpand) && (() => {
-            let root_1sxgp01k = template_1sxgp01l(), element_1sxgp01m = root_1sxgp01k.firstChild.firstChild, element_1sxgp01n = root_1sxgp01k.firstChild;
-            template_u1.slot(element_1sxgp01m, ondownload && (() => {
-                let root_1sxgp01o = template_1sxgp01p(), element_1sxgp01q = root_1sxgp01o.firstChild;
-                template_u1.delegate(element_1sxgp01q, 'click', ondownload);
-                return root_1sxgp01o;
-            })());
-            template_u1.slot(element_1sxgp01n, onexpand && (() => {
-                let root_1sxgp01r = template_1sxgp01s(), element_1sxgp01t = root_1sxgp01r.firstChild;
-                template_u1.delegate(element_1sxgp01t, 'click', onexpand);
-                return root_1sxgp01r;
-            })(), 2);
-            return root_1sxgp01k;
-        })(), 2);
-        template_u1.slot(element_1sxgp018, description && (() => {
-            let root_1sxgp01u = template_1sxgp01v(), element_1sxgp01w = root_1sxgp01u.firstChild;
-            template_u1.slot(element_1sxgp01w, description, 1);
-            return root_1sxgp01u;
-        })());
-        template_u1.setProperty(element_1sxgp019, 'aria-labelledby', template_u1.interpolate([(id), "-todos"]));
-        template_u1.setProperty(element_1sxgp01a, 'id', template_u1.interpolate([(id), "-todos"]));
-        template_u1.slot(element_1sxgp01b, todos.length, 1);
-        template_u1.setProperty(element_1sxgp01c, 'id', template_u1.interpolate([(id), "-list"]));
-        template_u1.slot(element_1sxgp01d, todos.map((todo, index) => {
-            let row = (() => {
-                let root_1sxgp01x = template_1sxgp01y(), element_1sxgp01z = root_1sxgp01x.firstChild, element_1sxgp0110 = element_1sxgp01z.firstElementChild.firstElementChild, element_1sxgp0111 = element_1sxgp01z.firstElementChild.nextElementSibling;
-                template_u1.setList(element_1sxgp01z, 'class', todo.done && '--done');
-                template_u1.setProperty(element_1sxgp0110, 'd', todo.done ? 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18ZM8.5 12l2.5 2.5 4.5-5' : 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z');
-                template_u1.slot(element_1sxgp0111, todo.label, 1);
-                return root_1sxgp01x;
-            })();
-            if (index < peek) {
-                return (() => {
-                    let root_1sxgp0112 = template_1sxgp0113(), element_1sxgp0114 = root_1sxgp0112.firstChild;
-                    template_u1.slot(element_1sxgp0114, row, 1);
-                    return root_1sxgp0112;
-                })();
-            }
-            return (() => {
-                let root_1sxgp0115 = template_1sxgp0116(), element_1sxgp0117 = root_1sxgp0115.firstChild, element_1sxgp0118 = element_1sxgp0117.firstElementChild;
-                template_u1.setList(element_1sxgp0117, 'class', () => s.expanded && '--active');
-                template_u1.setProperty(element_1sxgp0117, 'inert', () => !s.expanded);
-                template_u1.slot(element_1sxgp0118, row, 1);
-                return root_1sxgp0115;
-            })();
-        }));
-        template_u1.slot(element_1sxgp01c, hidden > 0 && (() => {
-            let root_1sxgp0119 = template_1sxgp011a(), element_1sxgp011b = root_1sxgp0119.firstChild.firstElementChild, element_1sxgp011c = element_1sxgp011b.firstElementChild.nextElementSibling.firstElementChild, element_1sxgp011d = element_1sxgp011c.firstChild, element_1sxgp011e = element_1sxgp011c.nextElementSibling;
-            template_u1.setProperty(element_1sxgp011b, 'aria-controls', `${id}-list`);
-            template_u1.setProperty(element_1sxgp011b, 'aria-expanded', () => String(s.expanded));
-            template_u1.setList(element_1sxgp011b, 'class', () => s.expanded && '--active');
-            template_u1.delegate(element_1sxgp011b, 'click', () => {
-                s.expanded = !s.expanded;
-            });
-            template_u1.setProperty(element_1sxgp011c, 'aria-hidden', () => s.expanded && 'true');
-            template_u1.slot(element_1sxgp011d, hidden);
-            template_u1.setProperty(element_1sxgp011e, 'aria-hidden', () => !s.expanded && 'true');
-            return root_1sxgp0119;
-        })(), 2);
-        template_u1.setList(element_1sxgp01e, 'class', () => s.approved ? '--approved' : s.countdown === -1 && '--cancelled');
-        new template_u1.EffectSlot(element_1sxgp01e, () => s.approved
-            ? (() => {
-                let root_1sxgp011f = template_1sxgp011g(), element_1sxgp011h = root_1sxgp011f.firstChild.nextSibling;
-                element_1sxgp011h.appendChild(template_u1.text(total > 0 && s.countdown === 0 ? 'Auto-approved' : 'Approved'));
-                return root_1sxgp011f;
-            })()
-            : total > 0 && (() => {
-                let root_1sxgp011i = template_1sxgp011j(), element_1sxgp011k = root_1sxgp011i.firstChild, element_1sxgp011l = element_1sxgp011k.firstElementChild.firstElementChild.nextElementSibling, element_1sxgp011m = element_1sxgp011k.nextSibling.firstElementChild;
-                template_u1.setProperty(element_1sxgp011k, 'disabled', () => s.countdown === -1);
-                template_u1.delegate(element_1sxgp011k, 'click', cancel);
-                template_u1.setList(element_1sxgp011l, 'style', () => `stroke-dasharray: ${RING}; stroke-dashoffset: ${RING * (1 - Math.max(started.value ? s.countdown - 1 : s.countdown, 0) / total)}`);
-                template_u1.onrender(element_1sxgp011m, (element) => {
-                    digits = element;
-                    write(untrack(() => s.countdown), false);
-                });
-                return root_1sxgp011i;
-            })(), 1);
-        template_u1.slot(element_1sxgp01f, onview && (() => {
-            let root_1sxgp011n = template_1sxgp011o(), element_1sxgp011p = root_1sxgp011n.firstChild;
-            template_u1.setProperties(element_1sxgp011p, attributes[PLAN_CARD_VIEW]);
-            template_u1.delegate(element_1sxgp011p, 'click', onview);
-            return root_1sxgp011n;
-        })());
-        template_u1.setProperties(element_1sxgp01g, attributes[PLAN_CARD_APPROVE]);
-        template_u1.setProperty(element_1sxgp01g, 'aria-keyshortcuts', mac() ? 'Meta+Enter' : 'Control+Enter');
-        template_u1.setProperty(element_1sxgp01g, 'disabled', () => s.approved);
-        template_u1.delegate(element_1sxgp01g, 'click', () => approve(false));
-        new template_u1.EffectSlot(element_1sxgp01h, () => s.approved ? 'Approved' : 'Approve');
-        element_1sxgp01i.appendChild(template_u1.text(mac() ? '⌘' : 'Ctrl'));
-        return root_1sxgp012;
-    })();
-};
-export default Object.assign(planCard, { approve: PLAN_CARD_APPROVE, view: PLAN_CARD_VIEW });

package/build/components/plan-card/scss/index.scss

@@ -1,2 +0,0 @@
-@layer components {.plan-card{--action-hover:oklch(from var(--color-black-300) l c h / .07);--background:var(--color-white-300);--border-color:var(--color-border-300);--color:var(--color-text-500);--focus-color:var(--color-text-500);--icon-background:oklch(76.9% .188 70.08/.15);--icon-color:oklch(66.6% .179 58.318);--muted:var(--color-text-300);--padding:20px;--primary-background:var(--color-text-500);--primary-color:var(--color-white-300);--radius:16px;--ring-color:var(--color-text-500);--ring-track:var(--color-border-300);--secondary-background:var(--color-grey-500);--secondary-color:var(--color-text-500);--spring:cubic-bezier(.16, 1, .3, 1);--success-color:oklch(62.7% .194 149.214);--todos-background:var(--color-grey-300);--width:512px}.plan-card--blue{--icon-background:oklch(from var(--color-blue-400) l c h / .12);--icon-color:var(--color-blue-400)}.plan-card--flat{--border-color:transparent;--todos-background:var(--color-grey-400)}.plan-card{background:var(--background);border:var(--border-width-400) solid var(--border-color);border-radius:var(--radius);color:var(--color);max-width:100%;padding:var(--padding);width:var(--width)}.plan-card-action:after,.plan-card-cancel:after{background:var(--color-text-500);color:var(--color-white-300);content:attr(data-tooltip);font-size:12px;font-weight:var(--font-weight-500);opacity:0;pointer-events:none;white-space:nowrap;z-index:1;border-radius:6px;padding:4px 8px;transition:opacity .1s ease-out,translate .1s ease-out;position:absolute;bottom:calc(100% + 6px);left:50%;translate:-50% 2px}.plan-card-action:focus-visible:after,.plan-card-action:hover:after,.plan-card-cancel:focus-visible:after,.plan-card-cancel:hover:after{opacity:1;transition-delay:.4s;translate:-50%}.plan-card-action:focus-visible:after,.plan-card-cancel:focus-visible:after{transition-delay:0s}.plan-card-action{color:var(--color);cursor:pointer;background:0 0;border:0;border-radius:8px;outline:none;justify-content:center;align-items:center;width:28px;height:28px;transition:background-color .15s ease-out;display:flex;position:relative}.plan-card-action:active{background:oklch(from var(--color-black-300) l c h/.12)}.plan-card-action:focus-visible{outline:2px solid var(--focus-color)}.plan-card-action:hover{background:var(--action-hover)}.plan-card-action svg{width:16px;height:16px}.plan-card-actions{align-items:center;gap:4px;margin-left:auto;display:flex}.plan-card-button{cursor:pointer;font-size:.875rem;font-weight:var(--font-weight-500);white-space:nowrap;border:0;border-radius:8px;outline:none;align-items:center;gap:6px;height:32px;padding-inline:10px;transition:opacity .15s ease-out,scale .15s ease-out;display:inline-flex}.plan-card-button:active{scale:.97}.plan-card-button:disabled{cursor:default;opacity:.5;scale:1}.plan-card-button:focus-visible{outline:2px solid var(--focus-color);outline-offset:2px}.plan-card-button--primary{background:var(--primary-background);color:var(--primary-color);padding-right:6px}.plan-card-button--secondary{background:var(--secondary-background);color:var(--secondary-color)}.plan-card-buttons{align-items:center;gap:8px;margin-left:auto;display:flex}.plan-card-cancel{cursor:pointer;background:0 0;border:0;border-radius:999px;outline:none;flex-shrink:0;place-items:center;width:18px;height:18px;padding:0;transition:scale .15s ease-out;display:grid;position:relative}.plan-card-cancel:before{content:"";position:absolute;inset:-11px}.plan-card-cancel:active{scale:.96}.plan-card-cancel:focus-visible{outline:2px solid var(--focus-color);outline-offset:2px}.plan-card-cancel:focus-visible .plan-card-cancel-icon,.plan-card-cancel:hover .plan-card-cancel-icon{opacity:1}.plan-card-cancel>*{grid-area:1/1}.plan-card-cancel-icon{background:var(--secondary-background);color:var(--muted);opacity:0;border-radius:999px;justify-content:center;align-items:center;width:18px;height:18px;transition:opacity .1s ease-out;display:flex}.plan-card-cancel-icon svg{width:10px;height:10px}.plan-card-description{color:var(--muted);text-wrap:pretty;margin:12px 0 0;font-size:.9375rem;line-height:1.625}.plan-card-digit{display:inline-block}.plan-card-digits{font-variant-numeric:tabular-nums;display:inline-flex}.plan-card-fold{transition:grid-template-rows .3s var(--spring);grid-template-rows:0fr;display:grid}.plan-card-fold.--active{grid-template-rows:1fr}.plan-card-fold-inner{min-height:0;overflow:hidden}.plan-card-footer{flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px;display:flex}.plan-card-header{align-items:center;gap:12px;display:flex}.plan-card-icon{background:var(--icon-background);color:var(--icon-color);border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;display:flex}.plan-card-icon svg{width:16px;height:16px}.plan-card.--approved .plan-card-kbd{display:none}.plan-card-kbd{gap:4px;margin-left:2px;font-family:inherit;display:inline-flex}.plan-card-kbd kbd{background:oklch(from var(--primary-color) l c h/.15);border-radius:4px;justify-content:center;align-items:center;min-width:20px;height:20px;padding-inline:4px;font-family:inherit;font-size:.625rem;display:inline-flex}.plan-card-kbd svg{width:10px;height:10px}.plan-card-list{margin:10px 0 0;padding:0;list-style:none}.plan-card-list>li+li .plan-card-todo,.plan-card-list>li+li>.plan-card-toggle{margin-top:8px}.plan-card-ring{width:18px;height:18px;rotate:-90deg}.plan-card-ring circle{fill:none;stroke-width:2px}.plan-card-ring-progress{stroke:var(--ring-color);stroke-linecap:round;transition:stroke-dashoffset 1s linear}.plan-card-ring-track{stroke:var(--ring-track)}.plan-card-status{color:var(--muted);align-items:center;gap:8px;font-size:.875rem;transition:opacity .2s ease-out,translate .2s ease-out,visibility linear;display:flex}.plan-card-status.--approved{color:var(--success-color);font-weight:var(--font-weight-500)}.plan-card-status.--cancelled{opacity:0;visibility:hidden;transition:opacity .2s ease-out,translate .2s ease-out,visibility 0s linear .2s;translate:0 4px}.plan-card-status-icon{width:16px;height:16px}.plan-card-title{font-size:1.125rem;font-weight:var(--font-weight-600);letter-spacing:-.025em;min-width:0;margin:0;line-height:1.4}.plan-card-todo{color:var(--muted);align-items:center;gap:10px;font-size:.9375rem;display:flex}.plan-card-todo.--done .plan-card-todo-icon{color:var(--success-color);opacity:1}.plan-card-todo-icon{opacity:.5;flex-shrink:0;width:16px;height:16px}.plan-card-todo-label{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.plan-card-todos{background:var(--todos-background);border-radius:12px;margin-top:16px;padding:12px}.plan-card-todos-count{color:var(--muted);font-variant-numeric:tabular-nums;margin-left:auto;padding-right:4px;font-size:.875rem}.plan-card-todos-header{align-items:center;gap:8px;display:flex}.plan-card-todos-icon{flex-shrink:0;width:16px;height:16px}.plan-card-todos-label{font-size:.9375rem;font-weight:var(--font-weight-500)}.plan-card-toggle{color:var(--muted);cursor:pointer;text-align:left;background:0 0;border:0;border-radius:6px;outline:none;align-items:center;gap:10px;width:100%;padding:0;font-size:.9375rem;transition:color .15s ease-out;display:flex}.plan-card-toggle:focus-visible{outline:2px solid var(--focus-color);outline-offset:2px}.plan-card-toggle:hover{color:var(--color)}.plan-card-toggle.--active .plan-card-toggle-label--less,.plan-card-toggle.--active .plan-card-toggle-less{filter:blur();opacity:1;translate:0}.plan-card-toggle.--active .plan-card-toggle-label--more,.plan-card-toggle.--active .plan-card-toggle-more{filter:blur(2px);opacity:0;translate:0 -4px}.plan-card-toggle-icon,.plan-card-toggle-labels{display:grid}.plan-card-toggle-icon>*,.plan-card-toggle-labels>*{transition:filter .2s var(--spring), opacity .2s var(--spring), translate .2s var(--spring);grid-area:1/1}.plan-card-toggle-icon{color:var(--muted);opacity:.5;flex-shrink:0;place-items:center;width:16px;height:16px}.plan-card-toggle-icon svg{width:16px;height:16px}.plan-card-toggle-label--less,.plan-card-toggle-less{filter:blur(2px);opacity:0;translate:0 4px}@media (prefers-reduced-motion:reduce){.plan-card-fold,.plan-card-ring-progress,.plan-card-toggle-icon>*,.plan-card-toggle-labels>*{transition:none}.plan-card-status{translate:none}}}
-/*$vite$:1*/

package/build/components/radio-cards/index.d.ts

@@ -1,36 +0,0 @@
-import { type Attributes } from '@esportsplus/template';
-import { factory } from '../checkbox/index.js';
-import radio from '../radio/index.js';
-import './scss/index.scss';
-type A = Attributes & {
-    [RADIO_CARDS_CARD]?: Attributes;
-    [RADIO_CARDS_INPUT]?: Input;
-    label: string;
-    name?: string;
-    options: Option[];
-    state?: {
-        error: string;
-        value: string;
-    };
-    value?: string;
-};
-type Input = NonNullable<NonNullable<Parameters<typeof radio>[0]>[typeof factory.input]>;
-type Option = {
-    badge?: string;
-    description: string;
-    period?: string;
-    price: string;
-    title: string;
-    value: string;
-};
-declare const RADIO_CARDS_CARD: unique symbol;
-declare const RADIO_CARDS_INPUT: unique symbol;
-declare function template(this: {
-    attributes?: Pick<A, typeof RADIO_CARDS_CARD | typeof RADIO_CARDS_INPUT>;
-} | void, { label, name, options, value, state, ...attributes }: A): DocumentFragment | Text;
-declare const _default: typeof template & {
-    readonly card: typeof RADIO_CARDS_CARD;
-    readonly input: typeof RADIO_CARDS_INPUT;
-};
-export default _default;
-export type { Option };

package/build/components/radio-cards/index.js

@@ -1,106 +0,0 @@
-import * as template_u1 from '@esportsplus/template';
-import * as reactivity_u0 from '@esportsplus/reactivity';
-import { factory } from '../checkbox/index.js';
-import radio from '../radio/index.js';
-import './scss/index.scss';
-const template_108kira2 = template_u1.template(`<fieldset class='radio-cards'><legend class='radio-cards-legend'></legend><div class='radio-cards-grid'>`);
-const template_108kira7 = template_u1.template(`<label class='radio-cards-card'><span aria-hidden='true' class='radio-cards-ring'></span><span class='radio-cards-dot'><!--$--><svg aria-hidden='true' class='radio-cards-check' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'><path d='m3.5 8.5 3 3 6-7' /></svg></span><span class='radio-cards-content'><span class='radio-cards-heading'><span class='radio-cards-title'></span></span><span class='radio-cards-description'></span></span><span class='radio-cards-price'><span class='radio-cards-amount'>`);
-const template_108kirag = template_u1.template(`<span class='radio-cards-badge'>`);
-const template_108kiraj = template_u1.template(`<span class='radio-cards-period'>`);
-class ReactiveObject_108kira0 extends reactivity_u0.ReactiveObject {
-    #error = this[reactivity_u0.SIGNAL]('');
-    #value;
-    constructor(_p0) {
-        super(null);
-        this.#value = this[reactivity_u0.SIGNAL](_p0);
-    }
-    get error() {
-        return reactivity_u0.read(this.#error);
-    }
-    set error(_v0) {
-        reactivity_u0.write(this.#error, _v0);
-    }
-    get value() {
-        return reactivity_u0.read(this.#value);
-    }
-    set value(_v1) {
-        reactivity_u0.write(this.#value, _v1);
-    }
-}
-const RADIO_CARDS_CARD = Symbol.for('@esportsplus/ui/radio-cards.card');
-const RADIO_CARDS_INPUT = Symbol.for('@esportsplus/ui/radio-cards.input');
-const RING = {
-    duration: 300,
-    easing: 'linear(0, 0.058, 0.18, 0.321, 0.455, 0.573, 0.671, 0.75, 0.812, 0.86, 0.897, 0.924, 0.944, 0.96, 0.971, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1)'
-};
-let uid = 0;
-function glide(grid, previous) {
-    let ring = grid.querySelector('.radio-cards-card:has(input:checked) .radio-cards-ring');
-    if (!previous || !ring || matchMedia('(prefers-reduced-motion: reduce)').matches) {
-        return;
-    }
-    let next = ring.getBoundingClientRect(), x = previous.left - next.left, y = previous.top - next.top;
-    if (x === 0 && y === 0) {
-        return;
-    }
-    ring.animate([
-        { translate: `${x}px ${y}px` },
-        { translate: '0px 0px' }
-    ], RING);
-}
-function template({ label, name, options, value, state = new ReactiveObject_108kira0(value ?? options[0]?.value ?? ''), ...attributes }) {
-    let group = name ?? `radio-cards-${++uid}`, previous;
-    return (() => {
-        let root_108kira1 = template_108kira2(), element_108kira3 = root_108kira1.firstChild, element_108kira4 = element_108kira3.firstElementChild, element_108kira5 = element_108kira4.nextElementSibling;
-        template_u1.setProperties(element_108kira3, this?.attributes);
-        template_u1.setProperties(element_108kira3, attributes);
-        template_u1.slot(element_108kira4, label, 1);
-        template_u1.delegate(element_108kira5, 'pointerdown', function () {
-            previous = this.querySelector('.radio-cards-card:has(input:checked) .radio-cards-ring')?.getBoundingClientRect();
-        });
-        template_u1.slot(element_108kira5, options.map((option) => {
-            let root_108kira6 = template_108kira7(), element_108kira8 = root_108kira6.firstChild, element_108kira9 = element_108kira8.firstElementChild.nextElementSibling.firstChild, element_108kiraa = element_108kira8.firstElementChild.nextElementSibling.nextElementSibling.firstElementChild.firstElementChild, element_108kirab = element_108kira8.firstElementChild.nextElementSibling.nextElementSibling.firstElementChild, element_108kirac = element_108kirab.nextElementSibling, element_108kirad = element_108kira8.firstElementChild.nextElementSibling.nextElementSibling.nextElementSibling.firstElementChild, element_108kirae = element_108kira8.firstElementChild.nextElementSibling.nextElementSibling.nextElementSibling;
-            template_u1.setProperties(element_108kira8, this?.attributes?.[RADIO_CARDS_CARD]);
-            template_u1.setProperties(element_108kira8, attributes[RADIO_CARDS_CARD]);
-            template_u1.slot(element_108kira9, radio({
-                state,
-                [factory.input]: {
-                    checked: () => state.value === option.value,
-                    name: group,
-                    onchange: function () {
-                        let grid = this.closest('.radio-cards-grid');
-                        state.value = option.value;
-                        if (grid) {
-                            glide(grid, previous);
-                        }
-                        previous = undefined;
-                    },
-                    onkeydown: function () {
-                        previous = this.closest('.radio-cards-grid')
-                            ?.querySelector('.radio-cards-card:has(input:checked) .radio-cards-ring')
-                            ?.getBoundingClientRect();
-                    },
-                    value: option.value,
-                    ...this?.attributes?.[RADIO_CARDS_INPUT],
-                    ...attributes[RADIO_CARDS_INPUT]
-                }
-            }));
-            template_u1.slot(element_108kiraa, option.title, 1);
-            template_u1.slot(element_108kirab, option.badge ? (() => {
-                let root_108kiraf = template_108kirag(), element_108kirah = root_108kiraf.firstChild;
-                template_u1.slot(element_108kirah, option.badge, 1);
-                return root_108kiraf;
-            })() : '', 2);
-            template_u1.slot(element_108kirac, option.description, 1);
-            template_u1.slot(element_108kirad, option.price, 1);
-            template_u1.slot(element_108kirae, option.period ? (() => {
-                let root_108kirai = template_108kiraj(), element_108kirak = root_108kirai.firstChild;
-                template_u1.slot(element_108kirak, option.period, 1);
-                return root_108kirai;
-            })() : '', 2);
-            return root_108kira6;
-        }), 1);
-        return root_108kira1;
-    })();
-}
-export default Object.assign(template, { card: RADIO_CARDS_CARD, input: RADIO_CARDS_INPUT });

package/build/components/radio-cards/scss/index.scss

@@ -1,2 +0,0 @@
-@layer components {.radio-cards{--amount-font-size:calc(var(--font-size-400) * 1.125);--background:var(--background-default);--background-default:var(--color-white-300);--background-hover:var(--color-grey-400);--badge-background:var(--color-grey-400);--badge-background-hover:var(--color-white-300);--box-shadow:0 0 0 1px 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);--card-border-radius:var(--border-radius-700);--card-gap:var(--size-300);--check-color:var(--color-white-300);--check-size:12px;--check-stroke-width:2.25;--color:var(--color-text-500);--color-muted:var(--color-text-300);--description-font-size:calc(var(--font-size-400) * .875);--description-line-height:1.43;--dot-border-width:1.5px;--dot-size:var(--size-500);--focus-width:var(--border-width-500);--padding:var(--size-400);--press-scale:.98;--ring-color:var(--color);--ring-width:var(--border-width-500);--title-line-height:1.4;--transition-duration:.15s;--transition-timing-function:ease-out;--width:min(480px, 100%);color:var(--color);min-width:0;width:var(--width);border:0;margin:0;padding:0}.radio-cards-amount{color:var(--color);font-size:var(--amount-font-size);font-variant-numeric:tabular-nums;font-weight:var(--font-weight-500)}.radio-cards-badge{background:var(--badge-background);color:var(--color-muted);font-size:var(--font-size-300);font-weight:var(--font-weight-400);padding:2px var(--size-200);transition:background var(--transition-duration) var(--transition-timing-function);border-radius:999px;line-height:1.4}.radio-cards-card{background:var(--background);border-radius:var(--card-border-radius);box-shadow:var(--box-shadow);cursor:pointer;align-items:center;gap:var(--padding);padding:var(--padding);touch-action:manipulation;transition:background var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function);-webkit-user-select:none;user-select:none;display:flex;position:relative}.radio-cards-card:hover{--background:var(--background-hover);--badge-background:var(--badge-background-hover)}.radio-cards-card:active{scale:var(--press-scale)}.radio-cards-card:has(input:checked){z-index:1}.radio-cards-card:has(input:focus-visible){outline:var(--focus-width) solid var(--color);outline-offset:2px}.radio-cards-check{color:var(--check-color);filter:blur(4px);height:var(--check-size);opacity:0;pointer-events:none;stroke-width:var(--check-stroke-width);transition:filter .3s linear(0, .058, .18, .321, .455, .573, .671, .75, .812, .86, .897, .924, .944, .96, .971, .979, .985, .989, .992, .994, .996, .997, .998, .999, 1), opacity .3s linear(0, .058, .18, .321, .455, .573, .671, .75, .812, .86, .897, .924, .944, .96, .971, .979, .985, .989, .992, .994, .996, .997, .998, .999, 1), scale .3s linear(0, .058, .18, .321, .455, .573, .671, .75, .812, .86, .897, .924, .944, .96, .971, .979, .985, .989, .992, .994, .996, .997, .998, .999, 1);width:var(--check-size);margin:auto;position:absolute;inset:0;scale:.25}.radio-cards-content{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.radio-cards-description{color:var(--color-muted);font-size:var(--description-font-size);line-height:var(--description-line-height);text-wrap:pretty}.radio-cards-dot{flex:none;display:grid;position:relative}.radio-cards-dot .checkbox{--background-active:transparent;--border-color-active:var(--color);--border-color-default:color-mix(in oklch, var(--color) 25%, transparent);--border-color-hover:color-mix(in oklch, var(--color) 45%, transparent);--border-width:var(--dot-border-width);--border-width-offset-hover:0px;--box-shadow-active:none;--focus-width:0px;--indicator-color-default:var(--color);--scale-active:1;--scale-default:.5;--scale-hover:.5;--scale-pressed:.5;--size:var(--dot-size);--transition-duration:.15s;--transition-timing-function:ease-out}.radio-cards-dot .checkbox:before{--box-shadow:none;--height:calc(100% + var(--dot-border-width) * 2);--width:calc(100% + var(--dot-border-width) * 2);inset:calc(var(--dot-border-width) * -1);opacity:0;border-radius:50%;transition:opacity .15s cubic-bezier(.23,1,.32,1),scale .15s cubic-bezier(.23,1,.32,1)}.radio-cards-dot .checkbox:has(input:checked):before{opacity:1;transition:opacity .35s linear(0, .077, .251, .456, .649, .809, .927, 1.004, 1.048, 1.066, 1.067, 1.058, 1.045, 1.031, 1.019, 1.009, 1.002, .998, .996, .995, .996, .996, .997, .998, 1), scale .35s linear(0, .077, .251, .456, .649, .809, .927, 1.004, 1.048, 1.066, 1.067, 1.058, 1.045, 1.031, 1.019, 1.009, 1.002, .998, .996, .995, .996, .996, .997, .998, 1)}.radio-cards-dot:has(input:checked) .radio-cards-check{filter:blur();opacity:1;scale:1}.radio-cards-grid{gap:var(--card-gap);grid-auto-rows:1fr;display:grid}.radio-cards-heading{align-items:center;gap:var(--size-200);display:flex}.radio-cards-legend{color:var(--color);font-size:var(--font-size-400);font-weight:var(--font-weight-400);margin-bottom:var(--card-gap);padding:0}.radio-cards-period{color:var(--color-muted);font-size:var(--font-size-300)}.radio-cards-price{flex:none;align-items:baseline;gap:2px;display:flex}.radio-cards-ring{border:var(--ring-width) solid var(--ring-color);border-radius:inherit;opacity:0;pointer-events:none;position:absolute;inset:0}.radio-cards-card:has(input:checked) .radio-cards-ring{opacity:1}.radio-cards-title{color:var(--color);font-size:var(--font-size-400);font-weight:var(--font-weight-500);line-height:var(--title-line-height)}@media (prefers-reduced-motion:reduce){.radio-cards-card{transition:background var(--transition-duration) var(--transition-timing-function)}.radio-cards-card:active{scale:1}.radio-cards-check{filter:none;transition:opacity .15s cubic-bezier(.23,1,.32,1);scale:1}.radio-cards-dot .checkbox{--scale-default:1;--scale-hover:1;--scale-pressed:1}.radio-cards-dot .checkbox:before{transition:opacity .15s cubic-bezier(.23,1,.32,1)}.radio-cards-dot .checkbox:has(input:checked):before{transition:opacity .15s cubic-bezier(.23,1,.32,1)}}}
-/*$vite$:1*/

package/build/components/range-filter/index.d.ts

@@ -1,20 +0,0 @@
-import { type Attributes } from '@esportsplus/template';
-import './scss/index.scss';
-type A = Attributes & {
-    format?: (value: number) => string;
-    label?: string;
-    max?: number;
-    min?: number;
-    prefix?: string;
-    state?: State;
-    step?: number;
-    ticks?: number;
-    value?: [number, number];
-};
-type State = {
-    high: number;
-    low: number;
-};
-export default _default;
-declare function _default({ format, label, max, min, prefix, state, step, ticks, value, ...attributes }: A): DocumentFragment | Text;
-export type { State as RangeFilterState };