@esportsplus/ui 0.46.0 → 0.48.0

package/build/themes/dark/textarea.d.ts

@@ -1,33 +1,34 @@
 declare const _default: (attributes: {
     [key: `aria-${string}`]: string | number | boolean | undefined;
     [key: `data-${string}`]: string | undefined;
-    class?: import("@esportsplus/template/build/types").Attribute | import("@esportsplus/template/build/types").Attribute[];
+    class?: import("node_modules/@esportsplus/template/build/types").Attribute | import("node_modules/@esportsplus/template/build/types").Attribute[];
     onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
     ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
     onrender?: ((element: import("@esportsplus/template").Element) => void) | undefined;
     ontick?: ((dispose: VoidFunction, element: import("@esportsplus/template").Element) => void) | undefined;
-    style?: import("@esportsplus/template/build/types").Attribute | import("@esportsplus/template/build/types").Attribute[];
+    style?: import("node_modules/@esportsplus/template/build/types").Attribute | import("node_modules/@esportsplus/template/build/types").Attribute[];
 } & {
     onabort?: ((this: import("@esportsplus/template").Element, event: UIEvent) => void) | undefined;
     onanimationcancel?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
     onanimationend?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
     onanimationiteration?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
     onanimationstart?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
-    onauxclick?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+    onauxclick?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
     onbeforeinput?: ((this: import("@esportsplus/template").Element, event: InputEvent) => void) | undefined;
-    onbeforetoggle?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onbeforematch?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onbeforetoggle?: ((this: import("@esportsplus/template").Element, event: ToggleEvent) => void) | undefined;
     onblur?: ((this: import("@esportsplus/template").Element, event: FocusEvent) => void) | undefined;
     oncancel?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
     oncanplay?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
     oncanplaythrough?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
     onchange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
-    onclick?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+    onclick?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
     onclose?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
     oncompositionend?: ((this: import("@esportsplus/template").Element, event: CompositionEvent) => void) | undefined;
     oncompositionstart?: ((this: import("@esportsplus/template").Element, event: CompositionEvent) => void) | undefined;
     oncompositionupdate?: ((this: import("@esportsplus/template").Element, event: CompositionEvent) => void) | undefined;
     oncontextlost?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
-    oncontextmenu?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+    oncontextmenu?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
     oncontextrestored?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
     oncopy?: ((this: import("@esportsplus/template").Element, event: ClipboardEvent) => void) | undefined;
     oncuechange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
@@ -77,6 +78,7 @@ declare const _default: (attributes: {
     onpointermove?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
     onpointerout?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
     onpointerover?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+    onpointerrawupdate?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
     onpointerup?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
     onprogress?: ((this: import("@esportsplus/template").Element, event: ProgressEvent<EventTarget>) => void) | undefined;
     onratechange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
@@ -95,7 +97,7 @@ declare const _default: (attributes: {
     onsubmit?: ((this: import("@esportsplus/template").Element, event: SubmitEvent) => void) | undefined;
     onsuspend?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
     ontimeupdate?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
-    ontoggle?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    ontoggle?: ((this: import("@esportsplus/template").Element, event: ToggleEvent) => void) | undefined;
     ontouchcancel?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
     ontouchend?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
     ontouchmove?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
@@ -116,5 +118,5 @@ declare const _default: (attributes: {
         active: boolean;
         error: string;
     };
-}) => Node;
+}) => DocumentFragment;
 export default _default;

package/package.json

@@ -1,25 +1,24 @@
 {
   "author": "ICJR",
   "dependencies": {
-    "@esportsplus/action": "^0.0.58",
-    "@esportsplus/queue": "^0.1.0",
-    "@esportsplus/reactivity": "^0.18.1",
-    "@esportsplus/template": "^0.26.5",
-    "@esportsplus/utilities": "^0.25.0",
-    "@esportsplus/vite": "^0.10.5",
+    "@esportsplus/action": "^0.1.4",
+    "@esportsplus/queue": "^0.2.0",
+    "@esportsplus/template": "^0.41.0",
+    "@esportsplus/utilities": "^0.27.2",
+    "@esportsplus/vite": "^0.12.3",
     "modern-normalize": "^3.0.1"
   },
   "devDependencies": {
-    "@esportsplus/typescript": "^0.9.2",
-    "@types/node": "^24.10.1",
-    "@types/shelljs": "^0.8.17",
-    "autoprefixer": "^10.4.22",
+    "@esportsplus/typescript": "^0.27.3",
+    "@types/node": "^25.0.3",
+    "@types/shelljs": "^0.10.0",
+    "autoprefixer": "^10.4.23",
     "glob": "^13.0.0",
     "lightningcss": "^1.30.2",
     "npm-run-all": "^4.1.5",
-    "sass": "^1.94.2",
+    "sass": "^1.97.2",
     "shelljs": "^0.10.0",
-    "vite": "^7.2.2"
+    "vite": "^7.3.1"
   },
   "exports": {
     "./css-utilities.scss": "./build/css-utilities/index.scss",
@@ -53,12 +52,16 @@
   },
   "name": "@esportsplus/ui",
   "private": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/esportsplus/ui"
+  },
   "sideEffects": false,
   "type": "module",
-  "version": "0.46.0",
+  "version": "0.48.0",
   "scripts": {
     "build": "run-s build:vite build:ts",
-    "build:ts": "tsc && tsc-alias",
+    "build:ts": "tsc",
     "build:vite": "vite build",
     "-": "-"
   }

package/src/components/accordion/index.ts

@@ -1,5 +1,4 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html, Attributes } from '@esportsplus/template';
+import { html, reactive, Attributes } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import template from '~/components/template';
 import './scss/index.scss';

package/src/components/alert/index.ts

@@ -1,7 +1,6 @@
 import '@esportsplus/vite/global.d.ts';
 import { Response } from '@esportsplus/action';
-import { reactive } from '@esportsplus/reactivity';
-import { html, svg, Attributes, Renderable } from '@esportsplus/template';
+import { html, reactive, svg, Attributes, Renderable } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import { icon } from '@esportsplus/ui';
 import check from './svg/check.svg';

package/src/components/button/index.ts

@@ -1,5 +1,4 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html, Renderable } from '@esportsplus/template';
+import { html, reactive, type Renderable } from '@esportsplus/template';
 import template from '../template';
 import './scss/index.scss';
 
@@ -11,10 +10,6 @@ const hold = template.factory(
                     state.holding = false;
                 }
             },
-            start = (e: MouseEvent) => {
-                e.preventDefault();
-                state.holding = true;
-            },
             state = reactive({
                 complete: false,
                 holding: false
@@ -23,17 +18,29 @@ const hold = template.factory(
         return html`
             <div
                 class='button ${() => state.holding && 'button--holding'} ${() => state.complete && '--active'}'
-                onanimationend=${(e: AnimationEvent) => {
-                    if (e.animationName === 'buttonHolding') {
-                        state.complete = true;
+                onmousedown='${(e) => {
+                    e.preventDefault();
+                    state.holding = true;
+                }}'
+                ${attributes}
+                ${{
+                    onanimationend: (e: AnimationEvent) => {
+                        if (e.animationName === 'buttonHolding') {
+                            state.complete = true;
+                        }
+                    },
+                    onclick: () => {},
+                    onmousedown: (e) => {
+                        e.preventDefault();
+                        state.holding = true;
+                    },
+                    onmouseup: end,
+                    ontouchend: end,
+                    ontouchstart: (e) => {
+                        e.preventDefault();
+                        state.holding = true;
                     }
                 }}
-                onclick=${() => {}}
-                onmousedown=${start}
-                onmouseup=${end}
-                ontouchstart=${start}
-                ontouchend=${end}
-                ${attributes}
             >
                 ${() => content(state)}
             </div>

package/src/components/checkbox/index.ts

@@ -1,5 +1,4 @@
-import { reactive, root } from '@esportsplus/reactivity';
-import { html, type Attributes } from '@esportsplus/template';
+import { html, reactive, root, type Attributes } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import form from '~/components/form';
 import './scss/index.scss';

package/src/components/clipboard/onclick.ts

@@ -1,5 +1,4 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html, type Attributes, type Renderable } from '@esportsplus/template';
+import { html, reactive, type Attributes, type Renderable } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import template from '~/components/template';
 import write from './write';

package/src/components/counter/index.ts

@@ -1,5 +1,4 @@
-import { effect, reactive } from '@esportsplus/reactivity'
-import { html, type Attributes } from '@esportsplus/template';
+import { effect, html, reactive, type Attributes } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import './scss/index.scss';
 
@@ -30,8 +29,10 @@ export default (attributes: Attributes & {
         rendering = true,
         state = reactive({
             length: 0,
+            test: () => 'sds',
             render: [] as string[]
-        });
+        }),
+        render = reactive([] as string[]);
 
     decimals ??= 2;
 
@@ -69,7 +70,7 @@ export default (attributes: Attributes & {
                 value = '0';
             }
 
-            state.render[i] = value;
+            render[i] = value;
         }
 
         if (rendering === true) {
@@ -87,7 +88,7 @@ export default (attributes: Attributes & {
                     return '';
                 }
 
-                return html.reactive(state.render, function (value, i) {
+                return html.reactive(render, function (value) {
                     if (isNaN(parseInt(value, 10))) {
                         return html`
                             <span class='counter-character counter-character--symbol'>
@@ -97,9 +98,7 @@ export default (attributes: Attributes & {
                     }
 
                     return html`
-                        <div class=' counter-character' ${{
-                            class: i > n - 3 && 'counter-character--fraction'
-                        }}>
+                        <div class=' counter-character'>
                             <div class='counter-character-track' style='${`--value: ${value}`}'>
                                 <span>9</span>
                                 ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => html`<span>${value}</span>`)}

package/src/components/highlight/index.ts

@@ -1,5 +1,4 @@
-import { reactive } from '@esportsplus/reactivity'
-import { html, Attributes } from '@esportsplus/template';
+import { html, reactive, Attributes } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import template from '~/components/template';
 import './scss/index.scss';

package/src/components/input/index.ts

@@ -1,5 +1,4 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html, type Attributes } from '@esportsplus/template';
+import { html, reactive, type Attributes } from '@esportsplus/template';
 import form from '~/components/form';
 import './scss/index.scss';
 

package/src/components/loader/index.ts

@@ -1,5 +1,4 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html, Attributes } from '@esportsplus/template';
+import { html, reactive, type Attributes } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities'
 import template from '~/components/template';
 import './scss/index.scss';

package/src/components/range/index.ts

@@ -1,5 +1,4 @@
-import { reactive, root } from '@esportsplus/reactivity';
-import { html, type Attributes } from '@esportsplus/template';
+import { html, reactive, root, type Attributes } from '@esportsplus/template';
 import form from '~/components/form';
 import './scss/index.scss';
 

package/src/components/scrollbar/index.ts

@@ -1,5 +1,4 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html, type Attributes } from '@esportsplus/template';
+import { html, reactive, type Attributes } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import template from '~/components/template';
 import './scss/index.scss';

package/src/components/select/index.ts

@@ -1,5 +1,4 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html, Renderable, type Attributes } from '@esportsplus/template';
+import { html, reactive, type Renderable, type Attributes } from '@esportsplus/template';
 import { EMPTY_ARRAY, omit, toArray } from '@esportsplus/utilities';
 import form from '~/components/form';
 import root from '~/components/root';
@@ -96,7 +95,19 @@ const select = template.factory<A, (state: { active: boolean, selected?: string
                     state.render = true;
                 }}
             >
-                ${content ? (() => content(state)) : (() => options[ state.selected! ] || '-')}
+                ${content ? (() => content(state)) : (() => {
+                    let selected = options[state.selected!];
+
+                    if (!selected) {
+                        return '-';
+                    }
+
+                    if (selected !== null && typeof selected === 'object' && 'content' in selected) {
+                        return selected.content;
+                    }
+
+                    return selected;
+                })}
 
                 <div class='select-arrow' ${this?.attributes?.arrow} ${attributes.arrow}></div>
 

package/src/components/textarea/index.ts

@@ -1,5 +1,4 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html, type Attributes } from '@esportsplus/template';
+import { html, reactive, type Attributes } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import form from '~/components/form';
 import './scss/index.scss';

package/src/components/tooltip/onclick.ts

@@ -1,5 +1,4 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html, type Attributes } from '@esportsplus/template';
+import { html, reactive, type Attributes } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import { root } from '@esportsplus/ui';
 import template from '~/components/template';

package/src/components/tooltip/onhover.ts

@@ -1,5 +1,4 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html, Attributes } from '@esportsplus/template';
+import { html, reactive, Attributes } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import template from '~/components/template';
 

package/src/components/typewriter/index.ts

@@ -1,5 +1,4 @@
-import { html } from '@esportsplus/template';
-import { reactive } from '@esportsplus/reactivity';
+import { html, reactive } from '@esportsplus/template';
 import template from '~/components/template';
 import './scss/index.scss';
 

package/tsconfig.json

@@ -1,3 +1,8 @@
 {
-    "extends": "@esportsplus/typescript/tsconfig.package.json"
+    "extends": "@esportsplus/typescript/tsconfig.package.json",
+    "compilerOptions": {
+        "plugins": [
+            { "transform": "@esportsplus/template/compiler/tsc" }
+        ]
+    }
 }