lutra 0.0.33 → 0.1.0

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

@@ -1,117 +0,0 @@
-import { type Snippet } from "svelte";
-import type { Autocomplete } from "./types.js";
-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 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

@@ -1,32 +0,0 @@
-<script lang="ts">let {
-  value,
-  maxlength
-} = $props();
-</script>
-
-{#if maxlength}
-    <div class="InputLength">
-        <div class="Length" class:warn={(value?.length || 0) > maxlength - 5}>
-            {value?.length || 0}/{maxlength}
-        </div>
-    </div>
-{/if}
-
-<style>
-    .InputLength {
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-        font-size: 0.8rem;
-        font-weight: 500;
-        color: var(--text-subtle);
-    }
-    .InputLength .Length {
-        display: flex;
-        align-items: center;
-        gap: 0.25rem;
-    }
-    .InputLength .Length.warn {
-        color: var(--text-warn);
-    }
-</style>

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

@@ -1,20 +0,0 @@
-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 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

@@ -1,44 +0,0 @@
-<script lang="ts">import ContextTip from "../display/ContextTip.svelte";
-let {
-  id,
-  label,
-  tip,
-  required
-} = $props();
-</script>
-
-{#if label}
-    <label for={id} class:hasTip={!!tip}>
-        {#if typeof label === 'string'}
-            <span>
-                {label} {#if required}<span aria-hidden="true">*</span>{/if}
-            </span>
-        {:else}
-            <span>
-                {@render label()}
-            </span>
-        {/if}
-        {#if tip}
-            <ContextTip {tip} />
-        {/if}
-    </label>
-{/if}
-
-<style>
-    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,25 +0,0 @@
-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 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

@@ -1,100 +0,0 @@
-<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

@@ -1,29 +0,0 @@
-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;

package/dist/form/Select.svelte

@@ -1,136 +0,0 @@
-<script lang="ts">import { getContext, onMount } from "svelte";
-import Label from "./Label.svelte";
-import { createId } from "../utils/id.js";
-import Copy from "../icons/IconCopy.svelte";
-import Done from "../icons/IconDone.svelte";
-import Show from "../icons/IconShow.svelte";
-import Hide from "../icons/IconHide.svelte";
-import Tooltip from "../display/Tooltip.svelte";
-import IconButton from "../display/IconButton.svelte";
-import { fieldChange, fieldKeydown, ignoreKeys } from "./client.svelte.js";
-import FieldError from "./FieldError.svelte";
-import { getFromObjWithStringPath } from "./form.js";
-import { ZodType } from "zod";
-import FieldContent from "./FieldContent.svelte";
-let {
-  autofocus,
-  children,
-  disabled,
-  help,
-  id = $bindable(createId()),
-  label,
-  labelTip,
-  name,
-  onblur,
-  onchange,
-  onclick,
-  onfocus,
-  onkeydown,
-  onkeyup,
-  onkeypress,
-  options,
-  placeholder,
-  required,
-  results,
-  shape = "default",
-  tabindex,
-  value = $bindable()
-} = $props();
-let el = $state();
-const form = getContext("form");
-const field = $derived(form?.fields[name]);
-const issue = $derived(form?.issues?.find((issue2) => issue2.name === name));
-const validator = getContext("form.validators")?.[name];
-const data = form?.data;
-const originalData = form?.originalData;
-if (!value) value = form ? getFromObjWithStringPath(Object.assign(originalData ?? {}, data ?? {}), name) || form?.fields?.[name]?.defaultValue : "";
-onMount(() => {
-  if (value) fieldChange(form, name, () => el)({});
-});
-</script>
-
-<FieldContent
-    {id}
-    {label}
-    {labelTip}
-    {help}
-    {field}
-    {issue}
-    {required}
-    contained
->
-    <div class="SelectContainer">
-        <select
-            bind:this={el}
-            {autofocus}
-            {disabled}
-            {id}
-            {name}
-            {onblur}
-            {onclick}
-            onchange={fieldChange(form, name, () => el, validator, onchange)}
-            {onfocus}
-            onkeydown={fieldKeydown(form, name, () => el, validator, onkeydown)}
-            {onkeyup}
-            {onkeypress}
-            {placeholder}
-            required={required || field?.required}
-            {results}
-            {tabindex}
-            bind:value={value}
-        >
-            {#if children}
-                {@render children()}
-            {:else if options}
-                {#each options as option}
-                    {#if typeof option === 'string'}
-                        <option value={option}>{option}</option>
-                    {:else}
-                        <option value={option.value}>{option.label}</option>
-                    {/if}
-                {/each}
-            {/if}
-        </select>
-        <div class="Arrow">
-            <svg width="12px" height="8px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-                <g transform="matrix(1,0,0,1,0,0.746639)">
-                    <path d="M6,4.248L11.493,0L12,0.507L6,6.507L0,0.507L0.507,0L6,4.248Z" fill="currentColor" stroke="currentColor"/>
-                </g>
-            </svg>
-        </div>
-    </div>
-</FieldContent>
-
-<style>
-    .SelectContainer {
-        display: grid;
-        grid-template-columns: 1fr;
-        grid-template-areas: "select";
-        align-items: center;
-        width: 100%;
-    }
-    select {
-        padding-inline-end: calc(1.5em + 10px);
-        width: 100%;
-        appearance: none;
-        border: none !important;
-        border-radius: 0;
-        grid-area: select;
-        background: none;
-    }
-    .Arrow {
-        grid-area: select;
-        pointer-events: none;
-        display: flex;
-        align-items: center;
-        justify-content: end;
-        padding-inline-end: 0.75em;
-    }
-    svg {
-        display: block;
-        color: var(--field-text);
-    }
-    select:focus-visible {
-        outline: none;
-    }
-</style>

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

@@ -1,70 +0,0 @@
-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 Select: $$__sveltets_2_IsomorphicComponent<{
-    /** Whether the input should be autofocused. */
-    autofocus?: boolean;
-    /** Options for the select element. */
-    children?: Snippet;
-    /** Whether the input should be disabled. */
-    disabled?: boolean;
-    /** Help text to display below the input. */
-    help?: string | Snippet;
-    /** A random id is generated if not provided. */
-    id?: string;
-    /** The label for the input */
-    label?: string | Snippet;
-    /** Context tooltip for a label. Renders with a questionmark using ContextTip. */
-    labelTip?: string | Snippet;
-    /** 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;
-    /** The options for the select element. */
-    options?: string[] | {
-        value: string;
-        label: 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 required. */
-    required?: boolean;
-    /** The maximum number of items that should be displayed in the drop-down list of previous search queries. Safari only. */
-    results?: number;
-    /** The shape of the input element. */
-    shape?: "default" | "rounded" | "pill" | "circle";
-    /** Source URL for the image type. */
-    src?: string;
-    /** An integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation. */
-    tabindex?: number;
-    /** The value of the input element. */
-    value?: string | number | boolean | null;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "value" | "id">;
-type Select = InstanceType<typeof Select>;
-export default Select;