@esportsplus/ui 0.50.14 → 0.51.1

package/build/components/tooltip/onclick.js

@@ -1,19 +1,19 @@
-import * as template_fe3743986d934bb1a4a44a548d8013201 from '@esportsplus/template';
-import * as reactivity_fe3743986d934bb1a4a44a548d8013200 from '@esportsplus/reactivity';
+import * as template_18172a85379e40cd839ee4bba2ddfea81 from '@esportsplus/template';
+import * as reactivity_18172a85379e40cd839ee4bba2ddfea80 from '@esportsplus/reactivity';
 import { omit } from '@esportsplus/utilities';
 import { root } from '@esportsplus/ui';
 import template from '../../components/template/index.js';
-const template_fe3743986d934bb1a4a44a548d8013204t = template_fe3743986d934bb1a4a44a548d8013201.template(`<div class='tooltip'><!--$--></div>`);
-class ReactiveObject_fe3743986d934bb1a4a44a548d8013204r extends reactivity_fe3743986d934bb1a4a44a548d8013200.ReactiveObject {
-    #active = this[reactivity_fe3743986d934bb1a4a44a548d8013200.SIGNAL](false);
+const template_18172a85379e40cd839ee4bba2ddfea84t = template_18172a85379e40cd839ee4bba2ddfea81.template(`<div class='tooltip'><!--$--></div>`);
+class ReactiveObject_18172a85379e40cd839ee4bba2ddfea84r extends reactivity_18172a85379e40cd839ee4bba2ddfea80.ReactiveObject {
+    #active = this[reactivity_18172a85379e40cd839ee4bba2ddfea80.SIGNAL](false);
     constructor() {
         super(null);
     }
     get active() {
-        return reactivity_fe3743986d934bb1a4a44a548d8013200.read(this.#active);
+        return reactivity_18172a85379e40cd839ee4bba2ddfea80.read(this.#active);
     }
     set active(_v0) {
-        reactivity_fe3743986d934bb1a4a44a548d8013200.write(this.#active, _v0);
+        reactivity_18172a85379e40cd839ee4bba2ddfea80.write(this.#active, _v0);
     }
 }
 const OMIT = ['state', 'toggle'];
@@ -37,12 +37,12 @@ function frame() {
     running = false;
 }
 export default template.factory((attributes, content) => {
-    let state = attributes.state || new ReactiveObject_fe3743986d934bb1a4a44a548d8013204r(), toggle = attributes.toggle || false;
+    let state = attributes.state || new ReactiveObject_18172a85379e40cd839ee4bba2ddfea84r(), toggle = attributes.toggle || false;
     return (() => {
-        let root_fe3743986d934bb1a4a44a548d8013204s = template_fe3743986d934bb1a4a44a548d8013204t(), element_fe3743986d934bb1a4a44a548d8013204u = root_fe3743986d934bb1a4a44a548d8013204s.firstChild, element_fe3743986d934bb1a4a44a548d8013204v = element_fe3743986d934bb1a4a44a548d8013204u.firstChild, attributes_fe3743986d934bb1a4a44a548d8013204w = { "class": "tooltip" };
-        template_fe3743986d934bb1a4a44a548d8013201.setProperties(element_fe3743986d934bb1a4a44a548d8013204u, omit(attributes, OMIT), attributes_fe3743986d934bb1a4a44a548d8013204w);
-        template_fe3743986d934bb1a4a44a548d8013201.setList(element_fe3743986d934bb1a4a44a548d8013204u, 'class', () => state.active && '--active', attributes_fe3743986d934bb1a4a44a548d8013204w);
-        template_fe3743986d934bb1a4a44a548d8013201.delegate(element_fe3743986d934bb1a4a44a548d8013204u, 'click', function (e) {
+        let root_18172a85379e40cd839ee4bba2ddfea84s = template_18172a85379e40cd839ee4bba2ddfea84t(), element_18172a85379e40cd839ee4bba2ddfea84u = root_18172a85379e40cd839ee4bba2ddfea84s.firstChild, element_18172a85379e40cd839ee4bba2ddfea84v = element_18172a85379e40cd839ee4bba2ddfea84u.firstChild, attributes_18172a85379e40cd839ee4bba2ddfea84w = { "class": "tooltip" };
+        template_18172a85379e40cd839ee4bba2ddfea81.setProperties(element_18172a85379e40cd839ee4bba2ddfea84u, omit(attributes, OMIT), attributes_18172a85379e40cd839ee4bba2ddfea84w);
+        template_18172a85379e40cd839ee4bba2ddfea81.setList(element_18172a85379e40cd839ee4bba2ddfea84u, 'class', () => state.active && '--active', attributes_18172a85379e40cd839ee4bba2ddfea84w);
+        template_18172a85379e40cd839ee4bba2ddfea81.delegate(element_18172a85379e40cd839ee4bba2ddfea84u, 'click', function (e) {
             let active = true, node = e.target;
             if (this === node || (toggle && this.contains(node))) {
                 active = !state.active;
@@ -70,7 +70,7 @@ export default template.factory((attributes, content) => {
                 scheduled = true;
             }
         });
-        template_fe3743986d934bb1a4a44a548d8013201.slot(element_fe3743986d934bb1a4a44a548d8013204v, content);
-        return root_fe3743986d934bb1a4a44a548d8013204s;
+        template_18172a85379e40cd839ee4bba2ddfea81.slot(element_18172a85379e40cd839ee4bba2ddfea84v, content);
+        return root_18172a85379e40cd839ee4bba2ddfea84s;
     })();
 });

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

@@ -1,20 +1,20 @@
-import * as template_fe3743986d934bb1a4a44a548d8013201 from '@esportsplus/template';
+import * as template_18172a85379e40cd839ee4bba2ddfea81 from '@esportsplus/template';
 declare const _default: {
     (): ReturnType<(this: {
-        attributes?: template_fe3743986d934bb1a4a44a548d8013201.Attributes | undefined;
-        content?: template_fe3743986d934bb1a4a44a548d8013201.Renderable<any>;
-    }, attributes: Readonly<template_fe3743986d934bb1a4a44a548d8013201.Attributes>, content: template_fe3743986d934bb1a4a44a548d8013201.Renderable<any>) => template_fe3743986d934bb1a4a44a548d8013201.Renderable<any>>;
-    <T extends template_fe3743986d934bb1a4a44a548d8013201.Attributes>(attributes: T): ReturnType<(this: {
-        attributes?: template_fe3743986d934bb1a4a44a548d8013201.Attributes | undefined;
-        content?: template_fe3743986d934bb1a4a44a548d8013201.Renderable<any>;
-    }, attributes: Readonly<template_fe3743986d934bb1a4a44a548d8013201.Attributes>, content: template_fe3743986d934bb1a4a44a548d8013201.Renderable<any>) => template_fe3743986d934bb1a4a44a548d8013201.Renderable<any>>;
-    <T extends template_fe3743986d934bb1a4a44a548d8013201.Renderable<any>>(content: T): ReturnType<(this: {
-        attributes?: template_fe3743986d934bb1a4a44a548d8013201.Attributes | undefined;
-        content?: template_fe3743986d934bb1a4a44a548d8013201.Renderable<any>;
-    }, attributes: Readonly<template_fe3743986d934bb1a4a44a548d8013201.Attributes>, content: template_fe3743986d934bb1a4a44a548d8013201.Renderable<any>) => template_fe3743986d934bb1a4a44a548d8013201.Renderable<any>>;
-    (attributes: template_fe3743986d934bb1a4a44a548d8013201.Attributes, content: template_fe3743986d934bb1a4a44a548d8013201.Renderable<any>): ReturnType<(this: {
-        attributes?: template_fe3743986d934bb1a4a44a548d8013201.Attributes | undefined;
-        content?: template_fe3743986d934bb1a4a44a548d8013201.Renderable<any>;
-    }, attributes: Readonly<template_fe3743986d934bb1a4a44a548d8013201.Attributes>, content: template_fe3743986d934bb1a4a44a548d8013201.Renderable<any>) => template_fe3743986d934bb1a4a44a548d8013201.Renderable<any>>;
+        attributes?: template_18172a85379e40cd839ee4bba2ddfea81.Attributes | undefined;
+        content?: template_18172a85379e40cd839ee4bba2ddfea81.Renderable<any>;
+    }, attributes: Readonly<template_18172a85379e40cd839ee4bba2ddfea81.Attributes>, content: template_18172a85379e40cd839ee4bba2ddfea81.Renderable<any>) => template_18172a85379e40cd839ee4bba2ddfea81.Renderable<any>>;
+    <T extends template_18172a85379e40cd839ee4bba2ddfea81.Attributes>(attributes: T): ReturnType<(this: {
+        attributes?: template_18172a85379e40cd839ee4bba2ddfea81.Attributes | undefined;
+        content?: template_18172a85379e40cd839ee4bba2ddfea81.Renderable<any>;
+    }, attributes: Readonly<template_18172a85379e40cd839ee4bba2ddfea81.Attributes>, content: template_18172a85379e40cd839ee4bba2ddfea81.Renderable<any>) => template_18172a85379e40cd839ee4bba2ddfea81.Renderable<any>>;
+    <T extends template_18172a85379e40cd839ee4bba2ddfea81.Renderable<any>>(content: T): ReturnType<(this: {
+        attributes?: template_18172a85379e40cd839ee4bba2ddfea81.Attributes | undefined;
+        content?: template_18172a85379e40cd839ee4bba2ddfea81.Renderable<any>;
+    }, attributes: Readonly<template_18172a85379e40cd839ee4bba2ddfea81.Attributes>, content: template_18172a85379e40cd839ee4bba2ddfea81.Renderable<any>) => template_18172a85379e40cd839ee4bba2ddfea81.Renderable<any>>;
+    (attributes: template_18172a85379e40cd839ee4bba2ddfea81.Attributes, content: template_18172a85379e40cd839ee4bba2ddfea81.Renderable<any>): ReturnType<(this: {
+        attributes?: template_18172a85379e40cd839ee4bba2ddfea81.Attributes | undefined;
+        content?: template_18172a85379e40cd839ee4bba2ddfea81.Renderable<any>;
+    }, attributes: Readonly<template_18172a85379e40cd839ee4bba2ddfea81.Attributes>, content: template_18172a85379e40cd839ee4bba2ddfea81.Renderable<any>) => template_18172a85379e40cd839ee4bba2ddfea81.Renderable<any>>;
 };
 export default _default;

package/build/components/tooltip/onhover.js

@@ -1,34 +1,34 @@
-import * as template_fe3743986d934bb1a4a44a548d8013201 from '@esportsplus/template';
-import * as reactivity_fe3743986d934bb1a4a44a548d8013200 from '@esportsplus/reactivity';
+import * as template_18172a85379e40cd839ee4bba2ddfea81 from '@esportsplus/template';
+import * as reactivity_18172a85379e40cd839ee4bba2ddfea80 from '@esportsplus/reactivity';
 import { omit } from '@esportsplus/utilities';
 import template from '../../components/template/index.js';
-const template_fe3743986d934bb1a4a44a548d8013204z = template_fe3743986d934bb1a4a44a548d8013201.template(`<div class='tooltip'><!--$--></div>`);
-class ReactiveObject_fe3743986d934bb1a4a44a548d8013204x extends reactivity_fe3743986d934bb1a4a44a548d8013200.ReactiveObject {
-    #active = this[reactivity_fe3743986d934bb1a4a44a548d8013200.SIGNAL](false);
+const template_18172a85379e40cd839ee4bba2ddfea84z = template_18172a85379e40cd839ee4bba2ddfea81.template(`<div class='tooltip'><!--$--></div>`);
+class ReactiveObject_18172a85379e40cd839ee4bba2ddfea84x extends reactivity_18172a85379e40cd839ee4bba2ddfea80.ReactiveObject {
+    #active = this[reactivity_18172a85379e40cd839ee4bba2ddfea80.SIGNAL](false);
     constructor() {
         super(null);
     }
     get active() {
-        return reactivity_fe3743986d934bb1a4a44a548d8013200.read(this.#active);
+        return reactivity_18172a85379e40cd839ee4bba2ddfea80.read(this.#active);
     }
     set active(_v0) {
-        reactivity_fe3743986d934bb1a4a44a548d8013200.write(this.#active, _v0);
+        reactivity_18172a85379e40cd839ee4bba2ddfea80.write(this.#active, _v0);
     }
 }
 const OMIT = ['state'];
 export default template.factory((attributes, content) => {
-    let state = attributes.state || new ReactiveObject_fe3743986d934bb1a4a44a548d8013204x();
+    let state = attributes.state || new ReactiveObject_18172a85379e40cd839ee4bba2ddfea84x();
     return (() => {
-        let root_fe3743986d934bb1a4a44a548d8013204y = template_fe3743986d934bb1a4a44a548d8013204z(), element_fe3743986d934bb1a4a44a548d80132050 = root_fe3743986d934bb1a4a44a548d8013204y.firstChild, element_fe3743986d934bb1a4a44a548d80132051 = element_fe3743986d934bb1a4a44a548d80132050.firstChild, attributes_fe3743986d934bb1a4a44a548d80132052 = { "class": "tooltip" };
-        template_fe3743986d934bb1a4a44a548d8013201.setProperties(element_fe3743986d934bb1a4a44a548d80132050, omit(attributes, OMIT), attributes_fe3743986d934bb1a4a44a548d80132052);
-        template_fe3743986d934bb1a4a44a548d8013201.setList(element_fe3743986d934bb1a4a44a548d80132050, 'class', () => state.active && '--active', attributes_fe3743986d934bb1a4a44a548d80132052);
-        template_fe3743986d934bb1a4a44a548d8013201.delegate(element_fe3743986d934bb1a4a44a548d80132050, 'mouseover', () => {
+        let root_18172a85379e40cd839ee4bba2ddfea84y = template_18172a85379e40cd839ee4bba2ddfea84z(), element_18172a85379e40cd839ee4bba2ddfea850 = root_18172a85379e40cd839ee4bba2ddfea84y.firstChild, element_18172a85379e40cd839ee4bba2ddfea851 = element_18172a85379e40cd839ee4bba2ddfea850.firstChild, attributes_18172a85379e40cd839ee4bba2ddfea852 = { "class": "tooltip" };
+        template_18172a85379e40cd839ee4bba2ddfea81.setProperties(element_18172a85379e40cd839ee4bba2ddfea850, omit(attributes, OMIT), attributes_18172a85379e40cd839ee4bba2ddfea852);
+        template_18172a85379e40cd839ee4bba2ddfea81.setList(element_18172a85379e40cd839ee4bba2ddfea850, 'class', () => state.active && '--active', attributes_18172a85379e40cd839ee4bba2ddfea852);
+        template_18172a85379e40cd839ee4bba2ddfea81.delegate(element_18172a85379e40cd839ee4bba2ddfea850, 'mouseover', () => {
             state.active = true;
         });
-        template_fe3743986d934bb1a4a44a548d8013201.delegate(element_fe3743986d934bb1a4a44a548d80132050, 'mouseout', () => {
+        template_18172a85379e40cd839ee4bba2ddfea81.delegate(element_18172a85379e40cd839ee4bba2ddfea850, 'mouseout', () => {
             state.active = false;
         });
-        template_fe3743986d934bb1a4a44a548d8013201.slot(element_fe3743986d934bb1a4a44a548d80132051, content);
-        return root_fe3743986d934bb1a4a44a548d8013204y;
+        template_18172a85379e40cd839ee4bba2ddfea81.slot(element_18172a85379e40cd839ee4bba2ddfea851, content);
+        return root_18172a85379e40cd839ee4bba2ddfea84y;
     })();
 });

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

@@ -1,21 +1,21 @@
-import * as template_fe3743986d934bb1a4a44a548d8013201 from '@esportsplus/template';
+import * as template_18172a85379e40cd839ee4bba2ddfea81 from '@esportsplus/template';
 import './scss/index.scss';
 declare const _default: {
     (): ReturnType<(this: {
-        attributes?: template_fe3743986d934bb1a4a44a548d8013201.Attributes | undefined;
+        attributes?: template_18172a85379e40cd839ee4bba2ddfea81.Attributes | undefined;
         content?: string[] | undefined;
-    }, attributes: Readonly<template_fe3743986d934bb1a4a44a548d8013201.Attributes>, content: string[]) => template_fe3743986d934bb1a4a44a548d8013201.Renderable<any>>;
-    <T extends template_fe3743986d934bb1a4a44a548d8013201.Attributes>(attributes: T): ReturnType<(this: {
-        attributes?: template_fe3743986d934bb1a4a44a548d8013201.Attributes | undefined;
+    }, attributes: Readonly<template_18172a85379e40cd839ee4bba2ddfea81.Attributes>, content: string[]) => template_18172a85379e40cd839ee4bba2ddfea81.Renderable<any>>;
+    <T extends template_18172a85379e40cd839ee4bba2ddfea81.Attributes>(attributes: T): ReturnType<(this: {
+        attributes?: template_18172a85379e40cd839ee4bba2ddfea81.Attributes | undefined;
         content?: string[] | undefined;
-    }, attributes: Readonly<template_fe3743986d934bb1a4a44a548d8013201.Attributes>, content: string[]) => template_fe3743986d934bb1a4a44a548d8013201.Renderable<any>>;
+    }, attributes: Readonly<template_18172a85379e40cd839ee4bba2ddfea81.Attributes>, content: string[]) => template_18172a85379e40cd839ee4bba2ddfea81.Renderable<any>>;
     <T extends string[]>(content: T): ReturnType<(this: {
-        attributes?: template_fe3743986d934bb1a4a44a548d8013201.Attributes | undefined;
+        attributes?: template_18172a85379e40cd839ee4bba2ddfea81.Attributes | undefined;
         content?: string[] | undefined;
-    }, attributes: Readonly<template_fe3743986d934bb1a4a44a548d8013201.Attributes>, content: string[]) => template_fe3743986d934bb1a4a44a548d8013201.Renderable<any>>;
-    (attributes: template_fe3743986d934bb1a4a44a548d8013201.Attributes, content: string[]): ReturnType<(this: {
-        attributes?: template_fe3743986d934bb1a4a44a548d8013201.Attributes | undefined;
+    }, attributes: Readonly<template_18172a85379e40cd839ee4bba2ddfea81.Attributes>, content: string[]) => template_18172a85379e40cd839ee4bba2ddfea81.Renderable<any>>;
+    (attributes: template_18172a85379e40cd839ee4bba2ddfea81.Attributes, content: string[]): ReturnType<(this: {
+        attributes?: template_18172a85379e40cd839ee4bba2ddfea81.Attributes | undefined;
         content?: string[] | undefined;
-    }, attributes: Readonly<template_fe3743986d934bb1a4a44a548d8013201.Attributes>, content: string[]) => template_fe3743986d934bb1a4a44a548d8013201.Renderable<any>>;
+    }, attributes: Readonly<template_18172a85379e40cd839ee4bba2ddfea81.Attributes>, content: string[]) => template_18172a85379e40cd839ee4bba2ddfea81.Renderable<any>>;
 };
 export default _default;

package/build/components/typewriter/index.js

@@ -1,27 +1,27 @@
-import * as template_fe3743986d934bb1a4a44a548d8013201 from '@esportsplus/template';
-import * as reactivity_fe3743986d934bb1a4a44a548d8013200 from '@esportsplus/reactivity';
+import * as template_18172a85379e40cd839ee4bba2ddfea81 from '@esportsplus/template';
+import * as reactivity_18172a85379e40cd839ee4bba2ddfea80 from '@esportsplus/reactivity';
 import template from '../../components/template/index.js';
 import './scss/index.scss';
-const template_fe3743986d934bb1a4a44a548d80132055 = template_fe3743986d934bb1a4a44a548d8013201.template(`<div class='typewriter'><!--$--></div>`);
-const template_fe3743986d934bb1a4a44a548d80132058 = template_fe3743986d934bb1a4a44a548d8013201.template(``);
-class ReactiveObject_fe3743986d934bb1a4a44a548d80132053 extends reactivity_fe3743986d934bb1a4a44a548d8013200.ReactiveObject {
-    #text = this[reactivity_fe3743986d934bb1a4a44a548d8013200.SIGNAL]('');
+const template_18172a85379e40cd839ee4bba2ddfea855 = template_18172a85379e40cd839ee4bba2ddfea81.template(`<div class='typewriter'><!--$--></div>`);
+const template_18172a85379e40cd839ee4bba2ddfea858 = template_18172a85379e40cd839ee4bba2ddfea81.template(``);
+class ReactiveObject_18172a85379e40cd839ee4bba2ddfea853 extends reactivity_18172a85379e40cd839ee4bba2ddfea80.ReactiveObject {
+    #text = this[reactivity_18172a85379e40cd839ee4bba2ddfea80.SIGNAL]('');
     constructor() {
         super(null);
     }
     get text() {
-        return reactivity_fe3743986d934bb1a4a44a548d8013200.read(this.#text);
+        return reactivity_18172a85379e40cd839ee4bba2ddfea80.read(this.#text);
     }
     set text(_v0) {
-        reactivity_fe3743986d934bb1a4a44a548d8013200.write(this.#text, _v0);
+        reactivity_18172a85379e40cd839ee4bba2ddfea80.write(this.#text, _v0);
     }
 }
-const EMPTY_NODE = template_fe3743986d934bb1a4a44a548d80132058();
+const EMPTY_NODE = template_18172a85379e40cd839ee4bba2ddfea858();
 export default template.factory(function (_, content) {
-    let state = new ReactiveObject_fe3743986d934bb1a4a44a548d80132053();
+    let state = new ReactiveObject_18172a85379e40cd839ee4bba2ddfea853();
     return (() => {
-        let root_fe3743986d934bb1a4a44a548d80132054 = template_fe3743986d934bb1a4a44a548d80132055(), element_fe3743986d934bb1a4a44a548d80132056 = root_fe3743986d934bb1a4a44a548d80132054.firstChild, element_fe3743986d934bb1a4a44a548d80132057 = element_fe3743986d934bb1a4a44a548d80132056.firstChild;
-        template_fe3743986d934bb1a4a44a548d8013201.onconnect(element_fe3743986d934bb1a4a44a548d80132056, () => {
+        let root_18172a85379e40cd839ee4bba2ddfea854 = template_18172a85379e40cd839ee4bba2ddfea855(), element_18172a85379e40cd839ee4bba2ddfea856 = root_18172a85379e40cd839ee4bba2ddfea854.firstChild, element_18172a85379e40cd839ee4bba2ddfea857 = element_18172a85379e40cd839ee4bba2ddfea856.firstChild;
+        template_18172a85379e40cd839ee4bba2ddfea81.onconnect(element_18172a85379e40cd839ee4bba2ddfea856, () => {
             let character = 0, i = 0, isWriting = true, write = content[i];
             function play() {
                 setTimeout(() => {
@@ -50,7 +50,7 @@ export default template.factory(function (_, content) {
             }
             play();
         });
-        new template_fe3743986d934bb1a4a44a548d8013201.EffectSlot(element_fe3743986d934bb1a4a44a548d80132057, () => state.text || EMPTY_NODE);
-        return root_fe3743986d934bb1a4a44a548d80132054;
+        new template_18172a85379e40cd839ee4bba2ddfea81.EffectSlot(element_18172a85379e40cd839ee4bba2ddfea857, () => state.text || EMPTY_NODE);
+        return root_18172a85379e40cd839ee4bba2ddfea854;
     })();
 });

package/package.json

@@ -59,7 +59,7 @@
   },
   "sideEffects": false,
   "type": "module",
-  "version": "0.50.14",
+  "version": "0.51.1",
   "scripts": {
     "build": "run-s build:vite build:ts",
     "build:ts": "tsc",

package/src/components/frame/scss/index.scss

@@ -1,3 +1,28 @@
+@use '/tokens';
+@use 'variables';
+
+.frames {
+    display: flex;
+    gap: var(--gap);
+    transform: translateX(calc(var(--i) * (100% + var(--gap))));
+    transition: transform 0.3s ease;
+
+    .frame {
+        display: flex;
+        flex-shrink: 0;
+        min-width: 100%;
+        width: 100%;
+
+        @include tokens.state(inactive) {
+            opacity: var(--opacity);
+
+            > * {
+                pointer-events: none;
+            }
+        }
+    }
+}
+
 .frame {
     cursor: default;
     display: none;

package/src/components/frame/scss/variables.scss

@@ -0,0 +1,4 @@
+.frames {
+    --gap: var(--size-400);
+    --opacity: 0.4;
+}