@esportsplus/ui 0.2.10 → 0.3.0

package/src/components/scrollbar/scss/index.scss

@@ -7,25 +7,6 @@
     box-shadow: unset;
 }
 
-.--scrollbar {
-    &-container {
-        display: flex;
-        flex-flow: column;
-        overflow: hidden;
-        position: relative;
-    }
-
-    &-content {
-        height: 100%;
-        margin-right: calc(var(--scrollbar-width) * -1);
-        overflow-x: hidden;
-        overflow-y: scroll;
-        scrollbar-gutter: stable;
-        scroll-behavior: smooth;
-        width: calc(100% + var(--scrollbar-width));
-    }
-}
-
 .scrollbar {
     height: 100%;
     z-index: 9;
@@ -57,4 +38,33 @@
     &--hidden {
         opacity: 0;
     }
+
+
+    &-container {
+        display: flex;
+        flex-flow: column;
+        overflow: hidden;
+        position: relative;
+    }
+
+    &-content {
+        height: 100%;
+        margin-right: calc(var(--scrollbar-width) * -1);
+        overflow-x: hidden;
+        overflow-y: scroll;
+        scrollbar-gutter: stable;
+        scroll-behavior: smooth;
+        width: calc(100% + var(--scrollbar-width));
+
+        &--snap {
+            overflow: auto;
+            scroll-snap-type: both mandatory;
+            overscroll-behavior-x: contain;
+
+            > * {
+                scroll-snap-stop: normal;
+                scroll-snap-align: center;
+            }
+        }
+    }
 }

package/src/components/site/index.ts

@@ -4,24 +4,23 @@ import scrollbar from '~/components/scrollbar';
 
 
 type Data = {
-    class?: string;
+    attributes?: Record<string, unknown>;
     content?: any;
     scrollbar?: Parameters<typeof scrollbar>[0];
 };
 
 
-export default (data: Data) => {
-    let sb = data.scrollbar ??= {};
-
+export default ({ attributes, content, scrollbar: sb }: Data) => {
+    sb ??= {};
     sb.attributes ??= {};
     sb.attributes.style ??= '--background-default: var(--color-black-400);';
     sb.fixed ??= true;
 
-    let { attributes: a, html: h } = scrollbar(sb);
+    let { html: h, parent } = scrollbar(sb);
 
     return html`
-        <section class='site ${data?.class || ''}' ${{ onclick }} ${a}>
-            ${data?.content || ''}
+        <section class='site' ${attributes} ${{ onclick }} ${parent.attributes}>
+            ${content || ''}
             ${h}
         </section>
     `;

package/src/index.ts

@@ -4,7 +4,6 @@ export { default as accordion }from './components/accordion';
 export { default as aurora }from './components/aurora';
 export { default as clipboard }from './components/clipboard';
 export { default as ellipsis }from './components/ellipsis';
-export { default as field }from './components/field';
 export { default as form }from './components/form';
 export { default as json }from './components/json';
 export { default as number }from './components/number';

package/src/tokens/scss/box-shadow.scss

@@ -14,5 +14,9 @@
 $box-shadow: (
     300: box-shadow(2),
     400: box-shadow(4),
-    500: box-shadow(6)
+    500: box-shadow(6),
+
+    glow: #{0px 0px 128px 32px var(--box-shadow-color, #fff),
+        0px 0px 32px 8px var(--box-shadow-color, #fff),
+        0px 0px 8px 0px var(--box-shadow-color, #fff)}
 );

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

@@ -1,12 +1,16 @@
+// https://www.fluid-type-scale.com/calculate?minFontSize=12&minWidth=400&minRatio=1.16&maxFontSize=14&maxWidth=1400&maxRatio=1.2&steps=100%2C200%2C300%2C400%2C500%2C600%2C700%2C800%2C900&baseStep=400&prefix=font-size&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: 8px,
-    200: 10px,
-    300: 12px,
-    400: 14px,
+    100: clamp(0.48rem, 0.04vi + 0.47rem, 0.51rem),
+    200: clamp(0.56rem, 0.08vi + 0.54rem, 0.61rem),
+    300: clamp(0.65rem, 0.13vi + 0.61rem, 0.73rem),
+    400: clamp(0.75rem, 0.2vi + 0.7rem, 0.88rem),
+    500: clamp(0.87rem, 0.29vi + 0.8rem, 1.05rem),
 
     // Primarily Used For Headers h1 - h4
-    500: 16px,
-    600: 24px,
-    700: 32px,
-    800: 40px
+    600: clamp(1.01rem, 0.4vi + 0.91rem, 1.26rem),
+    700: clamp(1.17rem, 0.55vi + 1.03rem, 1.51rem),
+    800: clamp(1.36rem, 0.73vi + 1.18rem, 1.81rem),
+    900: clamp(1.58rem, 0.96vi + 1.33rem, 2.18rem)
 );
+
+

package/utilities/variables.css

@@ -5,5 +5,5 @@
 .--glass{--blur: 24px}
 .--line-height-100{--line-height: var(--line-height-100)}.--line-height-200{--line-height: var(--line-height-200)}.--line-height-300{--line-height: var(--line-height-300)}.--line-height-400{--line-height: var(--line-height-400)}
 .--size{--size: var(--size-400)}.--size-0px{--size: var(--size-0px)}.--size-100{--size: var(--size-100)}.--size-200{--size: var(--size-200)}.--size-300{--size: var(--size-300)}.--size-400{--size: var(--size-400)}.--size-500{--size: var(--size-500)}.--size-600{--size: var(--size-600)}.--size-700{--size: var(--size-700)}.--size-800{--size: var(--size-800)}.--size-900{--size: var(--size-900)}
-.--text-100{--font-size: var(--font-size-100)}.--text-200{--font-size: var(--font-size-200)}.--text-300{--font-size: var(--font-size-300)}.--text-400{--font-size: var(--font-size-400)}.--text-500{--font-size: var(--font-size-500)}.--text-600{--font-size: var(--font-size-600)}.--text-700{--font-size: var(--font-size-700)}.--text-800{--font-size: var(--font-size-800)}.--text-line-through{--line-width: var(--border-width-400)}.--text-line-through-400{--line-width: var(--border-width-400)}.--text-line-through-500{--line-width: var(--border-width-500)}.--text-line-through-600{--line-width: var(--border-width-600)}.--text-line-through-700{--line-width: var(--border-width-700)}.--text-outline{--color: inherit;--stroke-width: var(--border-width-400)}.--text-outline-400{--stroke-width: var(--border-width-400)}.--text-outline-500{--stroke-width: var(--border-width-500)}.--text-outline-600{--stroke-width: var(--border-width-600)}.--text-outline-700{--stroke-width: var(--border-width-700)}
+.--text-100{--font-size: var(--font-size-100)}.--text-200{--font-size: var(--font-size-200)}.--text-300{--font-size: var(--font-size-300)}.--text-400{--font-size: var(--font-size-400)}.--text-500{--font-size: var(--font-size-500)}.--text-600{--font-size: var(--font-size-600)}.--text-700{--font-size: var(--font-size-700)}.--text-800{--font-size: var(--font-size-800)}.--text-900{--font-size: var(--font-size-900)}.--text-line-through{--line-width: var(--border-width-400)}.--text-line-through-400{--line-width: var(--border-width-400)}.--text-line-through-500{--line-width: var(--border-width-500)}.--text-line-through-600{--line-width: var(--border-width-600)}.--text-line-through-700{--line-width: var(--border-width-700)}.--text-outline{--color: inherit;--stroke-width: var(--border-width-400)}.--text-outline-400{--stroke-width: var(--border-width-400)}.--text-outline-500{--stroke-width: var(--border-width-500)}.--text-outline-600{--stroke-width: var(--border-width-600)}.--text-outline-700{--stroke-width: var(--border-width-700)}
 .--width-full{--width: 100%}.--width-half{--width: 50%}

package/build/components/field/checkbox.d.ts

@@ -1,17 +0,0 @@
-import description from './description';
-type Data = {
-    class?: string;
-    field?: {
-        content?: any;
-    };
-    mask?: {
-        class?: string;
-        style?: string;
-    };
-    name?: string;
-    style?: string;
-    title: string;
-    value?: any;
-} & Parameters<typeof description>[0];
-declare const _default: (data: Data) => import("@esportsplus/template").Renderable;
-export default _default;

package/build/components/field/checkbox.js

@@ -1,41 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-import description from './description';
-export default (data) => {
-    let state = reactive({
-        active: false
-    });
-    return html `
-        <div
-            class="field --flex-column ${data?.class || ''} ${() => state.active ? '--active' : ''}"
-            onchange='${(e) => {
-        if (e.target.type !== 'checkbox') {
-            return;
-        }
-        state.active = e.target?.checked;
-    }}'
-            style='${data?.style || ''}'
-        >
-            <div class="field-title --flex-horizontal-space-between --flex-vertical">
-                ${data.title}
-
-                <label
-                    class="field-mask ${(data?.mask?.class || '').indexOf('field-mask--switch') === -1 ? 'field-mask--checkbox' : ''} --margin-left --margin-400 ${data?.mask?.class || ''}"
-                    style='${data?.mask?.style || ''}'
-                >
-                    <input
-                        class='field-tag field-tag--hidden'
-                        ${data.name ? `name='${data.name}'` : ''}
-                        type='checkbox'
-                        value='1'
-                        ${(data?.class || '').indexOf('--active') !== -1 || data?.value ? 'checked' : ''}
-                    >
-                </label>
-            </div>
-
-            ${data?.field?.content || ''}
-
-            ${description(data)}
-        </div>
-    `;
-};

package/build/components/field/description.d.ts

@@ -1,4 +0,0 @@
-declare const _default: (data: {
-    description?: string;
-}) => import("@esportsplus/template").Renderable | "";
-export default _default;

package/build/components/field/description.js

@@ -1,9 +0,0 @@
-import { html } from '@esportsplus/template';
-export default (data) => {
-    if (!data?.description) {
-        return '';
-    }
-    return html `
-        <div class='field-description --margin-top --margin-300'>${data.description}</div>
-    `;
-};

package/build/components/field/error.d.ts

@@ -1,4 +0,0 @@
-declare const _default: (data: {
-    error: string;
-}) => () => import("@esportsplus/template").Renderable | "";
-export default _default;

package/build/components/field/error.js

@@ -1,11 +0,0 @@
-import { html } from '@esportsplus/template';
-export default (data) => {
-    return () => {
-        if (!data.error) {
-            return '';
-        }
-        return html `
-            <div class='field-error --margin-top --margin-300 --text-bold'>${data.error}</div>
-        `;
-    };
-};

package/build/components/field/file.d.ts

@@ -1,18 +0,0 @@
-import description from './description';
-import title from './title';
-type Data = {
-    accept?: string;
-    class?: string;
-    mask?: {
-        class?: string;
-        content?: any;
-        style?: string;
-    };
-    name?: string;
-    placeholder?: string;
-    style?: string;
-    type?: string;
-    value?: unknown;
-} & Parameters<typeof description>[0] & Parameters<typeof title>[0];
-declare const _default: (data: Data) => import("@esportsplus/template").Renderable;
-export default _default;

package/build/components/field/file.js

@@ -1,45 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-import form from '../../components/form';
-import description from './description';
-import error from './error';
-import title from './title';
-export default (data) => {
-    let state = reactive({
-        active: false,
-        error: ''
-    });
-    return html `
-        <div
-            class="field ${data?.class || ''} ${() => state.active ? '--active' : ''} --flex-column"
-            onfocusin='${() => {
-        state.active = true;
-    }}'
-            onfocusout='${() => {
-        state.active = false;
-    }}'
-            style='${data?.style || ''}'
-        >
-            ${title(data)}
-
-            <label
-                class='field-mask field-mask--input --flex-row ${data?.mask?.class || ''} ${(data?.title || (data?.class || '').indexOf('field--optional') !== -1) && '--margin-top'} --margin-300'
-                style='${data?.mask?.style || ''} cursor:pointer;'
-            >
-                <input
-                    ${data?.accept ? `accept='${data.accept}'` : ''}
-                    class='field-tag field-tag--hidden'
-                    name='${data.name}'
-                    onrender='${form.input.attributes(state)}'
-                    type='file'
-                    ${data?.value !== undefined ? `value='${data.value}'` : ''}
-                >
-
-                ${data?.mask?.content || ''}
-            </label>
-
-            ${description(data)}
-            ${error(state)}
-        </div>
-    `;
-};

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

@@ -1,107 +0,0 @@
-import checkbox from './checkbox';
-import select from './select';
-import s from './switch';
-import text from './text';
-declare const _default: {
-    checkbox: (data: {
-        class?: string;
-        field?: {
-            content?: any;
-        };
-        mask?: {
-            class?: string;
-            style?: string;
-        };
-        name?: string;
-        style?: string;
-        title: string;
-        value?: any;
-    } & {
-        description?: string;
-    }) => import("@esportsplus/template").Renderable;
-    file: (data: {
-        accept?: string;
-        class?: string;
-        mask?: {
-            class?: string;
-            content?: any;
-            style?: string;
-        };
-        name?: string;
-        placeholder?: string;
-        style?: string;
-        type?: string;
-        value?: unknown;
-    } & {
-        description?: string;
-    } & {
-        required?: boolean;
-        title?: string;
-    }) => import("@esportsplus/template").Renderable;
-    optional: {
-        select: (data: Parameters<typeof s>[0] & {
-            field: Parameters<typeof select>[0];
-        }) => import("@esportsplus/template").Renderable;
-        text: (data: Parameters<typeof s>[0] & {
-            field: Parameters<typeof text>[0];
-        }) => import("@esportsplus/template").Renderable;
-    };
-    select: (data: {
-        class?: string;
-        effect?: (selected: number | string) => void;
-        mask?: {
-            class?: string;
-            content?: any;
-            style?: string;
-        };
-        name?: string;
-        options: Record<number | string, number | string>;
-        option?: {
-            class?: string;
-            style?: string;
-        };
-        selected?: any;
-        scrollbar?: {
-            style?: string;
-        };
-        style?: string;
-        text?: {
-            class?: string;
-        };
-        tooltip?: {
-            class?: string;
-            direction?: any;
-            style?: string;
-        };
-    } & {
-        description?: string;
-    } & {
-        required?: boolean;
-        title?: string;
-    }) => import("@esportsplus/template").Renderable;
-    switch: (data: Parameters<typeof checkbox>[0]) => import("@esportsplus/template").Renderable;
-    textarea: (data: Parameters<typeof text>[0]) => import("@esportsplus/template").Renderable;
-    text: (data: {
-        class?: string;
-        mask?: {
-            class?: string;
-            content?: any;
-            style?: string;
-        };
-        name?: string;
-        placeholder?: string;
-        style?: string;
-        tag?: {
-            class?: string;
-        };
-        textarea?: boolean;
-        type?: string;
-        value?: unknown;
-    } & {
-        description?: string;
-    } & {
-        required?: boolean;
-        title?: string;
-    }) => import("@esportsplus/template").Renderable;
-};
-export default _default;

package/build/components/field/index.js

@@ -1,8 +0,0 @@
-import checkbox from './checkbox';
-import file from './file';
-import optional from './optional';
-import select from './select';
-import s from './switch';
-import textarea from './textarea';
-import text from './text';
-export default { checkbox, file, optional, select, switch: s, textarea, text };

package/build/components/field/optional.d.ts

@@ -1,12 +0,0 @@
-import sel from './select';
-import s from './switch';
-import tex from './text';
-declare const _default: {
-    select: (data: Parameters<typeof s>[0] & {
-        field: Parameters<typeof sel>[0];
-    }) => import("@esportsplus/template").Renderable;
-    text: (data: Parameters<typeof s>[0] & {
-        field: Parameters<typeof tex>[0];
-    }) => import("@esportsplus/template").Renderable;
-};
-export default _default;

package/build/components/field/optional.js

@@ -1,16 +0,0 @@
-import sel from './select';
-import s from './switch';
-import tex from './text';
-const select = (data) => {
-    data.field.content = sel(Object.assign(data.field || {}, {
-        class: `field--optional ${data?.field?.class || ''}`
-    }));
-    return s(data);
-};
-const text = (data) => {
-    data.field.content = tex(Object.assign(data.field || {}, {
-        class: `field--optional ${data?.field?.class || ''}`
-    }));
-    return s(data);
-};
-export default { select, text };

package/build/components/field/select.d.ts

@@ -1,32 +0,0 @@
-import description from './description';
-import title from './title';
-type Data = {
-    class?: string;
-    effect?: (selected: number | string) => void;
-    mask?: {
-        class?: string;
-        content?: any;
-        style?: string;
-    };
-    name?: string;
-    options: Record<number | string, number | string>;
-    option?: {
-        class?: string;
-        style?: string;
-    };
-    selected?: any;
-    scrollbar?: {
-        style?: string;
-    };
-    style?: string;
-    text?: {
-        class?: string;
-    };
-    tooltip?: {
-        class?: string;
-        direction?: any;
-        style?: string;
-    };
-} & Parameters<typeof description>[0] & Parameters<typeof title>[0];
-declare const _default: (data: Data) => import("@esportsplus/template").Renderable;
-export default _default;

package/build/components/field/select.js

@@ -1,107 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-import form from '../../components/form';
-import scrollbar from '../../components/scrollbar';
-import root from '../../components/root';
-import description from './description';
-import error from './error';
-import title from './title';
-function parse(keys, selected) {
-    let options = {};
-    for (let key of keys) {
-        options[key] = false;
-    }
-    options[selected] = true;
-    return {
-        options,
-        selected: selected || keys[0]
-    };
-}
-function template(data, state) {
-    let { attributes: a, html: h } = scrollbar({
-        attributes: {
-            style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
-        },
-        fixed: true
-    });
-    return html `
-        <div
-            class='tooltip-content tooltip-content--${data?.tooltip?.direction || 's'} ${data?.tooltip?.class || ''} --flex-column --width-full'
-            style='${data?.tooltip?.style || ''}'
-        >
-            <div
-                class='row --flex-column'
-                onclick='${(e) => {
-        let key = e?.target?.dataset?.key;
-        if (key === undefined) {
-            return;
-        }
-        state.options[key] = true;
-        state.options[state.selected] = false;
-        state.active = false;
-        state.selected = key;
-        if (data.effect) {
-            data.effect(key);
-        }
-    }}'
-                ${a}
-            >
-                ${Object.keys(data.options || {}).map((key) => html `
-                    <div
-                        class='link ${data?.option?.class || ''} ${() => state.options[key] ? '--active' : ''} --flex-vertical' data-key='${key}'
-                        style='${data?.option?.style || ''}'
-                    >
-                        <span class="--text-truncate">
-                            ${data.options[key]}
-                        </span>
-                    </div>
-                `)}
-            </div>
-
-            ${h}
-        </div>
-    `;
-}
-export default (data) => {
-    let state = reactive(Object.assign({
-        active: false,
-        error: '',
-        render: false,
-    }, parse(Object.keys(data.options || {}), data.selected)));
-    return html `
-        <div class="field tooltip ${data?.class || ''} ${() => state.active ? '--active' : ''} --flex-column" style='${data?.style || ''}'>
-            ${title(data)}
-
-            <label
-                class="field-mask field-mask--select --flex-row ${data?.mask?.class || ''} ${(data?.title || (data?.class || '').indexOf('field--optional') !== -1) && '--margin-top'} --margin-300 --padding-400"
-                onclick='${() => {
-        state.render = true;
-        state.active = !state.active;
-        if (state.active) {
-            root.onclick.add(() => state.active = false);
-        }
-    }}'
-                style='${data?.mask?.style || ''}'
-            >
-                <input
-                    class='field-tag field-tag--hidden'
-                    name='${data.name}'
-                    onclick='${() => { }}'
-                    onrender='${form.input.attributes(state)}'
-                    value='${() => state.selected}'
-                >
-
-                <div class="field-text ${data?.text?.class || ''}" style='pointer-events: none'>
-                    ${() => data.options[state.selected] || '-'}
-                </div>
-
-                <div class='field-mask-arrow'></div>
-
-                ${() => state.render ? template(data, state) : ''}
-            </label>
-
-            ${description(data)}
-            ${error(state)}
-        </div>
-    `;
-};

package/build/components/field/switch.d.ts

@@ -1,3 +0,0 @@
-import checkbox from './checkbox';
-declare const _default: (data: Parameters<typeof checkbox>[0]) => import("@esportsplus/template").Renderable;
-export default _default;

package/build/components/field/switch.js

@@ -1,6 +0,0 @@
-import checkbox from './checkbox';
-export default (data) => {
-    data.mask = data.mask || {};
-    data.mask.class = `field-mask--switch ${data.mask?.class || ''}`;
-    return checkbox(data);
-};

package/build/components/field/text.d.ts

@@ -1,21 +0,0 @@
-import description from './description';
-import title from './title';
-type Data = {
-    class?: string;
-    mask?: {
-        class?: string;
-        content?: any;
-        style?: string;
-    };
-    name?: string;
-    placeholder?: string;
-    style?: string;
-    tag?: {
-        class?: string;
-    };
-    textarea?: boolean;
-    type?: string;
-    value?: unknown;
-} & Parameters<typeof description>[0] & Parameters<typeof title>[0];
-declare const _default: (data: Data) => import("@esportsplus/template").Renderable;
-export default _default;