@esportsplus/ui 0.54.0 → 0.56.2

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

@@ -0,0 +1,380 @@
+@use '/tokens';
+@use 'variables';
+
+.date-range-picker {
+    background: var(--background);
+    border-radius: var(--radius);
+    box-shadow: var(--box-shadow);
+    color: var(--foreground);
+    font-size: var(--font-size);
+    max-width: 100%;
+    padding: 16px;
+    width: var(--width);
+
+
+    &-apply {
+        --background-default: var(--accent);
+        --color-default: var(--accent-contrast);
+        --padding-horizontal: 16px;
+        --padding-vertical: 0px;
+        border-radius: 999px;
+        font-weight: var(--font-weight-500);
+        height: 36px;
+
+        &:disabled {
+            opacity: 0.4;
+        }
+
+        &:not(:disabled):active {
+            scale: 0.96;
+        }
+
+        // Both labels share a cell, so the button keeps one width.
+        &-label {
+            align-items: center;
+            display: flex;
+            gap: 6px;
+            grid-area: 1 / 1;
+            justify-content: center;
+        }
+
+        &-label--idle,
+        &-text {
+            transition:
+                filter 200ms ease-out,
+                opacity 200ms ease-out;
+        }
+
+        &-label--idle {
+            .--applied & {
+                filter: blur(4px);
+                opacity: 0;
+            }
+        }
+
+        &-icon {
+            filter: blur(4px);
+            height: 16px;
+            opacity: 0;
+            scale: 0.25;
+            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;
+
+            .--applied & {
+                filter: none;
+                opacity: 1;
+                scale: 1;
+            }
+        }
+
+        &-labels {
+            display: grid;
+        }
+
+        &-text {
+            filter: blur(4px);
+            opacity: 0;
+
+            .--applied & {
+                filter: none;
+                opacity: 1;
+            }
+        }
+    }
+
+    &-apply,
+    &-clear,
+    &-preset,
+    &-step {
+        font-size: var(--font-size);
+        outline: 0 solid var(--focus-ring);
+        outline-offset: 2px;
+        user-select: none;
+
+        &:focus-visible {
+            outline-width: 2px;
+        }
+    }
+
+    &-area {
+        height: calc(var(--row-height) + 32px + var(--row-height) * 6 + 8px);
+        margin: -4px;
+        overflow: hidden;
+        padding: 4px;
+        position: relative;
+    }
+
+    // The band rounds off wherever a week or the month breaks it; endpoints only fill toward the rest of the range.
+    &-cell {
+        height: var(--row-height);
+        padding: 0;
+        position: relative;
+
+        &.--band::before {
+            background: var(--band);
+            content: '';
+            inset: 2px 0;
+            position: absolute;
+        }
+
+        &.--band-end::before {
+            border-bottom-right-radius: 999px;
+            border-top-right-radius: 999px;
+        }
+
+        &.--band-hi::before {
+            right: 50%;
+        }
+
+        &.--band-lo::before {
+            left: 50%;
+        }
+
+        &.--band-start::before {
+            border-bottom-left-radius: 999px;
+            border-top-left-radius: 999px;
+        }
+    }
+
+    &-clear {
+        --background-hover: var(--hover);
+        --color-default: var(--color-muted);
+        --color-hover: var(--foreground);
+        --padding-horizontal: 14px;
+        --padding-vertical: 0px;
+        border-radius: 999px;
+        height: 36px;
+        outline-offset: 0;
+
+        &:active {
+            scale: 0.96;
+        }
+
+        @include tokens.state(disabled) {
+            opacity: 0.4;
+        }
+    }
+
+    &-day {
+        align-items: center;
+        background: transparent;
+        border: 0;
+        border-radius: 50%;
+        color: var(--foreground);
+        cursor: pointer;
+        display: flex;
+        font: inherit;
+        font-variant-numeric: tabular-nums;
+        height: var(--day-size);
+        justify-content: center;
+        margin: 0 auto;
+        outline: 0 solid var(--focus-ring);
+        outline-offset: 1px;
+        padding: 0;
+        position: relative;
+        touch-action: manipulation;
+        transition:
+            background-color 150ms ease-out,
+            scale 150ms ease-out;
+        user-select: none;
+        width: var(--day-size);
+
+        &:active {
+            scale: 0.96;
+        }
+
+        &:focus-visible {
+            outline-width: 2px;
+        }
+
+        &:hover {
+            background: var(--band);
+        }
+
+        // The prospective end: marked, but not yet filled.
+        &.--edge {
+            background: var(--edge);
+        }
+
+        @include tokens.state(active) {
+            background: var(--accent);
+            color: var(--accent-contrast);
+        }
+    }
+
+    &-footer {
+        align-items: center;
+        border-top: 1px solid var(--border);
+        display: flex;
+        gap: 8px;
+        height: 56px;
+        margin: 12px -16px 0;
+        padding: 12px 16px 0;
+    }
+
+    &-grid {
+        border-collapse: collapse;
+        table-layout: fixed;
+        width: 100%;
+
+        th {
+            color: var(--color-muted);
+            font-size: var(--font-size-small);
+            font-weight: var(--font-weight-500);
+            height: 32px;
+            padding: 0;
+            text-align: center;
+        }
+    }
+
+    &-hint {
+        color: var(--color-muted);
+        font-size: var(--font-size-small);
+        height: 16px;
+        line-height: 16px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &-live {
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+
+    &-month {
+        flex: 1 1 0;
+        min-width: 0;
+
+        &-title {
+            align-items: center;
+            display: flex;
+            font-size: var(--font-size-title);
+            font-weight: var(--font-weight-500);
+            height: var(--row-height);
+            justify-content: center;
+        }
+    }
+
+    &-months {
+        display: flex;
+        gap: 24px;
+
+        &[data-exiting] {
+            pointer-events: none;
+            position: absolute;
+        }
+    }
+
+    &-nav {
+        display: flex;
+        inset: 4px 4px auto;
+        justify-content: space-between;
+        pointer-events: none;
+        position: absolute;
+        z-index: 1;
+    }
+
+    // Scrolls sideways on narrow screens; the vertical padding keeps focus outlines from being clipped by that overflow.
+    &-presets {
+        display: flex;
+        gap: 6px;
+        margin: -4px -16px 8px;
+        overflow-x: auto;
+        padding: 4px 16px;
+        scrollbar-width: none;
+    }
+
+    &-preset {
+        --background-hover: var(--hover);
+        --color-default: var(--color-muted);
+        --color-hover: var(--foreground);
+        --padding-horizontal: 14px;
+        --padding-vertical: 0px;
+        border-radius: 999px;
+        box-shadow: inset 0 0 0 1px var(--border);
+        flex-shrink: 0;
+        height: 36px;
+
+        &:active {
+            scale: 0.96;
+        }
+
+        &[aria-pressed='true'] {
+            --background-default: var(--accent);
+            --background-hover: var(--accent);
+            --color-default: var(--accent-contrast);
+            --color-hover: var(--accent-contrast);
+            box-shadow: none;
+        }
+    }
+
+    &-status {
+        flex: 1 1 0;
+        min-width: 0;
+    }
+
+    &-step {
+        --background-hover: var(--hover);
+        --color-default: var(--color-muted);
+        --color-hover: var(--foreground);
+        --padding-horizontal: 0px;
+        --padding-vertical: 0px;
+        border-radius: 50%;
+        height: 40px;
+        outline-offset: 0;
+        pointer-events: auto;
+        touch-action: manipulation;
+        width: 40px;
+
+        &:active {
+            scale: 0.96;
+        }
+
+        svg {
+            height: 16px;
+            width: 16px;
+        }
+    }
+
+    &-summary {
+        color: var(--color-muted);
+        font-variant-numeric: tabular-nums;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        @include tokens.state(active) {
+            color: var(--foreground);
+        }
+    }
+
+    &-today {
+        background: currentColor;
+        border-radius: 50%;
+        bottom: 4px;
+        height: 4px;
+        left: 50%;
+        position: absolute;
+        translate: -50% 0;
+        width: 4px;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &-apply-icon {
+            filter: none;
+            scale: 1;
+        }
+
+        &-day {
+            transition: background-color 150ms ease-out;
+        }
+    }
+}

package/src/components/date-range-picker/scss/variables.scss

@@ -0,0 +1,22 @@
+.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 / 0.07);
+    --border: var(--color-border-300);
+    --box-shadow: 0 0 0 1px oklch(from var(--color-black-300) l c h / 0.06), 0 1px 2px oklch(from var(--color-black-300) l c h / 0.06), 0 6px 16px -6px oklch(from var(--color-black-300) l c h / 0.12);
+    --color-muted: var(--color-text-300);
+    --day-size: 36px;
+    --edge: oklch(from var(--color-text-500) l c h / 0.14);
+    --focus-ring: oklch(from var(--color-text-500) l c h / 0.38);
+    --font-size: calc(var(--font-size-400) * 0.875);
+    --font-size-small: calc(var(--font-size-400) * 0.75);
+    --font-size-title: calc(var(--font-size-400) * 0.9375);
+    --foreground: var(--color-text-500);
+    --hover: oklch(from var(--color-text-500) l c h / 0.05);
+    --icon-duration: 446ms;
+    --icon-timing-function: linear(0, 0.118, 0.319, 0.509, 0.657, 0.769, 0.848, 0.901, 0.937, 0.96, 0.975, 0.984, 0.99, 0.994, 1);
+    --radius: 24px;
+    --row-height: 40px;
+    --width: 600px;
+}

package/src/components/dock/index.ts

@@ -0,0 +1,265 @@
+import { html, type Attributes, type Renderable } from '@esportsplus/template';
+import { onCleanup, reactive } from '@esportsplus/reactivity';
+import '~/components/tooltip';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    [DOCK_BUTTON]?: Attributes;
+    items: Item[];
+    label?: string;
+    onlaunch?: (label: string) => void;
+};
+
+type Item = {
+    icon: Renderable<unknown>;
+    label: string;
+    running?: boolean;
+    state?: { running: boolean };
+};
+
+type Spring = {
+    button: HTMLElement;
+    size: number;
+    target: number;
+    velocity: number;
+};
+
+
+const DOCK_BUTTON = Symbol.for('@esportsplus/ui/dock.button');
+
+const EASE_IN = 'cubic-bezier(0.42, 0, 1, 1)';
+
+const EASE_OUT = 'cubic-bezier(0, 0, 0.58, 1)';
+
+// Up fast and down with gravity; each landing is the quickest part. Long on purpose: it is the "starting up"
+// signal itself, it plays once per app, and input is never blocked while it plays.
+const HOP: Keyframe[] = [
+    { easing: EASE_OUT, offset: 0, translate: '0 0' },
+    { easing: EASE_IN, offset: 0.3, translate: '0 -22px' },
+    { easing: EASE_OUT, offset: 0.55, translate: '0 0' },
+    { easing: EASE_IN, offset: 0.78, translate: '0 -9px' },
+    { offset: 1, translate: '0 0' }
+];
+
+const HOP_DURATION = 700;
+
+// How far from the cursor, in px, an icon still feels the pull.
+const REACH = 140;
+
+// Light mass so the icons keep up with a fast cursor.
+const SPRING = { damping: 12, mass: 0.1, stiffness: 170 };
+
+// Squashes on each landing, so the icon reads as having weight.
+const SQUASH: Keyframe[] = [
+    { offset: 0, scale: '1 1' },
+    { offset: 0.3, scale: '0.97 1.04' },
+    { offset: 0.55, scale: '1.08 0.9' },
+    { offset: 0.7, scale: '0.99 1.02' },
+    { offset: 0.8, scale: '1.03 0.96' },
+    { offset: 1, scale: '1 1' }
+];
+
+const STEP = 1 / 240;
+
+// The first label waits so a cursor passing through doesn't flash one.
+const TOOLTIP_DELAY = 300;
+
+
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+
+const dock = ({ items, label = 'Dock', onlaunch, ...attributes }: A) => {
+    let frame = 0,
+        hops = new Map<HTMLElement, Animation[]>(),
+        peak = 72,
+        rest = 40,
+        springs: Spring[] = [],
+        time = 0,
+        timer: ReturnType<typeof setTimeout> | undefined,
+        tip = reactive({ instant: false, label: '' });
+
+    function hide() {
+        clearTimeout(timer);
+        tip.label = '';
+    }
+
+    function launch(item: Item, state: { running: boolean }, button: HTMLElement) {
+        // Already running: a click just brings it forward, no fanfare.
+        if (state.running) {
+            return;
+        }
+
+        state.running = true;
+        onlaunch?.(item.label);
+
+        if (reduced()) {
+            return;
+        }
+
+        for (let animation of hops.get(button) ?? []) {
+            animation.cancel();
+        }
+
+        hops.set(button, [
+            button.animate(HOP, { duration: HOP_DURATION }),
+            button.animate(SQUASH, { duration: HOP_DURATION, easing: 'ease-in-out' })
+        ]);
+    }
+
+    function pull(x: number) {
+        for (let i = 0, n = springs.length; i < n; i++) {
+            let spring = springs[i],
+                box = spring.button.getBoundingClientRect(),
+                distance = Math.min(Math.abs(x - box.left - box.width / 2), REACH);
+
+            spring.target = peak - (peak - rest) * (distance / REACH);
+        }
+
+        if (!frame) {
+            time = 0;
+            frame = requestAnimationFrame(tick);
+        }
+    }
+
+    function show(label: string) {
+        clearTimeout(timer);
+
+        if (tip.label) {
+            tip.instant = true;
+            tip.label = label;
+            return;
+        }
+
+        timer = setTimeout(() => {
+            tip.instant = false;
+            tip.label = label;
+        }, TOOLTIP_DELAY);
+    }
+
+    function tick(now: number) {
+        // Capped so a stalled tab resumes without integrating one huge step.
+        let dt = time ? Math.min((now - time) / 1000, 1 / 30) : 1 / 60,
+            moving = false;
+
+        time = now;
+
+        for (let i = 0, n = springs.length; i < n; i++) {
+            let spring = springs[i];
+
+            for (let t = 0; t < dt; t += STEP) {
+                let h = Math.min(STEP, dt - t);
+
+                spring.velocity += ((SPRING.stiffness * (spring.target - spring.size) - SPRING.damping * spring.velocity) / SPRING.mass) * h;
+                spring.size += spring.velocity * h;
+            }
+
+            if (Math.abs(spring.target - spring.size) < 0.01 && Math.abs(spring.velocity) < 0.01) {
+                spring.size = spring.target;
+                spring.velocity = 0;
+            }
+            else {
+                moving = true;
+            }
+
+            spring.button.style.setProperty('--size', `${spring.size}px`);
+        }
+
+        frame = moving ? requestAnimationFrame(tick) : 0;
+    }
+
+    onCleanup(() => {
+        cancelAnimationFrame(frame);
+        clearTimeout(timer);
+
+        for (let animations of hops.values()) {
+            for (let animation of animations) {
+                animation.cancel();
+            }
+        }
+    });
+
+    return html`
+        <nav
+            class='dock'
+            ${attributes}
+            ${{
+                'aria-label': label,
+                onconnect: (element: HTMLElement) => {
+                    let style = getComputedStyle(element);
+
+                    peak = parseFloat(style.getPropertyValue('--size-peak')) || peak;
+                    rest = parseFloat(style.getPropertyValue('--size-rest')) || rest;
+
+                    for (let i = 0, n = springs.length; i < n; i++) {
+                        springs[i].size = springs[i].target = rest;
+                    }
+                },
+                onpointerleave: () => {
+                    hide();
+                    pull(Infinity);
+                },
+                onpointermove: (e: PointerEvent) => {
+                    if (e.pointerType === 'touch' || reduced()) {
+                        return;
+                    }
+
+                    pull(e.clientX);
+                }
+            }}
+        >
+            ${items.map((item) => {
+                let button: HTMLElement | undefined,
+                    state = item.state ?? reactive({ running: item.running ?? false });
+
+                return html`
+                    <span class='dock-item tooltip ${() => tip.label === item.label && '--active'}'>
+                        <button
+                            class='dock-button'
+                            type='button'
+                            ${attributes[DOCK_BUTTON]}
+                            ${{
+                                'aria-label': () => state.running ? `${item.label}, running` : item.label,
+                                onblur: hide,
+                                onclick: () => {
+                                    if (button) {
+                                        launch(item, state, button);
+                                    }
+                                },
+                                onfocus: () => {
+                                    clearTimeout(timer);
+                                    tip.instant = false;
+                                    tip.label = item.label;
+                                },
+                                onpointerenter: (e: PointerEvent) => {
+                                    if (e.pointerType !== 'touch') {
+                                        show(item.label);
+                                    }
+                                },
+                                onrender: (element: HTMLElement) => {
+                                    button = element;
+                                    springs.push({ button: element, size: rest, target: rest, velocity: 0 });
+                                }
+                            }}
+                        >
+                            ${item.icon}
+                        </button>
+                        <span
+                            aria-hidden='true'
+                            class='dock-label tooltip-message tooltip-message--n ${() => tip.instant && tip.label === item.label && '--instant'}'
+                        >
+                            ${item.label}
+                        </span>
+                        <span aria-hidden='true' class='dock-light ${() => state.running && '--active'}'></span>
+                    </span>
+                `;
+            })}
+        </nav>
+    `;
+};
+
+
+export default Object.assign(dock, { button: DOCK_BUTTON } as const);
+export type { Item };