lutra 0.0.20 → 0.1.0

package/dist/display/Popup.svelte.d.ts

@@ -1,30 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { Snippet } from "svelte";
-declare const __propDef: {
-    props: {
-        content: Snippet<[close: () => void]>;
-        trigger: Snippet<[attrs: (node: Element) => void]>;
-        hover?: boolean | undefined;
-        shape?: "rounded" | "sharp" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type PopupProps = typeof __propDef.props;
-export type PopupEvents = typeof __propDef.events;
-export type PopupSlots = typeof __propDef.slots;
-export default class Popup extends SvelteComponent<PopupProps, PopupEvents, PopupSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        content: (this: void, close: () => void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        };
-        trigger: (this: void, attrs: (node: Element) => void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        };
-        hover?: boolean | undefined;
-        shape?: "rounded" | "sharp" | undefined;
-    }>);
-}
-export {};

package/dist/display/Table.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">let {
-  colored,
-  contained,
-  rounded,
-  hoverable,
-  hang,
-  fullWidth,
-  children
-} = $props();
-</script>
-
-<table
-    class:colored
-    class:contained
-    class:rounded
-    class:hang
-    class:fullWidth
-    class:hoverable
->
-    {@render children()}
-</table>
-
-<style>
-</style>

package/dist/display/Table.svelte.d.ts

@@ -1,34 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { Snippet } from "svelte";
-declare const __propDef: {
-    props: {
-        colored?: boolean | undefined;
-        contained?: boolean | undefined;
-        rounded?: boolean | undefined;
-        hang?: boolean | undefined;
-        hoverable?: boolean | undefined;
-        fullWidth?: boolean | undefined;
-        children: Snippet;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type TableProps = typeof __propDef.props;
-export type TableEvents = typeof __propDef.events;
-export type TableSlots = typeof __propDef.slots;
-export default class Table extends SvelteComponent<TableProps, TableEvents, TableSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        colored?: boolean | undefined;
-        contained?: boolean | undefined;
-        rounded?: boolean | undefined;
-        hang?: boolean | undefined;
-        hoverable?: boolean | undefined;
-        fullWidth?: boolean | undefined;
-        children: (this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        };
-    }>);
-}
-export {};

package/dist/display/Tag.svelte

@@ -1,90 +0,0 @@
-<script lang="ts">import { isStatusColor } from "../utils/color.js";
-let {
-  code,
-  color = "default",
-  shape = "pill",
-  onclick,
-  href,
-  target,
-  children
-} = $props();
-let isSet = $derived(color ? isStatusColor(color) : true);
-</script>
-
-{#snippet content()}
-    <em>
-        {@render children()}
-    </em>
-{/snippet}
-
-{#if href}
-    <a {href} {target} class:code class="Tag Link {shape}" style="--bgColor: {!isSet ? color : 'var(--status-'+color+')'};" onclick={onclick}>
-        {@render content()}
-    </a>
-{:else if onclick}
-    <button type="button" class:code class="Tag {shape}" style="--bgColor: {!isSet ? color : 'var(--status-'+color+')'};" onclick={onclick}>
-        {@render content()}
-    </button>
-{:else}
-    <span class:code class="Tag {shape}" style="--bgColor: {!isSet ? color : 'var(--status-'+color+')'};">
-        {@render content()}
-    </span>
-{/if}
-
-<style>
-    .Tag {
-        display: inline-flex;
-        padding: var(--padding, 0.25em 0.65em);
-        font-weight: var(--font-weight, 600);
-        --bgColor2: var(--bgColor);
-        background: var(--bgColor);
-        border-radius: var(--border-radius);
-        font-size: var(--font-size, 1em);
-        vertical-align: var(--vertical-align, baseline);
-        border: 1px solid color-mix(in srgb, var(--bgColor) 95%, var(--mix-target, black) 5%);
-    }
-    .Tag.rectangle {
-        border-radius: 0;
-    }
-    .Tag.pill {
-        border-radius: 99999px;
-    }
-    .Tag.code {
-        font-family: var(--font-family-mono);
-        padding: var(--padding, 0.15em 0.35em);
-        font-size: 1em;
-        line-height: 1em;
-        background: var(--bg, var(--bg-subtle));
-        color: var(--text);
-        border: var(--border, var(--border-subtle));
-    }
-    em {
-        opacity: 0.75;
-        font-style: normal;
-        color: var(--bgColor2);
-        filter: url(#bwFilter);
-        mix-blend-mode: luminosity;
-        left: 50%;
-        position: relative;
-        display: block;
-        transform: translateX(-50%);
-    }
-    a:hover, button:hover {
-        --bgColor2: color-mix(in srgb, var(--bgColor) 87%, white 13%);
-        background-color: var(--bgColor2);
-        cursor: pointer;
-    }
-    @media (prefers-contrast: more) {
-        .Tag {
-            border: 1px solid color-mix(in srgb, var(--bgColor) 50%, var(--mix-target, black) 50%);
-        }
-        em {
-            opacity: 0.99;
-        }
-    }
-    @media (prefers-contrast: less) {
-        em {
-            opacity: 0.65;
-        }
-    }
-</style>

package/dist/display/Tag.svelte.d.ts

@@ -1,35 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { Snippet } from "svelte";
-import type { StatusColorOrString } from '../utils/color.js';
-declare const __propDef: {
-    props: {
-        code?: boolean | undefined;
-        color?: StatusColorOrString | undefined;
-        shape?: "rounded" | "pill" | "rectangle" | undefined;
-        onclick?: ((event: MouseEvent) => void) | undefined;
-        href?: string | undefined;
-        target?: string | undefined;
-        children: Snippet;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type TagProps = typeof __propDef.props;
-export type TagEvents = typeof __propDef.events;
-export type TagSlots = typeof __propDef.slots;
-export default class Tag extends SvelteComponent<TagProps, TagEvents, TagSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        code?: boolean | undefined;
-        color?: StatusColorOrString | undefined;
-        shape?: "rounded" | "pill" | "rectangle" | undefined;
-        onclick?: ((event: MouseEvent) => void) | undefined;
-        href?: string | undefined;
-        target?: string | undefined;
-        children: (this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        };
-    }>);
-}
-export {};

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

@@ -1,28 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { Snippet } from "svelte";
-declare const __propDef: {
-    props: {
-        children: Snippet;
-        tip: string | Snippet;
-        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> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        children: (this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        };
-        tip: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        });
-        open?: boolean | undefined;
-    }>);
-}
-export {};

package/dist/display/index.d.ts

@@ -1,14 +0,0 @@
-export { default as Avatar } from './Avatar.svelte';
-export { default as Badge } from './Badge.svelte';
-export { default as Callout } from './Callout.svelte';
-export { default as Code } from './Code.svelte';
-export { default as ContextTip } from './ContextTip.svelte';
-export { default as Details } from './Details.svelte';
-export { default as Hero } from './Hero.svelte';
-export { default as Icon } from './Icon.svelte';
-export { default as IconButton } from './IconButton.svelte';
-export { default as Indicator } from './Indicator.svelte';
-export { default as Popup } from './Popup.svelte';
-export { default as Tag } from './Tag.svelte';
-export { default as Table } from './Table.svelte';
-export { default as Tooltip } from './Tooltip.svelte';

package/dist/display/index.js

@@ -1,14 +0,0 @@
-export { default as Avatar } from './Avatar.svelte';
-export { default as Badge } from './Badge.svelte';
-export { default as Callout } from './Callout.svelte';
-export { default as Code } from './Code.svelte';
-export { default as ContextTip } from './ContextTip.svelte';
-export { default as Details } from './Details.svelte';
-export { default as Hero } from './Hero.svelte';
-export { default as Icon } from './Icon.svelte';
-export { default as IconButton } from './IconButton.svelte';
-export { default as Indicator } from './Indicator.svelte';
-export { default as Popup } from './Popup.svelte';
-export { default as Tag } from './Tag.svelte';
-export { default as Table } from './Table.svelte';
-export { default as Tooltip } from './Tooltip.svelte';

package/dist/display/notifications.svelte.d.ts

@@ -1,21 +0,0 @@
-import { type OverlayPosition } from "../layout/overlays.svelte.js";
-import type { ComponentType, Snippet } from "svelte";
-/**
- * Add a notification to the screen.
- * @param {object} opts - The options for the notification.
- * @param {string} opts.content - The content of the notification.
- * @param {OverlayPosition} opts.position - The position of the notification.
- * @param {Snippet | ComponentType} opts.icon - The icon of the notification.
- * @param {string} opts.title - The title of the notification.
- * @param {string} opts.stack - Group notifications together by named stacks.
- * @param {number} opts.autoClose - The time in milliseconds before the notification closes.
- * @returns {void}
- */
-export declare function addNotification(opts: {
-    content: string;
-    position?: OverlayPosition;
-    icon?: Snippet | ComponentType;
-    title?: string;
-    stack?: string;
-    autoClose?: number;
-}): void;

package/dist/display/notifications.svelte.js

@@ -1,31 +0,0 @@
-import { createId } from "../utils/id.js";
-import { addOverlay, removeOverlay } from "../layout/overlays.svelte.js";
-import NotificationSvelte from "./Notification.svelte";
-/**
- * Add a notification to the screen.
- * @param {object} opts - The options for the notification.
- * @param {string} opts.content - The content of the notification.
- * @param {OverlayPosition} opts.position - The position of the notification.
- * @param {Snippet | ComponentType} opts.icon - The icon of the notification.
- * @param {string} opts.title - The title of the notification.
- * @param {string} opts.stack - Group notifications together by named stacks.
- * @param {number} opts.autoClose - The time in milliseconds before the notification closes.
- * @returns {void}
- */
-export function addNotification(opts) {
-    const id = createId();
-    addOverlay({
-        id,
-        z: 100,
-        content: NotificationSvelte,
-        props: { id, ...opts },
-        stack: opts.stack,
-        position: opts.position || "top right",
-        layer: "notifications",
-    });
-    if (opts.autoClose) {
-        setTimeout(() => {
-            removeOverlay(id);
-        }, opts.autoClose);
-    }
-}

package/dist/form/Button.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">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

@@ -1,36 +0,0 @@
-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> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        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: (this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        };
-    }>);
-}
-export {};

package/dist/form/FieldActions.svelte

@@ -1,46 +0,0 @@
-<script lang="ts">let {
-  align = "end",
-  children
-} = $props();
-</script>
-
-<div class="FieldActions {align}">
-    <div class="Actions">
-        {@render children()}
-    </div>
-</div>
-
-<style>
-    .FieldActions {
-        display: grid;
-        background: color-mix(in srgb, var(--bg-subtle) calc(var(--fcc) * 100%), transparent);
-        padding: calc(1.5em * var(--fcc)) calc(3em * var(--fcc));
-        grid-column: 1 / -1;
-        grid-template-columns: subgrid;
-    }
-    .Actions {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-        gap: 1.35em;
-        grid-column: 2 / -1;
-    }
-    .FieldActions.start .Actions {
-        justify-content: start;
-        grid-column: 1 / -1;
-    }
-    .FieldActions.middle .Actions {
-        justify-content: center;
-        grid-column: 1 / -1;
-    }
-    .FieldActions.end .Actions {
-        justify-content: end;
-        grid-column: 1 / -1;
-    }
-    @container (max-width: 480px) {
-        .Actions {
-            flex-direction: column;
-        }
-    }
-</style>

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

@@ -1,24 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { Snippet } from "svelte";
-declare const __propDef: {
-    props: {
-        align?: "middle" | "justified" | "start" | "end" | undefined;
-        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> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        align?: "middle" | "justified" | "start" | "end" | undefined;
-        children: (this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        };
-    }>);
-}
-export {};

package/dist/form/FieldContainer.svelte

@@ -1,37 +0,0 @@
-<script lang="ts">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;
-        row-gap: 1.5em;
-        column-gap: 3em;
-        grid-template-columns: minmax(25ch, 35%) minmax(min-content, 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);
-    }
-    @container (max-width: 800px) {
-        .FieldContainer {
-            grid-template-columns: 1fr;
-        }
-    }
-</style>

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

@@ -1,24 +0,0 @@
-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> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        contained?: boolean | undefined;
-        children: (this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        };
-    }>);
-}
-export {};

package/dist/form/FieldContent.svelte

@@ -1,134 +0,0 @@
-<script lang="ts">import Label from "./Label.svelte";
-import FieldError from "./FieldError.svelte";
-let {
-  id,
-  contained,
-  prefix,
-  suffix,
-  label,
-  labelTip,
-  type = "text",
-  direction = "column",
-  // 'row' | 'column'
-  children,
-  field,
-  issue
-} = $props();
-</script>
-
-{#snippet _prefix()}
-    <div class="Fix Prefix">
-        {#if typeof prefix === 'string'}
-            {prefix}
-        {:else}
-            {@render prefix()}
-        {/if}
-    </div>
-{/snippet}
-
-{#snippet _suffix()}
-    <div class="Fix Suffix">
-        {#if typeof suffix === 'string'}
-            {suffix}
-        {:else}
-            {@render suffix()}
-        {/if}
-    </div>
-{/snippet}
-
-<div class="FieldContent {type} {direction}" class:contained>
-    <Label {label} tip={labelTip} {id} />
-    {#if contained}
-        <div
-            class="Field"
-            class:hasPrefix={prefix}
-            class:hasSuffix={suffix}
-            class:invalid={field?.tainted && issue?.code}
-        >
-            {#if prefix}
-                {@render _prefix()}
-            {/if}
-
-            {@render children()}
-
-            {#if suffix}
-                {@render _suffix()}
-            {/if}
-        </div>
-    {:else}
-        {#if prefix}
-            {@render _prefix()}
-        {/if}
-
-        {@render children()}
-
-        {#if suffix}
-            {@render _suffix()}
-        {/if}
-    {/if}
-
-    {#if field?.tainted && issue?.code}
-        <FieldError code={issue.code} message={issue.message} />
-    {/if}
-</div>
-
-<style>
-    .FieldContent {
-        display: flex;
-        gap: 0.75em;
-        flex-direction: column;
-        font-size: var(--font-size, 1em);
-    }
-    .FieldContent.row {
-        flex-direction: row-reverse;
-        justify-content: start;
-        align-items: center;
-        flex-shrink: 0;
-    }
-    .Field {
-        background-color: var(--field-bg);
-        border: var(--field-border-size) var(--field-border-style) var(--field-border-color);
-        border-radius: var(--field-radius);
-        display: flex;
-    }
-    .Field:has(input:user-invalid),
-    .Field.invalid {
-        border-color: var(--field-border-color-error);
-    }
-    .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:has(input:focus-visible:user-invalid),
-    .Field.invalid:has(input:focus-visible) {
-        outline-color: var(--focus-color-error); 
-    }
-    .Field.hasPrefix :global(input) {
-        padding-inline-start: 0.35em;
-    }
-    .Field :global(button) {
-        margin-right: 2px;
-    }
-    .Field :global(button:focus-visible) {
-        outline: var(--focus-outline);
-        outline-offset: 3px;
-        border-radius: calc(var(--field-radius) - 2px);
-    }
-</style>