@esportsplus/ui 0.8.4 → 0.9.2

package/.editorconfig

@@ -1,9 +1,9 @@
-root = true
-
-[*]
-indent_style = space
-indent_size = 4
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-end_of_line = lf
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+end_of_line = lf

package/.gitattributes

@@ -1,2 +1,2 @@
-# Auto detect text files and perform LF normalization
-* text=auto
+# Auto detect text files and perform LF normalization
+* text=auto

package/.github/dependabot.yml

@@ -0,0 +1,23 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
+
+version: 2
+registries:
+  npm-npmjs:
+    token: ${{secrets.NPM_TOKEN}}
+    type: npm-registry
+    url: https://registry.npmjs.org
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    groups:
+      production-dependencies:
+        dependency-type: "production"
+      development-dependencies:
+        dependency-type: "development"
+    registries:
+      - npm-npmjs
+    schedule:
+      interval: "daily"

package/.github/workflows/bump.yml

@@ -0,0 +1,7 @@
+name: bump
+on:
+  push:
+    branches: '**' # only trigger on branches, not on tags
+jobs:
+  bump:
+    uses: esportsplus/workflows/.github/workflows/bump.yml@main

package/.github/workflows/publish.yml

@@ -0,0 +1,14 @@
+name: publish to npm
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+  workflow_run:
+    workflows: [bump]
+    types:
+      - completed
+jobs:
+  publish:
+    secrets:
+        NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN_PUBLISHING }}
+    uses: esportsplus/workflows/.github/workflows/publish.yml@main

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

@@ -1,4 +1,5 @@
 import { reactive } from '@esportsplus/reactivity';
+import './scss/index.scss';
 type Accordion = HTMLElement & {
     [key: symbol]: {
         active: boolean | number;

package/build/components/accordion/index.js

@@ -1,4 +1,5 @@
 import { reactive } from '@esportsplus/reactivity';
+import './scss/index.scss';
 let key = Symbol();
 export default () => {
     let state = reactive({

package/build/components/accordion/scss/index.scss

@@ -0,0 +1,2 @@
+.accordion,.accordion:not(.--active){--max-height:0}.accordion{max-height:var(--max-height);opacity:0;pointer-events:none;transition:max-height var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out}.accordion.--active{opacity:1;pointer-events:auto}
+/*$vite$:1*/

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

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/anchor/index.js

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/anchor/scss/index.scss

@@ -0,0 +1,2 @@
+.anchor{--margin-horizontal:var(--size-400);--margin-vertical:var(--size-400);max-height:calc(var(--max-height,100%) - var(--margin-vertical)*2);max-width:calc(var(--max-width,100%) - var(--margin-horizontal)*2);transition:opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;z-index:9;position:absolute}.anchor:not(.--active){opacity:0}.anchor:not(.--active),.anchor:not(.--active) *{pointer-events:none}.anchor--ne,.anchor--nw{top:var(--margin-vertical)}.anchor--se,.anchor--sw{bottom:var(--margin-vertical)}.anchor--ne,.anchor--se{right:var(--margin-horizontal)}.anchor--nw,.anchor--sw{left:var(--margin-horizontal)}
+/*$vite$:1*/

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

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/banner/index.js

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/banner/scss/index.scss

@@ -0,0 +1,2 @@
+.banner--blur{--blur:24px}.banner--gradient{--from:#03001352;--to:var(--color-black-500)}.banner{z-index:-1;background-position:50%;background-size:cover;position:absolute;inset:0}.banner--backdrop{background-position:bottom;height:80svh}.banner--blur{filter:blur(var(--blur));top:-2svh;left:-2svh;right:-2svh}.banner--blur.banner--backdrop{height:90svh}.banner--fixed{position:fixed}.banner--gradient:before{background:radial-gradient(circle at top,transparent 64%,var(--to)88%),linear-gradient(to bottom,var(--from)0%,var(--to)100%);content:"";z-index:0;position:absolute;inset:0}
+/*$vite$:1*/

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

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/border/index.js

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/border/scss/index.scss

@@ -0,0 +1,2 @@
+.border{--border-color:var(--border-color-default);--border-color-default:var(--color-border-400);--border-style:solid;--border-width:var(--border-width-400);border-top:var(--border-width)var(--border-style)var(--border-color);width:100%;position:relative}.border+.border{display:none}
+/*$vite$:1*/

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

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/bubble/index.js

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/bubble/scss/index.scss

@@ -0,0 +1,2 @@
+.bubble{--background:var(--background-default);--background-default:var(--color-border-400);--border-radius:var(--border-radius-circle);--height:var(--size);--margin-horizontal:var(--size-100);--size:6px;--width:var(--size)}.bubble--bottom-left,.bubble--bottom-right,.bubble--top-left,.bubble--top-right{--position-horizontal:calc(var(--size)/-2);--position-vertical:calc(var(--size)/-2)}.bubble{background:var(--background);border-radius:var(--border-radius);height:var(--height);width:var(--width)}.bubble--bottom-left,.bubble--bottom-right,.bubble--top-left,.bubble--top-right{position:absolute}.bubble--bottom-left,.bubble--top-left{left:var(--position-horizontal)}.bubble--bottom-right,.bubble--top-right{right:var(--position-horizontal)}.bubble--bottom-left,.bubble--bottom-right{bottom:var(--position-vertical)}.bubble--top-left,.bubble--top-right{top:var(--position-vertical)}
+/*$vite$:1*/

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

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/button/index.js

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/button/scss/index.scss

@@ -0,0 +1,2 @@
+.button{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--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-400);--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-active:var(--box-shadow-300);--box-shadow-default:none;--box-shadow-hover:var(--box-shadow-400);--box-shadow-pressed:none;--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-400);--line-height:var(--line-height-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400);--width:auto}.button.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active)}.button:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover)}.button:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed)}.button--processing{--animation-duration:.64s;--border-width:var(--border-width-400);--processing-color:var(--color);--size:var(--size-400)}.button--skeleton{--animation-duration:6.4s}.button{background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width))calc(var(--padding-horizontal) - var(--border-width));transition:all var(--transition-duration)ease-in-out;width:var(--width);flex-wrap:wrap;place-content:center;align-items:center;display:flex;position:relative}.button:after{border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out;z-index:0;position:absolute;inset:0}.button--flat:after{display:none}.button--processing{color:#0000;pointer-events:none}.button--processing:before{animation:buttonProcessing var(--animation-duration)infinite linear;border:var(--border-width)solid color-mix(in srgb,var(--processing-color),transparent 90%);border-left-color:var(--processing-color);content:"";height:var(--size);width:var(--size);border-top-color:#0000;border-right-color:#0000;border-radius:100%;position:absolute;bottom:50%;right:50%;transform:translate(50%,50%)}.button--processing *{opacity:0}@keyframes buttonProcessing{0%{transform:translate(50%,50%)rotate(0)}to{transform:translate(50%,50%)rotate(359deg)}}.button--skeleton{animation:var(--animation-duration)ease-in-out infinite buttonSkeleton;background-image:linear-gradient(270deg,var(--background-pressed),var(--background-default),var(--background-default),var(--background-pressed));color:#0000;pointer-events:none;background-size:400% 100%}.button--skeleton *{opacity:0}@keyframes buttonSkeleton{0%{background-position:200% 0}to{background-position:-200% 0}}.button--top-left,.button--top-right{top:calc((var(--padding-vertical) + var(--line-height)/2)*-1);position:absolute}.button--top-left{left:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--top-right{right:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--underline.--active,.button--underline:not(.--active):hover{text-decoration:underline}
+/*$vite$:1*/

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

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/card/index.js

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/card/scss/index.scss

@@ -0,0 +1,2 @@
+.card{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--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-400);--box-shadow:var(--box-shadow-default);--box-shadow-active:var(--box-shadow-300);--box-shadow-default:none;--box-shadow-hover:var(--box-shadow-300);--box-shadow-pressed:none;--padding-horizontal:0px;--padding-vertical:0px;--width:auto}.card.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active)}.card:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover)}.card:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed)}.card{background:var(--background);border-radius:var(--border-radius);padding:var(--padding-vertical)var(--padding-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,max-height var(--transition-duration)ease-in-out;width:var(--width);position:relative}.card:after{border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out;z-index:0;position:absolute;inset:0}.card--flat:after{display:none}
+/*$vite$:1*/

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

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

package/build/components/clipboard/index.js

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

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

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/container/index.js

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/container/scss/index.scss

@@ -0,0 +1,2 @@
+.container{--margin-horizontal:var(--size-600);--margin-vertical:0px;--max-width:1400px;margin:var(--margin-vertical)auto;width:min(var(--max-width),100% - var(--margin-horizontal)*2);flex-wrap:wrap;justify-content:flex-start;display:flex;position:relative}
+/*$vite$:1*/

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

@@ -1,3 +1,4 @@
+import './scss/index.scss';
 declare const _default: ({ currency, delay, max, suffix, value }: {
     currency?: "IGNORE" | "EUR" | "GBP" | "USD";
     delay?: number;

package/build/components/counter/index.js

@@ -1,5 +1,6 @@
 import { effect, reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
+import './scss/index.scss';
 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', {
@@ -39,8 +40,8 @@ export default ({ currency, delay, max, suffix, value }) => {
         }
     });
     return {
-        html: html `
-            <div class='counter'>
+        html: html `
+            <div class='counter'>
                 ${() => {
             let n = state.length;
             if (n === 0) {
@@ -48,24 +49,29 @@ export default ({ currency, delay, max, suffix, value }) => {
             }
             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 `
+                                <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>
+                return html `
+                            <div
+                                class='
+                                    ${i > n - 3 && 'counter-character--fraction'}
+                                    counter-character
+                                '
+                            >
+                                <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>
+        }}
+            </div>
         `,
         state: api
     };

package/build/components/counter/scss/index.scss

@@ -0,0 +1,2 @@
+.counter{--font-size:clamp(2rem,4vw + 1rem,8rem);--line-height:calc(var(--font-size)*1.5);--mask-size:.24;--timing-function:var(--timing-bounce-out);--transition-duration:2s}.counter-character{--font-weight:var(--font-weight-400);--scale:1}.counter-character--fraction,.counter-character--symbol{--opacity:.8}.counter-character--fraction{--font-weight:var(--font-weight-300);--scale:.75}.counter-character--symbol:first-child{--scale:.8}.counter{transform-style:flat;place-items:center;gap:2px;transition:transform .5s 2s;display:flex}.counter-character,.counter-character-track span{background:linear-gradient(#fafafa 50%,#737373) fixed;color:#0000;transform-style:flat;-webkit-background-clip:text;background-clip:text}.counter-character{font-size:var(--font-size);font-variant:tabular-nums;font-weight:var(--font-weight);height:1lh;line-height:var(--line-height);-webkit-mask:linear-gradient(transparent,white calc(1lh*var(--mask-size))calc(100% - 1lh*var(--mask-size)),transparent);-webkit-mask:linear-gradient(transparent,white calc(1lh*var(--mask-size))calc(100% - 1lh*var(--mask-size)),transparent);mask:linear-gradient(transparent,white calc(1lh*var(--mask-size))calc(100% - 1lh*var(--mask-size)),transparent);transform-style:flat;display:grid;overflow:hidden}.counter-character--fraction{font-size:calc(var(--font-size)*var(--scale));font-weight:var(--font-weight-300);opacity:var(--opacity);height:var(--line-height);overflow:visible}.counter-character--fraction .counter-character-track span{padding:calc((var(--line-height) - var(--font-size))*.2)0;flex-direction:column;align-items:end;display:flex}.counter-character--symbol{font-size:calc(var(--font-size)*var(--scale));opacity:var(--opacity);margin-right:.1ch}.counter-character-track{translate:0 calc((var(--value) + 1)*var(--line-height)*-1);transition:translate var(--transition-duration)var(--timing-function);display:grid}.counter-character-track span{transform-style:flat;height:1lh}
+/*$vite$:1*/

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

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

package/build/components/ellipsis/index.js

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

package/build/components/ellipsis/scss/index.scss

@@ -0,0 +1,2 @@
+.ellipsis{--animation-duration:1.24s;--marign-horizontal:var(--size-100);--size:var(--size-200)}.ellipsis span{animation:ellipsis var(--animation-duration)infinite linear;background-color:var(--color);height:var(--size);margin:0 var(--margin-horizontal);width:var(--size);border-radius:100%;display:inline-block}.ellipsis span :nth-child(2){animation-delay:.24s}.ellipsis span :nth-child(3){animation-delay:.48s}@keyframes ellipsis{0%,to{opacity:.16}20%{opacity:1}}
+/*$vite$:1*/

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

@@ -0,0 +1,13 @@
+type Data = {
+    class?: string;
+    content?: unknown;
+    description?: unknown;
+    mask?: Record<string, unknown>;
+    name?: string;
+    style?: string;
+    tag?: Record<string, unknown>;
+    title: string;
+    value?: unknown;
+} & Record<string, unknown>;
+declare const _default: (data: Data) => import("@esportsplus/template/build/types").RenderableTemplate;
+export default _default;

package/build/components/field/checkbox.js

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

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

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

package/build/components/field/description.js

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

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

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

package/build/components/field/error.js

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

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

@@ -0,0 +1,17 @@
+type Data = {
+    accept?: string;
+    class?: string;
+    description?: unknown;
+    mask?: {
+        content?: unknown;
+    } & Record<string, unknown>;
+    name?: string;
+    placeholder?: string;
+    required?: boolean;
+    style?: string;
+    tag?: Record<string, unknown>;
+    title?: unknown;
+    value?: unknown;
+} & Record<string, unknown>;
+declare const _default: (data: Data) => import("@esportsplus/template/build/types").RenderableTemplate;
+export default _default;

package/build/components/field/file.js

@@ -0,0 +1,51 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import { omit, pick } from '@esportsplus/utilities';
+import form from '../../components/form/index.js';
+import description from './description.js';
+import error from './error.js';
+import title from './title.js';
+const FIELD_OMIT = ['accept', 'mask', 'name', 'placeholder', 'value'];
+const MASK_OMIT = ['content'];
+const TAG_PICK = ['accept', 'name', 'required', 'value'];
+export default (data) => {
+    let state = reactive({
+        active: false,
+        error: ''
+    });
+    data.mask ??= {};
+    data.tag ??= {};
+    data.tag.type = 'file';
+    data.tag.onrender = form.input.onrender(state);
+    return html `
+        <div
+            class='${() => state.active && '--active'} field --flex-column'
+            onfocusin='${() => {
+        state.active = true;
+    }}'
+            onfocusout='${() => {
+        state.active = false;
+    }}'
+            ${omit(data, FIELD_OMIT)}
+        >
+            ${title(data)}
+
+            <label
+                class='field-mask field-mask--input --flex-row'
+                style='cursor:pointer;'
+                ${omit(data.mask, MASK_OMIT)}
+            >
+                <input
+                    class='field-tag field-tag--hidden'
+                    ${pick(data, TAG_PICK)}
+                    ${data.tag}
+                >
+
+                ${data.mask?.content || ''}
+            </label>
+
+            ${description(data)}
+            ${error(state)}
+        </div>
+    `;
+};

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

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

package/build/components/field/index.js

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

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

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

package/build/components/field/optional.js

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

package/build/components/field/scss/index.scss

@@ -0,0 +1,2 @@
+.field{--margin-horizontal:0px;--margin-vertical:var(--size-300);--width:100%}.field--optional{--max-height:0;--max-height-active:0}.field.--active .field--optional{--max-height:var(--max-height-active)}.field-description,.field-error{--font-size:var(--font-size-300)}.field-error{--color:var(--color-red-400)}.field-mask{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:var(--border-radius-400);--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-active:var(--box-shadow-400);--box-shadow-default:var(--box-shadow-300);--box-shadow-hover:var(--box-shadow-400);--box-shadow-pressed:none;--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);--outline-opacity:var(--outline-opacity-default);--outline-opacity-active:.32;--outline-opacity-default:0;--outline-opacity-hover:0;--outline-opacity-pressed:0;--outline-spacing:0px;--outline-width:var(--outline-width-default);--outline-width-active:4px;--outline-width-default:0px;--outline-width-hover:0px;--outline-width-pressed:0px;--padding-horizontal:0px;--padding-vertical:var(--size-400)}.field.--active>.field-mask,.field.--active :not(.field) .field-mask{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active);--outline-opacity:var(--outline-opacity-active);--outline-width:var(--outline-width-active)}label.field:not(.--active):not(.--active):hover>.field-mask,.field:not(.--active):not(label) .field-mask:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover);--outline-opacity:var(--outline-opacity-hover);--outline-width:var(--outline-width-hover)}label.field:not(.--active):not(.--active):active>.field-mask,.field:not(.--active):not(label) .field-mask:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed);--outline-opacity:var(--outline-opacity-pressed);--outline-width:var(--outline-width-pressed)}.field-mask--outline:not(.--active):active{--border-color:var(--border-color-default)}.field-mask--outline:not(.--active):active:before{--outline-width:0px}.field-required{--border-radius:var(--border-radius-circle);--size:6px}.field-title{--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)}.field.--active .field-title{--color:var(--color-active)}.field:not(.--active):hover .field-title{--color:var(--color-hover)}.field:not(.--active):active .field-title{--color:var(--color-pressed)}.field label.field:not(.--active):hover,.field:not(label):not(.--active) .field-mask:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover);--outline-opacity:var(--outline-opacity-hover);--outline-width:var(--outline-width-hover)}.field label.field:not(.--active):active,.field:not(label):not(.--active) .field-mask:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed);--outline-opacity:var(--outline-opacity-pressed);--outline-width:var(--outline-width-pressed)}.field-mask--checkbox,.field-mask--radio,.field-mask--switch{--accent:var(--accent-default);--accent-active:var(--accent-default);--accent-default:var(--color-white-400);--accent-hover:var(--accent-default);--accent-pressed:var(--accent-default);--height:var(--size);--opacity:var(--opacity-default);--opacity-active:var(--opacity-default);--opacity-default:1;--opacity-hover:var(--opacity-default);--opacity-pressed:var(--opacity-default);--rotate:0deg;--scale:var(--scale-default);--scale-active:var(--scale-default);--scale-default:1;--scale-hover:var(--scale-default);--scale-pressed:var(--scale-default);--size:var(--size-600);--width-switch:40px}.field-mask--checkbox:before,.field-mask--radio:before,.field-mask--switch:before{--translateX:0px;--translateY:0px}.field-mask--checkbox label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--checkbox:not(.--active):hover,.field-mask--radio label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--radio:not(.--active):hover,.field-mask--switch label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--switch:not(.--active):hover{--accent:var(--accent-hover);--opacity:var(--opacity-hover);--scale:var(--scale-hover)}.field-mask--checkbox label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--checkbox:not(.--active):active,.field-mask--radio label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--radio:not(.--active):active,.field-mask--switch label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--switch:not(.--active):active{--accent:var(--accent-pressed);--opacity:var(--opacity-pressed);--scale:var(--scale-pressed)}.field.--active .field-mask--checkbox,.field.--active .field-mask--radio,.field.--active .field-mask--switch{--accent:var(--accent-active);--opacity:var(--opacity-active);--scale:var(--scale-active)}.field-mask--checkbox,.field-mask--radio{--margin-horizontal:calc(var(--width-switch) - var(--width));--width:var(--height)}.field-mask--radio:before,.field-mask--switch:before{--box-shadow:0 1px 0 #00000029}.field-mask--checkbox{--border-radius:var(--border-radius-300);--rotate:45deg;--scale-active:1;--scale-default:0;--scale-hover:1.08;--scale-pressed:.98}.field-mask--checkbox:before{--box-shadow:1px 1px 0 #00000029;--border-width:5px;--height:110%;--translateX:108%;--translateY:8%;--width:50%}.field:not(.--active):not(:hover) .field-mask--checkbox:before{--translateY:100%}.field-mask--radio{--border-radius:var(--border-radius-circle);--opacity-active:1;--opacity-default:.4;--scale-active:.9;--scale-default:0;--scale-hover:.8;--scale-pressed:.7}.field-mask--radio:before{--height:calc((var(--size)/2) - (var(--border-width)*2));--translateX:50%;--translateY:50%;--width:var(--height)}.field-mask--switch{--border-radius:var(--border-radius-curved);--padding-horizontal:var(--border-width-400);--padding-vertical:var(--border-width-400);--width:var(--width-switch)}.field-mask--switch:before{--height:calc(var(--size) - (var(--border-width)*2) - (var(--padding-vertical)*2));--width:var(--height)}.field.--active .field-mask--switch:before{--translateX:calc(var(--width-switch) - (var(--border-width)*2) - var(--height) - (var(--padding-horizontal)*2))}.field-mask--input,.field-mask--select{--font-size:var(--font-size-400);--line-height:var(--line-height-400)}.field-mask--input{--size:var(--size-400)}.field-mask--select{--arrow-spacer:1px;--arrow-size:6px}.field-mask-arrow{--border-width:var(--border-width-500)}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;background:0 0;border:0;border-radius:0;margin:0;padding:0}button,button:active,button:focus,button:hover,input,input:active,input:focus,input:hover,select,select:active,select:focus,select:hover,textarea,textarea:active,textarea:focus,textarea:hover{outline:none}button:invalid,input:invalid,select:invalid,textarea:invalid{box-shadow:none}form{width:100%;margin:0;padding:0}label{cursor:pointer}.field{gap:var(--margin-vertical)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,color var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out;width:var(--width);z-index:1;display:flex;position:relative}.field:not(.--active):hover{z-index:8}.field.--active{z-index:9}.field--optional{max-height:var(--max-height);opacity:0;pointer-events:none;transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,box-shadow var(--transition-duration)ease-in-out,color var(--transition-duration)ease-in-out,max-height var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out}.field.--active .field--optional{opacity:1;pointer-events:auto}.field-description,.field-error,.field-title{color:var(--color);font-size:var(--font-size);word-wrap:break-word;width:100%;position:relative}.field-description:empty,.field-error:empty,.field-title:empty{height:0;margin:0}.field-error{animation:.32s linear fieldError}@keyframes fieldError{0%{transform:translate(8px)}20%{transform:translate(-8px)}40%{transform:translate(4px)}60%{transform:translate(-4px)}80%{transform:translate(2px)}to{transform:translate(0)}}.field-mask:after{border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;z-index:0;position:absolute;inset:0}.field-mask--flat:after{display:none}.field-mask--outline:before{box-shadow:0 0 0 var(--outline-width)var(--border-color);border-radius:var(--border-radius);content:"";opacity:var(--outline-opacity);pointer-events:none;transition:box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out;z-index:0;position:absolute;inset:0}.field-required{background:var(--background);border-radius:var(--border-radius);height:var(--size);width:var(--size)}.field-tag--hidden{appearance:none;opacity:0;pointer-events:none;z-index:-1;width:0;height:0;position:absolute;top:0;left:0}.field-title{font-weight:var(--font-weight);z-index:1}.field-mask--checkbox,.field-mask--radio,.field-mask--switch{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:var(--border-width);flex:0 0 var(--width);height:var(--height);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;width:var(--width);position:relative}.field-mask--checkbox:invalid,.field-mask--checkbox:required,.field-mask--radio:invalid,.field-mask--radio:required,.field-mask--switch:invalid,.field-mask--switch:required{box-shadow:none}.field-mask--checkbox:before,.field-mask--radio:before,.field-mask--switch:before{box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX),var(--translateY))rotate(var(--rotate))scale(var(--scale));width:var(--width)}.field-mask--checkbox .field-tag,.field-mask--radio .field-tag,.field-mask--switch .field-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}.field-mask--checkbox:before,.field-mask--radio:before{position:absolute;bottom:50%;right:50%}.field-mask--radio:before,.field-mask--switch:before{background:var(--accent);border-radius:inherit;transform-origin:50%}.field-mask--checkbox:before{border-bottom:var(--border-width)solid var(--accent);border-right:var(--border-width)solid var(--accent);transform-origin:0}.field-mask--switch:before{top:var(--padding-vertical);left:var(--padding-horizontal);position:absolute}.field-mask--input,.field-mask--select{background:var(--background);border:var(--border-width)var(--border-style)var(--border-color);border-radius:var(--border-radius);font-size:var(--font-size);line-height:var(--line-height);flex-wrap:wrap;align-items:center;width:100%;display:flex;position:relative}.field-mask--input:invalid,.field-mask--input:required,.field-mask--select:invalid,.field-mask--select:required{box-shadow:none}.field-mask--input,.field-mask--input .field-tag,.field-mask--select,.field-mask--select .field-tag{color:var(--color)}.field-mask--input .field-tag,.field-mask--select .field-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.field-mask--input{cursor:text;min-height:calc(var(--padding-vertical)*2 + var(--size))}.field-mask--input .field-tag{padding:var(--padding-vertical)var(--padding-horizontal);flex:auto;min-width:0}.field-mask--input .field-tag[type=number]{appearance:textfield}.field-mask--input textarea.field-tag{white-space:normal}.field-mask--select{cursor:pointer;padding:var(--padding-vertical)calc(var(--padding-horizontal)/1.5 + var(--arrow-size))var(--padding-vertical)var(--padding-horizontal)}.field-mask--select.--padding{padding-right:calc(var(--padding-horizontal)*1.5 + var(--arrow-size))}.field-mask-arrow{right:calc(var(--padding-horizontal) + var(--arrow-spacer));bottom:calc(50% + var(--arrow-spacer));border-color:var(--border-color);border-style:var(--border-style);border-width:0 var(--border-width)var(--border-width)0;content:"";height:var(--arrow-size);width:var(--arrow-size);position:absolute;transform:translateY(50%)rotate(45deg)}.field-text{padding-right:var(--padding-horizontal)}
+/*$vite$:1*/