@esportsplus/ui 0.55.0 → 0.56.3

package/build/components/color-picker/index.js

@@ -0,0 +1,569 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect, onCleanup, untrack } from '@esportsplus/reactivity';
+import input from '../input/index.js';
+import range from '../range/index.js';
+import './scss/index.scss';
+const template_0zt12vj6 = template_u1.template(`<div class='color-picker'><div aria-label='Saturation and brightness' aria-roledescription='2D slider' aria-valuemax='100' aria-valuemin='0' class='color-picker-pad' role='slider' tabindex='0'><span class='color-picker-thumb'></span></div><div class='color-picker-channels'><div class='color-picker-sliders'><!--$--></div><span aria-hidden='true' class='color-picker-preview'></span></div><div class='color-picker-fields'><label class='color-picker-hex '><span class='color-picker-hash'>#</span></label><span aria-hidden='true' class='color-picker-alpha'></span><span aria-live='polite' class='color-picker-status'></span></div><div class='color-picker-recent'><p class='color-picker-recent-label'>Recent</p><div class='color-picker-swatches' role='group'>`);
+const template_0zt12vji = template_u1.template(`<button class='color-picker-swatch' style=';' type='button'>`);
+class ReactiveObject_0zt12vj0 extends reactivity_u0.ReactiveObject {
+    #error = this[reactivity_u0.SIGNAL]('');
+    #value = this[reactivity_u0.SIGNAL]('');
+    constructor() {
+        super(null);
+    }
+    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);
+    }
+}
+class ReactiveObject_0zt12vj1 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    #error = this[reactivity_u0.SIGNAL]('');
+    #value;
+    constructor(_p0) {
+        super(null);
+        this.#value = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+    get error() {
+        return reactivity_u0.read(this.#error);
+    }
+    set error(_v1) {
+        reactivity_u0.write(this.#error, _v1);
+    }
+    get value() {
+        return reactivity_u0.read(this.#value);
+    }
+    set value(_v2) {
+        reactivity_u0.write(this.#value, _v2);
+    }
+}
+class ReactiveObject_0zt12vj2 extends reactivity_u0.ReactiveObject {
+    #a;
+    #h;
+    #s;
+    #v;
+    constructor(_p0, _p1, _p2, _p3) {
+        super(null);
+        this.#a = this[reactivity_u0.SIGNAL](_p0);
+        this.#h = this[reactivity_u0.SIGNAL](_p1);
+        this.#s = this[reactivity_u0.SIGNAL](_p2);
+        this.#v = this[reactivity_u0.SIGNAL](_p3);
+    }
+    get a() {
+        return reactivity_u0.read(this.#a);
+    }
+    set a(_v0) {
+        reactivity_u0.write(this.#a, _v0);
+    }
+    get h() {
+        return reactivity_u0.read(this.#h);
+    }
+    set h(_v1) {
+        reactivity_u0.write(this.#h, _v1);
+    }
+    get s() {
+        return reactivity_u0.read(this.#s);
+    }
+    set s(_v2) {
+        reactivity_u0.write(this.#s, _v2);
+    }
+    get v() {
+        return reactivity_u0.read(this.#v);
+    }
+    set v(_v3) {
+        reactivity_u0.write(this.#v, _v3);
+    }
+}
+class ReactiveObject_0zt12vj3 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    #error = this[reactivity_u0.SIGNAL]('');
+    #value;
+    constructor(_p0) {
+        super(null);
+        this.#value = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+    get error() {
+        return reactivity_u0.read(this.#error);
+    }
+    set error(_v1) {
+        reactivity_u0.write(this.#error, _v1);
+    }
+    get value() {
+        return reactivity_u0.read(this.#value);
+    }
+    set value(_v2) {
+        reactivity_u0.write(this.#value, _v2);
+    }
+}
+class ReactiveObject_0zt12vj4 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL]('');
+    #invalid = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+    get invalid() {
+        return reactivity_u0.read(this.#invalid);
+    }
+    set invalid(_v1) {
+        reactivity_u0.write(this.#invalid, _v1);
+    }
+}
+const COLOR_PICKER_SWATCH = Symbol.for('@esportsplus/ui/color-picker.swatch');
+const DEFAULT_RECENT = ['#E5484D', '#F5A524', '#30A46C', '#0090FF', '#8E4EC6'];
+const DEFAULT_VALUE = '#5B8DEF';
+const MAX_RECENT = 8;
+const SWATCH = {
+    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)'
+};
+const SWATCH_EXIT = {
+    duration: 150,
+    easing: 'cubic-bezier(0.23, 1, 0.32, 1)',
+    fill: 'forwards'
+};
+let uid = 0;
+function clamp(n) {
+    return Math.min(Math.max(n, 0), 1);
+}
+function fromHex(hex, previous) {
+    let rgba = parse(hex);
+    if (!rgba) {
+        return null;
+    }
+    return { ...toHsv(rgba.r, rgba.g, rgba.b, previous), a: rgba.a };
+}
+function keystep(e, step) {
+    let big = step * 10, unit = e.shiftKey ? big : step;
+    switch (e.key) {
+        case 'ArrowRight':
+        case 'ArrowUp':
+            return unit;
+        case 'ArrowDown':
+        case 'ArrowLeft':
+            return -unit;
+        case 'End':
+            return Infinity;
+        case 'Home':
+            return -Infinity;
+        case 'PageDown':
+            return -big;
+        case 'PageUp':
+            return big;
+    }
+    return null;
+}
+function parse(value) {
+    let hex = value.trim().replace(/^#/, '');
+    if (!/^([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(hex)) {
+        return null;
+    }
+    let full = hex.length <= 4 ? [...hex].map((c) => c + c).join('') : hex;
+    function byte(i) {
+        return parseInt(full.slice(i, i + 2), 16);
+    }
+    return {
+        a: full.length === 8 ? byte(6) / 255 : 1,
+        b: byte(4),
+        g: byte(2),
+        r: byte(0)
+    };
+}
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+function rgb({ h, s, v }) {
+    function f(n) {
+        let k = (n + h / 60) % 6;
+        return Math.round((v - v * s * Math.max(0, Math.min(k, 4 - k, 1))) * 255);
+    }
+    return [f(5), f(3), f(1)];
+}
+function toHex(color) {
+    let alpha = Math.round(color.a * 255);
+    function pair(n) {
+        return n.toString(16).padStart(2, '0');
+    }
+    return ('#' + rgb(color).map(pair).join('') + (alpha < 255 ? pair(alpha) : '')).toUpperCase();
+}
+function toHsv(r, g, b, previous) {
+    let R = r / 255, G = g / 255, B = b / 255, max = Math.max(R, G, B), d = max - Math.min(R, G, B), h = previous.h;
+    if (d !== 0) {
+        let sector = max === R
+            ? ((G - B) / d) % 6
+            : max === G
+                ? (B - R) / d + 2
+                : (R - G) / d + 4;
+        h = (sector * 60 + 360) % 360;
+    }
+    return { h, s: max === 0 ? previous.s : d / max, v: max };
+}
+function template({ recent: initial = DEFAULT_RECENT, value = DEFAULT_VALUE, state = new ReactiveObject_0zt12vj0(), ...attributes } = {}) {
+    let start = fromHex(state.value || value, { a: 1, h: 0, s: 0, v: 0 }) ?? { a: 1, h: 220, s: 0.6, v: 0.9 }, alpha = new ReactiveObject_0zt12vj1(Math.round(start.a * 100)), color = new ReactiveObject_0zt12vj2(start.a, start.h, start.s, start.v), dirty = { alpha: false, hue: false, pad: false }, hue = new ReactiveObject_0zt12vj3(Math.round(start.h)), id = `color-picker-${++uid}`, parts = {}, picker = new ReactiveObject_0zt12vj4(), pointer = { alpha: false, hue: false, pad: -1 }, recent = reactivity_u0.reactive(initial.map((hex) => hex.toUpperCase()));
+    state.value = toHex(color);
+    function apply(leaving) {
+        let field = parts.hex;
+        if (!field) {
+            return;
+        }
+        let next = fromHex(field.value, read());
+        if (!next) {
+            if (leaving) {
+                field.value = toHex(read()).slice(1);
+            }
+            picker.invalid = !leaving;
+            return;
+        }
+        let changed = toHex(next) !== toHex(read());
+        picker.invalid = false;
+        update(next);
+        field.value = toHex(next).slice(1);
+        if (changed) {
+            commit();
+        }
+    }
+    function commit() {
+        let hex = toHex(read());
+        picker.active = hex;
+        if (recent[0] === hex) {
+            return;
+        }
+        let container = parts.swatches, dropped = [], first = new Map(), index = recent.indexOf(hex), kept = recent.filter((c) => c !== hex).slice(0, MAX_RECENT - 1);
+        if (container) {
+            for (let element of container.querySelectorAll('.color-picker-swatch')) {
+                let key = element.dataset.hex ?? '', rect = element.getBoundingClientRect();
+                first.set(key, rect);
+                if (key !== hex && !kept.includes(key)) {
+                    dropped.push({ node: element.cloneNode(true), rect });
+                }
+            }
+        }
+        if (index !== -1) {
+            recent.splice(index, 1);
+        }
+        recent.unshift(hex);
+        if (recent.$length > MAX_RECENT) {
+            recent.splice(MAX_RECENT);
+        }
+        if (container) {
+            requestAnimationFrame(() => flip(container, first, dropped));
+        }
+    }
+    function css() {
+        let [r, g, b] = rgb(read());
+        return `--alpha: ${color.a}; --hue: ${color.h}; --rgb: ${r} ${g} ${b};`;
+    }
+    function flip(container, first, dropped) {
+        let box = container.getBoundingClientRect(), still = reduced();
+        for (let element of container.querySelectorAll('.color-picker-swatch')) {
+            let previous = first.get(element.dataset.hex ?? '');
+            if (!previous) {
+                element.animate(still
+                    ? [{ opacity: 0 }, { opacity: 1 }]
+                    : [{ filter: 'blur(4px)', opacity: 0, scale: '0.6' }, { filter: 'blur(0px)', opacity: 1, scale: '1' }], SWATCH);
+                continue;
+            }
+            let x = previous.left - element.getBoundingClientRect().left;
+            if (x !== 0 && !still) {
+                element.animate([{ translate: `${x}px 0` }, { translate: '0 0' }], SWATCH);
+            }
+        }
+        for (let { node, rect } of dropped) {
+            node.classList.add('--leaving');
+            node.removeAttribute('aria-pressed');
+            node.setAttribute('aria-hidden', 'true');
+            node.style.left = `${rect.left - box.left}px`;
+            node.style.top = `${rect.top - box.top}px`;
+            container.append(node);
+            node.animate(still
+                ? [{ opacity: 1 }, { opacity: 0 }]
+                : [{ filter: 'blur(0px)', opacity: 1, scale: '1' }, { filter: 'blur(4px)', opacity: 0, scale: '0.6' }], SWATCH_EXIT).onfinish = () => node.remove();
+        }
+    }
+    function read() {
+        return { a: color.a, h: color.h, s: color.s, v: color.v };
+    }
+    function slide(channel, e) {
+        let element = e.currentTarget, max = Number(element.max), delta = keystep(e, 1);
+        pointer[channel] = false;
+        if (delta === null) {
+            return;
+        }
+        dirty[channel] = true;
+        if (!e.shiftKey || !e.key.startsWith('Arrow')) {
+            return;
+        }
+        e.preventDefault();
+        let next = Math.min(Math.max(element.valueAsNumber + delta, 0), max);
+        element.value = String(next);
+        (channel === 'hue' ? hue : alpha).value = next;
+    }
+    function sync() {
+        let { alpha: a, hex, hue: h } = parts;
+        alpha.value = Math.round(color.a * 100);
+        hue.value = Math.round(color.h);
+        if (a && a.valueAsNumber !== alpha.value) {
+            a.value = String(alpha.value);
+        }
+        if (h && h.valueAsNumber !== hue.value) {
+            h.value = String(hue.value);
+        }
+        if (hex && document.activeElement !== hex) {
+            hex.value = toHex(read()).slice(1);
+        }
+    }
+    function update(patch) {
+        if (patch.a !== undefined) {
+            color.a = patch.a;
+        }
+        if (patch.h !== undefined) {
+            color.h = patch.h;
+        }
+        if (patch.s !== undefined) {
+            color.s = patch.s;
+        }
+        if (patch.v !== undefined) {
+            color.v = patch.v;
+        }
+        let hex = toHex(read());
+        if (picker.active !== hex) {
+            picker.active = '';
+        }
+        state.value = hex;
+        sync();
+    }
+    let disposers = [
+        effect(() => {
+            let next = alpha.value;
+            untrack(() => {
+                if (Math.round(color.a * 100) !== next) {
+                    update({ a: next / 100 });
+                }
+            });
+        }),
+        effect(() => {
+            let next = hue.value;
+            untrack(() => {
+                if (Math.round(color.h) !== next) {
+                    update({ h: next });
+                }
+            });
+        }),
+        effect(() => {
+            let next = state.value;
+            untrack(() => {
+                let parsed = next && toHex(read()) !== next.toUpperCase() ? fromHex(next, read()) : null;
+                if (parsed) {
+                    update(parsed);
+                }
+            });
+        })
+    ];
+    onCleanup(() => {
+        for (let i = 0, n = disposers.length; i < n; i++) {
+            disposers[i]();
+        }
+    });
+    return (() => {
+        let root_0zt12vj5 = template_0zt12vj6(), element_0zt12vj7 = root_0zt12vj5.firstChild, element_0zt12vj8 = element_0zt12vj7.firstElementChild, element_0zt12vj9 = element_0zt12vj8.firstElementChild, element_0zt12vja = element_0zt12vj8.nextElementSibling.firstElementChild.firstChild, element_0zt12vjb = element_0zt12vj8.nextElementSibling.firstElementChild, element_0zt12vjc = element_0zt12vj8.nextElementSibling.nextElementSibling.firstElementChild, element_0zt12vjd = element_0zt12vjc.nextElementSibling, element_0zt12vje = element_0zt12vjd.nextElementSibling, element_0zt12vjf = element_0zt12vj8.nextElementSibling.nextElementSibling.nextElementSibling.firstElementChild, element_0zt12vjg = element_0zt12vjf.nextElementSibling;
+        template_u1.setProperties(element_0zt12vj7, this?.attributes);
+        template_u1.setProperties(element_0zt12vj7, attributes);
+        template_u1.setList(element_0zt12vj7, 'style', css);
+        template_u1.setProperty(element_0zt12vj8, 'aria-valuenow', () => Math.round(color.s * 100));
+        template_u1.setProperty(element_0zt12vj8, 'aria-valuetext', () => `Saturation ${Math.round(color.s * 100)}%, brightness ${Math.round(color.v * 100)}%`);
+        template_u1.on(element_0zt12vj8, 'blur', () => {
+            if (dirty.pad) {
+                commit();
+            }
+            dirty.pad = false;
+        });
+        template_u1.delegate(element_0zt12vj8, 'keydown', (e) => {
+            let delta = keystep(e, 0.01);
+            if (delta === null) {
+                return;
+            }
+            e.preventDefault();
+            dirty.pad = true;
+            if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+                update({ s: clamp(color.s + delta) });
+            }
+            else {
+                update({ v: clamp(color.v + delta) });
+            }
+        });
+        template_u1.delegate(element_0zt12vj8, 'pointercancel', (e) => {
+            if (e.pointerId === pointer.pad) {
+                pointer.pad = -1;
+                commit();
+            }
+        });
+        template_u1.delegate(element_0zt12vj8, 'pointerdown', function (e) {
+            if (pointer.pad !== -1 || (e.pointerType === 'mouse' && e.button !== 0)) {
+                return;
+            }
+            pointer.pad = e.pointerId;
+            this.setPointerCapture(e.pointerId);
+            let rect = this.getBoundingClientRect();
+            update({
+                s: clamp((e.clientX - rect.left) / rect.width),
+                v: 1 - clamp((e.clientY - rect.top) / rect.height)
+            });
+        });
+        template_u1.delegate(element_0zt12vj8, 'pointermove', function (e) {
+            if (e.pointerId !== pointer.pad) {
+                return;
+            }
+            let rect = this.getBoundingClientRect();
+            update({
+                s: clamp((e.clientX - rect.left) / rect.width),
+                v: 1 - clamp((e.clientY - rect.top) / rect.height)
+            });
+        });
+        template_u1.delegate(element_0zt12vj8, 'pointerup', (e) => {
+            if (e.pointerId === pointer.pad) {
+                pointer.pad = -1;
+                commit();
+            }
+        });
+        template_u1.setList(element_0zt12vj9, 'style', () => `left: ${color.s * 100}%; top: ${(1 - color.v) * 100}%;`);
+        template_u1.slot(element_0zt12vja, range({
+            'aria-label': 'Hue',
+            'aria-valuetext': () => `${hue.value} degrees`,
+            class: 'color-picker-channel color-picker-channel--hue',
+            max: 360,
+            min: 0,
+            onblur: () => {
+                if (dirty.hue && !pointer.hue) {
+                    commit();
+                }
+                dirty.hue = false;
+            },
+            onchange: () => {
+                if (pointer.hue) {
+                    commit();
+                }
+            },
+            onconnect: (element) => {
+                parts.hue = element;
+            },
+            onkeydown: (e) => slide('hue', e),
+            onpointerdown: () => {
+                pointer.hue = true;
+            },
+            state: hue,
+            step: 1
+        }));
+        template_u1.slot(element_0zt12vjb, range({
+            'aria-label': 'Opacity',
+            'aria-valuetext': () => `${alpha.value}%`,
+            class: 'color-picker-channel color-picker-channel--alpha',
+            max: 100,
+            min: 0,
+            onblur: () => {
+                if (dirty.alpha && !pointer.alpha) {
+                    commit();
+                }
+                dirty.alpha = false;
+            },
+            onchange: () => {
+                if (pointer.alpha) {
+                    commit();
+                }
+            },
+            onconnect: (element) => {
+                parts.alpha = element;
+            },
+            onkeydown: (e) => slide('alpha', e),
+            onpointerdown: () => {
+                pointer.alpha = true;
+            },
+            state: alpha,
+            step: 1
+        }), 2);
+        template_u1.setList(element_0zt12vjc, 'class', () => picker.invalid && '--invalid');
+        template_u1.slot(element_0zt12vjc, input({
+            'aria-invalid': () => picker.invalid ? 'true' : 'false',
+            'aria-label': 'Hex color',
+            autocapitalize: 'characters',
+            autocomplete: 'off',
+            class: 'color-picker-hex-input',
+            maxlength: 9,
+            onblur: () => apply(true),
+            onconnect: (element) => {
+                parts.hex = element;
+                element.value = toHex(read()).slice(1);
+            },
+            onfocus: function () {
+                this.select();
+            },
+            oninput: () => {
+                picker.invalid = false;
+            },
+            onkeydown: function (e) {
+                if (e.key === 'Enter') {
+                    apply(false);
+                }
+                else if (e.key === 'Escape') {
+                    this.value = toHex(read()).slice(1);
+                    picker.invalid = false;
+                }
+            },
+            spellcheck: false
+        }), 2);
+        new template_u1.EffectSlot(element_0zt12vjd, () => `${Math.round(color.a * 100)}%`, 1);
+        new template_u1.EffectSlot(element_0zt12vje, () => picker.invalid ? 'Not a valid hex color' : '', 1);
+        template_u1.setProperty(element_0zt12vjf, 'id', template_u1.interpolate([(id), "-recent"]));
+        template_u1.setProperty(element_0zt12vjg, 'aria-labelledby', template_u1.interpolate([(id), "-recent"]));
+        template_u1.onrender(element_0zt12vjg, (element) => {
+            parts.swatches = element;
+        });
+        element_0zt12vjg.appendChild(new template_u1.ArraySlot(recent, (hex) => {
+            let root_0zt12vjh = template_0zt12vji(), element_0zt12vjj = root_0zt12vjh.firstChild;
+            template_u1.setProperty(element_0zt12vjj, 'aria-label', template_u1.interpolate(["Use ", (hex)]));
+            template_u1.setProperty(element_0zt12vjj, 'data-hex', hex);
+            template_u1.setList(element_0zt12vjj, 'style', template_u1.interpolate(["--swatch: ", (hex)]));
+            template_u1.setProperties(element_0zt12vjj, this?.attributes?.[COLOR_PICKER_SWATCH]);
+            template_u1.setProperties(element_0zt12vjj, attributes[COLOR_PICKER_SWATCH]);
+            template_u1.setProperty(element_0zt12vjj, 'aria-pressed', () => picker.active === hex ? 'true' : 'false');
+            template_u1.setList(element_0zt12vjj, 'class', () => picker.active === hex && '--active');
+            template_u1.delegate(element_0zt12vjj, 'click', () => {
+                let next = fromHex(hex, read());
+                if (!next) {
+                    return;
+                }
+                update(next);
+                picker.active = hex;
+                picker.invalid = false;
+            });
+            return root_0zt12vjh;
+        }, true).fragment);
+        return root_0zt12vj5;
+    })();
+}
+export default Object.assign(template, { swatch: COLOR_PICKER_SWATCH });

package/build/components/color-picker/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.color-picker{--background:var(--color-white-300);--border-color:var(--color-border-300);--border-radius:20px;--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);--checker:repeating-conic-gradient(var(--color-border-300) 0 25%, var(--color-white-300) 0 50%) 0 0 / 8px 8px;--color:var(--color-text-500);--color-invalid:var(--color-red-400);--color-muted:var(--color-text-300);--control-border-radius:var(--border-radius-400);--control-height:36px;--focus-width:var(--border-width-500);--font-family-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--font-size:calc(var(--font-size-400) * .875);--hairline:inset 0 0 0 1px color-mix(in oklch, var(--color) 10%, transparent);--pad-height:176px;--padding:12px;--preview-size:44px;--spacing:12px;--swatch-size:28px;--thumb-border:2px solid var(--color-white-300);--thumb-shadow:0 0 0 1px oklch(from var(--color-black-500) l c h / .12), 0 1px 3px oklch(from var(--color-black-500) l c h / .3);--thumb-size:20px;--track-height:12px;--transition-duration:.15s;--transition-timing-function:ease-out;--width:min(320px, 100%);background:var(--background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);color:var(--color);font-size:var(--font-size);gap:var(--spacing);padding:var(--padding);width:var(--width);flex-direction:column;display:flex}.color-picker-alpha{border:1px solid var(--border-color);border-radius:var(--control-border-radius);color:var(--color-muted);font-family:var(--font-family-mono);font-variant-numeric:tabular-nums;height:var(--control-height);-webkit-user-select:none;user-select:none;flex:0 0 56px;justify-content:center;align-items:center;display:flex}.color-picker .color-picker-channel{appearance:none;cursor:pointer;touch-action:none;background:0 0;border:0;border-radius:999px;outline:none;width:100%;height:28px;margin:0;display:block}.color-picker .color-picker-channel:focus-visible{outline:var(--focus-width) solid var(--color);outline-offset:1px}.color-picker .color-picker-channel::-webkit-slider-runnable-track{background:var(--track);box-shadow:var(--hairline);height:var(--track-height);border-radius:999px}.color-picker .color-picker-channel::-moz-range-track{background:var(--track);box-shadow:var(--hairline);height:var(--track-height);border-radius:999px}.color-picker .color-picker-channel::-webkit-slider-thumb{background:var(--thumb);border:var(--thumb-border);box-shadow:var(--thumb-shadow);box-sizing:border-box;cursor:pointer;height:var(--thumb-size);transition:scale var(--transition-duration) var(--transition-timing-function);width:var(--thumb-size);appearance:none;margin-top:calc((var(--track-height) - var(--thumb-size)) / 2);border-radius:50%}.color-picker .color-picker-channel::-moz-range-thumb{background:var(--thumb);border:var(--thumb-border);box-shadow:var(--thumb-shadow);box-sizing:border-box;cursor:pointer;height:var(--thumb-size);transition:scale var(--transition-duration) var(--transition-timing-function);width:var(--thumb-size);border-radius:50%}.color-picker .color-picker-channel:active::-webkit-slider-thumb{scale:1.1}.color-picker .color-picker-channel:active::-moz-range-thumb{scale:1.1}.color-picker .color-picker-channel--alpha{--thumb:linear-gradient(rgb(var(--rgb) / var(--alpha)), rgb(var(--rgb) / var(--alpha))), var(--checker);--track:linear-gradient(to right, rgb(var(--rgb) / 0), rgb(var(--rgb))), var(--checker)}.color-picker .color-picker-channel--hue{--thumb:hsl(var(--hue) 100% 50%);--track:linear-gradient(to right, red, #ff0, #0f0, #0ff, #00f, #f0f, red)}.color-picker-channels{align-items:center;gap:var(--spacing);display:flex}.color-picker-fields{gap:var(--size-100);display:flex}.color-picker-hash{color:var(--color-muted);transition:color var(--transition-duration) var(--transition-timing-function);-webkit-user-select:none;user-select:none}.color-picker-hex{background:var(--background);border:1px solid var(--border-color);border-radius:var(--control-border-radius);cursor:text;font-family:var(--font-family-mono);height:var(--control-height);min-width:0;transition:border-color var(--transition-duration) var(--transition-timing-function);flex:1;align-items:center;padding:0 10px;display:flex}.color-picker-hex:focus-within{outline:var(--focus-width) solid var(--color);outline-offset:-1px}.color-picker-hex.--invalid{border-color:var(--color-invalid)}.color-picker-hex.--invalid:focus-within{outline-color:var(--color-invalid)}.color-picker-hex.--invalid .color-picker-hash{color:var(--color-invalid)}.color-picker-hex .input{--background-default:transparent;--color-default:var(--color-text-500);--font-size:inherit;--padding-horizontal:0px;--padding-vertical:0px;--size:0px;text-transform:uppercase;outline:none;flex:1;min-width:0;padding-left:2px;font-family:inherit}.color-picker-pad{background-color:hsl(var(--hue), 100%, 50%);border-radius:var(--control-border-radius);cursor:crosshair;height:var(--pad-height);touch-action:none;-webkit-user-select:none;user-select:none;background-image:linear-gradient(#0000,#000),linear-gradient(90deg,#fff,#0000);outline:none;position:relative}.color-picker-pad:after{border-radius:inherit;box-shadow:var(--hairline);content:"";pointer-events:none;position:absolute;inset:0}.color-picker-pad:focus-visible{outline:var(--focus-width) solid var(--color);outline-offset:2px}.color-picker-pad:active .color-picker-thumb{scale:1.1}.color-picker-preview{background:linear-gradient(rgb(var(--rgb)/var(--alpha)), rgb(var(--rgb)/var(--alpha))), var(--checker);border-radius:var(--control-border-radius);box-shadow:var(--hairline);height:var(--preview-size);width:var(--preview-size);flex:none}.color-picker-recent{border-top:1px solid var(--border-color);padding-top:var(--spacing)}.color-picker-recent-label{color:var(--color-muted);font-size:var(--font-size-300);margin:0 0 var(--size-100);-webkit-user-select:none;user-select:none}.color-picker-sliders{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.color-picker-status{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.color-picker-swatch{background:linear-gradient(var(--swatch), var(--swatch)), var(--checker);box-shadow:var(--hairline), 0 0 0 0 var(--background), 0 0 0 0 var(--color);cursor:pointer;height:var(--swatch-size);touch-action:manipulation;transition:box-shadow var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function);-webkit-user-select:none;user-select:none;width:var(--swatch-size);border:0;border-radius:50%;outline:none;flex:none;margin:0;padding:0;position:relative}.color-picker-swatch:after{content:"";border-radius:50%;position:absolute;inset:-4px}.color-picker-swatch:active{scale:.96}.color-picker-swatch:focus-visible{outline:var(--focus-width) solid var(--color);outline-offset:4px}.color-picker-swatch.--active{box-shadow:var(--hairline), 0 0 0 2px var(--background), 0 0 0 4px var(--color)}.color-picker-swatch.--leaving{pointer-events:none;position:absolute}.color-picker-swatches{gap:var(--size-100);height:var(--swatch-size);display:flex;position:relative}.color-picker-thumb{background:rgb(var(--rgb));border:var(--thumb-border);box-shadow:var(--thumb-shadow);box-sizing:border-box;height:var(--thumb-size);pointer-events:none;transition:scale var(--transition-duration) var(--transition-timing-function);width:var(--thumb-size);z-index:1;border-radius:50%;position:absolute;translate:-50% -50%}@media (prefers-reduced-motion:reduce){.color-picker .color-picker-channel::-webkit-slider-thumb{transition:none}.color-picker .color-picker-channel::-moz-range-thumb{transition:none}.color-picker .color-picker-channel:active::-webkit-slider-thumb{scale:1}.color-picker .color-picker-channel:active::-moz-range-thumb{scale:1}.color-picker-pad:active .color-picker-thumb,.color-picker-swatch:active{scale:1}.color-picker-swatch{transition:box-shadow var(--transition-duration) var(--transition-timing-function)}.color-picker-thumb{transition:none}}}
+/*$vite$:1*/

package/build/components/command/constants.d.ts

@@ -0,0 +1,3 @@
+declare const COMMAND_INPUT: unique symbol;
+declare const COMMAND_ITEM: unique symbol;
+export { COMMAND_INPUT, COMMAND_ITEM };

package/build/components/command/constants.js

@@ -0,0 +1,3 @@
+const COMMAND_INPUT = Symbol.for('@esportsplus/ui/command.input');
+const COMMAND_ITEM = Symbol.for('@esportsplus/ui/command.item');
+export { COMMAND_INPUT, COMMAND_ITEM };

package/build/components/command/index.d.ts

@@ -0,0 +1,30 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import input from '../input/index.js';
+import modal from '../modal/index.js';
+import { COMMAND_INPUT, COMMAND_ITEM } from './constants.js';
+import './scss/index.scss';
+type A = Parameters<typeof modal>[0] & {
+    [COMMAND_INPUT]?: Parameters<typeof input>[0];
+    [COMMAND_ITEM]?: Attributes;
+    groups: Group[];
+    placeholder?: string;
+    state?: {
+        active: boolean;
+        query: string;
+    };
+};
+type Group = {
+    items: Item[];
+    label: string;
+};
+type Item = Attributes & {
+    icon?: Renderable<unknown>;
+    label: string;
+};
+declare const _default: template_u1.Factory<A, Renderable<any>, Renderable<any>, {
+    readonly input: typeof COMMAND_INPUT;
+    readonly item: typeof COMMAND_ITEM;
+}>;
+export default _default;
+export type { Group, Item };