@esportsplus/ui 0.55.0 → 0.56.3

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

@@ -0,0 +1,232 @@
+@use 'variables';
+
+$dot-in: linear(0, 0.077, 0.251, 0.456, 0.649, 0.809, 0.927, 1.004, 1.048, 1.066, 1.067, 1.058, 1.045, 1.031, 1.019, 1.009, 1.002, 0.998, 0.996, 0.995, 0.996, 0.996, 0.997, 0.998, 1);
+$ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+$icon-swap: 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);
+
+.radio-cards {
+    border: 0;
+    color: var(--color);
+    margin: 0;
+    min-width: 0;
+    padding: 0;
+    width: var(--width);
+
+    &-amount {
+        color: var(--color);
+        font-size: var(--amount-font-size);
+        font-variant-numeric: tabular-nums;
+        font-weight: var(--font-weight-500);
+    }
+
+    &-badge {
+        background: var(--badge-background);
+        border-radius: 999px;
+        color: var(--color-muted);
+        font-size: var(--font-size-300);
+        font-weight: var(--font-weight-400);
+        line-height: 1.4;
+        padding: 2px var(--size-200);
+        transition: background var(--transition-duration) var(--transition-timing-function);
+    }
+
+    &-card {
+        align-items: center;
+        background: var(--background);
+        border-radius: var(--card-border-radius);
+        box-shadow: var(--box-shadow);
+        cursor: pointer;
+        display: flex;
+        gap: var(--padding);
+        padding: var(--padding);
+        position: relative;
+        touch-action: manipulation;
+        transition:
+            background var(--transition-duration) var(--transition-timing-function),
+            scale var(--transition-duration) var(--transition-timing-function);
+        user-select: none;
+
+        &:hover {
+            --background: var(--background-hover);
+            --badge-background: var(--badge-background-hover);
+        }
+
+        &:active {
+            scale: var(--press-scale);
+        }
+
+        // Lifts the checked card so its ring stays above the neighbours it slides across.
+        &:has(input:checked) {
+            z-index: 1;
+        }
+
+        &:has(input:focus-visible) {
+            outline: var(--focus-width) solid var(--color);
+            outline-offset: 2px;
+        }
+    }
+
+    &-check {
+        color: var(--check-color);
+        filter: blur(4px);
+        height: var(--check-size);
+        inset: 0;
+        margin: auto;
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        scale: 0.25;
+        stroke-width: var(--check-stroke-width);
+        transition:
+            filter 300ms $icon-swap,
+            opacity 300ms $icon-swap,
+            scale 300ms $icon-swap;
+        width: var(--check-size);
+    }
+
+    &-content {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        gap: 2px;
+        min-width: 0;
+    }
+
+    &-description {
+        color: var(--color-muted);
+        font-size: var(--description-font-size);
+        line-height: var(--description-line-height);
+        text-wrap: pretty;
+    }
+
+    &-dot {
+        display: grid;
+        flex: 0 0 auto;
+        position: relative;
+
+        .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: 0.5;
+            --scale-hover: 0.5;
+            --scale-pressed: 0.5;
+            --size: var(--dot-size);
+            --transition-duration: 150ms;
+            --transition-timing-function: ease-out;
+
+            // Covers the border too, and starts at half size so the fill grows out of the ring's own center.
+            &::before {
+                --box-shadow: none;
+                --height: calc(100% + var(--dot-border-width) * 2);
+                --width: calc(100% + var(--dot-border-width) * 2);
+                border-radius: 50%;
+                inset: calc(var(--dot-border-width) * -1);
+                opacity: 0;
+                transition:
+                    opacity 150ms $ease-out,
+                    scale 150ms $ease-out;
+            }
+
+            &:has(input:checked)::before {
+                opacity: 1;
+                transition:
+                    opacity 350ms $dot-in,
+                    scale 350ms $dot-in;
+            }
+        }
+
+        &:has(input:checked) .radio-cards-check {
+            filter: blur(0px);
+            opacity: 1;
+            scale: 1;
+        }
+    }
+
+    &-grid {
+        display: grid;
+        gap: var(--card-gap);
+        // Equal rows keep every card the same size, so the ring only ever translates between them.
+        grid-auto-rows: 1fr;
+    }
+
+    &-heading {
+        align-items: center;
+        display: flex;
+        gap: var(--size-200);
+    }
+
+    &-legend {
+        color: var(--color);
+        font-size: var(--font-size-400);
+        font-weight: var(--font-weight-400);
+        margin-bottom: var(--card-gap);
+        padding: 0;
+    }
+
+    &-period {
+        color: var(--color-muted);
+        font-size: var(--font-size-300);
+    }
+
+    &-price {
+        align-items: baseline;
+        display: flex;
+        flex: 0 0 auto;
+        gap: 2px;
+    }
+
+    &-ring {
+        border: var(--ring-width) solid var(--ring-color);
+        border-radius: inherit;
+        inset: 0;
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+
+        .radio-cards-card:has(input:checked) & {
+            opacity: 1;
+        }
+    }
+
+    &-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) {
+        &-card {
+            transition: background var(--transition-duration) var(--transition-timing-function);
+
+            &:active {
+                scale: 1;
+            }
+        }
+
+        &-check {
+            filter: none;
+            scale: 1;
+            transition: opacity 150ms $ease-out;
+        }
+
+        &-dot .checkbox {
+            --scale-default: 1;
+            --scale-hover: 1;
+            --scale-pressed: 1;
+
+            &::before,
+            &:has(input:checked)::before {
+                transition: opacity 150ms $ease-out;
+            }
+        }
+    }
+}

package/src/components/radio-cards/scss/variables.scss

@@ -0,0 +1,32 @@
+.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 / 0.06),
+        0 1px 2px oklch(from var(--color-black-500) l c h / 0.06),
+        0 6px 16px -6px oklch(from var(--color-black-500) l c h / 0.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) * 0.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: 0.98;
+    --ring-color: var(--color);
+    --ring-width: var(--border-width-500);
+    --title-line-height: 1.4;
+    --transition-duration: 150ms;
+    --transition-timing-function: ease-out;
+    --width: min(480px, 100%);
+}

package/src/components/range/scss/index.scss

@@ -5,7 +5,8 @@
     border-radius: 240px;
     border: 0px;
     height: var(--height);
-    margin: calc(var(--margin-vertical) + ((var(--thumb-size) - var(--height)) / 2)) var(--margin-horizontal);
+    margin-block: calc(var(--margin-vertical) + ((var(--thumb-size) - var(--height)) / 2));
+    margin-inline: var(--margin-horizontal);
     transition:
         background var(--transition-duration) var(--transition-timing-function),
         border-color var(--transition-duration) var(--transition-timing-function),

package/src/components/range-filter/index.ts

@@ -0,0 +1,295 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html, 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;
+    // Number of evenly spaced scale labels under the track.
+    ticks?: number;
+    value?: [number, number];
+};
+
+type Key = 'high' | 'low';
+
+type State = { high: number; low: number };
+
+
+const DIGITS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+
+const KEYS: Key[] = ['low', 'high'];
+
+
+function clamp(value: number, min: number, max: number) {
+    return Math.min(Math.max(value, min), max);
+}
+
+function snap(value: number, min: number, step: number) {
+    return Math.round((value - min) / step) * step + min;
+}
+
+
+export default ({
+    format = (value: number) => value.toLocaleString('en-US'),
+    label = 'Price Range',
+    max = 1000,
+    min = 0,
+    prefix = '$',
+    state,
+    step = 10,
+    ticks = 5,
+    value,
+    ...attributes
+}: A) => {
+    let span = max - min || 1,
+        s = state ?? reactive({
+            high: value?.[1] ?? clamp(snap(min + span * 0.65, min, step), min, max),
+            low: value?.[0] ?? clamp(snap(min + span * 0.15, min, step), min, max)
+        }),
+        drag = -1,
+        labels: number[] = [],
+        root: HTMLElement | undefined,
+        thumbs: HTMLElement[] = [],
+        ui = reactive({ dragging: -1, preview: -1 });
+
+    for (let i = 0; i < ticks; i++) {
+        let tick = snap(min + (i * span) / Math.max(1, ticks - 1), min, step);
+
+        if (!labels.includes(tick)) {
+            labels.push(tick);
+        }
+    }
+
+    function commit(index: number, raw: number) {
+        let next = clamp(snap(raw, min, step), min, max);
+
+        // Thumbs meet but never pass, so each keeps the bound it started as.
+        s[KEYS[index]] = index === 0 ? Math.min(next, s.high) : Math.max(next, s.low);
+    }
+
+    // The value under the pointer; the track maps edge to edge, like the range fill.
+    function at(x: number) {
+        if (!root) {
+            return min;
+        }
+
+        let rect = root.getBoundingClientRect();
+
+        return clamp(snap(((x - rect.left) / rect.width) * span + min, min, step), min, max);
+    }
+
+    function keydown(index: number, event: KeyboardEvent) {
+        let big = step * 10,
+            delta: Record<string, number> = {
+                ArrowDown: -(event.shiftKey ? big : step),
+                ArrowLeft: -(event.shiftKey ? big : step),
+                ArrowRight: event.shiftKey ? big : step,
+                ArrowUp: event.shiftKey ? big : step,
+                End: Infinity,
+                Home: -Infinity,
+                PageDown: -big,
+                PageUp: big
+            };
+
+        if (!(event.key in delta)) {
+            return;
+        }
+
+        event.preventDefault();
+        commit(index, clamp(s[KEYS[index]] + delta[event.key], min, max));
+    }
+
+    function pct(value: number) {
+        return ((value - min) / span) * 100;
+    }
+
+    function release() {
+        drag = -1;
+        ui.dragging = -1;
+    }
+
+    // Digits roll on their own columns, right-aligned so the ones place never moves; columns a smaller number
+    // doesn't need fold away to nothing.
+    function roll(key: Key) {
+        let width = format(max).length;
+
+        function char(i: number) {
+            let text = format(s[key]),
+                pad = width - text.length;
+
+            return i < pad ? '' : text[i - pad];
+        }
+
+        return html`
+            <span class='range-filter-number'>
+                <span class='range-filter-sr'>${() => format(s[key])}</span>
+                <span aria-hidden='true' class='range-filter-columns'>
+                    ${Array.from({ length: width }, (_, i) => html`
+                        <span
+                            class='range-filter-column'
+                            ${{
+                                class: () => {
+                                    let c = char(i);
+
+                                    return c === '' ? '--empty' : DIGITS.includes(c) ? '--digit' : '--symbol';
+                                }
+                            }}
+                        >
+                            <span class='range-filter-strip' style='${() => `--digit: ${DIGITS.includes(char(i)) ? char(i) : 0}`}'>
+                                ${DIGITS.map((digit) => html`<span>${digit}</span>`)}
+                            </span>
+                            <span class='range-filter-symbol'>${() => DIGITS.includes(char(i)) ? '' : char(i)}</span>
+                        </span>
+                    `)}
+                </span>
+            </span>
+        `;
+    }
+
+    return html`
+        <div class='range-filter' ${attributes}>
+            <div class='range-filter-header'>
+                <div>
+                    <p class='range-filter-label'>${label}</p>
+                    <div class='range-filter-values'>
+                        <span class='range-filter-value'>${prefix}${roll('low')}</span>
+                        <span class='range-filter-dash'>–</span>
+                        <span class='range-filter-value'>${prefix}${roll('high')}</span>
+                    </div>
+                </div>
+
+                <button
+                    class='range-filter-clear'
+                    onclick='${() => {
+                        s.low = min;
+                        s.high = max;
+                    }}'
+                    type='button'
+                    ${{ disabled: () => s.low === min && s.high === max }}
+                >
+                    <svg aria-hidden='true' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'>
+                        <path d='M18 6 6 18M6 6l12 12' />
+                    </svg>
+                    Clear
+                </button>
+            </div>
+
+            <div class='range-filter-body'>
+                <div
+                    aria-label='${label}'
+                    class='range-filter-root'
+                    role='group'
+                    ${{
+                        class: () => ui.dragging !== -1 && '--dragging',
+                        onlostpointercapture: release,
+                        onpointercancel: release,
+                        onpointerdown: (event: PointerEvent) => {
+                            if (event.button !== 0 || !root) {
+                                return;
+                            }
+
+                            let grabbed = (event.target as HTMLElement).closest<HTMLElement>('[data-thumb]'),
+                                v = at(event.clientX),
+                                index: number;
+
+                            if (grabbed) {
+                                index = Number(grabbed.dataset.thumb);
+                            }
+                            else {
+                                let toHigh = Math.abs(v - s.high),
+                                    toLow = Math.abs(v - s.low);
+
+                                // Stacked thumbs tie, so the side of the press decides.
+                                index = toLow === toHigh ? (v < s.low ? 0 : 1) : (toLow < toHigh ? 0 : 1);
+                            }
+
+                            event.preventDefault();
+                            thumbs[index]?.focus({ preventScroll: true });
+                            root.setPointerCapture(event.pointerId);
+                            drag = index;
+                            ui.dragging = index;
+                            ui.preview = -1;
+                            commit(index, v);
+                        },
+                        onpointerleave: () => {
+                            ui.preview = -1;
+                        },
+                        onpointermove: (event: PointerEvent) => {
+                            if (drag !== -1) {
+                                commit(drag, at(event.clientX));
+                                return;
+                            }
+
+                            // Touch has no hover, so there is nothing to preview.
+                            if (event.pointerType === 'mouse') {
+                                ui.preview = at(event.clientX);
+                            }
+                        },
+                        onpointerup: release,
+                        onrender: (element: HTMLElement) => {
+                            root = element;
+                        }
+                    }}
+                >
+                    <div class='range-filter-track'>
+                        <div class='range-filter-range' style='${() => `left: ${pct(s.low)}%; right: ${100 - pct(s.high)}%;`}'></div>
+                    </div>
+
+                    <div
+                        aria-hidden='true'
+                        class='range-filter-ghost'
+                        ${{
+                            // Hovering outside the selection shows how far it would stretch to reach the pointer.
+                            class: () => (ui.preview !== -1 && (ui.preview < s.low || ui.preview > s.high)) && '--active',
+                            style: () => {
+                                let p = ui.preview;
+
+                                if (p === -1 || (p >= s.low && p <= s.high)) {
+                                    return '';
+                                }
+
+                                return p < s.low
+                                    ? `left: ${pct(p)}%; width: ${pct(s.low) - pct(p)}%;`
+                                    : `left: ${pct(s.high)}%; width: ${pct(p) - pct(s.high)}%;`;
+                            }
+                        }}
+                    ></div>
+
+                    ${KEYS.map((key, index) => html`
+                        <div
+                            aria-label='${`${index === 0 ? 'Minimum' : 'Maximum'} ${label.toLowerCase()}`}'
+                            aria-valuemax='${max}'
+                            aria-valuemin='${min}'
+                            class='range-filter-thumb'
+                            data-thumb='${index}'
+                            role='slider'
+                            tabindex='0'
+                            ${{
+                                'aria-valuenow': () => s[key],
+                                'aria-valuetext': () => `${prefix}${format(s[key])}`,
+                                class: () => ui.dragging === index && '--active',
+                                onkeydown: (event: KeyboardEvent) => keydown(index, event),
+                                onrender: (element: HTMLElement) => {
+                                    thumbs[index] = element;
+                                },
+                                style: () => `--position: ${pct(s[key]) / 100}; z-index: ${ui.dragging === index || (index === 0 && s.low === max) ? 3 : 2};`
+                            }}
+                        ></div>
+                    `)}
+                </div>
+
+                <div aria-hidden='true' class='range-filter-ticks'>
+                    ${labels.map((tick) => html`<span>${prefix}${format(tick)}</span>`)}
+                </div>
+            </div>
+        </div>
+    `;
+};
+
+export type { State as RangeFilterState };