@esportsplus/ui 0.51.7 → 0.54.0

package/src/components/checkbox/scss/variables.scss

@@ -1,4 +1,3 @@
-@use '/lib';
 @use '/tokens';
 
 .checkbox {
@@ -8,67 +7,109 @@
     --background-hover: var(--background-default);
     --background-pressed: var(--background-default);
     --border-color: var(--border-color-default);
+    --border-color-active: var(--border-color-default);
     --border-color-default: var(--background);
+    --border-color-hover: var(--border-color-default);
+    --border-color-pressed: var(--border-color-default);
     --border-radius: var(--border-radius-300);
     --border-style: solid;
     --border-width: 0px;
+    --border-width-offset: 0px;
+    --border-width-offset-hover: 1px;
     --box-shadow: var(--box-shadow-default);
+    --box-shadow-active: 0 3px 8px color-mix(in srgb, var(--background-active) 22%, transparent);
     --box-shadow-default: none;
+    --box-shadow-hover: var(--box-shadow-default);
+    --box-shadow-pressed: var(--box-shadow-default);
+    --check-linecap: round;
+    --check-linejoin: round;
+    --check-size: 80%;
+    --check-stroke-width: 4;
+    --check-timing-function: ease;
+    --focus-color: var(--border-color-active);
+    --focus-offset: 2px;
+    --focus-width: 2px;
     --height: var(--size);
-    --margin-horizontal: calc(var(--width-switch) - var(--width));
-    --opacity: var(--opacity-default);
-    --opacity-active: var(--opacity-default);
-    --opacity-default: 1;
-    --opacity-hover: var(--opacity-default);
-    --opacity-pressed: var(--opacity-default);
-    --rotate: 45deg;
+    --indicator-color: var(--indicator-color-default);
+    --indicator-color-active: var(--indicator-color-default);
+    --indicator-color-default: var(--color-white-400);
+    --indicator-color-hover: var(--indicator-color-default);
+    --indicator-color-pressed: var(--indicator-color-default);
     --scale: var(--scale-default);
     --scale-active: 1;
-    --scale-default: 0;
-    --scale-hover: 1.08;
-    --scale-pressed: 0.98;
-    --size: var(--size-600);
+    --scale-default: 0.92;
+    --scale-hover: 0.96;
+    --scale-pressed: var(--scale-default);
+    --size: var(--size-500);
+    --transition-duration: 280ms;
+    --transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
     --width: var(--height);
-    --width-switch: 40px;
 
-    &::before {
-        --border-width: 4px;
-        --box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.16);
-        --height: 100%;
-        --translateX: 124%;
-        --translateY: 8%;
-        --width: 50%;
+
+    &--radio,
+    &--switch {
+        &::before {
+            --box-shadow: 0 2px 4px #0003;
+        }
+    }
+
+    &--radio {
+        --border-radius: 100%;
+        --scale-default: 0;
+        --scale-hover: 0;
+
+        &::before {
+            --height: var(--size-200);
+            --width: var(--size-200);
+        }
     }
 
-    #{tokens.state(default)} {
+    &--switch {
+        --border-width-offset-hover: 0px;
+        --box-shadow-active: var(--box-shadow-default);
+        --focus-color: var(--background-active);
+        --padding-horizontal: 2px;
+        --padding-vertical: 2px;
+        --width: var(--width-rail);
+        --width-rail: calc(var(--height) * 1.8);
+
         &::before {
-            --translateY: 100%;
+            --translateX: 0px;
+            --width: var(--height);
+        }
+
+        &:has(input:checked)::before {
+            --translateX: calc(var(--width-rail) - (var(--border-width) * 2) - var(--height) - (var(--padding-horizontal) * 2));
         }
     }
 
-    #{tokens.state(inactive)} {
-        @include tokens.state(hover) {
+
+    &:not(:has(input:checked)) {
+        &:hover,
+        label:hover & {
             --background: var(--background-hover);
             --border-color: var(--border-color-hover);
+            --border-width-offset: var(--border-width-offset-hover);
             --box-shadow: var(--box-shadow-hover);
-            --opacity: var(--opacity-hover);
+            --indicator-color: var(--indicator-color-hover);
             --scale: var(--scale-hover);
         }
 
-        @include tokens.state(pressed) {
+        &:active,
+        label:active & {
             --background: var(--background-pressed);
             --border-color: var(--border-color-pressed);
             --box-shadow: var(--box-shadow-pressed);
-            --opacity: var(--opacity-pressed);
+            --indicator-color: var(--indicator-color-pressed);
             --scale: var(--scale-pressed);
         }
     }
 
-    #{tokens.state(active)} {
+    &:has(input:checked) {
         --background: var(--background-active);
         --border-color: var(--border-color-active);
         --box-shadow: var(--box-shadow-active);
-        --opacity: var(--opacity-active);
+        --indicator-color: var(--indicator-color-active);
         --scale: var(--scale-active);
     }
-}
+}

package/src/components/checkbox/svg/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12.5 9.5 17 19 7" pathLength="1"/></svg>

package/src/components/clipboard/copy.ts

@@ -0,0 +1,60 @@
+import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+import { omit } from '@esportsplus/utilities';
+import write from './write';
+
+
+type A = Attributes & {
+    onerror?: () => void;
+    timeout?: number;
+    value: string;
+};
+
+
+const OMIT = ['onerror', 'timeout', 'value'];
+
+
+export default component<A, (state: { copied: boolean }) => Renderable<unknown>>(
+    (attributes, content) => {
+        let state = reactive({ copied: false }),
+            timer: ReturnType<typeof setTimeout> | undefined,
+            connected = true;
+
+        return html`
+            <button
+                type='button'
+                ${omit(attributes, OMIT)}
+                ${{
+                    onconnect: () => { connected = true; },
+                    ondisconnect: () => {
+                        connected = false;
+                        clearTimeout(timer);
+                        state.copied = false;
+                    },
+                    onclick: async (event: MouseEvent) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+
+                        let copied = await write(attributes.value);
+
+                        if (!connected) {
+                            return;
+                        }
+
+                        clearTimeout(timer);
+                        state.copied = copied;
+
+                        if (!copied) {
+                            attributes.onerror?.();
+                            return;
+                        }
+
+                        timer = setTimeout(() => { state.copied = false; }, attributes.timeout ?? 3000);
+                    }
+                }}
+            >
+                ${() => content(state)}
+            </button>
+        `;
+    }
+);

package/src/components/clipboard/index.ts

@@ -1,5 +1,7 @@
+import copy from './copy';
 import onclick from './onclick';
 import write from './write';
 
 
-export default { onclick, write };
+export default { copy, onclick, write };
+export { copy, onclick, write };

package/src/components/clipboard/onclick.ts

@@ -1,7 +1,6 @@
-import { html, type Attributes, type Renderable } from '@esportsplus/template';
+import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
 import { omit } from '@esportsplus/utilities';
-import template from '~/components/template';
 import write from './write';
 
 
@@ -11,7 +10,7 @@ type A = { timeout?: number, value: string } & Attributes;
 const OMIT = ['timeout', 'value'];
 
 
-export default template.factory<A, (state: { copied: boolean }) => Renderable<unknown>>(
+export default component<A, (state: { copied: boolean }) => Renderable<unknown>>(
     function(attributes, content) {
         let state = reactive({
                 copied: false
@@ -25,7 +24,7 @@ export default template.factory<A, (state: { copied: boolean }) => Renderable<un
                     e.preventDefault();
                     e.stopPropagation();
 
-                    write(attributes.value).then(() => {
+                    void write(attributes.value).then(() => {
                         state.copied = true;
 
                         setTimeout(() => {

package/src/components/counter/index.ts

@@ -1,5 +1,5 @@
 import { html, type Attributes } from '@esportsplus/template';
-import { effect, reactive } from '@esportsplus/reactivity';
+import { effect, onCleanup, reactive, untrack } from '@esportsplus/reactivity';
 import { omit } from '@esportsplus/utilities';
 import './scss/index.scss';
 
@@ -27,88 +27,88 @@ export default (attributes: Attributes & {
                 style: 'currency',
                 currency: currency || 'USD'
             }),
-        rendering = true,
-        state = reactive({
-            length: 0,
-            test: () => 'sds',
-            render: [] as string[]
-        }),
-        render = reactive([] as string[]);
+        animation = reactive({ started: false }),
+        render = reactive([] as { digit: boolean; value: string }[]);
 
     decimals ??= 2;
 
-    effect(() => {
-        if (api.value !== -1) {
-            value = api.value;
-        }
-
-        let padding = (max || value).toFixed(decimals).length - value.toFixed(decimals).length,
-            values = value.toString().padStart( value.toString().length + padding, '1') as any;
-
-        if (formatter) {
-            values = formatter.format(values);
-        }
-        else {
-            values = Number(values).toLocaleString([], {
-                minimumFractionDigits: 0,
-                maximumFractionDigits: decimals
-            });
-        }
-
-        values = values.split('');
+    let stop = effect(() => {
+            let target = api.value === -1 ? value : api.value,
+                started = animation.started;
 
-        if (suffix) {
-            values.push(' ', ...suffix.split(''));
-        }
+            let padding = (max || target).toFixed(decimals).length - target.toFixed(decimals).length,
+                values = target.toString().padStart(target.toString().length + padding, '1') as any;
 
-        state.length = values.length;
+            if (formatter) {
+                values = formatter.format(values);
+            }
+            else {
+                values = Number(values).toLocaleString([], {
+                    minimumFractionDigits: 0,
+                    maximumFractionDigits: decimals
+                });
+            }
 
-        for (let i = 0, n = values.length; i < n; i++) {
-            let value = values[i];
+            values = values.split('');
 
-            if (!isNaN(parseInt(value, 10)) && (rendering === true || padding > 0)) {
-                padding--;
-                value = '0';
+            if (suffix) {
+                values.push(' ', ...suffix.split(''));
             }
 
-            render[i] = value;
-        }
+            untrack(() => {
+                for (let i = 0, n = values.length; i < n; i++) {
+                    let value = values[i],
+                        digit = !isNaN(parseInt(value, 10));
 
-        if (rendering === true) {
-            rendering = false;
-            setTimeout(() => api.value = value, delay || 1000);
-        }
-    });
+                    if (digit && (!started || padding > 0)) {
+                        padding--;
+                        value = '0';
+                    }
 
-    return html`
-        <div class='counter' ${omit(attributes, OMIT)}>
-            ${() => {
-                let n = state.length;
+                    // Preserve the track so CSS can transition between digit positions.
+                    if (render[i]?.digit === digit) {
+                        render[i].value = value;
+                    }
+                    else {
+                        let character = reactive({ digit, value });
 
-                if (n === 0) {
-                    return '';
+                        render[i] = character;
+                    }
+                }
+
+                if (render.length > values.length) {
+                    render.splice(values.length);
                 }
+            });
+        }),
+        timer = setTimeout(() => animation.started = true, delay ?? 1000);
 
-                return html.reactive(render, function (value) {
-                    if (isNaN(parseInt(value, 10))) {
+    onCleanup(() => {
+        clearTimeout(timer);
+        stop();
+    });
+
+    return html`
+        <div class='counter' ${omit(attributes, OMIT)}>
+            ${html.reactive(render, function (character) {
+                    if (!character.digit) {
                         return html`
                             <span class='counter-character counter-character--symbol'>
-                                ${value}
+                                ${() => character.value}
                             </span>
                         `;
                     }
 
                     return html`
-                        <div class=' counter-character'>
-                            <div class='counter-character-track' style='${`--value: ${value}`}'>
+                        <div class='counter-character'>
+                            <div class='counter-character-track' style='${() => `--value: ${character.value}`}'>
                                 <span>9</span>
                                 ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => html`<span>${value}</span>`)}
                                 <span>0</span>
                             </div>
                         </div>
                     `;
-                });
-            }}
+                })}
         </div>
     `;
-};
+};

package/src/components/counter/scss/index.scss

@@ -22,7 +22,6 @@
         font-variant: tabular-nums;
         font-weight: var(--font-weight);
         height: 1lh;
-        line-height: var(--line-height);
         mask: linear-gradient(transparent, white calc(1lh * var(--mask-size)) calc(100% - (1lh * var(--mask-size))), transparent);
         overflow: hidden;
         transform-style: flat;
@@ -32,14 +31,14 @@
             font-weight: var(--font-weight-300);
             opacity: var(--opacity);
             overflow: visible;
-            height: var(--line-height);
+            height: 1lh;
 
             .counter-character-track {
                 span {
                     display: flex;
                     flex-direction: column;
                     align-items: end;
-                    padding: calc((var(--line-height) - var(--font-size)) * 0.2) 0;
+                    padding: calc((1lh - 1em) * 0.2) 0;
                 }
             }
         }
@@ -52,7 +51,7 @@
 
         &-track {
             display: grid;
-            translate: 0 calc((var(--value) + 1) * (var(--line-height) * -1));
+            translate: 0 calc((var(--value) + 1) * (1lh * -1));
             transition: translate var(--transition-duration) var(--timing-function);
 
             span {
@@ -61,4 +60,4 @@
             }
         }
     }
-}
+}

package/src/components/counter/scss/variables.scss

@@ -2,7 +2,6 @@
     // TODO: Switch to clamped font size css variables
     --font-size: clamp(2rem, 4vw + 1rem, 8rem);
     --font-weight: var(--font-weight-400);
-    --line-height: calc(var(--font-size) * 1.5);
     --mask-size: 0.24;
     --timing-function: var(--timing-bounce-out);
     --transition-duration: 2s;

package/src/components/form/input.ts

@@ -1,20 +1,21 @@
 import { Element } from '@esportsplus/template';
 
 
-let key = Symbol();
+// TODO: Needs to be expanded and we need better type for template
+const KEY = Symbol();
 
 
-const get = (element?: Element): { error: string } | undefined => {
+const get = <T extends { error: string }>(element?: Element) => {
     if (element) {
-        return element[key] as { error: string } | undefined;
+        return element[KEY] as T | undefined;
     }
 
     return undefined;
 };
 
-const onrender = (reactive: { error: string }) => {
+const onrender = <T extends { error: string }>(reactive: T) => {
     return (element: Element) => {
-        element[key] = reactive;
+        element[KEY] = reactive;
     };
 };
 

package/src/components/grid/scss/index.scss

@@ -2,7 +2,7 @@
 
 .grid {
     display: grid;
-    grid-gap: var(--gap-horizontal) var(--gap-vertical);
+    grid-gap: var(--gap-vertical) var(--gap-horizontal);
     grid-template-columns: repeat(auto-fit, minmax(var(--min-width), var(--max-width)));
     position: relative;
 

package/src/components/icon/index.ts

@@ -1,9 +1,8 @@
-import { html } from '@esportsplus/template';
-import template from '~/components/template';
+import { component, html } from '@esportsplus/template';
 import './scss/index.scss';
 
 
-export default template.factory(
+export default component(
     (attributes, href: string) => {
         if (href[0] !== '#') {
             href = '#' + href;

package/src/components/icon/scss/variables.scss

@@ -1,7 +1,6 @@
 .icon {
     --color: inherit;
     --height: var(--size);
-    --margin-horizontal: var(--size-300);
     --size: var(--size-400);
     --width: var(--size);
 }

package/src/components/index.ts

@@ -1,31 +1,21 @@
 export { default as accordion } from './accordion';
-export { default as alert } from './alert';
-export { default as back } from './back';
-export { default as button } from './button';
 export { default as checkbox } from './checkbox';
 export { default as clipboard } from './clipboard';
 export { default as counter } from './counter';
-export { default as ellipsis } from './ellipsis';
 export { default as form } from './form';
-export { default as frame } from './frame';
-export { default as highlight } from './highlight';
 export { default as icon } from './icon';
 export { default as input } from './input';
 export { default as json } from './json';
-export { default as loader } from './loader';
 export { default as loading } from './loading';
 export { default as number } from './number';
 export { default as overlay } from './overlay';
 export { default as radio } from './radio';
 export { default as range } from './range';
-export { default as root } from './root';
 export { default as select } from './select';
 export { default as switch } from './switch';
-export { default as scrollbar } from './scrollbar';
 export { default as sidebar } from './sidebar';
-export { default as site } from './site';
-export { default as template } from './template';
 export { default as textarea } from './textarea';
+export { default as toaster, toast } from './toast';
 export { default as tooltip } from './tooltip';
 export { default as truncate } from './truncate';
-export { default as typewriter } from './typewriter';
+export { default as typewriter } from './typewriter';

package/src/components/input/index.ts

@@ -5,7 +5,7 @@ import './scss/index.scss';
 
 
 export default function (
-    this: { attributes?: Attributes },
+    this: { attributes?: Attributes } | void,
     attributes: Attributes & { state?: { active: boolean, error: string } }
 ) {
     let state = attributes.state || reactive({

package/src/components/input/scss/index.scss

@@ -11,21 +11,22 @@
     flex: 1 1 auto;
     flex-wrap: wrap;
     font-size: var(--font-size);
-    line-height: var(--line-height);
     // Necessary To Maintain Height Of Hidden Password Fields In Floating Modals
     // - Password Managers Cause Problems When Fields Are Not Using 'display:hidden' On Password Fields
     min-height: calc((var(--padding-vertical) * 2) + var(--size));
     min-width: 0;
     overflow: hidden;
-    padding: var(--padding-vertical) var(--padding-horizontal);
+    padding:
+        max(0px, calc(var(--padding-vertical) - var(--border-width)))
+        max(0px, calc(var(--padding-horizontal) - var(--border-width)));
     position: relative;
     text-overflow: ellipsis;
     transition:
-        background var(--transition-duration) ease-in-out,
-        border-color var(--transition-duration) ease-in-out,
-        box-shadow var(--transition-duration) ease-in-out,
-        opacity var(--transition-duration) ease-in-out,
-        transform var(--transition-duration) ease-in-out;
+        background var(--transition-duration) var(--transition-timing-function),
+        border-color var(--transition-duration) var(--transition-timing-function),
+        box-shadow var(--transition-duration) var(--transition-timing-function),
+        opacity var(--transition-duration) var(--transition-timing-function),
+        transform var(--transition-duration) var(--transition-timing-function);
     white-space: nowrap;
     width: 100%;
 

package/src/components/input/scss/variables.scss

@@ -19,7 +19,6 @@
     --color-hover: var(--color-default);
     --color-pressed: var(--color-default);
     --font-size: var(--font-size-400);
-    --line-height: var(--line-height-400);
     --padding-horizontal: var(--size-400);
     --padding-vertical: var(--size-400);
     --size: var(--size-400);

package/src/components/link/scss/index.scss

@@ -1,47 +1,22 @@
 @use '/lib';
 @use '/tokens';
 @use 'variables';
+@use '../../text/scss/index';
 
 .link {
+    @extend .text;
     align-content: center;
     background: var(--background);
-    color: var(--color);
     cursor: pointer;
-    display: flex;
     flex-wrap: wrap;
-    font-size: var(--font-size);
     justify-content: flex-start;
-    line-height: var(--line-height);
-    padding: calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));
+    padding:
+        max(0px, calc(var(--padding-vertical) - var(--border-width)))
+        max(0px, calc(var(--padding-horizontal) - var(--border-width)));
     position: relative;
     transition:
-        background var(--transition-duration) ease-in-out,
-        border-color var(--transition-duration) ease-in-out,
-        color var(--transition-duration) ease-in-out,
-        opacity var(--transition-duration) ease-in-out;
-    width: var(--width);
-
-
-    &--underline {
-        @include tokens.state(active hover) {
-            text-decoration: underline;
-        }
-    }
-
-
-    &-hover {
-        transition: opacity 0.3s ease-in-out, 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
-
-        &--one {
-            transform: translateY(0);
-        }
-
-        &--two {
-            @include lib.position(absolute, center);
-            opacity: 0;
-            padding: 0 var(--padding-horizontal);
-            transform: translate(50%, 125%);
-            white-space: nowrap;
-        }
-    }
+        background var(--transition-duration) var(--transition-timing-function),
+        border-color var(--transition-duration) var(--transition-timing-function),
+        color var(--transition-duration) var(--transition-timing-function),
+        opacity var(--transition-duration) var(--transition-timing-function);
 }

package/src/components/link/scss/variables.scss

@@ -11,19 +11,7 @@
     --border-color-default: var(--background);
     --border-color-hover: var(--border-color-default);
     --border-color-pressed: var(--border-color-default);
-    --border-radius: var(--border-radius-400);
-    --border-width: 0px;
-    --color: var(--color-default);
-    --color-active: var(--color-default);
-    --color-default: var(--color-text-400);
-    --color-hover: var(--color-default);
-    --color-pressed: var(--color-default);
-    --font-size: var(--font-size-400);
-    --font-weight: var(--font-weight-500);
-    --line-height: var(--line-height-400);
     --padding-horizontal: 0px;
-    --padding-vertical: var(--size-400);
-    --width: auto;
 
 
     @include tokens.state(active) {