lutra 0.0.1

package/dist/Display/Tooltip.svelte

@@ -0,0 +1,96 @@
+<script>import Theme from "../Layout/Theme.svelte";
+let {
+  children,
+  tip,
+  open
+} = $props();
+const id = `tt-${Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)}`;
+</script>
+
+<span class="Tooltip" class:open>
+    <span class="TooltipContainer" role="tooltip">
+        <Theme theme="invert">
+            <span class="TooltipContent" id={id}>
+                {#if typeof tip === "string"}
+                    {@html tip}
+                {:else}
+                    {@render tip()}
+                {/if}
+            </span>
+            <svg width="12" height="8" viewBox="0 0 12 8" version="1.1">
+                <g transform="matrix(0.75,0,0,1,0,0)">
+                    <path d="M16,0L0,0L8,8L16,0Z" fill="var(--bg-app)"/>
+                </g>
+            </svg>
+        </Theme>
+    </span>
+    <span class="TooltipTrigger" aria-describedby="{id}">
+        {@render children() }
+    </span>
+</span>
+
+<style>
+    .Tooltip {
+        position: relative;
+        height: 100%;
+        display: inline-flex;
+        align-items: center;
+    }
+    .TooltipContainer {
+        position: absolute;
+        bottom: calc(100%);
+        left: 50%;
+        transform: translateX(-50%);
+        padding-bottom: 4px;
+        z-index: 1000;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        filter: drop-shadow(0px 2px 5px var(--border-subtle-color));
+        opacity: 0;
+        pointer-events: none;
+    }
+    .TooltipContent {
+        background-color: var(--bg-app);
+        padding: 0.125rem 0.35rem;
+        border-radius: calc(var(--border-radius));
+        border-top: var(--border-subtle);
+        border-left: var(--border-subtle);
+        border-right: var(--border-subtle);
+        display: block;
+        font-size: max(0.85rem, 12px);
+        line-height: 1.4;
+        font-weight: 500;
+        color: var(--text);
+        max-width: clamp(5ch, 100%, 35ch);
+        width: max-content;
+    }
+    .TooltipContent :global(code) {
+        font-weight: 600;
+    }
+    .TooltipContent :global(strong),
+    .TooltipContent :global(b) {
+        font-weight: 700;
+    }
+    .Tooltip:has(.TooltipTrigger:hover):not(.open) .TooltipContainer {
+        animation: fadeIn 0.2s var(--delay, 0.5s) ease-in-out forwards;
+    }
+    .Tooltip:has(.TooltipTrigger:focus-within) .TooltipContainer {
+        animation: fadeIn 0.2s ease-in-out forwards;
+    }
+    .Tooltip.open .TooltipContainer {
+        animation: fadeIn 0.2s ease-in-out forwards;
+    }
+    @keyframes fadeIn {
+        0% { opacity: 0; transform: translateY(-0.5rem) translateX(-50%); }
+        100% { opacity: 1; transform: translateY(0) translateX(-50%); }
+    }
+    @media(prefers-reduced-motion: reduce) {
+        .Tooltip:has(.TooltipTrigger:hover) .TooltipContainer,
+        .Tooltip:has(.TooltipTrigger:focus-within) .TooltipContainer,
+        .Tooltip.open .TooltipContainer {
+            animation: none !important;
+            opacity: 1;
+        }
+    }
+</style>

package/dist/Display/Tooltip.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { Snippet } from "svelte";
+declare const __propDef: {
+    props: {
+        /** Content to trigger the tooltip */
+        children: Snippet;
+        /** The content of the tooltip */
+        tip: string | Snippet;
+        /** Open the tooltip on render (cannot be closed) */
+        open?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TooltipProps = typeof __propDef.props;
+export type TooltipEvents = typeof __propDef.events;
+export type TooltipSlots = typeof __propDef.slots;
+export default class Tooltip extends SvelteComponent<TooltipProps, TooltipEvents, TooltipSlots> {
+}
+export {};

package/dist/Form/Button.svelte

@@ -0,0 +1,34 @@
+<script>import Icon from "../Display/Icon.svelte";
+let {
+  href,
+  type = "button",
+  disabled = false,
+  icon,
+  onclick,
+  children
+} = $props();
+</script>
+
+{#if href}
+    <a class="Button Link button" {href} {onclick}>
+        {#if icon}
+            <Icon {icon} />
+        {/if}
+        {@render children()}
+    </a>
+{:else}
+    <button class="Button button" type={type} disabled={disabled} {onclick}>
+        {#if icon}
+            <Icon {icon} />
+        {/if}
+        {@render children()}
+    </button>
+{/if}
+
+<style>
+    .Button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+</style>

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

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { ComponentType, Snippet } from 'svelte';
+declare const __propDef: {
+    props: {
+        href?: string | undefined;
+        type?: "button" | "submit" | "reset" | undefined;
+        disabled?: boolean | undefined;
+        icon?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | ComponentType | undefined;
+        onclick?: ((event: MouseEvent) => void) | undefined;
+        children: Snippet;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
+}
+export {};

package/dist/Form/FieldActions.svelte

@@ -0,0 +1,25 @@
+<script>let {
+  children
+} = $props();
+</script>
+
+<div class="FieldActions">
+    {@render children()}
+</div>
+
+<style>
+    .FieldActions {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        gap: 1.35em;
+        background: color-mix(in srgb, var(--bg-subtle) calc(var(--fcc) * 100%), transparent);
+        padding: calc(1.5em * var(--fcc)) calc(1.5em * var(--fcc));
+    }
+    @container (max-width: 400px) {
+        .FieldActions {
+            flex-direction: column;
+        }
+    }
+</style>

package/dist/Form/FieldActions.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 FieldActionsProps = typeof __propDef.props;
+export type FieldActionsEvents = typeof __propDef.events;
+export type FieldActionsSlots = typeof __propDef.slots;
+export default class FieldActions extends SvelteComponent<FieldActionsProps, FieldActionsEvents, FieldActionsSlots> {
+}
+export {};

package/dist/Form/FieldContainer.svelte

@@ -0,0 +1,31 @@
+<script>let {
+  children,
+  contained
+} = $props();
+</script>
+
+<div class="FieldContainer" class:contained style="--fcc: {contained ? 1 : 0}">
+    {@render children()}
+</div>
+
+<style>
+    .FieldContainer {
+        container-type: inline-size;
+        display: grid;
+        gap: 1.5em;
+        grid-template-columns: 1fr;
+        border-radius: var(--border-radius);
+    }
+    .FieldContainer.contained {
+        border: var(--border);
+        gap: 0;
+        overflow: clip;
+    }
+    .FieldContainer :global(.FieldSection:has(+ .FieldActions)) {
+        margin-bottom: 0;
+        border-bottom: 0;
+    }
+    .FieldContainer.contained :global(.FieldSection:has(+ .FieldActions)) {
+        border-bottom: var(--border);
+    }
+</style>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import type { Snippet } from "svelte";
+declare const __propDef: {
+    props: {
+        contained?: boolean | undefined;
+        children: Snippet;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FieldContainerProps = typeof __propDef.props;
+export type FieldContainerEvents = typeof __propDef.events;
+export type FieldContainerSlots = typeof __propDef.slots;
+export default class FieldContainer extends SvelteComponent<FieldContainerProps, FieldContainerEvents, FieldContainerSlots> {
+}
+export {};

package/dist/Form/FieldContent.svelte

@@ -0,0 +1,78 @@
+<script>import Label from "./Label.svelte";
+let {
+  id,
+  contained,
+  prefix,
+  suffix,
+  label,
+  labelTip,
+  type = "text",
+  children
+} = $props();
+</script>
+
+
+<div class="FieldContent {type}" class:contained>
+    <Label {label} tip={labelTip} {id} />
+    {#if contained}
+        <div class="Field">
+            {#if prefix}
+                <div class="Fix Prefix">{prefix}</div>
+            {/if}
+            {@render children()}
+            {#if suffix}
+                <div class="Fix Suffix">{suffix}</div>
+            {/if}
+        </div>
+    {:else}
+        {@render children()}
+    {/if}
+</div>
+
+<style>
+    .FieldContent {
+        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);
+    }
+    .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);
+    }
+</style>

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

@@ -0,0 +1,32 @@
+import { SvelteComponent } from "svelte";
+import type { Snippet } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+        contained?: boolean | undefined;
+        prefix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        suffix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        type?: string | 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;
+        children: Snippet;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FieldContentProps = typeof __propDef.props;
+export type FieldContentEvents = typeof __propDef.events;
+export type FieldContentSlots = typeof __propDef.slots;
+export default class FieldContent extends SvelteComponent<FieldContentProps, FieldContentEvents, FieldContentSlots> {
+}
+export {};

package/dist/Form/FieldSection.svelte

@@ -0,0 +1,97 @@
+<script>import H5 from "../Typography/H5.svelte";
+import P from "../Typography/P.svelte";
+let {
+  title,
+  description,
+  children
+} = $props();
+</script>
+
+<div class="FieldSection">
+    {#if title || description}
+        <div class="FieldSectionTitle">
+            {#if title}
+                {#if typeof title === "string"}
+                    <H5>{title}</H5>
+                {:else}
+                    {@render title()}
+                {/if}
+            {/if}
+            {#if description}
+                {#if typeof description === "string"}
+                    <small>{description}</small>
+                {:else}
+                    {@render description()}
+                {/if}
+            {/if}
+        </div>
+    {/if}
+    <div class="FieldSectionFields">
+        {@render children()}
+    </div>
+</div>
+
+<style>
+    .FieldSection {
+        padding: 0;
+        display: grid;
+        gap: 0rem;
+        grid-template-columns: 1fr;
+    }
+    .FieldSection .FieldSectionTitle {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--base);
+        gap: 0.25rem;
+        padding: 1em 1.5em;
+        border-bottom: var(--border);
+    }
+    .FieldSection:not(:first-child) {
+        border-top: calc(var(--fcc) * var(--border-size)) var(--border-style) var(--border-color);
+    }
+    .FieldSection .FieldSectionFields {
+        padding: calc(var(--padding, 1.5em) * var(--fcc));
+        display: grid;
+        gap: 3rem;
+    }
+    @container (min-width: 600px) {
+        .FieldSection {
+            gap: 3rem;
+            padding: 2rem;
+            grid-template-columns: 1fr;
+            border-bottom: 1px dotted var(--border-light);
+            margin-bottom: 3rem;
+            border-radius: 0;
+        }
+        .FieldSection:has(.FieldSectionTitle) {
+            grid-template-columns: minmax(180px, 1fr) 3fr;
+        }
+        .FieldSection:last-child {
+            border-bottom: none;
+            margin-bottom: 0;
+        }
+        .FieldSection:not(:first-child) {
+            border-top: 0;
+            padding-top: 0;
+        }
+        .FieldSection .FieldSectionTitle {
+            gap: 1rem;
+            padding: 0;
+            background-color: transparent;
+            border-bottom: none;
+        }
+        .FieldSection .FieldSectionFields {
+            padding: 0;
+        }
+    }
+    @container (min-width: 1024px) {
+        .FieldSection {
+            grid-template-columns: minmax(300px, 1fr) 3fr;
+            padding: 3rem;
+        }
+        .FieldSection:not(:first-child) {
+            border-top: 0;
+            padding-top: 0;
+        }
+    }
+</style>

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

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { Snippet } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        description?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        children: Snippet;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FieldSectionProps = typeof __propDef.props;
+export type FieldSectionEvents = typeof __propDef.events;
+export type FieldSectionSlots = typeof __propDef.slots;
+export default class FieldSection extends SvelteComponent<FieldSectionProps, FieldSectionEvents, FieldSectionSlots> {
+}
+export {};

package/dist/Form/Fieldset.svelte

@@ -0,0 +1,63 @@
+<script>let {
+  description,
+  contained,
+  rounded,
+  legend,
+  columns = 1,
+  children
+} = $props();
+let columnsArray = Array.isArray(columns) ? columns : [columns, columns, columns];
+let lgColumns = columnsArray[0];
+let mdColumns = columnsArray[1] || lgColumns;
+let smColumns = columnsArray[2] || mdColumns;
+</script>
+
+<div class="FieldsetContainer">
+    <fieldset class:rounded class:contained class="cols-{columns}" style="--lg-cols: {lgColumns}; --md-cols: {mdColumns}; --sm-cols: {smColumns}">
+        {#if legend}
+            <legend>
+                {#if typeof legend === 'string'}
+                    {legend}
+                {:else}
+                    {@render legend()}
+                {/if}
+            </legend>
+        {/if}
+        {#if description}
+            {#if typeof description === 'string'}
+                <small>{description}</small>
+            {:else}
+                {@render description()}
+            {/if}
+        {/if}
+        {@render children()}
+    </fieldset>
+</div>
+
+<style>
+    .FieldsetContainer {
+        container-type: inline-size;
+    }
+    fieldset {
+        display: grid;
+        grid-template-columns: repeat(var(--lg-cols), 1fr);
+        gap: 1rem;
+    }
+    legend {
+        margin-bottom: 1.5rem;
+        font-size: var(--font-size, 1em);
+    }
+    fieldset.contained {
+        padding: 2rem;
+    }
+    @container(max-width: 960px) {
+        fieldset {
+            grid-template-columns: repeat(var(--md-cols), 1fr);
+        }
+    }
+    @container(max-width: 640px) {
+        fieldset {
+            grid-template-columns: repeat(var(--sm-cols), 1fr);
+        }
+    }
+</style>

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

@@ -0,0 +1,32 @@
+import { SvelteComponent } from "svelte";
+import type { Snippet } from "svelte";
+declare const __propDef: {
+    props: {
+        /** The description of the fieldset. */
+        description?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        /** Whether the fieldset should be contained. */
+        contained?: boolean | undefined;
+        /** Whether the fieldset should be rounded. */
+        rounded?: boolean | undefined;
+        /** The legend of the fieldset. */
+        legend?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        /** The number of columns to display the fieldset in. You can pass a single number or an array of numbers. The array will be used to set the number of columns at different breakpoints (lg, md, sm). */
+        columns?: number | [number] | [number, number] | [number, number, number] | undefined;
+        /** Content to be rendered inside the fieldset. */
+        children: Snippet;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FieldsetProps = typeof __propDef.props;
+export type FieldsetEvents = typeof __propDef.events;
+export type FieldsetSlots = typeof __propDef.slots;
+export default class Fieldset extends SvelteComponent<FieldsetProps, FieldsetEvents, FieldsetSlots> {
+}
+export {};

package/dist/Form/Form.svelte

@@ -0,0 +1,19 @@
+<script>import { enhance as enhanceAction } from "$app/forms";
+import UiContent from "../Layout/UIContent.svelte";
+import { onMount, setContext } from "svelte";
+let {
+  fullWidth = false,
+  children
+} = $props();
+</script>
+
+<UiContent>
+    <form>
+        {@render children()}
+    </form>
+</UiContent>
+
+<style>
+    form {
+    }
+</style>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import type { Snippet } from "svelte";
+declare const __propDef: {
+    props: {
+        fullWidth?: boolean | undefined;
+        children: Snippet;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FormProps = typeof __propDef.props;
+export type FormEvents = typeof __propDef.events;
+export type FormSlots = typeof __propDef.slots;
+export default class Form extends SvelteComponent<FormProps, FormEvents, FormSlots> {
+}
+export {};