@esportsplus/ui 0.8.3 → 0.9.0

package/src/tokens/scss/color.scss

@@ -1,64 +1,68 @@
-@use '../../lib';
-
-$color: (
-    'black': (
-        300: #151726,
-        400: #020412,
-        500: #010312
-    ),
-    'blue': (
-        300: #3755ff,
-        400: #2545ff,
-        500: #1e3def
-    ),
-    'border': (
-        300: #bec3dd,
-        400: #b4b9d2,
-        500: #a5a9c2
-    ),
-    'green': (
-        300: #6aff5c,
-        400: #15ff00,
-        500: #13eb00
-    ),
-    'grey': (
-        300: #f4f9ff,
-        400: #e7f1fa,
-        500: #d4dde6
-    ),
-    'purple': (
-        300: #7d15ff,
-        400: #7300ff,
-        500: #6a00eb
-    ),
-    'red': (
-        300: #ff2a3d,
-        400: #ff0017,
-        500: #eb0015
-    ),
-    'text': (
-        300: #1e243f,
-        400: #171d39,
-        500: #121832
-    ),
-    'white': (
-        300: #fff,
-        400: #fff,
-        500: #fff
-    ),
-    'yellow': (
-        300: #fbff5e,
-        400: #f9ff00,
-        500: #e3eb00
-    )
-);
-
-@function color($keys, $opacity) {
-    $c: $color;
-
-    @each $key in $keys {
-        $c: lib.map-get($c, $key);
-    }
-
-    @return lib.color-change($c, $alpha: $opacity);
-}
+@use '../../lib';
+
+
+$color: (
+    'black': (
+        300: #151726,
+        400: #020412,
+        500: #010312
+    ),
+    'blue': (
+        300: #3755ff,
+        400: #2545ff,
+        500: #1e3def
+    ),
+    'border': (
+        300: #bec3dd,
+        400: #b4b9d2,
+        500: #a5a9c2
+    ),
+    'green': (
+        300: #6aff5c,
+        400: #15ff00,
+        500: #13eb00
+    ),
+    'grey': (
+        300: #f4f9ff,
+        400: #e7f1fa,
+        500: #d4dde6
+    ),
+    'purple': (
+        300: #7d15ff,
+        400: #7300ff,
+        500: #6a00eb
+    ),
+    'red': (
+        300: #ff2a3d,
+        400: #ff0017,
+        500: #eb0015
+    ),
+    'text': (
+        300: #1e243f,
+        400: #171d39,
+        500: #121832
+    ),
+    'white': (
+        300: #fff,
+        400: #fff,
+        500: #fff
+    ),
+    'yellow': (
+        300: #fbff5e,
+        400: #f9ff00,
+        500: #e3eb00
+    )
+);
+
+$colors: lib.list-join(primary secondary, lib.map-keys($color));
+
+
+@function color($keys, $opacity) {
+    $c: $color;
+
+    @each $key in $keys {
+        $c: lib.map-get($c, $key);
+    }
+
+    @return lib.color-change($c, $alpha: $opacity);
+}

package/src/tokens/scss/font-size.scss

@@ -1,16 +1,16 @@
-// https://www.fluid-type-scale.com/calculate?minFontSize=12&minWidth=400&minRatio=1.16&maxFontSize=14&maxWidth=1400&maxRatio=1.32&steps=100%2C200%2C300%2C400%2C500%2C600%2C700%2C800%2C900&baseStep=400&prefix=-&useContainerWidth=false&includeFallbacks=false&useRems=true&remValue=16&decimals=2&previewFont=Montserrat&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1400
-$font-size: (
-    100: clamp(0.48rem, -0.16vi + 0.52rem, 0.38rem),
-    200: clamp(0.56rem, -0.09vi + 0.58rem, 0.5rem),
-    300: clamp(0.65rem, 0.03vi + 0.64rem, 0.66rem),
-    400: clamp(0.75rem, 0.2vi + 0.7rem, 0.88rem),
-    500: clamp(0.87rem, 0.46vi + 0.76rem, 1.16rem),
-
-    // Primarily Used For Headers h1 - h4
-    600: clamp(1.01rem, 0.82vi + 0.8rem, 1.52rem),
-    700: clamp(1.17rem, 1.35vi + 0.83rem, 2.01rem),
-    800: clamp(1.36rem, 2.08vi + 0.84rem, 2.66rem),
-    900: clamp(1.58rem, 3.09vi + 0.8rem, 3.51rem),
-);
-
-
+// https://www.fluid-type-scale.com/calculate?minFontSize=12&minWidth=400&minRatio=1.16&maxFontSize=14&maxWidth=1400&maxRatio=1.32&steps=100%2C200%2C300%2C400%2C500%2C600%2C700%2C800%2C900&baseStep=400&prefix=-&useContainerWidth=false&includeFallbacks=false&useRems=true&remValue=16&decimals=2&previewFont=Montserrat&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1400
+$font-size: (
+    100: clamp(0.48rem, -0.16vi + 0.52rem, 0.38rem),
+    200: clamp(0.56rem, -0.09vi + 0.58rem, 0.5rem),
+    300: clamp(0.65rem, 0.03vi + 0.64rem, 0.66rem),
+    400: clamp(0.75rem, 0.2vi + 0.7rem, 0.88rem),
+    500: clamp(0.87rem, 0.46vi + 0.76rem, 1.16rem),
+
+    // Primarily Used For Headers h1 - h4
+    600: clamp(1.01rem, 0.82vi + 0.8rem, 1.52rem),
+    700: clamp(1.17rem, 1.35vi + 0.83rem, 2.01rem),
+    800: clamp(1.36rem, 2.08vi + 0.84rem, 2.66rem),
+    900: clamp(1.58rem, 3.09vi + 0.8rem, 3.51rem),
+);
+
+

package/src/tokens/scss/font-weight.scss

@@ -1,6 +1,6 @@
-$font-weight: (
-    300: 400,
-    400: 500,
-    500: 600,
-    600: 700
-);
+$font-weight: (
+    300: 400,
+    400: 500,
+    500: 600,
+    600: 700
+);

package/src/tokens/scss/line-height.scss

@@ -1,6 +1,6 @@
-$line-height: (
-    100: 1,
-    200: 1.2,
-    300: 1.4,
-    400: 1.6
-);
+$line-height: (
+    100: 1,
+    200: 1.2,
+    300: 1.4,
+    400: 1.6
+);

package/src/tokens/scss/size.scss

@@ -1,13 +1,13 @@
-$size: (
-    0px: 0px,
-
-    100: 4px,
-    200: 8px,
-    300: 12px,
-    400: 16px,
-    500: 20px,
-    600: 24px,
-    700: 32px,
-    800: 40px,
-    900: 48px
-);
+$size: (
+    0px: 0px,
+
+    100: 4px,
+    200: 8px,
+    300: 12px,
+    400: 16px,
+    500: 20px,
+    600: 24px,
+    700: 32px,
+    800: 40px,
+    900: 48px
+);

package/src/tokens/scss/spacer.scss

@@ -1,10 +1,10 @@
-@use '../../lib';
-@use 'size';
-
-$spacer: (
-    200: 60px,
-    300: 80px,
-    400: 120px,
-    500: 160px,
-    600: 180px,
-);
+@use '../../lib';
+@use 'size';
+
+$spacer: (
+    200: 60px,
+    300: 80px,
+    400: 120px,
+    500: 160px,
+    600: 180px,
+);

package/src/tokens/scss/state.scss

@@ -1,87 +1,85 @@
-/**
- *------------------------------------------------------------------------------
- *
- *  Buttons, Links, And Other Modules Display CSS Properties Based On Module
- *  'State' ( :hover, :active, etc. )
- *
- *  Desired Result:
- *  - Default Colors Assigned To Element;
- *  - On 'highlight' Or ':hover' Display A Slightly Brighter Version Of
- *    The Default Color;
- *  - On 'pressed' Or ':active' Display Slightly Darker Version Of The
- *    Default Color;
- *
- *  End Product Gives Off The Illusion Of A Static -> Hovering -> Pressed
- *  Button Without Dealing With Transforms To Shift Elements.
- *
- *  Mixin Also Handles Removing Duplicate List Keys
- *
- */
-
-@use 'sass:meta';
-@use '../../lib';
-
-$state: (
-    active: '&.--active',
-    inactive: '&:not(.--active)',
-
-    disabled: '&.--disabled',
-    enabled: '&:not(.--disabled)',
-
-    default: '&:not(.--active):not(:hover)',
-    hover: '&:not(.--active):hover',
-    pressed: '&:not(.--active):active'
-);
-
-
-@function state($key, $replace: null) {
-    $selector: lib.map-get($state, $key);
-
-    // To Avoid Overcomplicating The Responsibility Of This Function Limit
-    // Replace Parameter To String Values Only
-    @if $replace {
-        @if meta.type-of($replace) != 'string' or meta.type-of($selector) != 'string' {
-            @error "'lib.string-replace' Cannot Be Used On A List!";
-        }
-
-        $selector: lib.string-replace('&', $replace, $selector);
-    }
-
-    @return $selector;
-}
-
-
-@mixin state($states) {
-    $selector: ();
-
-    @each $s in lib.list-to-list($states) {
-        $section: state($s);
-
-        @if $section {
-            $selector: lib.list-append($selector, $section);
-        }
-    }
-
-    #{lib.list-implode(',', lib.list-unique($selector))} {
-        @content;
-    }
-}
-
-@mixin state-utility($class, $property, $values) {
-    $keys: $values;
-
-    @if meta.type-of($keys) == 'map' {
-        $keys: lib.map-keys($keys);
-    }
-
-    #{$class} {
-        @each $key in $keys {
-            &-#{$key} {
-                --#{$property}-active: var(--color-#{$key}-300);
-                --#{$property}-default: var(--color-#{$key}-400);
-                --#{$property}-hover: var(--color-#{$key}-300);
-                --#{$property}-pressed: var(--color-#{$key}-500);
-            }
-        }
-    }
-}
+/**
+ *------------------------------------------------------------------------------
+ *
+ *  Buttons, Links, And Other Modules Display CSS Properties Based On Module
+ *  'State' ( :hover, :active, etc. )
+ *
+ *  Desired Result:
+ *  - Default Colors Assigned To Element;
+ *  - On 'highlight' Or ':hover' Display A Slightly Brighter Version Of
+ *    The Default Color;
+ *  - On 'pressed' Or ':active' Display Slightly Darker Version Of The
+ *    Default Color;
+ *
+ *  End Product Gives Off The Illusion Of A Static -> Hovering -> Pressed
+ *  Button Without Dealing With Transforms To Shift Elements.
+ *
+ *  Mixin Also Handles Removing Duplicate List Keys
+ *
+ */
+
+@use 'sass:meta';
+@use '../../lib';
+
+$state: (
+    active: '&.--active',
+    inactive: '&:not(.--active)',
+
+    disabled: '&.--disabled',
+    enabled: '&:not(.--disabled)',
+
+    default: '&:not(.--active):not(:hover)',
+    hover: '&:not(.--active):hover',
+    pressed: '&:not(.--active):active'
+);
+
+
+@function state($key, $replace: null) {
+    $selector: lib.map-get($state, $key);
+
+    // To Avoid Overcomplicating The Responsibility Of This Function Limit
+    // Replace Parameter To String Values Only
+    @if $replace {
+        @if meta.type-of($replace) != 'string' or meta.type-of($selector) != 'string' {
+            @error "'lib.string-replace' Cannot Be Used On A List!";
+        }
+
+        $selector: lib.string-replace('&', $replace, $selector);
+    }
+
+    @return $selector;
+}
+
+
+@mixin state($states) {
+    $selector: ();
+
+    @each $s in lib.list-to-list($states) {
+        $section: state($s);
+
+        @if $section {
+            $selector: lib.list-append($selector, $section);
+        }
+    }
+
+    #{lib.list-implode(',', lib.list-unique($selector))} {
+        @content;
+    }
+}
+
+@mixin state-utility($property, $values) {
+    $keys: $values;
+
+    @if meta.type-of($keys) == 'map' {
+        $keys: lib.map-keys($keys);
+    }
+
+    @each $key in $keys {
+        &-#{$key} {
+            --#{$property}-active: var(--color-#{$key}-300);
+            --#{$property}-default: var(--color-#{$key}-400);
+            --#{$property}-hover: var(--color-#{$key}-300);
+            --#{$property}-pressed: var(--color-#{$key}-500);
+        }
+    }
+}

package/src/tokens/scss/transition-duration.scss

@@ -1 +1 @@
-$transition-duration: 0.16s;
+$transition-duration: 0.16s;

package/tsconfig.json

@@ -1,3 +1,6 @@
-{
-    "extends": "@esportsplus/typescript/tsconfig.package.json"
+{
+    "compilerOptions": {
+        "paths": null
+    },
+    "extends": "@esportsplus/typescript/tsconfig.package.json"
 }

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

@@ -1,17 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-type Accordion = HTMLElement & {
-    [key: symbol]: {
-        active: boolean | number;
-    };
-};
-declare const _default: () => {
-    attributes: {
-        class: () => any;
-        onrender: (element: Accordion) => void;
-        style: (element: Accordion) => any;
-    };
-    state: ReturnType<typeof reactive<{
-        active: boolean;
-    }>>;
-};
-export default _default;

package/build/components/accordion/index.js

@@ -1,25 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-let key = Symbol();
-export default () => {
-    let state = reactive({
-        active: 0
-    });
-    return {
-        attributes: {
-            class: () => {
-                return state.active && '--active';
-            },
-            onrender: (element) => {
-                element[key] = state;
-            },
-            style: (element) => {
-                let parent = element.closest('accordion');
-                if (parent && key in parent) {
-                    parent[key].active = (+parent[key].active) + 1;
-                }
-                return state.active && `--max-height: ${element.scrollHeight}`;
-            }
-        },
-        state: state
-    };
-};

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

@@ -1,5 +0,0 @@
-import './scss/index.scss';
-declare const _default: {
-    write: (value: string) => Promise<boolean>;
-};
-export default _default;

package/build/components/clipboard/index.js

@@ -1,3 +0,0 @@
-import write from './write.js';
-import './scss/index.scss';
-export default { write };

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

@@ -1,2 +0,0 @@
-declare const _default: (value: string) => Promise<boolean>;
-export default _default;

package/build/components/clipboard/write.js

@@ -1,9 +0,0 @@
-export default async (value) => {
-    try {
-        await navigator.clipboard.writeText(value);
-        return true;
-    }
-    catch {
-        return false;
-    }
-};

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

@@ -1,13 +0,0 @@
-declare const _default: ({ currency, delay, max, suffix, value }: {
-    currency?: "IGNORE" | "EUR" | "GBP" | "USD";
-    delay?: number;
-    max?: number;
-    suffix?: string;
-    value: number;
-}) => {
-    html: import("@esportsplus/template/build/types").RenderableTemplate;
-    state: Prettify<{ [K in keyof T]: import("@esportsplus/reactivity").Infer<T[K]>; } & {
-        dispose: VoidFunction;
-    }>;
-};
-export default _default;

package/build/components/counter/index.js

@@ -1,72 +0,0 @@
-import { effect, reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-let formatters = {};
-export default ({ currency, delay, max, suffix, value }) => {
-    let api = reactive({ value: -1 }), formatter = currency === 'IGNORE' ? undefined : formatters[currency || 'USD'] ??= new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: currency || 'USD'
-    }), rendering = true, state = reactive({
-        length: 0,
-        render: []
-    });
-    effect(() => {
-        if (api.value !== -1) {
-            value = api.value;
-        }
-        let padding = (max || value).toFixed(2).length - value.toFixed(2).length, values = value.toString().padStart(value.toString().length + padding, '1');
-        if (formatter) {
-            values = formatter.format(values);
-        }
-        else {
-            values = Number(values).toLocaleString();
-        }
-        values = values.split('');
-        if (suffix) {
-            values.push(' ', ...suffix.split(''));
-        }
-        state.length = values.length;
-        for (let i = 0, n = values.length; i < n; i++) {
-            let value = values[i];
-            if (!isNaN(parseInt(value, 10)) && (rendering === true || padding > 0)) {
-                padding--;
-                value = '0';
-            }
-            state.render[i] = value;
-        }
-        if (rendering === true) {
-            rendering = false;
-            setTimeout(() => api.value = value, delay || 1000);
-        }
-    });
-    return {
-        html: html `
-            <div class='counter'>
-                ${() => {
-            let n = state.length;
-            if (n === 0) {
-                return '';
-            }
-            return html.reactive(state.render, function (value, i) {
-                if (isNaN(parseInt(value, 10))) {
-                    return html `
-                                <span class='counter-character counter-character--symbol'>
-                                    ${value}
-                                </span>
-                            `;
-                }
-                return html `
-                            <div class='counter-character ${i > n - 3 ? 'counter-character--fraction' : ''}'>
-                                <div class='counter-character-track' style='${() => `--value: ${this[i]}`}'>
-                                    <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>
-        `,
-        state: api
-    };
-};

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

@@ -1,2 +0,0 @@
-declare const _default: (attributes?: Record<string, string>) => import("@esportsplus/template/build/types").RenderableTemplate;
-export default _default;

package/build/components/ellipsis/index.js

@@ -1,8 +0,0 @@
-import { html } from '@esportsplus/template';
-export default (attributes) => html `
-<div class="ellipsis" ${attributes}>
-    <span></span>
-    <span></span>
-    <span></span>
-</div>
-`;