lutra 0.1.68 → 0.1.70

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

@@ -1,18 +1,32 @@
 import { type Snippet } from 'svelte';
 type $$ComponentProps = {
+    /** Current image source URL. */
     src?: string | null;
+    /** The presigned URL to upload the image to. */
     uploadUrl: string;
+    /** The form field name for the resulting URL value. */
     name: string;
+    /** HTML id for the file input. */
     id?: string;
+    /** Title used in the alt text of the preview image. */
     title?: string;
+    /** Label for the upload button. */
     button: string;
+    /** Maximum file size in bytes before compression is applied. */
     maxSize?: number;
+    /** Maximum compressed file size in megabytes. */
     compressSize?: number;
+    /** Maximum compressed image width in pixels. */
     compressMaxWidth?: number;
+    /** Accepted MIME types for the file input. */
     accept?: string;
+    /** Whether a remove button is shown. */
     removable?: boolean;
+    /** Display shape of the image preview. */
     shape?: 'square' | 'circle' | 'banner';
+    /** Callback invoked with the selected file before upload. */
     onFile?: (file: File) => void;
+    /** Optional additional content rendered below the actions. */
     children?: Snippet;
 };
 declare const ImageUpload: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/form/Input.svelte

@@ -14,9 +14,19 @@
 	import { ZodType } from "zod";
 	import FieldContent from "./FieldContent.svelte";
 	import { on } from "svelte/events";
-	import { fade } from "svelte/transition";
-	import Theme from "../components/Theme.svelte";
 
+    /**
+     * @description
+     * A versatile input component supporting all standard HTML input types. Integrates
+     * with the Lutra form system for validation, error display and field state tracking.
+     * Supports prefix/suffix content, copy-to-clipboard, password visibility toggle,
+     * range slider with value tooltip, and auto-growing file inputs.
+     *
+     * @example
+     * <Input name="email" type="email" label="Email" placeholder="you@example.com" />
+     * <Input name="age" type="range" min={0} max={100} unit="years" label="Age" />
+     * <Input name="token" type="password" viewable copyable label="API Token" />
+     */
     let {
         alt,
         autofocus,
@@ -116,7 +126,6 @@
         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. */
@@ -352,17 +361,12 @@
                 {/if}
                 <div class="RangeInput">
                     {@render input()}
-                    {#if focused && min?.toString().length && max?.toString().length}
-                        <Theme theme="invert">
-                            <div
-                                class="RangeValue"
-                                in:fade={{ duration: 100 }}
-                                out:fade={{ duration: 100 }}
-                                style="left: {rangeValueLeft}%"
-                            >
-                                {value}{unit}
-                            </div>
-                        </Theme>
+                    {#if min?.toString().length && max?.toString().length}
+                        <span class="RangeTooltipAnchor" style="left: {rangeValueLeft}%">
+                            <Tooltip tip="{value}{unit}" open={focused}>
+                                <span></span>
+                            </Tooltip>
+                        </span>
                     {/if}
                 </div>
                 {#if max?.toString().length}
@@ -396,7 +400,8 @@
     input:not([type="checkbox"]):not([type="radio"]) {
         border: none;
         flex-grow: 1;
-        flex-shrink: 0;
+        flex-shrink: 1;
+        min-width: 0;
     }
     input:not([type="checkbox"]):not([type="radio"]):focus-visible,
     input:not([type="checkbox"]):not([type="radio"]):active {
@@ -404,29 +409,56 @@
     }
     input[type="range"] {
         display: block;
+        appearance: none;
+        background: transparent;
+    }
+    input[type="range"]::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 1rem;
+        height: 1rem;
+        border-radius: 50%;
+        background: var(--focus-ring-color);
+        border: none;
+        margin-top: calc((0.25rem - 1rem) / 2);
+    }
+    input[type="range"]::-moz-range-thumb {
+        width: 1rem;
+        height: 1rem;
+        border-radius: 50%;
+        background: var(--focus-ring-color);
+        border: none;
     }
     .Range {
         display: flex;
-        gap: 0.5em;
+        gap: var(--space-xs);
         align-items: center;
     }
-    .RangeValue {
+    .RangeTooltipAnchor {
         position: absolute;
-        top: 0;
-        font-size: max(0.85em, 9px);
-        color: var(--text-subtle);
-        background: var(--bg-app);
-        padding: 0.15em 0.35em;
-        border-radius: var(--border-radius);
-        transform: translate(-50%, -125%);
-        border: var(--border);
-        min-inline-size: 1em;
-        box-shadow: 0 0.5rem 1rem var(--shadow);
-        font-weight: 600;
+        top: 50%;
+        width: 0;
+        height: 0;
+        pointer-events: none;
+    }
+    .RangeTooltipAnchor :global(.TooltipContent) {
+        position-area: block-end center;
+        margin-block-end: 0;
+        margin-block-start: var(--tooltip-offset, var(--space-xxs));
+    }
+    input[type="range"]::-webkit-slider-runnable-track {
+        background: var(--border-color-subtle);
+        block-size: 0.25rem;
+        border-radius: var(--border-radius-base);
+    }
+    input[type="range"]::-moz-range-track {
+        background: var(--border-color-subtle);
+        block-size: 0.25rem;
+        border-radius: var(--border-radius-base);
     }
     .Range span {
-        font-size: 0.75em;
-        color: var(--text-subtle);
+        font-size: var(--font-size-xs);
+        color: var(--text-color-p-subtle);
     }
     .RangeInput {
         position: relative;

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

@@ -47,7 +47,6 @@ type $$ComponentProps = {
     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. */

package/dist/form/InputLength.svelte

@@ -27,16 +27,16 @@
         display: flex;
         justify-content: flex-end;
         align-items: center;
-        font-size: 0.8rem;
-        font-weight: 500;
-        color: var(--text-subtle);
+        font-size: var(--font-size-xs);
+        font-weight: var(--font-weight-normal);
+        color: var(--text-color-p-subtle);
     }
     .InputLength .Length {
         display: flex;
         align-items: center;
-        gap: 0.25rem;
+        gap: var(--space-xxs);
     }
     .InputLength .Length.warn {
-        color: var(--text-color-warn, light-dark(red, red));
+        color: var(--field-color-danger);
     }
 </style>

package/dist/form/Label.svelte

@@ -34,7 +34,7 @@
 </script>
 
 {#if label}
-    <label for={id} class:hasTip={!!tip} class:hasHelp={!!help}>
+    <label for={id}>
         {#if typeof label === 'string'}
             <span>
                 {label} {#if required}<span aria-hidden="true">*</span>{/if}
@@ -64,16 +64,16 @@
         gap: var(--form-label-gap, var(--space-md));
         align-items: center;
     }
-    label.hasTip,
-    label.hasHelp {
+    label:has(.Help),
+    label:has(:global(.ContextTip)) {
         grid-template-columns: 1fr auto;
     }
-    label.hasHelp.hasTip {
+    label:has(.Help):has(:global(.ContextTip)) {
         grid-template-columns: 1fr auto auto;
     }
     label > span > span {
-        font-weight: 600;
-        color: var(--text-color-warn, light-dark(red, red));
+        font-weight: var(--font-weight-medium);
+        color: var(--field-color-danger);
         padding-inline: 0.175em;
     }
     .Help {

package/dist/form/LogoUpload.svelte

@@ -4,6 +4,20 @@
 	import type { Snippet } from "svelte";
 	import StringOrSnippet from "../util/StringOrSnippet.svelte";
 
+    /**
+     * @description
+     * A dual-theme logo upload component that provides side-by-side upload fields for
+     * light and dark theme logos. Each side renders an `ImageUpload` within its
+     * respective `Theme` wrapper so the preview matches the actual display context.
+     *
+     * @example
+     * <LogoUpload
+     *   lightLogoUploadUrl="/api/upload/logo-light"
+     *   darkLogoUploadUrl="/api/upload/logo-dark"
+     *   lightLogoSrc={org.logoLightUrl}
+     *   darkLogoSrc={org.logoDarkUrl}
+     * />
+     */
     let {
         lightLogoInputName = 'logo_light_url',
         darkLogoInputName = 'logo_dark_url',
@@ -77,9 +91,9 @@
 
 <style>
     .LogoUpload {
-        border: var(--border);
+        border: var(--field-border);
         overflow: hidden;
-        border-radius: var(--border-radius);
+        border-radius: var(--border-radius-base);
         margin: 0;
         padding: 0;
         list-style: none;
@@ -88,28 +102,28 @@
         container-type: inline-size;
     }
     .Content {
-        background: var(--bg-app);
+        background: var(--background-main);
     }
     .Info {
-        padding: 1rem 1.5rem;
+        padding: var(--space-md) var(--space-lg);
         display: grid;
         grid-template-columns: 1fr;
-        gap: 1rem;
+        gap: var(--space-md);
     }
     .Content :global(h5) {
-        margin-bottom: 0 !important;
-        padding: 1rem 1rem 1rem 1rem;
+        margin-block-end: 0;
+        padding: var(--space-md);
     }
     .Content :global(.Rows) {
-        padding: 0 1rem 1rem 1rem;
+        padding: 0 var(--space-md) var(--space-md) var(--space-md);
     }
     @container (min-width: 500px) {
         .LogoUpload {
             grid-template-columns: 1fr 1fr;
         }
         .Content :global(h5) {
-            margin-bottom: 0 !important;
-            padding: 1rem 1.5rem;
+            margin-block-end: 0;
+            padding: var(--space-md) var(--space-lg);
         }
     }
 </style>

package/dist/form/Select.svelte

@@ -6,6 +6,19 @@
 	import { ZodType } from "zod";
 	import FieldContent from "./FieldContent.svelte";
 
+    /**
+     * @description
+     * A styled `<select>` element with a custom dropdown arrow, integrated with the
+     * Lutra form system for validation and error display. Accepts options via props
+     * or as `<option>` children via a snippet.
+     *
+     * @example
+     * <Select name="country" label="Country" options={['US', 'UK', 'DE']} />
+     * <Select name="role" label="Role" options={[
+     *   { value: 'admin', label: 'Administrator' },
+     *   { value: 'user', label: 'User' },
+     * ]} />
+     */
     let {
         autofocus,
         children,
@@ -32,19 +45,19 @@
     }: {
         /** Whether the input should be autofocused. */
         autofocus?: boolean;
-        /** Options for the select element. */
+        /** Options for the select element rendered as a snippet. */
         children?: Snippet;
-        /** Whether the input should be disabled. */
+        /** Whether the select should be disabled. */
         disabled?: boolean;
-        /** Help text to display below the input. */
+        /** Help text to display below the select. */
         help?: string | Snippet;
         /** A random id is generated if not provided. */
         id?: string;
-        /** The label for the input */
+        /** The label for the select. */
         label?: string | Snippet
-        /** Context tooltip for a label. Renders with a questionmark using ContextTip. */
+        /** Context tooltip for the label. Renders with a questionmark using ContextTip. */
         labelTip?: string | Snippet;
-        /** The name of the input element. */
+        /** The name of the select element. */
         name: string;
         /** The onblur event handler */
         onblur?: (e: FocusEvent) => void;
@@ -160,10 +173,10 @@
         width: 100%;
     }
     select {
-        padding-inline-end: calc(1.5em + 10px);
+        padding-inline-end: 2.5em;
         width: 100%;
         appearance: none;
-        border: none !important;
+        border: none;
         border-radius: 0;
         grid-area: select;
         background: none;
@@ -174,11 +187,11 @@
         display: flex;
         align-items: center;
         justify-content: end;
-        padding-inline-end: 0.75em;
+        padding-inline-end: var(--field-padding-inline);
     }
     svg {
         display: block;
-        color: var(--field-text-color, light-dark(black, white));
+        color: var(--field-color);
     }
     select:focus-visible {
         outline: none;

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

@@ -2,19 +2,19 @@ import { type Snippet } from "svelte";
 type $$ComponentProps = {
     /** Whether the input should be autofocused. */
     autofocus?: boolean;
-    /** Options for the select element. */
+    /** Options for the select element rendered as a snippet. */
     children?: Snippet;
-    /** Whether the input should be disabled. */
+    /** Whether the select should be disabled. */
     disabled?: boolean;
-    /** Help text to display below the input. */
+    /** Help text to display below the select. */
     help?: string | Snippet;
     /** A random id is generated if not provided. */
     id?: string;
-    /** The label for the input */
+    /** The label for the select. */
     label?: string | Snippet;
-    /** Context tooltip for a label. Renders with a questionmark using ContextTip. */
+    /** Context tooltip for the label. Renders with a questionmark using ContextTip. */
     labelTip?: string | Snippet;
-    /** The name of the input element. */
+    /** The name of the select element. */
     name: string;
     /** The onblur event handler */
     onblur?: (e: FocusEvent) => void;

package/dist/form/Textarea.svelte

@@ -9,6 +9,16 @@
 	import { getFromObjWithStringPath } from "./form.js";
 	import { ZodType } from "zod";
 
+    /**
+     * @description
+     * A styled textarea component with optional auto-resize, copy-to-clipboard, and
+     * prefix/suffix content. Integrates with the Lutra form system for validation
+     * and error display.
+     *
+     * @example
+     * <Textarea name="bio" label="Biography" placeholder="Tell us about yourself..." />
+     * <Textarea name="notes" label="Notes" autoresize maxlength={500} />
+     */
     let {
         autofocus,
         autocapitalize,
@@ -43,7 +53,7 @@
         prefix,
         readonly,
         required,
-        resize = true,
+        resize,
         shape = 'rounded',
         step,
         style,

package/dist/form/Toggle.svelte

@@ -1,4 +1,166 @@
 <script lang="ts">
+	import { getContext, onMount, type Snippet } from "svelte";
+	import type { LutraForm } from "./types.js";
+	import { fieldChange } from "./client.svelte.js";
+	import FieldContent from "./FieldContent.svelte";
+	import { getFromObjWithStringPath } from "./form.js";
+	import { ZodType } from "zod";
 
+    /**
+     * @description
+     * A mobile-style toggle switch. Renders as `<input type="checkbox" role="switch">`
+     * for full accessibility. Integrates with the Lutra form system for validation,
+     * error display and field state tracking.
+     *
+     * @example
+     * <Toggle name="notifications" label="Enable notifications" />
+     * <Toggle name="darkMode" label="Dark mode" value={true} />
+     */
+    let {
+        disabled,
+        help,
+        id = $bindable(crypto.randomUUID()),
+        label,
+        labelHelp,
+        labelTip,
+        name,
+        onblur,
+        onchange,
+        onfocus,
+        required,
+        title,
+        value = $bindable(false),
+        ...rest
+    }: {
+        /** Whether the toggle is disabled. */
+        disabled?: boolean;
+        /** Help text to display below the toggle. */
+        help?: string | Snippet;
+        /** A random id is generated if not provided. */
+        id?: string;
+        /** The label for the toggle. */
+        label?: string | Snippet;
+        /** Help text to display below the label. */
+        labelHelp?: string | Snippet;
+        /** Context tooltip for the label. Renders with a questionmark using ContextTip. */
+        labelTip?: string | Snippet;
+        /** The name of the toggle field. */
+        name: string;
+        /** The onblur event handler. */
+        onblur?: (e: FocusEvent) => void;
+        /** Onchange event handler. */
+        onchange?: (e: Event) => void;
+        /** Onfocus event handler. */
+        onfocus?: (e: FocusEvent) => void;
+        /** Whether the toggle is required. */
+        required?: boolean;
+        /** A string that defines the title of the toggle. */
+        title?: string;
+        /** The checked state of the toggle. */
+        value?: boolean;
+    } = $props();
+
+    let el: HTMLInputElement | undefined = $state();
+
+    const form = getContext<LutraForm<any>>('form');
+    const field = $derived(form?.fields[name]);
+    const issue = $derived(form?.issues?.find((issue) => issue.name === name));
+    const validator = getContext<Record<string, ZodType>>('form.validators')?.[name];
+    const data = form?.data;
+    const originalData = form?.originalData;
+
+    if(!value) value = form ? (getFromObjWithStringPath(Object.assign(originalData ?? {}, data ?? {}), name) as boolean) : false;
+
+    onMount(() => {
+        if(value) fieldChange(form, name, () => el)({} as any);
+    });
 </script>
 
+<FieldContent
+    {id}
+    {label}
+    {labelHelp}
+    {labelTip}
+    contained={false}
+    direction="row"
+    {field}
+    {issue}
+    type="toggle"
+    {help}
+    {required}
+>
+    <input
+        type="checkbox"
+        role="switch"
+        class="Toggle"
+        bind:this={el}
+        {disabled}
+        {id}
+        {name}
+        {title}
+        required={required || field?.required}
+        onchange={fieldChange(form, name, () => el, validator, onchange)}
+        {onblur}
+        {onfocus}
+        bind:checked={value}
+        aria-checked={value}
+        {...rest}
+    />
+</FieldContent>
+
+<style>
+    input.Toggle {
+        appearance: none;
+        width: var(--toggle-width);
+        height: var(--toggle-height);
+        border-radius: calc(infinity * 1px);
+        background: var(--toggle-background);
+        border: var(--field-border-size) var(--field-border-style) var(--toggle-border-color);
+        cursor: pointer;
+        position: relative;
+        flex-shrink: 0;
+        padding: 0;
+        margin: 0;
+        transition:
+            background var(--transition-duration-fast) var(--transition-timing-function),
+            border-color var(--transition-duration-fast) var(--transition-timing-function);
+    }
+
+    input.Toggle::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        inset-inline-start: var(--toggle-thumb-offset);
+        width: var(--toggle-thumb-size);
+        height: var(--toggle-thumb-size);
+        border-radius: 50%;
+        background: var(--toggle-thumb-color);
+        translate: 0 -50%;
+        transition: translate var(--transition-duration-fast) var(--transition-timing-function);
+        box-shadow: var(--toggle-thumb-shadow);
+    }
+
+    input.Toggle:checked {
+        background: var(--toggle-background-checked);
+        border-color: var(--toggle-border-color-checked);
+    }
+
+    input.Toggle:checked::before {
+        translate: calc(var(--toggle-width) - var(--toggle-height)) -50%;
+    }
+
+    input.Toggle:checked::after {
+        content: none;
+        display: none;
+    }
+
+    input.Toggle:focus-visible {
+        outline: var(--focus-ring-size) solid var(--focus-ring-color);
+        outline-offset: var(--focus-ring-offset);
+    }
+
+    input.Toggle:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+</style>

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

@@ -1,18 +1,32 @@
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Toggle: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Toggle = InstanceType<typeof Toggle>;
+import { type Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Whether the toggle is disabled. */
+    disabled?: boolean;
+    /** Help text to display below the toggle. */
+    help?: string | Snippet;
+    /** A random id is generated if not provided. */
+    id?: string;
+    /** The label for the toggle. */
+    label?: string | Snippet;
+    /** Help text to display below the label. */
+    labelHelp?: string | Snippet;
+    /** Context tooltip for the label. Renders with a questionmark using ContextTip. */
+    labelTip?: string | Snippet;
+    /** The name of the toggle field. */
+    name: string;
+    /** The onblur event handler. */
+    onblur?: (e: FocusEvent) => void;
+    /** Onchange event handler. */
+    onchange?: (e: Event) => void;
+    /** Onfocus event handler. */
+    onfocus?: (e: FocusEvent) => void;
+    /** Whether the toggle is required. */
+    required?: boolean;
+    /** A string that defines the title of the toggle. */
+    title?: string;
+    /** The checked state of the toggle. */
+    value?: boolean;
+};
+declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "id" | "value">;
+type Toggle = ReturnType<typeof Toggle>;
 export default Toggle;

package/dist/form/client.svelte.js

@@ -85,8 +85,6 @@ function getTypedValue(el) {
 export function fieldChange(form, name, el, validator, onchange) {
     return async function (e) {
         if (form && form.fields[name]) {
-            console.log('fieldChange', name, el()?.value, form.data[name]);
-            // Update the form data with the new value.
             form.data[name] = getTypedValue(el());
             // if the value is the same as the original value, then the field is not tainted
             form.fields[name].tainted = form.data[name] !== form.originalData[name];

package/dist/form/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Button } from './Button.svelte';
 export { default as FormActions } from './FormActions.svelte';
 export { default as FieldError } from './FieldError.svelte';
+export { default as FieldGroup } from './FieldGroup.svelte';
 export { default as FormSection } from './FormSection.svelte';
 export { default as Fieldset } from './Fieldset.svelte';
 export { default as Form } from './Form.svelte';

package/dist/form/index.js

@@ -1,6 +1,7 @@
 export { default as Button } from './Button.svelte';
 export { default as FormActions } from './FormActions.svelte';
 export { default as FieldError } from './FieldError.svelte';
+export { default as FieldGroup } from './FieldGroup.svelte';
 export { default as FormSection } from './FormSection.svelte';
 export { default as Fieldset } from './Fieldset.svelte';
 export { default as Form } from './Form.svelte';