lutra 0.0.1

package/dist/Form/Input.svelte

@@ -0,0 +1,266 @@
+<script>import Label from "./Label.svelte";
+import { createId } from "../utils/id.js";
+import Copy from "../Icons/Copy.svelte";
+import Done from "../Icons/Done.svelte";
+import Show from "../Icons/Show.svelte";
+import Hide from "../Icons/Hide.svelte";
+import Tooltip from "../Display/Tooltip.svelte";
+import IconButton from "../Display/IconButton.svelte";
+import Icon from "../Display/Icon.svelte";
+let {
+  alt,
+  autocapitalize,
+  autocomplete,
+  autocorrect,
+  capture,
+  checked,
+  contained,
+  copyable,
+  defaultValue,
+  dirname,
+  disabled,
+  enterkeyhint,
+  height,
+  help,
+  id = $bindable(createId()),
+  indeterminate,
+  inputmode,
+  label,
+  labelTip,
+  list,
+  maxlength,
+  minlength,
+  max,
+  min,
+  multiple,
+  name,
+  pattern,
+  placeholder,
+  suffix,
+  prefix,
+  readonly,
+  required,
+  results,
+  shape = "rounded",
+  src,
+  step,
+  tabindex,
+  title,
+  type = "text",
+  value = $bindable(""),
+  viewable,
+  webkitdirectory
+} = $props();
+let el = $state();
+let copyTitle = $state("Copy");
+let viewTitle = $state("Show");
+let copyTooltipOpen = $state(false);
+let copyBtnIcon = $state(Copy);
+let viewBtnIcon = $state(Show);
+function view(e) {
+  e.preventDefault();
+  if (!el)
+    return;
+  if (el.type === "password") {
+    el.type = "text";
+    viewBtnIcon = Hide;
+    viewTitle = "Hide";
+  } else {
+    el.type = "password";
+    viewBtnIcon = Show;
+    viewTitle = "Show";
+  }
+  el.focus();
+}
+function copy(e) {
+  e.preventDefault();
+  if (!el)
+    return;
+  if (navigator.clipboard) {
+    navigator.clipboard.writeText(value);
+  } else {
+    el.focus();
+    el.select();
+    document.execCommand("copy");
+  }
+  copyBtnIcon = Done;
+  copyTitle = "Copied!";
+  copyTooltipOpen = true;
+  setTimeout(() => {
+    copyBtnIcon = Copy;
+    copyTitle = "Copy";
+    copyTooltipOpen = false;
+  }, 1500);
+}
+</script>
+
+{#snippet input()} 
+<input
+    bind:this={el}
+    {alt}
+    autocapitalize={typeof autocapitalize === 'string' ? autocapitalize : (typeof autocapitalize === 'boolean' ? (autocapitalize ? 'on' : 'off') : undefined)}
+    {autocomplete}
+    autocorrect={typeof autocorrect === 'boolean' ? (autocorrect ? 'on' : 'off') : undefined}
+    {capture}
+    {checked}
+    {dirname}
+    {disabled}
+    {enterkeyhint}
+    {height}
+    {id}
+    {indeterminate}
+    {inputmode}
+    {list}
+    {maxlength}
+    {minlength}
+    {max}
+    {min}
+    {multiple}
+    {name}
+    {pattern}
+    {placeholder}
+    {readonly}
+    {required}
+    {results}
+    {src}
+    {step}
+    {tabindex}
+    {title}
+    {type}
+    {value}
+    {webkitdirectory}
+/>
+{/snippet}
+
+<div class="FieldContainer {type}" class:checkOrRadio={type === "checkbox" || type === "radio"}>
+
+    <Label {id} {label} tip={labelTip} />
+
+    {#if type === "checkbox" || type === "radio"}
+        {@render input()}
+    {:else}
+
+        <div
+            class="Field {type}"
+            class:hasPrefix={!!prefix}
+            class:hasSuffix={!!suffix}
+        >
+            {#if prefix}
+                <div class="Fix Prefix">
+                    {#if typeof prefix === 'string'}
+                        {prefix}
+                    {:else}
+                        {@render prefix()}
+                    {/if}
+                </div>
+            {/if}
+
+            {@render input()}
+
+            {#if copyable}
+                <Tooltip tip={copyTitle} open={copyTooltipOpen}>
+                    <IconButton icon={copyBtnIcon} onclick={copy} disabled={copyTooltipOpen} />
+                </Tooltip>
+            {/if}
+        
+            {#if type === "password" && viewable}
+                <Tooltip tip={viewTitle}>
+                    <IconButton icon={viewBtnIcon} onclick={view} />
+                </Tooltip>
+            {/if}
+
+            {#if suffix}
+                <div class="Fix Suffix">
+                    {#if typeof suffix === 'string'}
+                        {suffix}
+                    {:else}
+                        {@render suffix()}
+                    {/if}
+                </div>
+            {/if}
+        </div>
+    {/if}
+</div>
+
+<style>
+    .FieldContainer {
+        display: flex;
+        gap: 0.75em;
+        flex-direction: column;
+        font-size: var(--font-size, 1em);
+    }
+    .Field {
+        background-color: var(--field-bg);
+        border: var(--border-size) var(--border-style) var(--border-color);
+        border-radius: var(--field-radius);
+        display: flex;
+        padding-inline: 0.15em;
+    }
+    .Field > *:not(input) {
+        flex-grow: 0;
+        flex-shrink: 0;
+    }
+    .Fix {
+        display: flex;
+        align-items: center;
+        padding-inline: 0.75em;
+        font-size: 1em;
+        line-height: 1.5;
+        color: var(--text-subtle);
+    }
+    .Suffix {
+        padding-inline-start: 0;
+    }
+    .Prefix {
+        padding-inline-end: 0;
+    }
+    .Field:has(input:focus-visible) {
+        outline: var(--focus-outline);
+    }
+    /**
+     * Input element
+     */
+    input:not([type="checkbox"]):not([type="radio"]) {
+        border: none;
+        flex-grow: 1;
+        flex-shrink: 0;
+    }
+    input:not([type="checkbox"]):not([type="radio"]):focus-visible,
+    input:not([type="checkbox"]):not([type="radio"]):active {
+        outline: none;
+    }
+    .Field.hasPrefix input {
+        padding-inline-start: 0.35em;
+    }
+    /**
+     * Buttons
+     */
+    .Field :global(button:focus-visible) {
+        outline: var(--focus-outline);
+        outline-offset: 3px;
+        border-radius: calc(var(--field-radius) - 2px);
+    }
+    /**
+     * Checkbox and radio
+     */
+    input[type="checkbox"] {
+        border-radius: 6px;
+    }
+
+    .FieldContainer.checkOrRadio {
+        flex-direction: row-reverse;
+        align-items: center;
+        justify-content: start;
+        gap: 1em;
+        width: fit-content;
+    }
+    .FieldContainer.checkOrRadio .Field {
+        display: flex;
+        align-items: center;
+        border: none;
+    }
+    .FieldContainer.checkOrRadio input:focus-visible,
+    .FieldContainer.checkOrRadio input:hover {
+        outline: var(--focus-outline);
+    }
+</style>

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

@@ -0,0 +1,113 @@
+import { SvelteComponent } from "svelte";
+import type { Autocomplete } from "./types.js";
+declare const __propDef: {
+    props: {
+        /** alt attribute for the image type. Required for accessibility */
+        alt?: string | undefined;
+        /** Whether the input should be autocapitalized. */
+        autocapitalize?: boolean | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
+        /** Specifies whether autocomplete is enabled for the input. */
+        autocomplete?: Autocomplete | undefined;
+        /** Whether the input should be autocorrected. (Safari only) */
+        autocorrect?: boolean | undefined;
+        /** A hint to the browser for which capture method to use. */
+        capture?: "user" | "environment" | undefined;
+        /** Whether the input should be checked. */
+        checked?: boolean | undefined;
+        /** Whether the input should be contained. */
+        contained?: boolean | undefined;
+        /** Whether the input should be copyable. */
+        copyable?: boolean | undefined;
+        /** The default value of the input element. */
+        defaultValue?: string | undefined;
+        /** Form field name for the directionality of the element's text content during form submission */
+        dirname?: string | undefined;
+        /** Whether the input should be disabled. */
+        disabled?: boolean | undefined;
+        /** A hint to the browser for which enter key to display for the input. */
+        enterkeyhint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
+        /** The height of the input element. Valid for image inputs. */
+        height?: number | undefined;
+        /** Help text to display below the input. */
+        help?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        /** A random id is generated if not provided. */
+        id?: string | undefined;
+        /** Whether the input should be indeterminate. */
+        indeterminate?: boolean | undefined;
+        /** 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" | "search" | "text" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
+        /** The label for the input */
+        label?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        /** Context tooltip for a label. Renders with a questionmark using ContextTip. */
+        labelTip?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        /** The id of a datalist element that contains pre-defined options for the input element. */
+        list?: string | undefined;
+        /** 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 | undefined;
+        /** 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 | undefined;
+        /** Allow multiple f
+        /** The maximum value of the input element. Valid for date, month, week, time, datetime-local, number, and range. */
+        max?: number | undefined;
+        /** The minimum value of the input element. Valid for date, month, week, time, datetime-local, number, and range. */
+        min?: number | undefined;
+        /** Whether the input should allow multiple values. Valid for email and file inputs. */
+        multiple?: boolean | undefined;
+        /** The name of the input element. */
+        name?: string | undefined;
+        /** A regular expression that the input's value is checked against. Valid for text, search, url, tel, email, and password. */
+        pattern?: string | undefined;
+        /** Placeholder text to display when the input is empty. */
+        placeholder?: string | undefined;
+        /** Suffix content, to display after the input. */
+        suffix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        /** Prefix content, to display before the input. */
+        prefix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        /** Whether the input should be read-only. */
+        readonly?: boolean | undefined;
+        /** Whether the input should be required. */
+        required?: boolean | undefined;
+        /** The maximum number of items that should be displayed in the drop-down list of previous search queries. Safari only. */
+        results?: number | undefined;
+        /** The shape of the input element. */
+        shape?: "default" | "circle" | "rounded" | "pill" | undefined;
+        /** Source URL for the image type. */
+        src?: string | undefined;
+        /** Spellcheck the input. */
+        spellcheck?: boolean | undefined;
+        /** 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 | undefined;
+        /** An integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation. */
+        tabindex?: number | undefined;
+        /** A string that defines the title of the input element. */
+        title?: string | undefined;
+        /** The type of input to display. */
+        type?: "number" | "color" | "button" | "search" | "time" | "image" | "text" | "submit" | "email" | "tel" | "url" | "checkbox" | "radio" | "hidden" | "password" | "file" | "range" | "date" | "datetime-local" | "month" | "week" | undefined;
+        /** The value of the input element. */
+        value?: string | undefined;
+        /** Whether the input should be viewable. Valid for password inputs. */
+        viewable?: boolean | undefined;
+        /** Whether the input should only accept directory uploads. */
+        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> {
+}
+export {};

package/dist/Form/InputLength.svelte

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        /** The value of the input. */
+        value: string;
+        /** The maximum length of the input. */
+        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> {
+}
+export {};

package/dist/Form/Label.svelte

@@ -0,0 +1,26 @@
+<script>import ContextTip from "../Display/ContextTip.svelte";
+let {
+  id,
+  label,
+  tip
+} = $props();
+</script>
+
+{#if label}
+    <label for={id}>
+        {#if typeof label === 'string'}
+            {label}
+        {:else}
+            {@render label()}
+        {/if}
+        {#if tip}
+            <ContextTip {tip} />
+        {/if}
+    </label>
+{/if}
+
+<style>
+    label {
+        cursor: var(--cursor, default);
+    }
+</style>

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

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        /** The id of the input element */
+        id?: string | undefined;
+        /** The label for the input */
+        label?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        /** The help text for the input */
+        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> {
+}
+export {};

package/dist/Form/Select.svelte

@@ -0,0 +1,24 @@
+<script>import FieldContent from "./FieldContent.svelte";
+let {
+  label,
+  labelTip,
+  help,
+  options
+} = $props();
+let id = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+</script>
+
+<FieldContent {id} {label} {labelTip}>
+    <select>
+        {#each options as option}
+            {#if typeof option === "string"}
+                <option value={option}>{option}</option>
+            {:else}
+                <option value={option.value}>{option.label}</option>
+            {/if}
+        {/each}
+    </select>
+</FieldContent>
+
+<style>
+</style>

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

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        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;
+        help?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        options: string[] | {
+            value: string;
+            label: string;
+        }[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SelectProps = typeof __propDef.props;
+export type SelectEvents = typeof __propDef.events;
+export type SelectSlots = typeof __propDef.slots;
+export default class Select extends SvelteComponent<SelectProps, SelectEvents, SelectSlots> {
+}
+export {};

package/dist/Form/form.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="svelte" />
+import { type Writable } from 'svelte/store';
+export declare const FormItems: Writable<Record<string, FormElement | FormElement[]>>;
+export type FormElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+export type SuccessType = {
+    success: true;
+    value: any;
+};
+export type ErrorType = {
+    success: false;
+    error: string;
+};
+export type FormRegistry = {
+    items: Record<string, FormElement | FormElement[]>;
+    getValues(): Record<string, string>;
+    register(name: string, el: FormElement | FormElement[]): void;
+    updateFormValues(): void;
+    validate(): boolean;
+    validateField(nameOrElement: string): SuccessType | ErrorType;
+    validateField(nameOrElement: FormElement): SuccessType | ErrorType;
+    validateField(nameOrElement: FormElement[]): SuccessType | ErrorType;
+    validateSingleField(nameOrElement: string | FormElement): SuccessType | ErrorType;
+};
+export type BeforeSubmitFn = (opts: {
+    form: HTMLFormElement;
+    data: FormData;
+    cancel: () => void;
+}) => void | Promise<void>;
+export type AddBeforeSubmitFn = (id: string, fn: BeforeSubmitFn) => void;
+export declare const getPropertyPaths: (schema: ZodType) => string[];
+/**
+ * Keys that should be ignored when marking a field as changed.
+ */
+export declare const ignoreChangeKeys: string[];

package/dist/Form/form.js

@@ -0,0 +1,31 @@
+import { writable } from 'svelte/store';
+import { ZodArray, ZodNullable, ZodObject, ZodOptional, union, boolean, literal } from 'zod';
+export const FormItems = writable({});
+export const getPropertyPaths = (schema) => {
+    // check if schema is nullable or optional
+    if (schema instanceof ZodNullable ||
+        schema instanceof ZodOptional) {
+        return getPropertyPaths(schema.unwrap());
+    }
+    // check if schema is an array
+    if (schema instanceof ZodArray) {
+        return getPropertyPaths(schema.element);
+    }
+    // check if schema is an object
+    if (schema instanceof ZodObject) {
+        // loop through key/value pairs
+        const entries = Object.entries(schema.shape);
+        return entries.flatMap(([key, value]) => {
+            // get nested keys
+            const nested = getPropertyPaths(value).map((subKey) => `${key}.${subKey}`);
+            // return nested keys
+            return nested.length ? nested : key;
+        });
+    }
+    // return empty array
+    return [];
+};
+/**
+ * Keys that should be ignored when marking a field as changed.
+ */
+export const ignoreChangeKeys = ['Tab', 'Shift', 'Control', 'Alt', 'Meta', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageUp', 'PageDown', 'Escape', 'CapsLock', 'NumLock', 'ScrollLock', 'Pause', 'ContextMenu', 'PrintScreen', 'Help', 'Clear', 'OS', 'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F12'];

package/dist/Form/types.d.ts

@@ -0,0 +1,4 @@
+export type Autocomplete = 'on' | 'off' | AutocompleteSingleToken | AutocompleteBilling | AutocompleteShipping;
+export type AutocompleteBilling = 'billing' | `billing ${AutocompleteSingleToken}`;
+export type AutocompleteShipping = 'shipping' | `shipping ${AutocompleteSingleToken}`;
+export type AutocompleteSingleToken = `section-${string}` | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo" | "webauthn";

package/dist/Form/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Grid/Column.svelte

@@ -0,0 +1,11 @@
+<script>import { setContext } from "svelte";
+let { children } = $props();
+</script>
+
+<div class="Column">
+    {@render children()}
+</div>
+
+<style>
+    
+</style>

package/dist/Grid/Column.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { type Snippet } from "svelte";
+declare const __propDef: {
+    props: {
+        children: Snippet;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ColumnProps = typeof __propDef.props;
+export type ColumnEvents = typeof __propDef.events;
+export type ColumnSlots = typeof __propDef.slots;
+export default class Column extends SvelteComponent<ColumnProps, ColumnEvents, ColumnSlots> {
+}
+export {};

package/dist/Grid/Grid.svelte

@@ -0,0 +1,19 @@
+<script>import { setContext } from "svelte";
+let {
+  children,
+  fullWidth = false
+} = $props();
+</script>
+
+<div class="Grid" class:fullWidth>
+    {@render children()}
+</div>
+
+<style>
+    .Grid {
+        display: grid;
+        grid-template-columns: repeat(12, minmax(0, 1fr));
+        grid-gap: 1.5rem;
+    }
+    .Grid.fullWidth { block-size: 100%; }
+</style>