@marianmeres/stuic 1.20.0 → 1.21.0

package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte.d.ts

@@ -0,0 +1,104 @@
+import { SvelteComponent } from "svelte";
+import { type createAlertConfirmPromptStore } from './alert-confirm-prompt.js';
+export declare class AlertConfirmPromptConfig {
+    static preset: {
+        dialog: string;
+        icon: string;
+        contentBlock: string;
+        title: string;
+        content: string;
+        inputBox: string;
+        inputField: string;
+        menu: string;
+        menuLi: string;
+        button: string;
+        spinnerBox: string;
+    };
+    static classDialog: string;
+    static classIcon: string;
+    static classTitle: string;
+    static classContentBlock: string;
+    static classContent: string;
+    static classInputBox: string;
+    static classInputField: string;
+    static classMenu: string;
+    static classMenuLi: string;
+    static classButton: string;
+    static classSpinnerBox: string;
+    static variant: {
+        info: {
+            dialog: string;
+            icon: string;
+            contentBlock: string;
+            title: string;
+            content: string;
+            inputBox: string;
+            inputField: string;
+            menu: string;
+            menuLi: string;
+            button: string;
+            spinnerBox: string;
+        };
+        success: {
+            dialog: string;
+            icon: string;
+            contentBlock: string;
+            title: string;
+            content: string;
+            inputBox: string;
+            inputField: string;
+            menu: string;
+            menuLi: string;
+            button: string;
+            spinnerBox: string;
+        };
+        warn: {
+            dialog: string;
+            icon: string;
+            contentBlock: string;
+            title: string;
+            content: string;
+            inputBox: string;
+            inputField: string;
+            menu: string;
+            menuLi: string;
+            button: string;
+            spinnerBox: string;
+        };
+        error: {
+            dialog: string;
+            icon: string;
+            contentBlock: string;
+            title: string;
+            content: string;
+            inputBox: string;
+            inputField: string;
+            menu: string;
+            menuLi: string;
+            button: string;
+            spinnerBox: string;
+        };
+    };
+    static iconFn: {
+        info: undefined;
+        success: undefined;
+        warn: undefined;
+        error: undefined;
+        spinner: undefined;
+    };
+}
+declare const __propDef: {
+    props: {
+        acp: ReturnType<typeof createAlertConfirmPromptStore>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AlertConfirmPromptProps = typeof __propDef.props;
+export type AlertConfirmPromptEvents = typeof __propDef.events;
+export type AlertConfirmPromptSlots = typeof __propDef.slots;
+export default class AlertConfirmPrompt extends SvelteComponent<AlertConfirmPromptProps, AlertConfirmPromptEvents, AlertConfirmPromptSlots> {
+}
+export {};

package/dist/components/AlertConfirmPrompt/acp-icons.d.ts

@@ -0,0 +1,7 @@
+export declare const acpDefaultIcons: {
+    info: () => string;
+    success: () => string;
+    warn: () => string;
+    error: () => string;
+    spinner: () => string;
+};

package/dist/components/AlertConfirmPrompt/acp-icons.js

@@ -0,0 +1,134 @@
+// taken from @marianmeres/icons-fns
+function iconFeatherAlertCircle(props) {
+    // Backward compatible signature support: fn(cls, size, style)
+    if (props === null || props === undefined)
+        props = {};
+    if (typeof props !== 'object')
+        props = { class: props || '' };
+    if (arguments.length > 1)
+        props.size ??= arguments[1];
+    if (arguments.length > 2)
+        props.style ??= arguments[2];
+    //
+    const { size, class: cls, style, strokeWidth } = props;
+    let attrs = Object.entries(props)
+        .filter(([k, v]) => !/^class|size|style|strokeWidth$/.test(k))
+        .reduce((m, [k, v]) => [...m, `${k}="${v}"`], [])
+        .join(' ');
+    return `<svg ${style ? `style="${style}" ` : ''}${cls ? `class="${cls}" ` : ''}width="${size || 24}" height="${size || 24}" stroke-width="${strokeWidth ?? 2}" ${attrs ? `${attrs} ` : ''}viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>`;
+}
+function iconFeatherCheckCircle(props) {
+    // Backward compatible signature support: fn(cls, size, style)
+    if (props === null || props === undefined)
+        props = {};
+    if (typeof props !== 'object')
+        props = { class: props || '' };
+    if (arguments.length > 1)
+        props.size ??= arguments[1];
+    if (arguments.length > 2)
+        props.style ??= arguments[2];
+    //
+    const { size, class: cls, style, strokeWidth } = props;
+    let attrs = Object.entries(props)
+        .filter(([k, v]) => !/^class|size|style|strokeWidth$/.test(k))
+        .reduce((m, [k, v]) => [...m, `${k}="${v}"`], [])
+        .join(' ');
+    return `<svg ${style ? `style="${style}" ` : ''}${cls ? `class="${cls}" ` : ''}width="${size || 24}" height="${size || 24}" stroke-width="${strokeWidth ?? 2}" ${attrs ? `${attrs} ` : ''}viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>`;
+}
+function iconFeatherHelpCircle(props) {
+    // Backward compatible signature support: fn(cls, size, style)
+    if (props === null || props === undefined)
+        props = {};
+    if (typeof props !== 'object')
+        props = { class: props || '' };
+    if (arguments.length > 1)
+        props.size ??= arguments[1];
+    if (arguments.length > 2)
+        props.style ??= arguments[2];
+    //
+    const { size, class: cls, style, strokeWidth } = props;
+    let attrs = Object.entries(props)
+        .filter(([k, v]) => !/^class|size|style|strokeWidth$/.test(k))
+        .reduce((m, [k, v]) => [...m, `${k}="${v}"`], [])
+        .join(' ');
+    return `<svg ${style ? `style="${style}" ` : ''}${cls ? `class="${cls}" ` : ''}width="${size || 24}" height="${size || 24}" stroke-width="${strokeWidth ?? 2}" ${attrs ? `${attrs} ` : ''}viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>`;
+}
+function iconFeatherXCircle(props) {
+    // Backward compatible signature support: fn(cls, size, style)
+    if (props === null || props === undefined)
+        props = {};
+    if (typeof props !== 'object')
+        props = { class: props || '' };
+    if (arguments.length > 1)
+        props.size ??= arguments[1];
+    if (arguments.length > 2)
+        props.style ??= arguments[2];
+    //
+    const { size, class: cls, style, strokeWidth } = props;
+    let attrs = Object.entries(props)
+        .filter(([k, v]) => !/^class|size|style|strokeWidth$/.test(k))
+        .reduce((m, [k, v]) => [...m, `${k}="${v}"`], [])
+        .join(' ');
+    return `<svg ${style ? `style="${style}" ` : ''}${cls ? `class="${cls}" ` : ''}width="${size || 24}" height="${size || 24}" stroke-width="${strokeWidth ?? 2}" ${attrs ? `${attrs} ` : ''}viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>`;
+}
+function iconFeatherXOctagon(props) {
+    // Backward compatible signature support: fn(cls, size, style)
+    if (props === null || props === undefined)
+        props = {};
+    if (typeof props !== 'object')
+        props = { class: props || '' };
+    if (arguments.length > 1)
+        props.size ??= arguments[1];
+    if (arguments.length > 2)
+        props.style ??= arguments[2];
+    //
+    const { size, class: cls, style, strokeWidth } = props;
+    let attrs = Object.entries(props)
+        .filter(([k, v]) => !/^class|size|style|strokeWidth$/.test(k))
+        .reduce((m, [k, v]) => [...m, `${k}="${v}"`], [])
+        .join(' ');
+    return `<svg ${style ? `style="${style}" ` : ''}${cls ? `class="${cls}" ` : ''}width="${size || 24}" height="${size || 24}" stroke-width="${strokeWidth ?? 2}" ${attrs ? `${attrs} ` : ''}viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>`;
+}
+function iconFeatherInfo(props) {
+    // Backward compatible signature support: fn(cls, size, style)
+    if (props === null || props === undefined)
+        props = {};
+    if (typeof props !== 'object')
+        props = { class: props || '' };
+    if (arguments.length > 1)
+        props.size ??= arguments[1];
+    if (arguments.length > 2)
+        props.style ??= arguments[2];
+    //
+    const { size, class: cls, style, strokeWidth } = props;
+    let attrs = Object.entries(props)
+        .filter(([k, v]) => !/^class|size|style|strokeWidth$/.test(k))
+        .reduce((m, [k, v]) => [...m, `${k}="${v}"`], [])
+        .join(' ');
+    return `<svg ${style ? `style="${style}" ` : ''}${cls ? `class="${cls}" ` : ''}width="${size || 24}" height="${size || 24}" stroke-width="${strokeWidth ?? 2}" ${attrs ? `${attrs} ` : ''}viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>`;
+}
+function iconFeatherRotateCw(props) {
+    // Backward compatible signature support: fn(cls, size, style)
+    if (props === null || props === undefined)
+        props = {};
+    if (typeof props !== 'object')
+        props = { class: props || '' };
+    if (arguments.length > 1)
+        props.size ??= arguments[1];
+    if (arguments.length > 2)
+        props.style ??= arguments[2];
+    //
+    const { size, class: cls, style, strokeWidth } = props;
+    let attrs = Object.entries(props)
+        .filter(([k, v]) => !/^class|size|style|strokeWidth$/.test(k))
+        .reduce((m, [k, v]) => [...m, `${k}="${v}"`], [])
+        .join(' ');
+    return `<svg ${style ? `style="${style}" ` : ''}${cls ? `class="${cls}" ` : ''}width="${size || 24}" height="${size || 24}" stroke-width="${strokeWidth ?? 2}" ${attrs ? `${attrs} ` : ''}viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>`;
+}
+export const acpDefaultIcons = {
+    info: () => iconFeatherInfo({}),
+    success: () => iconFeatherCheckCircle({}),
+    warn: () => iconFeatherAlertCircle({}),
+    error: () => iconFeatherXOctagon({}),
+    spinner: () => iconFeatherRotateCw({ size: 32, class: 'opacity-75', strokeWidth: 1.5 }),
+};

package/dist/components/AlertConfirmPrompt/alert-confirm-prompt.d.ts

@@ -0,0 +1,55 @@
+import type { THC } from '../Thc/Thc.svelte';
+export declare enum AlertConfirmPromptType {
+    ALERT = "alert",
+    CONFIRM = "confirm",
+    PROMPT = "prompt"
+}
+export type AlertConfirmPromptVariant = 'info' | 'success' | 'warn' | 'error';
+type FnOnOK = (value: any) => any;
+type FnOnCancel = (value: false) => any;
+type FnOnEscape = () => undefined;
+type FnOnCustom = (value: any) => any;
+interface Dialog extends Record<string, any> {
+    type: AlertConfirmPromptType.ALERT | AlertConfirmPromptType.CONFIRM | AlertConfirmPromptType.PROMPT;
+    title: THC;
+    content: THC;
+    value: any;
+    labelOk: THC;
+    onOk: FnOnOK;
+    labelCancel: THC;
+    onCancel: FnOnCancel;
+    onEscape: FnOnEscape;
+    labelCustom?: THC;
+    onCustom?: FnOnCustom;
+    variant: AlertConfirmPromptVariant;
+    iconFn: (() => string) | boolean;
+    class?: Partial<{
+        dialog: string;
+        icon: string;
+        contentBlock: string;
+        title: string;
+        content: string;
+        inputBox: string;
+        inputField: string;
+        menu: string;
+        menuLi: string;
+        button: string;
+        spinnerBox: string;
+    }>;
+}
+export declare const createAlertConfirmPromptStore: () => {
+    subscribe: (cb: import("@marianmeres/store").Subscribe<Dialog[]>) => import("@marianmeres/store").Unsubscribe;
+    get: () => Dialog[];
+    push: (o: Partial<Dialog>) => void;
+    shift: () => void;
+    reset: (stack?: Dialog[]) => void;
+    escape: () => void;
+    close: () => void;
+    alert: (o?: Partial<Dialog> | string) => void;
+    confirm: (onOk: FnOnOK, o?: Partial<Dialog>) => void;
+    prompt: (onOk: FnOnOK, o?: Partial<Dialog>) => void;
+};
+export declare const createAlert: (acp: ReturnType<typeof createAlertConfirmPromptStore>) => (message: string, o?: Partial<Dialog>) => Promise<unknown>;
+export declare const createConfirm: (acp: ReturnType<typeof createAlertConfirmPromptStore>) => (message: string, o?: Partial<Dialog>) => Promise<unknown>;
+export declare const createPrompt: (acp: ReturnType<typeof createAlertConfirmPromptStore>) => (message: string, defaultValue?: string, o?: Partial<Dialog>) => Promise<unknown>;
+export {};

package/dist/components/AlertConfirmPrompt/alert-confirm-prompt.js

@@ -0,0 +1,126 @@
+import { createStore } from '@marianmeres/store';
+import { createClog } from '@marianmeres/clog';
+const clog = createClog('alert-confirm-prompt');
+export var AlertConfirmPromptType;
+(function (AlertConfirmPromptType) {
+    AlertConfirmPromptType["ALERT"] = "alert";
+    AlertConfirmPromptType["CONFIRM"] = "confirm";
+    AlertConfirmPromptType["PROMPT"] = "prompt";
+})(AlertConfirmPromptType || (AlertConfirmPromptType = {}));
+const isFn = (v) => typeof v === 'function';
+const ucf = (s) => `${s}`[0].toUpperCase() + `${s}`.slice(1);
+export const createAlertConfirmPromptStore = () => {
+    // fifo
+    const _stack = createStore([]);
+    // defaults
+    const labelOk = 'OK';
+    const labelCancel = 'Cancel';
+    // optional 3rd button label
+    const labelCustom = undefined;
+    const push = (o) => {
+        if (!isFn(o.onOk))
+            o.onOk = shift;
+        if (!isFn(o.onCancel))
+            o.onCancel = shift;
+        if (!isFn(o.onEscape))
+            o.onEscape = () => undefined;
+        if (o.labelOk === undefined)
+            o.labelOk = labelOk;
+        if (o.labelCancel === undefined)
+            o.labelCancel = labelCancel;
+        if (o.title === undefined)
+            o.title = ucf(o.type);
+        // variant defaults to info
+        if (!['info', 'success', 'warn', 'error'].includes(o?.variant)) {
+            o.variant = 'info';
+        }
+        if (o.iconFn === undefined)
+            o.iconFn = true; // will use default
+        // 3rd label may stay undefined
+        if (!isFn(o.onCustom))
+            o.onCustom = () => undefined;
+        //
+        _stack.update((old) => [...old, o]);
+    };
+    const shift = () => _stack.update((old) => {
+        old.shift();
+        return [...old];
+    });
+    const reset = (stack = []) => _stack.set(stack);
+    const escape = () => {
+        if (_stack.get().length)
+            _stack.get()[0].onEscape();
+        shift();
+    };
+    return {
+        subscribe: _stack.subscribe,
+        get: _stack.get,
+        push,
+        shift,
+        reset,
+        escape,
+        // human alias
+        close: shift,
+        // sugar below
+        //
+        alert: (o) => {
+            if (typeof o === 'string')
+                o = { title: o };
+            push({ ...(o || {}), type: AlertConfirmPromptType.ALERT });
+        },
+        //
+        confirm: (onOk, o) => push({ onOk, value: false, ...o, type: AlertConfirmPromptType.CONFIRM }),
+        //
+        prompt: (onOk, o) => push({ onOk, value: '', ...o, type: AlertConfirmPromptType.PROMPT }),
+    };
+};
+// sugar helpers to patch the native window.alert/confirm/prompt
+export const createAlert = (acp) => 
+// allowing to add the custom param outside of the native signature
+(message, o) => new Promise((resolve) => acp.alert({
+    onOk: () => {
+        acp.close();
+        resolve(undefined);
+    },
+    content: message,
+    onEscape: () => {
+        acp.close();
+        resolve(undefined);
+    },
+    ...(o || {}),
+}));
+export const createConfirm = (acp) => 
+// allowing to add the custom param outside of the native signature
+(message, o) => new Promise((resolve) => acp.confirm(() => {
+    acp.close();
+    resolve(true);
+}, {
+    content: message,
+    onCancel: () => {
+        acp.close();
+        resolve(false);
+    },
+    onEscape: () => {
+        acp.close();
+        resolve(false);
+    },
+    ...(o || {}),
+}));
+export const createPrompt = (acp) => 
+// allowing to add the custom param outside of the native signature
+(message, defaultValue = '', o) => new Promise((resolve) => acp.prompt((value) => {
+    acp.close();
+    resolve(value);
+}, {
+    content: message,
+    value: defaultValue,
+    onCancel: () => {
+        acp.close();
+        resolve(null);
+    },
+    onEscape: () => {
+        acp.close();
+        resolve(null);
+    },
+    ...(o || {}),
+}));

package/dist/components/Button/Button.svelte

@@ -48,7 +48,16 @@ export class ButtonConfig {
   };
   static class = "";
   // to be defined at consumer level...
-  static variant = {};
+  static variant = {
+    // primary: `
+    // 	bg-[rgb(var(--primary))] text-[rgb(var(--on-primary))]
+    // 	dark:bg-[rgb(var(--primary-dark))] dark:text-[rgb(var(--on-primary-dark))]
+    // `.trim(),
+    primary: `
+				bg-primary text-on-primary
+				dark:bg-primary-dark dark:text-on-primary-dark
+			`.trim()
+  };
 }
 </script>
 
@@ -99,10 +108,10 @@ $:
 		class={buttonClass}
 		{...$$restProps}
 		role="button"
-		data-size={size}
-		data-shadow={shadow}
-		data-rounded={rounded}
-		data-variant={variant}
+		data-button-size={size}
+		data-button-shadow={shadow}
+		data-button-rounded={rounded}
+		data-button-variant={variant}
 		on:click
 		on:change
 		on:keydown
@@ -121,10 +130,10 @@ $:
 		{disabled}
 		class={buttonClass}
 		{value}
-		data-size={size}
-		data-shadow={shadow}
-		data-rounded={rounded}
-		data-variant={variant}
+		data-button-size={size}
+		data-button-shadow={shadow}
+		data-button-rounded={rounded}
+		data-button-variant={variant}
 		{...$$restProps}
 		on:click
 		on:change

package/dist/components/Button/Button.svelte.d.ts

@@ -50,7 +50,7 @@ declare const __propDef: {
         square?: boolean | undefined;
         disabled?: boolean | undefined;
         value?: string | undefined;
-        size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/components/Input/Field.svelte

@@ -0,0 +1,179 @@
+<script>import { slide } from "svelte/transition";
+import { twMerge } from "tailwind-merge";
+import {
+  autogrow,
+  getId,
+  trim,
+  validate as validateAction
+} from "../../index.js";
+import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
+const setType = (el, t) => el.type = t;
+const inputSizePreset = {
+  sm: "text-sm placeholder:text-sm",
+  md: "text-base placeholder:text-base",
+  lg: "text-lg  placeholder:text-lg"
+};
+const labelSizePreset = {
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-base font-bold"
+};
+let _class = "";
+export { _class as class };
+export let labelClass = "";
+export let wrapClass = "";
+export let textareaClass = "";
+export let invalidClass = "border-primary";
+export let size = "md";
+export let id = getId();
+export let value;
+export let label = "";
+export let type = "text";
+export let name = "";
+export let tabindex = 0;
+export let description = "";
+export let descriptionClass = "";
+export let disabled = false;
+export let readonly = false;
+export let required = false;
+export let placeholder = void 0;
+export let autocomplete = void 0;
+export let minlength = void 0;
+export let maxlength = void 0;
+export let min = void 0;
+export let max = void 0;
+export let pattern = void 0;
+export let step = void 0;
+export let useTrim = true;
+export let textareaAutoEnlarge = true;
+export let validationMessageClass = "";
+export let validate = void 0;
+let validation;
+const setValidationResult = (res) => validation = res;
+let _inputEl;
+$:
+  if (_inputEl)
+    dispatch("input_mounted", _inputEl);
+$:
+  inputClass = twMerge(`
+		form-input
+		rounded-md border-0 w-full flex-1
+		bg-transparent
+		tracking-tight
+		focus:outline-0 focus-visible:ring-0
+		placeholder:text-black/35 placeholder:tracking-tight
+		${inputSizePreset[size]}
+	`);
+</script>
+
+<div class={twMerge(`mb-4 ${_class}`)}>
+	<div class="flex items-end px-2 mb-1">
+		{#if label || $$slots.label}
+			<label
+				for={id}
+				class={twMerge(`
+					block flex-1 
+					${required ? "after:content-['*'] after:opacity-30 after:pl-1" : ''}
+					${labelSizePreset[size]}
+					${labelClass}
+				`)}
+				class:required
+			>
+				{#if $$slots.label}
+					<slot name="label" />
+				{:else}
+					{@html label}
+				{/if}
+			</label>
+		{/if}
+		<slot name="right_of_label" />
+	</div>
+	<div
+		class={twMerge(`
+            rounded-md border border-gray-300
+            bg-gray-100
+            focus-within:border-primary
+            focus-within:ring-4
+            focus-within:ring-primary
+            focus-within:ring-opacity-20
+			${wrapClass}
+			${validation && !validation.valid ? invalidClass : ''}
+        `)}
+		class:cursor-not-allowed={disabled}
+		class:opacity-50={disabled}
+	>
+		<div class="flex items-center">
+			<slot name="input_before" {id} />
+			{#if type === 'textarea'}
+				<textarea
+					bind:value
+					bind:this={_inputEl}
+					{id}
+					class={twMerge(`${inputClass} min-h-16 ${textareaClass}`)}
+					class:cursor-not-allowed={disabled}
+					{name}
+					{disabled}
+					{readonly}
+					{required}
+					{tabindex}
+					use:trim={useTrim}
+					use:validateAction={validate
+						? { ...(validate === true ? {} : validate), setValidationResult }
+						: undefined}
+					use:autogrow={{ allowed: textareaAutoEnlarge }}
+					{...$$restProps}
+				></textarea>
+			{:else}
+				<input
+					bind:value
+					bind:this={_inputEl}
+					use:setType={type}
+					{id}
+					class={inputClass}
+					class:cursor-not-allowed={disabled}
+					{name}
+					{placeholder}
+					{disabled}
+					{readonly}
+					{required}
+					{autocomplete}
+					{tabindex}
+					{minlength}
+					{maxlength}
+					{min}
+					{max}
+					{pattern}
+					{step}
+					use:trim={useTrim}
+					use:validateAction={validate
+						? { ...(validate === true ? {} : validate), setValidationResult }
+						: undefined}
+					{...$$restProps}
+				/>
+			{/if}
+			<slot name="input_after" {id} />
+		</div>
+		<slot name="input_below" {id} />
+	</div>
+	{#if validation && !validation?.valid}
+		<div
+			transition:slide={{ duration: 150 }}
+			class={twMerge(
+				`mt-1 text-xs text-primary px-2 tracking-tight ${validationMessageClass}`
+			)}
+		>
+			{@html validation.message}
+		</div>
+	{/if}
+	{#if description}
+		<div class={twMerge(`mx-2 mt-1 text-sm opacity-50 ${descriptionClass}`)}>
+			{@html description}
+		</div>
+	{/if}
+	{#if $$slots.below}
+		<div class="mx-2 mt-1">
+			<slot name="below" {id} />
+		</div>
+	{/if}
+</div>