@esportsplus/ui 0.55.0 → 0.56.3

package/src/components/word-rotator/index.ts

@@ -0,0 +1,296 @@
+import { html, type Attributes } from '@esportsplus/template';
+import { effect, reactive } from '@esportsplus/reactivity';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    interval?: number;
+    state?: State;
+    words: string[];
+};
+
+type Letter = {
+    char: string;
+    node: HTMLSpanElement;
+};
+
+type State = {
+    index: number;
+    // Stops rotating and settles back on the first word.
+    paused: boolean;
+};
+
+
+const EASE_IN_OUT = 'cubic-bezier(0.77, 0, 0.175, 1)';
+
+const EASE_OUT = 'cubic-bezier(0.23, 1, 0.32, 1)';
+
+const ENTER_MS = 320;
+
+// Leaving letters are gone before the glide lands, so the eye follows the letters that stay rather than the ones
+// that go.
+const EXIT_MS = 200;
+
+// Shared letters can travel most of a word across, so they get longer than a typical UI tween; any shorter and the
+// glide reads as a jump.
+const GLIDE_MS = 440;
+
+// Long enough to read the whole sentence once per word.
+const INTERVAL = 2600;
+
+const STAGGER_MS = 28;
+
+
+function letter(char: string) {
+    let node = document.createElement('span');
+
+    node.className = 'word-rotator-letter';
+    node.textContent = char;
+
+    return { char, node };
+}
+
+// Longest common subsequence, so the most letters possible survive the swap while keeping their order ("fast" to
+// "honest" keeps both s and t). Maps next index to previous index.
+function match(prev: string[], next: string[]) {
+    let dp = Array.from({ length: prev.length + 1 }, () => new Array<number>(next.length + 1).fill(0)),
+        i = 0,
+        j = 0,
+        pairs = new Map<number, number>();
+
+    for (let a = prev.length - 1; a >= 0; a--) {
+        for (let b = next.length - 1; b >= 0; b--) {
+            dp[a][b] = prev[a] === next[b] ? dp[a + 1][b + 1] + 1 : Math.max(dp[a + 1][b], dp[a][b + 1]);
+        }
+    }
+
+    while (i < prev.length && j < next.length) {
+        if (prev[i] === next[j]) {
+            pairs.set(j++, i++);
+        }
+        else if (dp[i + 1][j] >= dp[i][j + 1]) {
+            i++;
+        }
+        else {
+            j++;
+        }
+    }
+
+    return pairs;
+}
+
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+
+export default ({ interval = INTERVAL, state = reactive({ index: 0, paused: false }), words, ...attributes }: A) => {
+    let box: HTMLElement | undefined,
+        current = words[state.index] === undefined ? 0 : state.index,
+        hovered = false,
+        letters: Letter[] = [],
+        stop: VoidFunction | undefined,
+        timer: ReturnType<typeof setTimeout> | undefined;
+
+    function schedule() {
+        clearTimeout(timer);
+
+        if (state.paused) {
+            // One last swap home after a short beat, then nothing runs.
+            if (current !== 0) {
+                timer = setTimeout(() => state.index = 0, 250);
+            }
+
+            return;
+        }
+
+        timer = setTimeout(() => {
+            if (hovered || document.hidden) {
+                schedule();
+                return;
+            }
+
+            state.index = (current + 1) % words.length;
+        }, interval);
+    }
+
+    function swap(index: number) {
+        if (!box) {
+            return;
+        }
+
+        let from = box.getBoundingClientRect(),
+            lefts = new Map<Letter, number>(),
+            motion = !reduced(),
+            // Rects are post-transform; a scaled ancestor would otherwise have every offset applied twice.
+            s = from.width / box.offsetWidth || 1;
+
+        // Visual position, mid-animation included, so a swap that lands during a glide continues from where the
+        // letter really is.
+        for (let i = 0, n = letters.length; i < n; i++) {
+            lefts.set(letters[i], (letters[i].node.getBoundingClientRect().left - from.left) / s);
+        }
+
+        let chars = [...words[index]],
+            entering = new Set<Letter>(),
+            kept = new Set<Letter>(),
+            // Reduced motion is a plain crossfade: nothing travels.
+            pairs = motion ? match(letters.map((l) => l.char), chars) : new Map<number, number>(),
+            next = chars.map((char, j) => {
+                let p = pairs.get(j);
+
+                if (p !== undefined) {
+                    kept.add(letters[p]);
+                    return letters[p];
+                }
+
+                let l = letter(char);
+
+                entering.add(l);
+
+                return l;
+            });
+
+        for (let i = 0, n = letters.length; i < n; i++) {
+            let l = letters[i];
+
+            if (kept.has(l)) {
+                continue;
+            }
+
+            // Leaving letters stay where they stood, then float up and out.
+            l.node.getAnimations().forEach((a) => a.cancel());
+            l.node.classList.add('--exiting');
+            l.node.style.left = `${lefts.get(l) ?? 0}px`;
+            l.node.animate(
+                motion
+                    ? [
+                        { filter: 'blur(0px)', opacity: 1, transform: 'translateY(0)' },
+                        { filter: 'blur(4px)', opacity: 0, transform: 'translateY(-0.35em)' }
+                    ]
+                    : [{ opacity: 1 }, { opacity: 0 }],
+                { duration: EXIT_MS, easing: EASE_OUT, fill: 'forwards' }
+            ).onfinish = () => l.node.remove();
+        }
+
+        for (let i = 0, n = next.length; i < n; i++) {
+            box.appendChild(next[i].node);
+        }
+
+        for (let node of box.querySelectorAll('.word-rotator-letter.--exiting')) {
+            box.appendChild(node);
+        }
+
+        letters = next;
+        current = index;
+
+        // Settle everything first so the measurements below are the final layout, then animate from the old
+        // picture to it.
+        box.getAnimations().forEach((a) => a.cancel());
+
+        for (let i = 0, n = letters.length; i < n; i++) {
+            letters[i].node.getAnimations().forEach((a) => a.cancel());
+        }
+
+        let to = box.getBoundingClientRect(),
+            order = 0,
+            scale = to.width / box.offsetWidth || 1,
+            width = to.width / scale;
+
+        // Width, not scale: the sentence needs real layout space so the words around it slide instead of snapping.
+        if (motion && Math.abs(width - from.width / s) > 0.5) {
+            box.animate([{ width: `${from.width / s}px` }, { width: `${width}px` }], {
+                duration: GLIDE_MS,
+                easing: EASE_IN_OUT
+            });
+        }
+
+        for (let i = 0, n = letters.length; i < n; i++) {
+            let l = letters[i];
+
+            if (entering.has(l)) {
+                l.node.animate(
+                    motion
+                        ? [
+                            { filter: 'blur(4px)', opacity: 0, transform: 'translateY(0.4em)' },
+                            { filter: 'blur(0px)', opacity: 1, transform: 'translateY(0)' }
+                        ]
+                        : [{ opacity: 0 }, { opacity: 1 }],
+                    {
+                        // A beat for the leaving letters to clear the space, then a small left-to-right cascade.
+                        delay: motion ? 90 + order++ * STAGGER_MS : 0,
+                        duration: ENTER_MS,
+                        easing: EASE_OUT,
+                        fill: 'backwards'
+                    }
+                );
+                continue;
+            }
+
+            let now = (l.node.getBoundingClientRect().left - to.left) / scale,
+                was = lefts.get(l);
+
+            if (was === undefined || Math.abs(was - now) < 0.5) {
+                continue;
+            }
+
+            l.node.animate(
+                [{ transform: `translateX(${was - now}px)` }, { transform: 'translateX(0)' }],
+                { duration: GLIDE_MS, easing: EASE_IN_OUT }
+            );
+        }
+    }
+
+    return html`
+        <span
+            class='word-rotator'
+            ${attributes}
+            ${{
+                onconnect: (element: HTMLElement) => {
+                    box = element.querySelector<HTMLElement>('.word-rotator-box') ?? undefined;
+
+                    if (!box) {
+                        return;
+                    }
+
+                    letters = Array.from(box.querySelectorAll<HTMLSpanElement>('.word-rotator-letter')).map((node) => ({
+                        char: node.textContent ?? '',
+                        node
+                    }));
+
+                    stop = effect(() => {
+                        let index = state.index;
+
+                        // Read so pausing and resuming reschedule.
+                        state.paused;
+
+                        if (index !== current && words[index] !== undefined) {
+                            swap(index);
+                        }
+
+                        schedule();
+                    });
+                },
+                ondisconnect: () => {
+                    clearTimeout(timer);
+                    stop?.();
+                },
+                onpointerenter: (e: PointerEvent) => {
+                    if (e.pointerType !== 'touch') {
+                        hovered = true;
+                    }
+                },
+                onpointerleave: () => {
+                    hovered = false;
+                }
+            }}
+        >
+            <span class='word-rotator-sr'>${words.join(', ')}</span>
+            <span aria-hidden='true' class='word-rotator-box'>
+                ${[...words[current]].map((char) => html`<span class='word-rotator-letter'>${char}</span>`)}
+            </span>
+        </span>
+    `;
+};
+
+export type { State as WordRotatorState };

package/src/components/word-rotator/scss/index.scss

@@ -0,0 +1,33 @@
+@use 'variables';
+
+.word-rotator {
+    color: var(--color);
+    display: inline-block;
+    position: relative;
+
+    &-box {
+        display: inline-block;
+        position: relative;
+        text-align: left;
+        white-space: pre;
+    }
+
+    &-letter {
+        display: inline-block;
+
+        &.--exiting {
+            pointer-events: none;
+            position: absolute;
+            top: 0;
+        }
+    }
+
+    &-sr {
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+}

package/src/components/word-rotator/scss/variables.scss

@@ -0,0 +1,7 @@
+.word-rotator {
+    --color: inherit;
+
+    &--accent {
+        --color: var(--color-blue-400);
+    }
+}

package/src/css-utilities/scrollbar/scss/index.scss

@@ -23,7 +23,6 @@
 
     @supports selector(::-webkit-scrollbar) {
         scrollbar-color: auto;
-        scrollbar-width: auto;
 
         &::-webkit-scrollbar {
             width: var(--scrollbar-width);
@@ -92,4 +91,10 @@
             scroll-snap-stop: normal;
         }
     }
+
+    // Native thin bar everywhere; restores scrollbar-color after the webkit reset above.
+    &-thin {
+        scrollbar-color: var(--scrollbar-color) transparent;
+        scrollbar-width: thin;
+    }
 }

package/src/lib/scss/position.scss

@@ -11,14 +11,14 @@
     @else if $value == center {
         bottom: 50%;
         right: 50%;
-        transform: translate(50%, 50%);
+        translate: 50% 50%;
     }
     @else if $value == full {
         inset: 0 0 0 0;
     }
     @else if $value == horizontal {
         right: 50%;
-        transform: translateX(50%);
+        translate: 50%;
     }
     @else if $value == left {
         inset: 0 auto 0 0;
@@ -31,7 +31,7 @@
     }
     @else if $value == vertical {
         bottom: 50%;
-        transform: translateY(50%);
+        translate: 0 50%;
     }
     @else if $value and meta.type-of($value) == list {
         $length: list.length($value);

package/src/themes/dark/select.ts

@@ -1,7 +1,7 @@
 import select from '~/components/select';
 
 
-const themed: typeof select = Object.assign(select.bind({
+const themed: typeof select = select.bind({
     attributes: {
         class: '--background-black --border-black --color-white',
         [select.option]: {
@@ -21,7 +21,7 @@ const themed: typeof select = Object.assign(select.bind({
             `
         }
     }
-}), { arrow: select.arrow, option: select.option, tooltipContent: select.tooltipContent } as const);
+});
 
 
 export default themed;

package/storage/svg/settings/add-line.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"/></svg>

package/storage/svg/settings/arrow-down-s-line.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z"/></svg>

package/storage/svg/settings/arrow-left-s-line.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"/></svg>

package/storage/svg/settings/arrow-right-s-line.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"/></svg>

package/storage/svg/settings/bank-card-line.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M3.00488 2.99979H21.0049C21.5572 2.99979 22.0049 3.4475 22.0049 3.99979V19.9998C22.0049 20.5521 21.5572 20.9998 21.0049 20.9998H3.00488C2.4526 20.9998 2.00488 20.5521 2.00488 19.9998V3.99979C2.00488 3.4475 2.4526 2.99979 3.00488 2.99979ZM20.0049 10.9998H4.00488V18.9998H20.0049V10.9998ZM20.0049 8.99979V4.99979H4.00488V8.99979H20.0049ZM14.0049 14.9998H18.0049V16.9998H14.0049V14.9998Z"/></svg>

package/storage/svg/settings/book-open-line.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M13 21V23H11V21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H9C10.1947 3 11.2671 3.52375 12 4.35418C12.7329 3.52375 13.8053 3 15 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H13ZM20 19V5H15C13.8954 5 13 5.89543 13 7V19H20ZM11 19V7C11 5.89543 10.1046 5 9 5H4V19H11Z"/></svg>

package/storage/svg/settings/calendar-line.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M9 1V3H15V1H17V3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H7V1H9ZM20 11H4V19H20V11ZM7 5H4V9H20V5H17V7H15V5H9V7H7V5Z"/></svg>

package/storage/svg/settings/code-block.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M3.41436 5.99995L5.70726 3.70706L4.29304 2.29285L0.585938 5.99995L4.29304 9.70706L5.70726 8.29285L3.41436 5.99995ZM9.58594 5.99995L7.29304 3.70706L8.70726 2.29285L12.4144 5.99995L8.70726 9.70706L7.29304 8.29285L9.58594 5.99995ZM14.0002 2.99995H21.0002C21.5524 2.99995 22.0002 3.44767 22.0002 3.99995V20C22.0002 20.5522 21.5524 21 21.0002 21H3.00015C2.44787 21 2.00015 20.5522 2.00015 20V12H4.00015V19H20.0002V4.99995H14.0002V2.99995Z"/></svg>

package/storage/svg/settings/database-2-line.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M5 12.5C5 12.8134 5.46101 13.3584 6.53047 13.8931C7.91405 14.5849 9.87677 15 12 15C14.1232 15 16.0859 14.5849 17.4695 13.8931C18.539 13.3584 19 12.8134 19 12.5V10.3287C17.35 11.3482 14.8273 12 12 12C9.17273 12 6.64996 11.3482 5 10.3287V12.5ZM19 15.3287C17.35 16.3482 14.8273 17 12 17C9.17273 17 6.64996 16.3482 5 15.3287V17.5C5 17.8134 5.46101 18.3584 6.53047 18.8931C7.91405 19.5849 9.87677 20 12 20C14.1232 20 16.0859 19.5849 17.4695 18.8931C18.539 18.3584 19 17.8134 19 17.5V15.3287ZM3 17.5V7.5C3 5.01472 7.02944 3 12 3C16.9706 3 21 5.01472 21 7.5V17.5C21 19.9853 16.9706 22 12 22C7.02944 22 3 19.9853 3 17.5ZM12 10C14.1232 10 16.0859 9.58492 17.4695 8.89313C18.539 8.3584 19 7.81342 19 7.5C19 7.18658 18.539 6.6416 17.4695 6.10687C16.0859 5.41508 14.1232 5 12 5C9.87677 5 7.91405 5.41508 6.53047 6.10687C5.46101 6.6416 5 7.18658 5 7.5C5 7.81342 5.46101 8.3584 6.53047 8.89313C7.91405 9.58492 9.87677 10 12 10Z"/></svg>

package/storage/svg/settings/delete-bin-6-line.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M7 4V2H17V4H22V6H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V6H2V4H7ZM6 6V20H18V6H6ZM9 9H11V17H9V9ZM13 9H15V17H13V9Z"/></svg>

package/storage/svg/settings/download-2-line.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M13 10H18L12 16L6 10H11V3H13V10ZM4 19H20V12H22V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V12H4V19Z"/></svg>

package/storage/svg/settings/edit-line.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M6.41421 15.89L16.5563 5.74785L15.1421 4.33363L5 14.4758V15.89H6.41421ZM7.24264 17.89H3V13.6473L14.435 2.21231C14.8256 1.82179 15.4587 1.82179 15.8492 2.21231L18.6777 5.04074C19.0682 5.43126 19.0682 6.06443 18.6777 6.45495L7.24264 17.89ZM3 19.89H21V21.89H3V19.89Z"/></svg>

package/storage/svg/settings/expand-up-down-line.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M18.2072 9.0428 12.0001 2.83569 5.793 9.0428 7.20721 10.457 12.0001 5.66412 16.793 10.457 18.2072 9.0428ZM5.79285 14.9572 12 21.1643 18.2071 14.9572 16.7928 13.543 12 18.3359 7.20706 13.543 5.79285 14.9572Z"/></svg>

package/storage/svg/settings/external-link-line.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z"/></svg>

package/storage/svg/settings/file-copy-line.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M6.9998 6V3C6.9998 2.44772 7.44752 2 7.9998 2H19.9998C20.5521 2 20.9998 2.44772 20.9998 3V17C20.9998 17.5523 20.5521 18 19.9998 18H16.9998V20.9991C16.9998 21.5519 16.5499 22 15.993 22H4.00666C3.45059 22 3 21.5554 3 20.9991L3.0026 7.00087C3.0027 6.44811 3.45264 6 4.00942 6H6.9998ZM5.00242 8L5.00019 20H14.9998V8H5.00242ZM8.9998 6H16.9998V16H18.9998V4H8.9998V6Z"/></svg>

package/storage/svg/settings/file-excel-2-fill.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M2.85858 2.87732L15.4293 1.0815C15.7027 1.04245 15.9559 1.2324 15.995 1.50577C15.9983 1.52919 16 1.55282 16 1.57648V22.4235C16 22.6996 15.7761 22.9235 15.5 22.9235C15.4763 22.9235 15.4527 22.9218 15.4293 22.9184L2.85858 21.1226C2.36593 21.0522 2 20.6303 2 20.1327V3.86727C2 3.36962 2.36593 2.9477 2.85858 2.87732ZM17 2.99997H21C21.5523 2.99997 22 3.44769 22 3.99997V20C22 20.5523 21.5523 21 21 21H17V2.99997ZM10.2 12L13 7.99997H10.6L9 10.2857L7.39999 7.99997H5L7.8 12L5 16H7.39999L9 13.7143L10.6 16H13L10.2 12Z"/></svg>

package/storage/svg/settings/file-text-fill.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M21 9V20.9925C21 21.5511 20.5552 22 20.0066 22H3.9934C3.44495 22 3 21.556 3 21.0082V2.9918C3 2.45531 3.44694 2 3.99826 2H14V8C14 8.55228 14.4477 9 15 9H21ZM21 7H16V2.00318L21 7ZM8 7V9H11V7H8ZM8 11V13H16V11H8ZM8 15V17H16V15H8Z"/></svg>

package/storage/svg/settings/film-fill.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM4 5V7H6V5H4ZM18 5V7H20V5H18ZM4 9V11H6V9H4ZM18 9V11H20V9H18ZM4 13V15H6V13H4ZM18 13V15H20V13H18ZM4 17V19H6V17H4ZM18 17V19H20V17H18Z"/></svg>

package/storage/svg/settings/git-merge-line.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M7.10508 8.78991C7.45179 10.0635 8.61653 11 10 11H14C16.4703 11 18.5222 12.7915 18.9274 15.1461C20.1303 15.5367 21 16.6668 21 18C21 19.6569 19.6569 21 18 21C16.3431 21 15 19.6569 15 18C15 16.7334 15.7849 15.6501 16.8949 15.2101C16.5482 13.9365 15.3835 13 14 13H10C8.87439 13 7.83566 12.6281 7 12.0004V15.1707C8.16519 15.5825 9 16.6938 9 18C9 19.6569 7.65685 21 6 21C4.34315 21 3 19.6569 3 18C3 16.6938 3.83481 15.5825 5 15.1707V8.82929C3.83481 8.41746 3 7.30622 3 6C3 4.34315 4.34315 3 6 3C7.65685 3 9 4.34315 9 6C9 7.26661 8.21506 8.34988 7.10508 8.78991ZM6 7C6.55228 7 7 6.55228 7 6C7 5.44772 6.55228 5 6 5C5.44772 5 5 5.44772 5 6C5 6.55228 5.44772 7 6 7ZM6 19C6.55228 19 7 18.5523 7 18C7 17.4477 6.55228 17 6 17C5.44772 17 5 17.4477 5 18C5 18.5523 5.44772 19 6 19ZM18 19C18.5523 19 19 18.5523 19 18C19 17.4477 18.5523 17 18 17C17.4477 17 17 17.4477 17 18C17 18.5523 17.4477 19 18 19Z"/></svg>

package/storage/svg/settings/logout-circle-line.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M5 11H13V13H5V16L0 12L5 8V11ZM3.99927 18H6.70835C8.11862 19.2447 9.97111 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C9.97111 4 8.11862 4.75527 6.70835 6H3.99927C5.82368 3.57111 8.72836 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C8.72836 22 5.82368 20.4289 3.99927 18Z"/></svg>

package/storage/svg/settings/mail-line.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM20 7.23792L12.0718 14.338L4 7.21594V19H20V7.23792ZM4.51146 5L12.0619 11.662L19.501 5H4.51146Z"/></svg>

package/storage/svg/settings/more-2-fill.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 3C10.9 3 10 3.9 10 5C10 6.1 10.9 7 12 7C13.1 7 14 6.1 14 5C14 3.9 13.1 3 12 3ZM12 17C10.9 17 10 17.9 10 19C10 20.1 10.9 21 12 21C13.1 21 14 20.1 14 19C14 17.9 13.1 17 12 17ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z"/></svg>

package/storage/svg/settings/more-fill.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M5 10C3.9 10 3 10.9 3 12C3 13.1 3.9 14 5 14C6.1 14 7 13.1 7 12C7 10.9 6.1 10 5 10ZM19 10C17.9 10 17 10.9 17 12C17 13.1 17.9 14 19 14C20.1 14 21 13.1 21 12C21 10.9 20.1 10 19 10ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z"/></svg>

package/storage/svg/settings/organization-chart.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M15 3C15.5523 3 16 3.44772 16 4V8C16 8.55228 15.5523 9 15 9H13V11H17C17.5523 11 18 11.4477 18 12V15H20C20.5523 15 21 15.4477 21 16V20C21 20.5523 20.5523 21 20 21H14C13.4477 21 13 20.5523 13 20V16C13 15.4477 13.4477 15 14 15H16V13H8V15H10C10.5523 15 11 15.4477 11 16V20C11 20.5523 10.5523 21 10 21H4C3.44772 21 3 20.5523 3 20V16C3 15.4477 3.44772 15 4 15H6V12C6 11.4477 6.44772 11 7 11H11V9H9C8.44772 9 8 8.55228 8 8V4C8 3.44772 8.44772 3 9 3H15ZM9 17H5V19H9V17ZM19 17H15V19H19V17ZM14 5H10V7H14V5Z"/></svg>

package/storage/svg/settings/palette-line.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C17.5222 2 22 5.97778 22 10.8889C22 13.9556 19.5111 16.4444 16.4444 16.4444H14.4778C13.5556 16.4444 12.8111 17.1889 12.8111 18.1111C12.8111 18.5333 12.9778 18.9222 13.2333 19.2111C13.5 19.5111 13.6667 19.9 13.6667 20.3333C13.6667 21.2556 12.9 22 12 22C6.47778 22 2 17.5222 2 12C2 6.47778 6.47778 2 12 2ZM10.8111 18.1111C10.8111 16.0843 12.451 14.4444 14.4778 14.4444H16.4444C18.4065 14.4444 20 12.851 20 10.8889C20 7.1392 16.4677 4 12 4C7.58235 4 4 7.58235 4 12C4 16.19 7.2226 19.6285 11.324 19.9718C10.9948 19.4168 10.8111 18.7761 10.8111 18.1111ZM7.5 12C6.67157 12 6 11.3284 6 10.5C6 9.67157 6.67157 9 7.5 9C8.32843 9 9 9.67157 9 10.5C9 11.3284 8.32843 12 7.5 12ZM16.5 12C15.6716 12 15 11.3284 15 10.5C15 9.67157 15.6716 9 16.5 9C17.3284 9 18 9.67157 18 10.5C18 11.3284 17.3284 12 16.5 12ZM12 9C11.1716 9 10.5 8.32843 10.5 7.5C10.5 6.67157 11.1716 6 12 6C12.8284 6 13.5 6.67157 13.5 7.5C13.5 8.32843 12.8284 9 12 9Z"/></svg>

package/storage/svg/settings/plug-line.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M13 18V20H19V22H13C11.8954 22 11 21.1046 11 20V18H8C5.79086 18 4 16.2091 4 14V7C4 6.44772 4.44772 6 5 6H8V2H10V6H14V2H16V6H19C19.5523 6 20 6.44772 20 7V14C20 16.2091 18.2091 18 16 18H13ZM8 16H16C17.1046 16 18 15.1046 18 14V11H6V14C6 15.1046 6.89543 16 8 16ZM18 8H6V9H18V8ZM12 14.5C11.4477 14.5 11 14.0523 11 13.5C11 12.9477 11.4477 12.5 12 12.5C12.5523 12.5 13 12.9477 13 13.5C13 14.0523 12.5523 14.5 12 14.5Z"/></svg>

package/storage/svg/settings/school-line.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 0.585693L18 6.58569V9H22V19H23V21H1V19H2V9H6V6.58569L12 0.585693ZM18 19H20V11H18V19ZM6 11H4V19H6V11ZM8 7.41412V18.9999H11V12H13V18.9999H16V7.41412L12 3.41412L8 7.41412Z"/></svg>

package/storage/svg/settings/search-line.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"/></svg>

package/storage/svg/settings/settings-6-line.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M17.5 2.47363L23 11.9999L17.5 21.5262H6.5L1 11.9999L6.5 2.47363H17.5ZM16.3453 4.47363H7.6547L3.3094 11.9999L7.6547 19.5262H16.3453L20.6906 11.9999L16.3453 4.47363ZM8.63398 8.16979L10.366 7.16979L15.366 15.83L13.634 16.83L8.63398 8.16979Z"/></svg>

package/storage/svg/settings/settings-line.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 1L21.5 6.5V17.5L12 23L2.5 17.5V6.5L12 1ZM12 3.311L4.5 7.65311V16.3469L12 20.689L19.5 16.3469V7.65311L12 3.311ZM12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12C16 14.2091 14.2091 16 12 16ZM12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z"/></svg>

package/storage/svg/settings/tools-fill.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M5.32943 3.27158C6.56252 2.8332 7.9923 3.10749 8.97927 4.09446C9.96652 5.08171 10.2407 6.51202 9.80178 7.74535L20.6465 18.5902L18.5252 20.7115L7.67936 9.86709C6.44627 10.3055 5.01649 10.0312 4.02952 9.04421C3.04227 8.05696 2.7681 6.62665 3.20701 5.39332L5.44373 7.63C6.02952 8.21578 6.97927 8.21578 7.56505 7.63C8.15084 7.04421 8.15084 6.09446 7.56505 5.50868L5.32943 3.27158ZM15.6968 5.15512L18.8788 3.38736L20.293 4.80157L18.5252 7.98355L16.7574 8.3371L14.6361 10.4584L13.2219 9.04421L15.3432 6.92289L15.6968 5.15512ZM8.62572 12.9333L10.747 15.0546L5.79729 20.0044C5.2115 20.5902 4.26175 20.5902 3.67597 20.0044C3.12464 19.453 3.09221 18.5793 3.57867 17.99L3.67597 17.883L8.62572 12.9333Z"/></svg>

package/storage/svg/settings/upload-cloud-2-line.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 12.5858L16.2426 16.8284L14.8284 18.2426L13 16.415V22H11V16.413L9.17157 18.2426L7.75736 16.8284L12 12.5858ZM12 2C15.5934 2 18.5544 4.70761 18.9541 8.19395C21.2858 8.83154 23 10.9656 23 13.5C23 16.3688 20.8036 18.7246 18.0006 18.9776L18.0009 16.9644C19.6966 16.7214 21 15.2629 21 13.5C21 11.567 19.433 10 17.5 10C17.2912 10 17.0867 10.0183 16.8887 10.054C16.9616 9.7142 17 9.36158 17 9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9C7 9.36158 7.03838 9.7142 7.11205 10.0533C6.91331 10.0183 6.70879 10 6.5 10C4.567 10 3 11.567 3 13.5C3 15.2003 4.21241 16.6174 5.81986 16.934L6.00005 16.9646L6.00039 18.9776C3.19696 18.7252 1 16.3692 1 13.5C1 10.9656 2.71424 8.83154 5.04648 8.19411C5.44561 4.70761 8.40661 2 12 2Z"/></svg>

package/build/components/border/scss/index.scss

@@ -1,2 +0,0 @@
-@layer components {.border{--border-color:var(--border-color-default);--border-color-default:var(--color-border-400);--border-style:solid;--border-width:var(--border-width-400);border-top:var(--border-width) var(--border-style) var(--border-color);z-index:-1;width:100%;position:relative}.border+.border{display:none}.border--offset-top{margin-top:calc(var(--border-width) * -1)}}
-/*$vite$:1*/

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

@@ -1,2 +0,0 @@
-declare const CHECKBOX_INPUT: unique symbol;
-export { CHECKBOX_INPUT };

package/build/components/checkbox/constants.js

@@ -1,2 +0,0 @@
-const CHECKBOX_INPUT = Symbol.for('@esportsplus/ui/checkbox.input');
-export { CHECKBOX_INPUT };

package/build/components/clipboard/onclick.d.ts

@@ -1,10 +0,0 @@
-import * as template_u0 from '@esportsplus/template';
-import { type Attributes, type Renderable } from '@esportsplus/template';
-type A = {
-    timeout?: number;
-    value: string;
-} & Attributes;
-declare const _default: template_u0.Factory<A, (state: {
-    copied: boolean;
-}) => Renderable<unknown>, Renderable<any>>;
-export default _default;

package/build/components/clipboard/onclick.js

@@ -1,36 +0,0 @@
-import * as template_u0 from '@esportsplus/template';
-import { component } from '@esportsplus/template';
-import * as reactivity_u0 from '@esportsplus/reactivity';
-import write from './write.js';
-const template_uo = template_u0.template(`<div >`);
-class ReactiveObject_0g8trzu0 extends reactivity_u0.ReactiveObject {
-    #copied = this[reactivity_u0.SIGNAL](false);
-    constructor() {
-        super(null);
-    }
-    get copied() {
-        return reactivity_u0.read(this.#copied);
-    }
-    set copied(_v0) {
-        reactivity_u0.write(this.#copied, _v0);
-    }
-}
-export default component(function ({ timeout = 1000 * 2, value, ...attributes }, content) {
-    let state = new ReactiveObject_0g8trzu0();
-    return (() => {
-        let root_un = template_uo(), element_up = root_un.firstChild;
-        template_u0.setProperties(element_up, attributes);
-        template_u0.delegate(element_up, 'click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            void write(value).then(() => {
-                state.copied = true;
-                setTimeout(() => {
-                    state.copied = false;
-                }, timeout);
-            });
-        });
-        new template_u0.EffectSlot(element_up, () => content(state), 1);
-        return root_un;
-    })();
-});

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

@@ -1,4 +0,0 @@
-declare const SELECT_ARROW: unique symbol;
-declare const SELECT_OPTION: unique symbol;
-declare const SELECT_TOOLTIP_CONTENT: unique symbol;
-export { SELECT_ARROW, SELECT_OPTION, SELECT_TOOLTIP_CONTENT };

package/build/components/select/constants.js

@@ -1,4 +0,0 @@
-const SELECT_ARROW = Symbol.for('@esportsplus/ui/select.arrow');
-const SELECT_OPTION = Symbol.for('@esportsplus/ui/select.option');
-const SELECT_TOOLTIP_CONTENT = Symbol.for('@esportsplus/ui/select.tooltip-content');
-export { SELECT_ARROW, SELECT_OPTION, SELECT_TOOLTIP_CONTENT };

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

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

package/build/components/tooltip/constants.js

@@ -1,3 +0,0 @@
-const MENU_OPTION = Symbol.for('@esportsplus/ui/tooltip.menu.option');
-const MENU_TOOLTIP_CONTENT = Symbol.for('@esportsplus/ui/tooltip.menu.tooltip-content');
-export { MENU_OPTION, MENU_TOOLTIP_CONTENT };

package/src/components/border/scss/index.scss

@@ -1,17 +0,0 @@
-@use 'variables';
-
-.border {
-    border-top: var(--border-width) var(--border-style) var(--border-color);
-    position: relative;
-    width: 100%;
-    z-index: -1;
-
-
-    & + & {
-        display: none;
-    }
-
-    &--offset-top {
-        margin-top: calc(var(--border-width) * -1);
-    }
-}

package/src/components/border/scss/variables.scss

@@ -1,6 +0,0 @@
-.border {
-    --border-color: var(--border-color-default);
-    --border-color-default: var(--color-border-400);
-    --border-style: solid;
-    --border-width: var(--border-width-400);
-}