lutra 0.0.20 → 0.0.33

package/dist/form/Input.svelte.d.ts

@@ -1,142 +1,117 @@
-import { SvelteComponent } from "svelte";
+import { type Snippet } from "svelte";
 import type { Autocomplete } from "./types.js";
-declare const __propDef: {
-    props: {
-        alt?: string | undefined;
-        attrs?: Record<string, string> | undefined;
-        autocapitalize?: boolean | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
-        autocomplete?: Autocomplete | undefined;
-        autocorrect?: boolean | undefined;
-        capture?: "user" | "environment" | undefined;
-        checked?: boolean | undefined;
-        contained?: boolean | undefined;
-        copyable?: boolean | undefined;
-        defaultValue?: string | undefined;
-        dirname?: string | undefined;
-        disabled?: boolean | undefined;
-        enterkeyhint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
-        height?: number | undefined;
-        help?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        id?: import("svelte").Bindable<string | undefined>;
-        indeterminate?: boolean | undefined;
-        inputmode?: "none" | "search" | "text" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
-        label?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        labelTip?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        list?: string | undefined;
-        maxlength?: number | undefined;
-        minlength?: number | undefined;
-        max?: number | undefined;
-        min?: number | undefined;
-        multiple?: boolean | undefined;
-        name: string;
-        onblur?: ((e: FocusEvent) => void) | undefined;
-        onchange?: ((e: Event) => void) | undefined;
-        onclick?: ((e: MouseEvent) => void) | undefined;
-        onfocus?: ((e: FocusEvent) => void) | undefined;
-        onkeyup?: ((e: KeyboardEvent) => void) | undefined;
-        onkeydown?: ((e: KeyboardEvent) => void) | undefined;
-        onkeypress?: ((e: KeyboardEvent) => void) | undefined;
-        pattern?: string | undefined;
-        placeholder?: string | undefined;
-        suffix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        prefix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        readonly?: boolean | undefined;
-        required?: boolean | undefined;
-        results?: number | undefined;
-        shape?: "default" | "circle" | "rounded" | "pill" | undefined;
-        size?: number | undefined;
-        src?: string | undefined;
-        spellcheck?: boolean | undefined;
-        step?: number | undefined;
-        tabindex?: number | undefined;
-        title?: string | undefined;
-        type?: "number" | "color" | "button" | "search" | "time" | "image" | "text" | "submit" | "email" | "tel" | "url" | "date" | "checkbox" | "radio" | "hidden" | "password" | "file" | "range" | "datetime-local" | "month" | "week" | undefined;
-        value?: import("svelte").Bindable<string | undefined>;
-        viewable?: boolean | undefined;
-        webkitdirectory?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type InputProps = typeof __propDef.props;
-export type InputEvents = typeof __propDef.events;
-export type InputSlots = typeof __propDef.slots;
-export default class Input extends SvelteComponent<InputProps, InputEvents, InputSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        alt?: string | undefined;
-        attrs?: Record<string, string> | undefined;
-        autocapitalize?: boolean | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
-        autocomplete?: Autocomplete | undefined;
-        autocorrect?: boolean | undefined;
-        capture?: "user" | "environment" | undefined;
-        checked?: boolean | undefined;
-        contained?: boolean | undefined;
-        copyable?: boolean | undefined;
-        defaultValue?: string | undefined;
-        dirname?: string | undefined;
-        disabled?: boolean | undefined;
-        enterkeyhint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
-        height?: number | undefined;
-        help?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        id?: import("svelte").Bindable<string | undefined>;
-        indeterminate?: boolean | undefined;
-        inputmode?: "none" | "search" | "text" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
-        label?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        labelTip?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        list?: string | undefined;
-        maxlength?: number | undefined;
-        minlength?: number | undefined;
-        max?: number | undefined;
-        min?: number | undefined;
-        multiple?: boolean | undefined;
-        name: string;
-        onblur?: ((e: FocusEvent) => void) | undefined;
-        onchange?: ((e: Event) => void) | undefined;
-        onclick?: ((e: MouseEvent) => void) | undefined;
-        onfocus?: ((e: FocusEvent) => void) | undefined;
-        onkeyup?: ((e: KeyboardEvent) => void) | undefined;
-        onkeydown?: ((e: KeyboardEvent) => void) | undefined;
-        onkeypress?: ((e: KeyboardEvent) => void) | undefined;
-        pattern?: string | undefined;
-        placeholder?: string | undefined;
-        suffix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        prefix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        readonly?: boolean | undefined;
-        required?: boolean | undefined;
-        results?: number | undefined;
-        shape?: "default" | "circle" | "rounded" | "pill" | undefined;
-        size?: number | undefined;
-        src?: string | undefined;
-        spellcheck?: boolean | undefined;
-        step?: number | undefined;
-        tabindex?: number | undefined;
-        title?: string | undefined;
-        type?: "number" | "color" | "button" | "search" | "time" | "image" | "text" | "submit" | "email" | "tel" | "url" | "date" | "checkbox" | "radio" | "hidden" | "password" | "file" | "range" | "datetime-local" | "month" | "week" | undefined;
-        value?: import("svelte").Bindable<string | undefined>;
-        viewable?: boolean | undefined;
-        webkitdirectory?: boolean | undefined;
-    }>);
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Input: $$__sveltets_2_IsomorphicComponent<{
+    /** alt attribute for the image type. Required for accessibility */
+    alt?: string;
+    /** Whether the input should be autofocused. */
+    autofocus?: boolean;
+    /** Whether the input should be autocapitalized. */
+    autocapitalize?: boolean | "off" | "none" | "on" | "sentences" | "words" | "characters";
+    /** Specifies whether autocomplete is enabled for the input. */
+    autocomplete?: Autocomplete;
+    /** Whether the input should be autocorrected. (Safari only) */
+    autocorrect?: boolean;
+    /** A hint to the browser for which capture method to use. */
+    capture?: "user" | "environment";
+    /** Whether the input should be checked. */
+    checked?: boolean;
+    /** Whether the input should be contained. */
+    contained?: boolean;
+    /** Whether the input should be copyable. */
+    copyable?: boolean;
+    /** The default value of the input element. */
+    defaultValue?: string;
+    /** Whether the input should be disabled. */
+    disabled?: boolean;
+    /** A hint to the browser for which enter key to display for the input. */
+    enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
+    /** The height of the input element. Valid for image inputs. */
+    height?: number;
+    /** Help text to display below the input. */
+    help?: string | Snippet;
+    /** A random id is generated if not provided. */
+    id?: string;
+    /** Whether the input should be indeterminate. */
+    indeterminate?: boolean;
+    /** A hint to the browser for which keyboard to display. This is only used for type="text" inputs. Strongly consider using type="email" or type="url" etc. instead */
+    inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
+    /** The label for the input */
+    label?: string | Snippet;
+    /** Context tooltip for a label. Renders with a questionmark using ContextTip. */
+    labelTip?: string | Snippet;
+    /** The id of a datalist element that contains pre-defined options for the input element. */
+    list?: string;
+    /** The maximum number of characters (as UTF-16 code units) the user can enter into the input. Valid for text, search, url, tel, email, and password. */
+    maxlength?: number;
+    /** The minimum number of characters (as UTF-16 code units) the user can enter into the input. Valid for text, search, url, tel, email, and password. */
+    minlength?: number;
+    /** Allow multiple f
+    /** The maximum value of the input element. Valid for date, month, week, time, datetime-local, number, and range. */
+    max?: number;
+    /** The minimum value of the input element. Valid for date, month, week, time, datetime-local, number, and range. */
+    min?: number;
+    /** Whether the input should allow multiple values. Valid for email and file inputs. */
+    multiple?: boolean;
+    /** The name of the input element. */
+    name: string;
+    /** The onblur event handler */
+    onblur?: (e: FocusEvent) => void;
+    /** Onchange event handler */
+    onchange?: (e: Event) => void;
+    /** Onclick event handler */
+    onclick?: (e: MouseEvent) => void;
+    /** Onfocus event handler */
+    onfocus?: (e: FocusEvent) => void;
+    /** Keyup event handler */
+    onkeyup?: (e: KeyboardEvent) => void;
+    /** Keydown event handler */
+    onkeydown?: (e: KeyboardEvent) => void;
+    /** Keypress event handler */
+    onkeypress?: (e: KeyboardEvent) => void;
+    /** A regular expression that the input's value is checked against. Valid for text, search, url, tel, email, and password. */
+    pattern?: string;
+    /** Placeholder text to display when the input is empty. */
+    placeholder?: string;
+    /** Suffix content, to display after the input. */
+    suffix?: string | Snippet;
+    /** Prefix content, to display before the input. */
+    prefix?: string | Snippet;
+    /** Whether the input should be read-only. */
+    readonly?: boolean;
+    /** Whether the input should be required. */
+    required?: boolean;
+    /** The shape of the input element. */
+    shape?: "default" | "rounded" | "pill" | "circle";
+    /** The size of the input element. */
+    size?: number;
+    /** Source URL for the image type. */
+    src?: string;
+    /** A number that specifies the granularity that the value must adhere to. Valid for date, month, week, time, datetime-local, number, and range. */
+    step?: number;
+    /** A string that defines the title of the input element. */
+    title?: string;
+    /** The type of input to display. */
+    type?: "button" | "submit" | "checkbox" | "radio" | "hidden" | "text" | "password" | "file" | "image" | "email" | "number" | "tel" | "url" | "range" | "search" | "date" | "time" | "datetime-local" | "month" | "week" | "color";
+    /** Unit of measurement for range inputs. */
+    unit?: string;
+    /** The value of the input element. */
+    value?: string | number | boolean | null;
+    /** Whether the input should be viewable. Valid for password inputs. */
+    viewable?: boolean;
+    /** Whether the input should only accept directory uploads. */
+    webkitdirectory?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "value" | "id">;
+type Input = InstanceType<typeof Input>;
+export default Input;

package/dist/form/InputLength.svelte.d.ts

@@ -1,21 +1,20 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        value: string;
-        maxlength: number;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type InputLengthProps = typeof __propDef.props;
-export type InputLengthEvents = typeof __propDef.events;
-export type InputLengthSlots = typeof __propDef.slots;
-export default class InputLength extends SvelteComponent<InputLengthProps, InputLengthEvents, InputLengthSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        value: string;
-        maxlength: number;
-    }>);
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const InputLength: $$__sveltets_2_IsomorphicComponent<{
+    /** The value of the input. */
+    value: string;
+    /** The maximum length of the input. */
+    maxlength: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type InputLength = InstanceType<typeof InputLength>;
+export default InputLength;

package/dist/form/Label.svelte

@@ -2,16 +2,21 @@
 let {
   id,
   label,
-  tip
+  tip,
+  required
 } = $props();
 </script>
 
 {#if label}
-    <label for={id}>
+    <label for={id} class:hasTip={!!tip}>
         {#if typeof label === 'string'}
-            {label}
+            <span>
+                {label} {#if required}<span aria-hidden="true">*</span>{/if}
+            </span>
         {:else}
-            {@render label()}
+            <span>
+                {@render label()}
+            </span>
         {/if}
         {#if tip}
             <ContextTip {tip} />
@@ -23,5 +28,17 @@ let {
     label {
         cursor: var(--cursor, default);
         text-wrap: balance;
+        display: inline-grid;
+        grid-template-columns: 1fr;
+        gap: 0.5em;
+        align-items: center;
+    }
+    label.hasTip {
+        grid-template-columns: 1fr auto;
+    }
+    label > span > span {
+        font-weight: 600;
+        color: var(--text-warn);
+        padding-inline: 0.175em;
     }
 </style>

package/dist/form/Label.svelte.d.ts

@@ -1,31 +1,25 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        id?: string | undefined;
-        label?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        tip?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type LabelProps = typeof __propDef.props;
-export type LabelEvents = typeof __propDef.events;
-export type LabelSlots = typeof __propDef.slots;
-export default class Label extends SvelteComponent<LabelProps, LabelEvents, LabelSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        id?: string | undefined;
-        label?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        tip?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-    }>);
+import type { Snippet } from "svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Label: $$__sveltets_2_IsomorphicComponent<{
+    /** The id of the input element */
+    id?: string;
+    /** The label for the input */
+    label?: string | Snippet;
+    /** The help text for the input */
+    tip?: string | Snippet;
+    /** Whether the input is required */
+    required?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Label = InstanceType<typeof Label>;
+export default Label;

package/dist/form/LogoUpload.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">import Theme from "../layout/Theme.svelte";
+import H5 from "../typo/H5.svelte";
+import ImageUpload from "./ImageUpload.svelte";
+import StringOrSnippet from "../utils/StringOrSnippet.svelte";
+let {
+  lightLogoInputName = "logo_light_url",
+  darkLogoInputName = "logo_dark_url",
+  lightLogoUploadUrl,
+  darkLogoUploadUrl,
+  buttonText = "Select",
+  lightLogoSrc,
+  darkLogoSrc,
+  lightHelp = "This logo will be used on a light theme background.",
+  darkHelp = "If not set, the light theme logo will be used instead.",
+  accept = "image/png,image/jpg",
+  maxSize = 1024 * 1024 * 4,
+  // 4MB
+  removable = true
+} = $props();
+</script>
+
+<div class="LogoUpload">
+    <Theme theme="light">
+        <div class="Content">
+            <H5 hr>Light theme</H5>
+            <div class="Info">
+                <small><StringOrSnippet content={lightHelp} /></small>
+                <ImageUpload
+                    compressMaxWidth={512}
+                    compressSize={2}
+                    {accept}
+                    uploadUrl={lightLogoUploadUrl}
+                    src={lightLogoSrc}
+                    name={lightLogoInputName}
+                    button={buttonText}
+                    {removable}
+                    {maxSize}
+                />
+            </div>
+        </div>
+    </Theme>
+    <Theme theme="dark">
+        <div class="Content">
+            <H5 hr>Dark theme</H5>
+            <div class="Info">
+                <small><StringOrSnippet content={darkHelp} /></small>
+                <ImageUpload
+                    compressMaxWidth={512}
+                    compressSize={2}
+                    {accept}
+                    uploadUrl={darkLogoUploadUrl}
+                    src={darkLogoSrc}
+                    name={darkLogoInputName}
+                    button={buttonText}
+                    {removable}
+                    {maxSize}
+                />
+            </div>
+        </div>
+    </Theme>
+</div>
+
+<style>
+    .LogoUpload {
+        border: var(--border);
+        overflow: hidden;
+        border-radius: var(--border-radius);
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: grid;
+        grid-template-columns: 1fr;
+        container-type: inline-size;
+    }
+    .Content {
+        background: var(--bg-app);
+    }
+    .Info {
+        padding: 1rem 1.5rem;
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+    .Content :global(h5) {
+        margin-bottom: 0 !important;
+        padding: 1rem 1rem 1rem 1rem;
+    }
+    .Content :global(.Rows) {
+        padding: 0 1rem 1rem 1rem;
+    }
+    @container (min-width: 500px) {
+        .LogoUpload {
+            grid-template-columns: 1fr 1fr;
+        }
+        .Content :global(h5) {
+            margin-bottom: 0 !important;
+            padding: 1rem 1.5rem;
+        }
+    }
+</style>

package/dist/form/LogoUpload.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { Snippet } from "svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
+}
+declare const LogoUpload: $$__sveltets_2_IsomorphicComponent<{
+    lightLogoInputName?: string;
+    darkLogoInputName?: string;
+    lightLogoUploadUrl: string;
+    darkLogoUploadUrl: string;
+    buttonText?: string;
+    lightLogoSrc?: string | null;
+    darkLogoSrc?: string | null;
+    lightHelp?: string | Snippet;
+    darkHelp?: string | Snippet;
+    accept: string;
+    maxSize?: number;
+    removable?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type LogoUpload = InstanceType<typeof LogoUpload>;
+export default LogoUpload;