@esportsplus/ui 0.56.3 → 0.57.0

package/src/components/normalize/scss/index.scss

@@ -1,35 +0,0 @@
-@use 'modern-normalize/modern-normalize.css';
-
-button,
-input,
-select,
-textarea {
-    background: transparent;
-    border-radius: 0;
-    border: 0;
-    font-family: inherit;
-    font-size: inherit;
-    margin: 0;
-    padding: 0;
-
-    &,
-    &:active,
-    &:focus,
-    &:hover {
-        outline: none;
-    }
-
-    &:invalid {
-        box-shadow: none;
-    }
-}
-
-form {
-    margin: 0;
-    padding: 0;
-    width: 100%;
-}
-
-label {
-    cursor: pointer;
-}

package/src/components/notification-bell/index.ts

@@ -1,102 +0,0 @@
-import { html, type Attributes } from '@esportsplus/template';
-import { effect, onCleanup, reactive, untrack } from '@esportsplus/reactivity';
-import icon from '~/components/icon';
-import bell from './svg/bell.svg';
-import './scss/index.scss';
-
-
-const notificationBell = ({ 'aria-label': label = 'Notifications', count = 0, dot = false, max = 99, ring = false, state: api = reactive({ count }), ...attributes }: Attributes & {
-    'aria-label'?: string;
-    count?: number;
-    dot?: boolean;
-    max?: number;
-    ring?: boolean;
-    state?: { count: number };
-}) => {
-    let previous = api.count,
-        render = reactive([] as { digit: boolean; value: string }[]),
-        // Alternates between 1 and 2 so back-to-back increments swap keyframe
-        // names, which restarts the swing without forcing a reflow.
-        state = reactive({ ring: ring ? 1 : 0 }),
-        stop = effect(() => {
-            let count = api.count;
-
-            untrack(() => {
-                if (count > previous) {
-                    state.ring = state.ring === 1 ? 2 : 1;
-                }
-
-                previous = count;
-
-                // Keep the last digits while the badge scales out
-                if (count <= 0 || dot) {
-                    return;
-                }
-
-                let values = (count > max ? `${max}+` : `${count}`).split('');
-
-                for (let i = 0, n = values.length; i < n; i++) {
-                    let value = values[i],
-                        digit = value !== '+';
-
-                    // Preserve the track so CSS can roll between digit positions.
-                    if (render[i]?.digit === digit) {
-                        render[i].value = value;
-                    }
-                    else {
-                        let character = reactive({ digit, value });
-
-                        render[i] = character;
-                    }
-                }
-
-                if (render.length > values.length) {
-                    render.splice(values.length);
-                }
-            });
-        });
-
-    onCleanup(stop);
-
-    return html`
-        <button
-            class='notification-bell'
-            type='button'
-            ${{
-                'aria-label': () => api.count > 0 ? `${label}, ${api.count} unread` : label,
-                'data-ring': () => state.ring || '',
-                onanimationend: (e: AnimationEvent) => {
-                    if (e.animationName.startsWith('notification-bell-ring')) {
-                        state.ring = 0;
-                    }
-                }
-            }}
-            ${attributes}
-        >
-            ${icon({ 'aria-hidden': true, class: 'notification-bell-icon' }, bell)}
-
-            <span
-                aria-hidden='true'
-                class='notification-bell-badge ${dot && 'notification-bell-badge--dot'}'
-                ${{ class: () => api.count > 0 && '--active' }}
-            >
-                ${!dot && html.reactive(render, function (character) {
-                    if (!character.digit) {
-                        return html`<span class='notification-bell-character'>${() => character.value}</span>`;
-                    }
-
-                    return html`
-                        <span class='notification-bell-character'>
-                            <span class='notification-bell-character-track' style='${() => `--value: ${character.value}`}'>
-                                ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => html`<span>${value}</span>`)}
-                            </span>
-                        </span>
-                    `;
-                })}
-            </span>
-        </button>
-    `;
-};
-
-
-export default notificationBell;

package/src/components/notification-bell/scss/index.scss

@@ -1,132 +0,0 @@
-@use 'variables';
-
-.notification-bell {
-    align-items: center;
-    background: var(--background);
-    border: 0;
-    border-radius: var(--border-radius);
-    color: var(--color);
-    cursor: pointer;
-    display: inline-flex;
-    flex: 0 0 var(--size);
-    height: var(--size);
-    justify-content: center;
-    padding: 0;
-    position: relative;
-    transition: background var(--transition-duration) var(--transition-timing-function);
-    width: var(--size);
-
-    &:focus-visible {
-        outline: var(--focus-width) solid var(--focus-color);
-        outline-offset: var(--focus-offset);
-    }
-
-    @each $i in 1, 2 {
-        &[data-ring='#{$i}'] .notification-bell-icon {
-            animation: notification-bell-ring-#{$i} var(--ring-duration) ease-in-out;
-        }
-    }
-
-    &-badge {
-        align-items: center;
-        background: var(--badge-background);
-        border-radius: calc(var(--badge-size) / 2);
-        box-shadow: 0 0 0 var(--badge-outline-width) var(--badge-outline-color);
-        color: var(--badge-color);
-        display: flex;
-        font-size: var(--badge-font-size);
-        font-variant-numeric: tabular-nums;
-        font-weight: var(--badge-font-weight);
-        height: var(--badge-size);
-        justify-content: center;
-        left: calc(100% - var(--badge-inset));
-        line-height: var(--badge-size);
-        min-width: var(--badge-size);
-        padding: 0 calc(var(--badge-size) * 0.25);
-        pointer-events: none;
-        position: absolute;
-        top: var(--badge-inset);
-        transform: translate(-50%, -50%) scale(0);
-        transition: transform var(--badge-transition-duration) var(--badge-timing-function);
-
-        &.--active {
-            transform: translate(-50%, -50%) scale(1);
-        }
-
-        &--dot {
-            height: var(--dot-size);
-            min-width: 0;
-            padding: 0;
-            width: var(--dot-size);
-        }
-    }
-
-    &-character {
-        display: grid;
-        height: 1lh;
-        overflow: hidden;
-
-        &-track {
-            display: grid;
-            transition: translate var(--roll-duration) var(--roll-timing-function);
-            translate: 0 calc(var(--value) * -1lh);
-
-            span {
-                height: 1lh;
-                text-align: center;
-            }
-        }
-    }
-
-    // Outranks `.icon` so its --size default can't win on source order
-    .notification-bell-icon {
-        --size: var(--icon-size);
-        transform-origin: 50% 8%;
-
-        svg {
-            fill: none;
-            stroke: currentColor;
-            stroke-linecap: round;
-            stroke-linejoin: round;
-            stroke-width: var(--icon-stroke-width);
-        }
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-        &,
-        &-badge,
-        &-character-track {
-            transition: none;
-        }
-
-        @each $i in 1, 2 {
-            &[data-ring='#{$i}'] .notification-bell-icon {
-                animation: none;
-            }
-        }
-    }
-}
-
-@each $i in 1, 2 {
-    @keyframes notification-bell-ring-#{$i} {
-        0%,
-        100% {
-            rotate: 0deg;
-        }
-        15% {
-            rotate: var(--ring-angle);
-        }
-        30% {
-            rotate: calc(var(--ring-angle) * -0.85);
-        }
-        45% {
-            rotate: calc(var(--ring-angle) * 0.6);
-        }
-        60% {
-            rotate: calc(var(--ring-angle) * -0.4);
-        }
-        75% {
-            rotate: calc(var(--ring-angle) * 0.2);
-        }
-    }
-}

package/src/components/notification-bell/scss/variables.scss

@@ -1,41 +0,0 @@
-@use '/tokens';
-
-.notification-bell {
-    --background: var(--background-default);
-    --background-default: transparent;
-    --background-hover: color-mix(in srgb, currentColor 8%, transparent);
-    --background-pressed: color-mix(in srgb, currentColor 14%, transparent);
-    --badge-background: var(--color-red-400);
-    --badge-color: var(--color-white-400);
-    --badge-font-size: calc(var(--size) * 0.26);
-    --badge-font-weight: var(--font-weight-500);
-    --badge-inset: calc(var(--size) * 0.12);
-    --badge-outline-color: var(--color-white-400);
-    --badge-outline-width: 2px;
-    --badge-size: calc(var(--size) * 0.42);
-    --badge-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
-    --badge-transition-duration: 280ms;
-    --border-radius: 50%;
-    --color: var(--color-text-400);
-    --dot-size: calc(var(--size) * 0.24);
-    --focus-color: currentColor;
-    --focus-offset: 2px;
-    --focus-width: 2px;
-    --icon-size: 50%;
-    --icon-stroke-width: 2;
-    --ring-angle: 14deg;
-    --ring-duration: 800ms;
-    --roll-duration: 400ms;
-    --roll-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
-    --size: var(--size-800);
-    --transition-duration: 160ms;
-    --transition-timing-function: ease;
-
-    @include tokens.state(hover) {
-        --background: var(--background-hover);
-    }
-
-    @include tokens.state(pressed) {
-        --background: var(--background-pressed);
-    }
-}

package/src/components/notification-bell/svg/bell.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>

package/src/components/onboarding-checklist/index.ts

@@ -1,252 +0,0 @@
-import { html, type Attributes } from '@esportsplus/template';
-import { reactive, untrack } from '@esportsplus/reactivity';
-import accordion from '~/components/accordion';
-import checkbox, { factory } from '~/components/checkbox';
-import './scss/index.scss';
-
-
-type A = Attributes & {
-    [ONBOARDING_CHECKLIST_TASK]?: Attributes;
-    done?: string[];
-    ondismiss?: VoidFunction;
-    open?: string[];
-    state?: State;
-    tasks: Task[];
-};
-
-type State = { celebrating: boolean, count: number };
-
-type Task = {
-    action: string;
-    description: string;
-    id: string;
-    title: string;
-};
-
-
-// Lets the last check and the ring reaching 100 land before the card changes, so the finish is seen rather than skipped.
-const CELEBRATE_AFTER = 700;
-
-const ONBOARDING_CHECKLIST_TASK = Symbol.for('@esportsplus/ui/onboarding-checklist.task');
-
-// Critically damped spring (motion's visualDuration 0.5, bounce 0): slow enough to watch the number count up, never past 100.
-const STIFFNESS = (2 * Math.PI / 0.6) ** 2;
-
-const DAMPING = 2 * Math.sqrt(STIFFNESS);
-
-
-function check() {
-    return html`<svg aria-hidden='true' class='onboarding-checklist-icon' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'><path d='m3.5 8.5 3 3 6-7' /></svg>`;
-}
-
-function template(
-    this: { attributes?: Partial<A> } | void,
-    { done = [], ondismiss, open = [], state, tasks, ...attributes }: A
-) {
-    let celebration = reactive({ active: false }),
-        // Seeded from the plain inputs: reading the reactive rows here would subscribe whichever effect renders this component.
-        count = tasks.filter((task) => done.includes(task.id)).length,
-        defaults = this?.attributes,
-        frame = 0,
-        list = reactive({ active: true }),
-        prefix = `onboarding-checklist-${Math.random().toString(36).slice(2, 8)}`,
-        rows = tasks.map((task) => reactive({ active: open.includes(task.id), done: done.includes(task.id) })),
-        s = state || reactive({ celebrating: false, count }),
-        timer: ReturnType<typeof setTimeout> | undefined,
-        ui = reactive({ announcement: '', shown: count / tasks.length }),
-        velocity = 0;
-
-    s.count = count;
-
-    function celebrate() {
-        clearTimeout(timer);
-
-        if (s.count !== tasks.length) {
-            return;
-        }
-
-        timer = setTimeout(() => {
-            celebration.active = true;
-            list.active = false;
-            s.celebrating = true;
-            ui.announcement = 'All tasks complete. You\'re all set.';
-        }, CELEBRATE_AFTER);
-    }
-
-    function ring() {
-        cancelAnimationFrame(frame);
-
-        let previous = performance.now(),
-            target = s.count / tasks.length;
-
-        if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
-            ui.shown = target;
-            velocity = 0;
-            return;
-        }
-
-        function step(now: number) {
-            let dt = Math.min((now - previous) / 1000, 1 / 30);
-
-            previous = now;
-            velocity += (STIFFNESS * (target - ui.shown) - DAMPING * velocity) * dt;
-            ui.shown += velocity * dt;
-
-            if (Math.abs(target - ui.shown) < 0.0005 && Math.abs(velocity) < 0.001) {
-                ui.shown = target;
-                velocity = 0;
-                return;
-            }
-
-            frame = requestAnimationFrame(step);
-        }
-
-        frame = requestAnimationFrame(step);
-    }
-
-    function row(task: Task, index: number) {
-        let id = `${prefix}-${index}`,
-            state = rows[index];
-
-        return html`
-            <li
-                class='onboarding-checklist-task'
-                ${defaults?.[ONBOARDING_CHECKLIST_TASK]}
-                ${attributes[ONBOARDING_CHECKLIST_TASK]}
-                ${{ class: () => `${state.done ? '--done' : ''} ${state.active ? '--open' : ''}` }}
-            >
-                <div class='onboarding-checklist-row'>
-                    <label class='onboarding-checklist-toggle'>
-                        ${checkbox({
-                            class: 'onboarding-checklist-checkbox',
-                            [factory.input]: {
-                                'aria-label': task.title,
-                                checked: () => state.done,
-                                onchange: (e: Event) => toggle(index, (e.target as HTMLInputElement).checked)
-                            }
-                        })}
-                    </label>
-
-                    <button
-                        aria-controls='${id}'
-                        class='onboarding-checklist-summary'
-                        type='button'
-                        ${{
-                            'aria-expanded': () => String(state.active),
-                            onclick: () => {
-                                state.active = !state.active;
-                            }
-                        }}
-                    >
-                        <span class='onboarding-checklist-title'>
-                            ${task.title}
-                            <span class='onboarding-checklist-strike' aria-hidden='true'></span>
-                        </span>
-                        <svg aria-hidden='true' class='onboarding-checklist-chevron' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'><path d='m4 6 4 4 4-4' /></svg>
-                    </button>
-                </div>
-
-                ${accordion({ class: 'onboarding-checklist-details', id, state }, html`
-                    <div class='onboarding-checklist-body'>
-                        <p class='onboarding-checklist-description'>${task.description}</p>
-                        <button
-                            class='button onboarding-checklist-action'
-                            type='button'
-                            ${{
-                                'aria-disabled': () => String(state.done),
-                                onclick: () => {
-                                    if (!state.done) {
-                                        toggle(index, true);
-                                    }
-                                }
-                            }}
-                        >
-                            <span class='onboarding-checklist-action-label' ${{ 'aria-hidden': () => String(state.done) }}>${task.action}</span>
-                            <span class='onboarding-checklist-action-label onboarding-checklist-action-label--done' ${{ 'aria-hidden': () => String(!state.done) }}>
-                                ${check()}
-                                <span>Done</span>
-                            </span>
-                        </button>
-                    </div>
-                `)}
-            </li>
-        `;
-    }
-
-    function toggle(index: number, value: boolean) {
-        rows[index].done = value;
-        s.count = rows.filter((row) => row.done).length;
-        ui.announcement = `${tasks[index].title} ${value ? 'done' : 'not done'}. ${s.count} of ${tasks.length} complete.`;
-        ring();
-        celebrate();
-    }
-
-    return html`
-        <section
-            aria-label='Get started'
-            class='onboarding-checklist'
-            ${defaults}
-            ${attributes}
-            ${{
-                class: () => s.celebrating && '--celebrating',
-                onconnect: () => untrack(celebrate),
-                ondisconnect: () => {
-                    cancelAnimationFrame(frame);
-                    clearTimeout(timer);
-                }
-            }}
-        >
-            <header class='onboarding-checklist-header'>
-                <div class='onboarding-checklist-heading'>
-                    <h2 class='onboarding-checklist-heading-title'>Get started</h2>
-                    <p class='onboarding-checklist-heading-count'>${() => `${s.count} of ${tasks.length} complete`}</p>
-                </div>
-                <div
-                    aria-label='Setup progress'
-                    aria-valuemax='100'
-                    aria-valuemin='0'
-                    class='onboarding-checklist-ring'
-                    role='progressbar'
-                    ${{
-                        'aria-valuenow': () => Math.round(s.count / tasks.length * 100),
-                        style: () => `--progress: ${ui.shown};`
-                    }}
-                >
-                    <svg aria-hidden='true' viewBox='0 0 48 48'>
-                        <circle class='onboarding-checklist-ring-track' cx='24' cy='24' fill='none' r='20' stroke-width='4' />
-                        <circle class='onboarding-checklist-ring-fill' cx='24' cy='24' fill='none' pathLength='1' r='20' stroke-linecap='round' stroke-width='4' />
-                    </svg>
-                    <span class='onboarding-checklist-ring-value'>
-                        ${() => Math.round(ui.shown * 100)}<span>%</span>
-                    </span>
-                </div>
-            </header>
-
-            ${accordion({ class: 'onboarding-checklist-collapse', state: list }, html`
-                <ul class='onboarding-checklist-list'>
-                    ${tasks.map(row)}
-                </ul>
-            `)}
-
-            ${accordion({ class: 'onboarding-checklist-collapse', state: celebration }, html`
-                <div class='onboarding-checklist-celebration'>
-                    <h3 class='onboarding-checklist-celebration-title'>You're all set</h3>
-                    <p class='onboarding-checklist-celebration-note'>
-                        Your workspace is ready. You can find these steps again any time in Settings.
-                    </p>
-                    <div class='onboarding-checklist-celebration-actions'>
-                        <button class='button onboarding-checklist-action' type='button' onclick='${() => ondismiss?.()}'>
-                            Dismiss
-                        </button>
-                    </div>
-                </div>
-            `)}
-
-            <p class='onboarding-checklist-live' aria-live='polite'>${() => ui.announcement}</p>
-        </section>
-    `;
-}
-
-
-export default Object.assign(template, { task: ONBOARDING_CHECKLIST_TASK } as const);
-export type { State, Task };