@esportsplus/ui 0.53.0 → 0.54.0

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,6 +1,7 @@
+import copy from './copy';
 import onclick from './onclick';
 import write from './write';
 
 
-export default { onclick, write };
-export { onclick, write };
+export default { copy, onclick, write };
+export { copy, onclick, write };

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,18 +1,19 @@
 import { Element } from '@esportsplus/template';
 
 
+// TODO: Needs to be expanded and we need better type for template
 const KEY = Symbol();
 
 
-const get = (element?: Element) => {
+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;
     };

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/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,23 +1,16 @@
 export { default as accordion } from './accordion';
-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 sidebar } from './sidebar';
@@ -25,4 +18,4 @@ 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) {

package/src/components/modal/scss/index.scss

@@ -5,8 +5,8 @@
 .modal {
     margin: auto;
     transition:
-        opacity var(--transition-duration) ease-in-out,
-        transform var(--transition-duration) ease-in-out;
+        opacity var(--transition-duration) var(--transition-timing-function),
+        transform var(--transition-duration) var(--transition-timing-function);
     transform-origin: center;
     width: min(var(--max-width), calc(100% - (var(--margin-horizontal) * 2)));
     z-index: 9;
@@ -23,8 +23,8 @@
 
     &-frame {
         transition:
-            opacity var(--transition-duration) ease-in-out,
-            transform var(--transition-duration) ease-in-out;
+            opacity var(--transition-duration) var(--transition-timing-function),
+            transform var(--transition-duration) var(--transition-timing-function);
         transform-origin: center;
 
         @include tokens.state(inactive) {

package/src/components/normalize/scss/index.scss

@@ -9,7 +9,6 @@ textarea {
     border: 0;
     font-family: inherit;
     font-size: inherit;
-    line-height: inherit;
     margin: 0;
     padding: 0;
 

package/src/components/page/scss/index.scss

@@ -14,7 +14,6 @@
     &-title {
         color: var(--color);
         display: block;
-        line-height: var(--line-height);
         position: relative;
         width: 100%;
         z-index: 1;
@@ -25,11 +24,6 @@
         font-size: var(--font-size);
     }
 
-    &-suptitle + &-title,
-    &-title + &-subtitle {
-        margin-top: var(--margin-vertical);
-    }
-
     &-title {
         text-wrap: balance;
     }

package/src/components/page/scss/variables.scss

@@ -7,12 +7,10 @@
         --color: var(--color-default);
         --color-default: var(--color-text-400);
         --font-size: var(--font-size-400);
-        --line-height: var(--line-height-400);
     }
 
     &-title {
         --color: var(--color-default);
         --color-default: var(--color-text-500);
-        --line-height: var(--line-height-400);
     }
 }

package/src/components/radio/index.ts

@@ -1,5 +1,4 @@
 import { factory } from '~/components/checkbox';
-import './scss/index.scss';
 
 
 export default factory('radio');

package/src/components/range/index.ts

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

package/src/components/range/scss/index.scss

@@ -7,11 +7,11 @@
     height: var(--height);
     margin: calc(var(--margin-vertical) + ((var(--thumb-size) - var(--height)) / 2)) var(--margin-horizontal);
     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);
     width: var(--width);
 
     &::-moz-range-thumb,