@esportsplus/ui 0.24.4 → 0.25.0

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

@@ -0,0 +1,11 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    'checkbox-tag'?: Attributes;
+    state?: {
+        active: boolean;
+        error: string;
+    };
+};
+export default function (attributes?: A): Node;
+export {};

package/build/components/checkbox/index.js

@@ -0,0 +1,33 @@
+import { reactive, root } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
+import form from '../../components/form/index.js';
+import './scss/index.scss';
+const OMIT = ['checkbox-tag'];
+export default function (attributes) {
+    let a = attributes?.['checkbox-tag'], state = attributes?.state || reactive({
+        active: false,
+        error: ''
+    });
+    if (a?.checked) {
+        state.active = true;
+    }
+    return html `
+        <div class='checkbox ${() => state.active && '--active'}' ${a ? omit(attributes, OMIT) : attributes}>
+            <input
+                class='checkbox-tag'
+                type='checkbox'
+                ${{
+        checked: a?.checked || root(() => state.active),
+        onchange: (e) => {
+            state.active = e.target.checked;
+        },
+        onrender: form.input.onrender(state),
+        value: a?.value || 1
+    }}
+                ${a}
+            >
+        </div>
+    `;
+}
+;

package/build/components/checkbox/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.checkbox{--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-300);--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--height:var(--size);--margin-horizontal:calc(var(--width-switch) - var(--width));--opacity:var(--opacity-default);--opacity-active:var(--opacity-default);--opacity-default:1;--opacity-hover:var(--opacity-default);--opacity-pressed:var(--opacity-default);--rotate:45deg;--scale:var(--scale-default);--scale-active:1;--scale-default:0;--scale-hover:1.08;--scale-pressed:.98;--size:var(--size-600);--width:var(--height);--width-switch:40px}.checkbox:before{--border-width:5px;--box-shadow:1px 1px 0 #00000029;--height:110%;--translateX:108%;--translateY:8%;--width:50%}.field:not(.--active):not(:hover) .checkbox:before{--translateY:100%}.checkbox label:not(.--active):not(.--active):hover,.checkbox:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover);--opacity:var(--opacity-hover);--scale:var(--scale-hover)}.checkbox label:not(.--active):not(.--active):active,.checkbox:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed);--opacity:var(--opacity-pressed);--scale:var(--scale-pressed)}.checkbox.--active{--opacity:var(--opacity-active);--scale:var(--scale-active)}.checkbox{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}.checkbox:invalid,.checkbox:required{box-shadow:none}.checkbox:before{border-bottom:var(--border-width)solid var(--accent);border-right:var(--border-width)solid var(--accent);box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX),var(--translateY))rotate(var(--rotate))scale(var(--scale));transform-origin:bottom;width:var(--width);position:absolute;bottom:50%;right:92%}.checkbox-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}}
+/*$vite$:1*/

package/build/components/index.d.ts

@@ -5,17 +5,18 @@ export * as border from './border/index.js';
 export * as bubble from './bubble/index.js';
 export * as button from './button/index.js';
 export * as card from './card/index.js';
+export { default as checkbox } from './checkbox/index.js';
 export { default as clipboard } from './clipboard/index.js';
 export * as container from './container/index.js';
 export { default as counter } from './counter/index.js';
 export { default as ellipsis } from './ellipsis/index.js';
-export { default as field } from './field/index.js';
 export { default as form } from './form/index.js';
 export * as frame from './frame/index.js';
 export * as grid from './grid/index.js';
 export * as group from './group/index.js';
 export { default as highlight } from './highlight/index.js';
 export { default as icon } from './icon/index.js';
+export { default as input } from './input/index.js';
 export { default as json } from './json/index.js';
 export * as link from './link/index.js';
 export { default as loader } from './loader/index.js';
@@ -24,13 +25,18 @@ export * as modal from './modal/index.js';
 export { default as number } from './number/index.js';
 export { default as overlay } from './overlay/index.js';
 export * from './page/index.js';
+export { default as radio } from './radio/index.js';
+export { default as range } from './range/index.js';
 export { default as root } from './root/index.js';
 export * as row from './row/index.js';
+export { default as select } from './select/index.js';
+export { default as switch } from './switch/index.js';
 export { default as scrollbar } from './scrollbar/index.js';
 export { default as sidebar } from './sidebar/index.js';
 export { default as site } from './site/index.js';
 export { default as template } from './template/index.js';
 export * as text from './text/index.js';
+export { default as textarea } from './textarea/index.js';
 export * as thumbnail from './thumbnail/index.js';
 export { default as tooltip } from './tooltip/index.js';
 export { default as truncate } from './truncate/index.js';

package/build/components/index.js

@@ -5,17 +5,18 @@ export * as border from './border/index.js';
 export * as bubble from './bubble/index.js';
 export * as button from './button/index.js';
 export * as card from './card/index.js';
+export { default as checkbox } from './checkbox/index.js';
 export { default as clipboard } from './clipboard/index.js';
 export * as container from './container/index.js';
 export { default as counter } from './counter/index.js';
 export { default as ellipsis } from './ellipsis/index.js';
-export { default as field } from './field/index.js';
 export { default as form } from './form/index.js';
 export * as frame from './frame/index.js';
 export * as grid from './grid/index.js';
 export * as group from './group/index.js';
 export { default as highlight } from './highlight/index.js';
 export { default as icon } from './icon/index.js';
+export { default as input } from './input/index.js';
 export { default as json } from './json/index.js';
 export * as link from './link/index.js';
 export { default as loader } from './loader/index.js';
@@ -24,13 +25,18 @@ export * as modal from './modal/index.js';
 export { default as number } from './number/index.js';
 export { default as overlay } from './overlay/index.js';
 export * from './page/index.js';
+export { default as radio } from './radio/index.js';
+export { default as range } from './range/index.js';
 export { default as root } from './root/index.js';
 export * as row from './row/index.js';
+export { default as select } from './select/index.js';
+export { default as switch } from './switch/index.js';
 export { default as scrollbar } from './scrollbar/index.js';
 export { default as sidebar } from './sidebar/index.js';
 export { default as site } from './site/index.js';
 export { default as template } from './template/index.js';
 export * as text from './text/index.js';
+export { default as textarea } from './textarea/index.js';
 export * as thumbnail from './thumbnail/index.js';
 export { default as tooltip } from './tooltip/index.js';
 export { default as truncate } from './truncate/index.js';

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

@@ -0,0 +1,21 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+declare const _default: {
+    (): ReturnType<(this: {
+        attributes?: Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    <T extends Attributes>(attributes: T): ReturnType<(this: {
+        attributes?: Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    <T extends import("@esportsplus/template").Renderable<any>>(content: T): ReturnType<(this: {
+        attributes?: Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    (attributes: Attributes, content: import("@esportsplus/template").Renderable<any>): ReturnType<(this: {
+        attributes?: Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+};
+export default _default;

package/build/components/input/index.js

@@ -0,0 +1,38 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
+import form from '../../components/form/index.js';
+import template from '../../components/template/index.js';
+import './scss/index.scss';
+const OMIT = ['input-tag'];
+export default template.factory(function (attributes, content) {
+    let a = attributes['input-tag'], state = attributes.state || reactive({
+        active: false,
+        error: ''
+    });
+    return html `
+            <label
+                class='input'
+                ${{
+        class: () => state.active && '--active',
+        onfocusin: () => {
+            state.active = true;
+        },
+        onfocusout: () => {
+            state.active = false;
+        }
+    }}
+                ${a ? omit(attributes, OMIT) : attributes}
+            >
+                <input
+                    class='input-tag'
+                    ${{
+        onrender: form.input.onrender(state),
+        type: (attributes.type || 'text')
+    }}
+                    ${a}
+                >
+                ${content}
+            </label>
+        `;
+});

package/build/components/input/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.input{--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-default: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);--line-height:var(--line-height-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400);--size:var(--size-400)}.input:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover)}.input:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed)}.input.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active)}.input{background:var(--background);border:var(--border-width)var(--border-style)var(--border-color);border-radius:var(--border-radius);cursor:text;font-size:var(--font-size);line-height:var(--line-height);min-height:calc(var(--padding-vertical)*2 + var(--size));text-overflow:ellipsis;white-space:nowrap;flex-wrap:wrap;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}.input:invalid,.input:required{box-shadow:none}.input-tag{color:var(--color);padding:var(--padding-vertical)var(--padding-horizontal);flex:auto;min-width:0}.input-tag[type=number]{appearance:textfield}}
+/*$vite$:1*/

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

@@ -0,0 +1,11 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    'radio-tag'?: Attributes;
+    state?: {
+        active: boolean;
+        error: string;
+    };
+};
+export default function (attributes?: A): Node;
+export {};

package/build/components/radio/index.js

@@ -0,0 +1,33 @@
+import { reactive, root } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
+import form from '../../components/form/index.js';
+import './scss/index.scss';
+const OMIT = ['radio-tag'];
+export default function (attributes) {
+    let a = attributes?.['radio-tag'], state = attributes?.state || reactive({
+        active: false,
+        error: ''
+    });
+    if (a?.checked) {
+        state.active = true;
+    }
+    return html `
+        <div class='radio ${() => state.active && '--active'}' ${a ? omit(attributes, OMIT) : attributes}>
+            <input
+                class='radio-tag'
+                type='radio'
+                ${{
+        checked: a?.checked || root(() => state.active),
+        onchange: (e) => {
+            state.active = e.target.checked;
+        },
+        onrender: form.input.onrender(state),
+        value: a?.value || 1
+    }}
+                ${a}
+            >
+        </div>
+    `;
+}
+;

package/build/components/radio/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.radio{--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:100%;--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--height:var(--size);--margin-horizontal:calc(var(--width-switch) - var(--width));--opacity:var(--opacity-default);--opacity-active:1;--opacity-default:.4;--opacity-hover:var(--opacity-default);--opacity-pressed:var(--opacity-default);--rotate:0deg;--scale:var(--scale-default);--scale-active:.9;--scale-default:0;--scale-hover:.8;--scale-pressed:.7;--size:var(--size-600);--width:var(--height);--width-switch:40px}.radio:before{--height:calc((var(--size)/2) - (var(--border-width)*2));--box-shadow:0 1px 0 #00000029;--translateX:50%;--translateY:50%;--width:var(--height)}.radio label:not(.--active):not(.--active):hover,.radio:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover);--opacity:var(--opacity-hover);--scale:var(--scale-hover)}.radio label:not(.--active):not(.--active):active,.radio:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed);--opacity:var(--opacity-pressed);--scale:var(--scale-pressed)}.radio.--active{--opacity:var(--opacity-active);--scale:var(--scale-active)}.radio{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}.radio:invalid,.radio:required{box-shadow:none}.radio:before{background:var(--accent);border-radius:inherit;box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX),var(--translateY))rotate(var(--rotate))scale(var(--scale));transform-origin:50%;width:var(--width);position:absolute;bottom:50%;right:50%}.radio-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}}
+/*$vite$:1*/

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

@@ -0,0 +1,21 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+declare const _default: {
+    (): ReturnType<(this: {
+        attributes?: Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    <T extends Attributes>(attributes: T): ReturnType<(this: {
+        attributes?: Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    <T extends import("@esportsplus/template").Renderable<any>>(content: T): ReturnType<(this: {
+        attributes?: Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    (attributes: Attributes, content: import("@esportsplus/template").Renderable<any>): ReturnType<(this: {
+        attributes?: Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+};
+export default _default;

package/build/components/range/index.js

@@ -0,0 +1,46 @@
+import { reactive, root } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
+import form from '../../components/form/index.js';
+import template from '../../components/template/index.js';
+import './scss/index.scss';
+const OMIT = ['range-tag'];
+export default template.factory(function (attributes, content) {
+    let a = attributes['range-tag'], state = attributes.state || reactive({
+        active: false,
+        error: '',
+        value: 0
+    });
+    if (a?.value) {
+        state.value = Number(a.value);
+    }
+    return html `
+            <div
+                class='range --border-state --border-black'
+                ${{
+        class: () => state.active && '--active',
+        onfocusin: () => {
+            state.active = true;
+        },
+        onfocusout: () => {
+            state.active = false;
+        }
+    }}
+                ${a ? omit(attributes, OMIT) : attributes}
+            >
+                <input
+                    class='range-tag'
+                    type='range'
+                    ${{
+        oninput: (e) => {
+            state.value = Number(e.target.value);
+        },
+        onrender: form.input.onrender(state),
+        value: root(() => a?.value || state.value || 0)
+    }}
+                    ${a}
+                >
+                ${content}
+            </div>
+        `;
+});

package/build/components/range/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.range{--background-default:var(--color-black-300);--border-width:var(--border-width-700);--height:var(--size-200);--thumb-background:var(--color-white-400);--thumb-size:var(--size-400);--width:100%;margin:calc((var(--height) - var(--thumb-size))/2)0}.range-tag{background:var(--background);height:var(--height);width:var(--width);border:0;border-radius:240px;transition:opacity .2s}.range-tag::-moz-range-thumb{background:var(--thumb-background);border:var(--border-width)solid var(--border-color);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size);border-radius:100%}.range-tag::-webkit-slider-thumb{background:var(--thumb-background);border:var(--border-width)solid var(--border-color);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size);border-radius:100%}.range-tag{appearance:none;outline:none}.range-tag::-moz-range-thumb{appearance:none;outline:none}.range-tag::-webkit-slider-thumb{appearance:none;outline:none}}
+/*$vite$:1*/

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

@@ -0,0 +1,44 @@
+import { Renderable, type Attributes } from '@esportsplus/template';
+import { Attributes as Attr } from '../../components/scrollbar/index.js';
+import './scss/index.scss';
+type A = {
+    'select-arrow'?: Attributes;
+    'select-tag'?: Attributes;
+    'select-text'?: Attributes;
+    'scrollbar'?: Attributes;
+    'scrollbar-container-content'?: Attributes;
+    'tooltip-content'?: Attributes & {
+        direction?: string;
+    };
+    options: Record<number | string, Renderable<unknown>>;
+    option?: Attributes;
+} & ({
+    selected?: number | string;
+    state?: never;
+} | {
+    state: {
+        active: boolean;
+        error: string;
+        render: boolean;
+        selected?: number | string;
+    };
+}) & Attributes & Attr;
+declare const _default: {
+    (): ReturnType<(this: {
+        attributes?: A | undefined;
+        content?: Renderable<any>;
+    }, attributes: Readonly<A>, content: Renderable<any>) => Renderable<any>>;
+    <T extends A>(attributes: T): ReturnType<(this: {
+        attributes?: A | undefined;
+        content?: Renderable<any>;
+    }, attributes: Readonly<A>, content: Renderable<any>) => Renderable<any>>;
+    <T extends Renderable<any>>(content: T): ReturnType<(this: {
+        attributes?: A | undefined;
+        content?: Renderable<any>;
+    }, attributes: Readonly<A>, content: Renderable<any>) => Renderable<any>>;
+    (attributes: A, content: Renderable<any>): ReturnType<(this: {
+        attributes?: A | undefined;
+        content?: Renderable<any>;
+    }, attributes: Readonly<A>, content: Renderable<any>) => Renderable<any>>;
+};
+export default _default;

package/build/components/{field/select.js → select/index.js}

@@ -1,21 +1,20 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
-import { isObject, omit, toArray } from '@esportsplus/utilities';
+import { omit, toArray } from '@esportsplus/utilities';
 import form from '../../components/form/index.js';
 import root from '../../components/root/index.js';
 import scrollbar from '../../components/scrollbar/index.js';
 import template from '../../components/template/index.js';
-import error from './error.js';
-const OMIT_FIELD = ['options', 'state'];
-const OMIT_MASK = [
-    'field-mask-arrow',
-    'field-mask-text',
-    'field-mask-tag',
+import './scss/index.scss';
+const OMIT = [
+    'options',
+    'select-arrow',
+    'select-tag',
+    'select-text',
     'scrollbar',
     'scrollbar-container-content',
     'tooltip-content',
 ];
-const OMIT_OPTION = ['content'];
 let field = null;
 function set(state, value) {
     state.active = value;
@@ -30,13 +29,18 @@ function set(state, value) {
         field = null;
     }
 }
-const select = function (attributes, content) {
-    let { option, options, state } = this;
+export default template.factory(function (attributes, content) {
+    let { options, option } = attributes, state = attributes.state || reactive({
+        active: false,
+        error: '',
+        render: false,
+        selected: attributes.selected || Object.keys(options)[0]
+    });
     return html `
-        <label
-            class='field-mask field-mask--select'
-            ${omit(attributes, OMIT_MASK)}
-            ${{
+            <label
+                class='select'
+                ${omit(attributes, OMIT)}
+                ${{
         onclick: () => {
             if (state.render) {
                 set(state, !state.active);
@@ -44,28 +48,26 @@ const select = function (attributes, content) {
             state.render = true;
         }
     }}
-        >
-            <input class='field-mask-tag field-mask-tag--hidden'
-                ${{
+            >
+                <input class='select-tag'
+                    ${{
         name: attributes.name,
         onclick: () => { },
         onrender: form.input.onrender(state),
         value: () => state.selected
     }}
-                ${attributes['field-mask-tag']}
-            >
+                    ${attributes['select-tag']}
+                >
 
-            ${content || html `
-                <div class='field-mask-text' ${attributes['field-mask-text']}>
-                    ${() => {
-        return (options[state.selected]?.content || '-');
-    }}
-                </div>
-            `}
+                ${content || html `
+                    <div class='select-text' ${attributes['select-text']}>
+                        ${() => options[state.selected] || '-'}
+                    </div>
+                `}
 
-            <div class='field-mask-arrow' ${attributes['field-mask-arrow']}></div>
+                <div class='select-arrow' ${attributes['select-arrow']}></div>
 
-            ${() => {
+                ${() => {
         if (!state.render) {
             return;
         }
@@ -93,49 +95,20 @@ const select = function (attributes, content) {
             scrollbar: attributes['scrollbar'],
             'scrollbar-container-content': attributes['scrollbar-container-content']
         }, keys.map((key) => html `
-                        <div class='link'
-                            ${omit(options[key], OMIT_OPTION)}
-                            ${option}
-                            ${{
+                            <div
+                                class='link'
+                                ${option}
+                                ${{
+            'data-key': key,
             class: () => selected[key] && '--active',
-            'data-key': key
         }}
-                        >
-                            <span class='--text-truncate --pointer-none'>
-                                ${options[key].content}
-                            </span>
-                        </div>
-                    `));
-    }}
-        </label>
-    `;
-};
-export default template.factory((attributes, content) => {
-    let options = attributes.options, state = attributes.state || reactive({
-        active: false,
-        error: '',
-        render: false,
-        selected: attributes.selected || Object.keys(options)[0]
-    });
-    for (let key in options) {
-        if (isObject(options[key])) {
-            continue;
-        }
-        options[key] = { content: options[key] };
-    }
-    return html `
-        <div class='field tooltip'
-            ${omit(attributes, OMIT_FIELD)}
-            ${{
-        class: () => state.active && '--active'
+                            >
+                                <span class='--text-truncate --pointer-none'>
+                                    ${options[key]}
+                                </span>
+                            </div>
+                        `));
     }}
-        >
-            ${content((...args) => select.call({
-        option: attributes.option,
-        options: attributes.options,
-        state
-    }, ...args))}
-            ${error(state)}
-        </div>
-    `;
+            </label>
+        `;
 });

package/build/components/select/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.select{background:var(--background);border:var(--border-width)var(--border-style)var(--border-color);border-radius:var(--border-radius);cursor:pointer;font-size:var(--font-size);line-height:var(--line-height);padding:var(--padding-vertical)calc(var(--padding-horizontal)/1.5 + var(--arrow-size))var(--padding-vertical)var(--padding-horizontal);flex-wrap:wrap;align-items:center;width:100%;display:flex;position:relative}.select:invalid,.select:required{box-shadow:none}.select-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)}.select-tag{color:var(--color)}}
+/*$vite$:1*/

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

@@ -0,0 +1,11 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    'switch-tag'?: Attributes;
+    state?: {
+        active: boolean;
+        error: string;
+    };
+};
+export default function (attributes?: A): Node;
+export {};

package/build/components/switch/index.js

@@ -0,0 +1,33 @@
+import { reactive, root } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
+import form from '../../components/form/index.js';
+import './scss/index.scss';
+const OMIT = ['switch-tag'];
+export default function (attributes) {
+    let a = attributes?.['switch-tag'], state = attributes?.state || reactive({
+        active: false,
+        error: ''
+    });
+    if (a?.checked) {
+        state.active = true;
+    }
+    return html `
+        <div class='switch' ${a ? omit(attributes, OMIT) : attributes}>
+            <input
+                class='switch-tag'
+                type='checkbox'
+                ${{
+        checked: a?.checked || root(() => state.active),
+        onchange: (e) => {
+            state.active = e.target.checked;
+        },
+        onrender: form.input.onrender(state),
+        value: a?.value || 1
+    }}
+                ${a}
+            >
+        </div>
+    `;
+}
+;

package/build/components/switch/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.switch{--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:240px;--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--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);--padding-horizontal:var(--border-width-400);--padding-vertical:var(--border-width-400);--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:var(--width-switch);--width-switch:40px}.switch:before{--box-shadow:0 1px 0 #00000029;--height:calc(var(--size) - (var(--border-width)*2) - (var(--padding-vertical)*2));--translateX:0px;--translateY:0px;--width:var(--height)}.field.--active .switch:before{--translateX:calc(var(--width-switch) - (var(--border-width)*2) - var(--height) - (var(--padding-horizontal)*2))}.switch label:not(.--active):not(.--active):hover,.switch:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover);--opacity:var(--opacity-hover);--scale:var(--scale-hover)}.switch label:not(.--active):not(.--active):active,.switch:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed);--opacity:var(--opacity-pressed);--scale:var(--scale-pressed)}.switch.--active{--opacity:var(--opacity-active);--scale:var(--scale-active)}.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}.switch:invalid,.switch:required{box-shadow:none}.switch:before{top:var(--padding-vertical);left:var(--padding-horizontal);background:var(--accent);border-radius:inherit;box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX),var(--translateY))rotate(var(--rotate))scale(var(--scale));transform-origin:50%;width:var(--width);position:absolute}.switch-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}}
+/*$vite$:1*/

package/build/components/text/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.text{--color:var(--color-default,inherit);--font-size:var(--font-size-400);--font-weight:var(--font-weight-400);--line-height:var(--line-height-400);--width:auto;color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);transition:color var(--transition-duration)ease-in-out;width:var(--width);position:relative}}
+@layer components {.text{--color:var(--color-default,inherit);--font-size:var(--font-size-400);--font-weight:var(--font-weight-400);--line-height:var(--line-height-400);--width:auto;color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);transition:color var(--transition-duration)ease-in-out;width:var(--width);position:relative}.text--error{animation:.32s linear textError}@keyframes textError{0%{transform:translate(8px)}20%{transform:translate(-8px)}40%{transform:translate(4px)}60%{transform:translate(-4px)}80%{transform:translate(2px)}to{transform:translate(0)}}}
 /*$vite$:1*/

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

@@ -0,0 +1,21 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+declare const _default: {
+    (): ReturnType<(this: {
+        attributes?: Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    <T extends Attributes>(attributes: T): ReturnType<(this: {
+        attributes?: Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    <T extends import("@esportsplus/template").Renderable<any>>(content: T): ReturnType<(this: {
+        attributes?: Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    (attributes: Attributes, content: import("@esportsplus/template").Renderable<any>): ReturnType<(this: {
+        attributes?: Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+};
+export default _default;