lutra 0.0.33 → 0.1.4

package/README.md

@@ -1,29 +1,9 @@
-# AUI
+# Lutra
 
-## Local development
+UI library for Svelte 5.
 
-During local development, the REPL compiler requests library files from the local `dist` folder when they are imported. To serve these, run the `local.js` script.
+## Installation
 
 ```bash
-pnpm local
+npm install --save lutra
 ```
-
-### Rewriting props
-
-When you edit a component's description or props, you need to regenerate `componentProps.ts`.
-
-`read_props.js` reads all the library files and generates props to display in the docs from the AST. Running
-
-```bash
-pnpm props
-```
-
-will read the props and write `componentProps.ts`.
-
-Running:
-
-```bash
-pnpm package
-```
-
-will write the props and generate the library Svelte files.

package/dist/components/AspectRatio.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    let {
+        ratio = 16 / 9,
+        children
+    }: {
+        ratio?: number;
+        children: Snippet;
+    } = $props();
+</script>
+
+<div class="AspectRatio" style="--aspect-ratio: {ratio}">
+    {@render children()}
+</div>
+
+<style>
+    @property --aspect-ratio {
+        syntax: "<number-percentage> / <number-percentage>";
+        inherits: false;
+        initial-value: 16 / 9;
+    }
+    .AspectRatio {
+        aspect-ratio: var(--aspect-ratio);
+    }
+</style>
+

package/dist/components/AspectRatio.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    ratio?: number;
+    children: Snippet;
+};
+declare const AspectRatio: import("svelte").Component<$$ComponentProps, {}, "">;
+type AspectRatio = ReturnType<typeof AspectRatio>;
+export default AspectRatio;

package/dist/components/Avatar.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { hexRelativeLuminance, stringToColor } from '../util/color.js';
+	import Image from './Image.svelte';
+
+    /**
+     * @description
+     * An avatar is a user profile photo or a logo. It can be a placeholder or a URL to an image. If there is no image, the first letter of the name will be used as a placeholder.
+     * You can pick from three crop styles: circle, square, or rounded. The color of the placeholder is based on the name, making each visually distinct from each other.
+     * @cssprop --border-radius - The border radius of the avatar when cropped as rounded.
+     * @cssprop --mask-image - Custom mask image to use for the avatar.
+     * @example
+     * <p>With picture:</p>
+     * <Avatar name="Auth70" shape="rounded" src="https://avatars.githubusercontent.com/u/122825113?s=200&v=4" --size="4rem" />
+     * <p>Without picture:</p>
+     * <Avatar name="Moxie" shape="square" />
+     * <Avatar name="Napoleon" shape="rounded" />
+     * <Avatar name="Byron" shape="circle" />
+     */
+    let {
+        src,
+        srcset,
+        alt,
+        color,
+        size = '3rem',
+        name = "N/A",
+        shape = 'circle',
+        children,
+    }: {
+        src?: string;
+        srcset?: string;
+        alt?: string;
+        color?: string;
+        size?: string;
+        name?: string;
+        shape?: 'circle' | 'square' | 'rounded';
+        children?: Snippet;
+    } = $props();
+
+    const userColor = (src || srcset) ? '#666666' : color ?? stringToColor(name);
+    const luminance = hexRelativeLuminance(userColor);
+    const textColor = luminance < 0.5 ? 'rgba(255,255,255,0.85)' : 'rgba(0,0,0,0.85)';
+    const firstCharacter = [...name][0]; // supports multi-byte characters. name[0] would not.
+</script>
+
+<figure class="Avatar {shape}" style="--user-color: {userColor}; --text-color: {textColor}; --size: {size}">
+    {#if src}
+        <Image
+            src={src}
+            srcset={srcset}
+            alt={alt ?? name}
+            fit="cover"
+            --width={size}
+            --height={size}
+        />
+    {:else}
+        <div class="Placeholder">
+            {#if children}
+                {@render children()}
+            {:else}
+                <span>{firstCharacter}</span>
+            {/if}
+        </div>
+    {/if}
+</figure>
+
+<style>
+    .Avatar {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0;
+        block-size: var(--size, 3rem);
+        inline-size: var(--size, 3rem);
+        overflow: clip;
+        background-color: var(--user-color);
+        mask-image: var(--mask-image, none);
+        mask-size: 100% 100%;
+        mask-repeat: no-repeat;
+        -webkit-mask-image: var(--mask-image, none);
+        -webkit-mask-size: 100% 100%;
+        -webkit-mask-repeat: no-repeat;
+    }
+    .Avatar.circle { border-radius: 50%; }
+    .Avatar.square { border-radius: 0; }
+    .Avatar.rounded { border-radius: var(--border-radius); }
+    .Avatar img {
+        block-size: 100%;
+        inline-size: 100%;
+        object-fit: cover;
+    }
+    .Avatar .Placeholder {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        block-size: 100%;
+        inline-size: 100%;
+        background-color: var(--user-color);
+        color: var(--text-color);
+        user-select: none;
+        font-size: 1rem;
+        font-weight: 600;
+        user-select: none;
+    }
+</style>

package/dist/components/Avatar.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    src?: string;
+    srcset?: string;
+    alt?: string;
+    color?: string;
+    size?: string;
+    name?: string;
+    shape?: 'circle' | 'square' | 'rounded';
+    children?: Snippet;
+};
+declare const Avatar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/{display → components}/Close.svelte

@@ -1,10 +1,14 @@
-<script lang="ts">let {
-  onclick,
-  position
-} = $props();
+<script lang="ts">
+    let {
+        onclick,
+        position
+    }: {
+        onclick?: (e: MouseEvent) => void;
+        position?: "top left" | "top right" | "bottom left" | "bottom right";
+    } = $props();
 </script>
 
-<button class="Close {position}" {onclick}>
+<button class="Close {position}" {onclick} aria-label="Close">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <line x1="18" y1="6" x2="6" y2="18"></line>
         <line x1="6" y1="6" x2="18" y2="18"></line>
@@ -16,18 +20,32 @@
         cursor: pointer;
         padding: var(--close-padding, 0.5rem);
         border-radius: 50%;
-        color: var(--text);
+        color: var(--text-color, light-dark(black, white));
         cursor: pointer;
         pointer-events: auto;
+        border: none;
+    }
+
+    button {
+        background-color: transparent;
+        border: none;
+        padding: 0;
+        margin: 0;
+        font: inherit;
+        color: inherit;
+        text-align: inherit;
+        display: inline-block;
     }
 
     svg {
+        display: block;
+        margin: 0;
         width: max(1.5rem, 16px);
         height: max(1.5rem, 16px);
     }
 
     .Close:hover {
-        color: var(--text-subtle);
+        color: var(--text-color-subtle, light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5)));
     }
 
     .Close.top {

package/dist/components/Close.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    onclick?: (e: MouseEvent) => void;
+    position?: "top left" | "top right" | "bottom left" | "bottom right";
+};
+declare const Close: import("svelte").Component<$$ComponentProps, {}, "">;
+type Close = ReturnType<typeof Close>;
+export default Close;

package/dist/components/ContextTip.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+    import Tooltip from "./Tooltip.svelte";
+	import Help from "../icons/IconHelp.svelte";
+	import Icon from "./Icon.svelte";
+
+    /**
+     * @description
+     * A component that displays a context tip.
+     * @example
+     * <ContextTip tip="This is a context tip" />
+     */
+    let {
+        tip
+    }: {
+        tip: string | Snippet;
+    } = $props();
+</script>
+
+<Tooltip {tip}>
+    <a href="#contexttip" onclick={(e) => { e.preventDefault(); e.stopPropagation(); }}>
+        <Icon icon={Help} --icon-width="16px" --icon-height="16px" --cursor="help" --vertical-align="baseline" />
+    </a>
+</Tooltip>
+
+<style>
+    a {
+        border-radius: 50%;
+        color: var(--overlay-color, light-dark(black, white));
+        height: 16px;
+        width: 16px;
+        padding: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+    a:focus-visible {
+        color: var(--focus-ring-color);
+        outline-offset: 0px;
+    }
+</style>

package/dist/components/ContextTip.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    tip: string | Snippet;
+};
+declare const ContextTip: import("svelte").Component<$$ComponentProps, {}, "">;
+type ContextTip = ReturnType<typeof ContextTip>;
+export default ContextTip;

package/dist/components/Dialog.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import { slidefade } from "../util/transitions.js";
+
+    /**
+     * @description
+     * A dialog component that follows the HTML dialog element spec.
+     * Provides a modal dialog with a backdrop and proper focus management.
+     */
+    let {
+        open = $bindable(false),
+        title,
+        children,
+        onClose,
+    }: {
+        /** [Bindable] Whether the dialog is open */
+        open?: boolean;
+        /** The title of the dialog */
+        title?: string;
+        /** The content of the dialog */
+        children: Snippet;
+        /** Callback when the dialog is closed */
+        onClose?: () => void;
+    } = $props();
+
+    let dialog: HTMLDialogElement;
+
+    $effect(() => {
+        if (open && dialog) {
+            dialog.showModal();
+        } else if (dialog) {
+            dialog.close();
+        }
+    });
+
+    function handleClose() {
+        if (onClose) onClose();
+    }
+
+</script>
+
+<dialog
+    bind:this={dialog}
+    class="Dialog"
+    transition:slidefade
+>
+    {#if title}
+        <header class="DialogHeader">
+            <h6>{title}</h6>
+        </header>
+    {/if}
+    <div class="DialogContent">
+        {@render children()}
+    </div>
+</dialog>
+
+<style>
+    .Dialog {
+        padding: 0;
+        border: var(--field-border-size) var(--field-border-style) var(--field-border-color);
+        border-radius: var(--field-radius);
+        background: var(--bg-surface);
+        color: var(--fg-surface);
+        max-width: min(calc(100vw - 2rem), 32rem);
+        max-height: min(calc(100vh - 2rem), 32rem);
+    }
+    .Dialog::backdrop {
+        background: var(--bg-scrim);
+        backdrop-filter: blur(2px);
+    }
+    .DialogHeader {
+        padding: var(--pad-m);
+        border-bottom: var(--field-border-size) var(--field-border-style) var(--field-border-color);
+    }
+    .DialogContent {
+        padding: var(--pad-m);
+    }
+</style>

package/dist/components/Dialog.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** [Bindable] Whether the dialog is open */
+    open?: boolean;
+    /** The title of the dialog */
+    title?: string;
+    /** The content of the dialog */
+    children: Snippet;
+    /** Callback when the dialog is closed */
+    onClose?: () => void;
+};
+declare const Dialog: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/components/Icon.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+    import type { Component } from "svelte";
+
+    /**
+     * @description
+     * A component that displays an icon. It can be an image url or a component. The icon will be centered in the container.
+     * @cssprop --icon-width - The width of the icon. (Default: var(--font-size, 1em))
+     * @cssprop --icon-height - The height of the icon. (Default: var(--font-size, 1em))
+     * @cssprop --icon-color - The color of the icon. (Default: var(--text-color, currentColor))
+     * @example
+     * <script>
+     * import Copy from 'lutra/Icons/Copy.svelte';
+     * import Link from 'lutra/Icons/Link.svelte';
+     * <\/script>
+     * <Icon icon={Link} alt="Link icon" />
+     * <Icon icon={Copy} alt="Copy icon" />
+     */
+
+    let {
+        icon,
+        alt,
+    }: {
+        icon: string | Component;
+        alt?: string,
+    } = $props();
+
+    let Icon = icon as Component;
+
+</script>
+
+<span class="Icon" aria-label="icon">
+    {#if typeof icon === "string"}
+        <img src={icon} alt={alt ? alt : 'Icon'} width="100%" height="100%" />
+    {:else}
+        <Icon />
+    {/if}
+</span>
+
+<style>
+    .Icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1em;
+        line-height: inherit;
+        width: max(
+            var(--icon-width,
+                var(--icon-height, 1rem)
+            ), 16px);
+        height: max(var(--icon-height, auto), 16px);
+        color: var(--icon-color, currentColor);
+        overflow: clip;
+        vertical-align: var(--vertical-align, text-bottom);
+        cursor: var(--cursor, default);
+    }
+    img,
+    .Icon :global(svg) {
+        width: 100%;
+        height: auto;
+        display: block;
+    }
+</style>

package/dist/components/Icon.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Component } from "svelte";
+type $$ComponentProps = {
+    icon: string | Component;
+    alt?: string;
+};
+declare const Icon: Component<$$ComponentProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/{display → components}/IconButton.svelte

@@ -1,13 +1,42 @@
-<script lang="ts">import Icon from "./Icon.svelte";
-import { fly } from "svelte/transition";
-import { popBezier, popBezierInverse } from "../utils/transitions.js";
-let {
-  icon,
-  disabled,
-  children,
-  onclick,
-  mask = true
-} = $props();
+<script lang="ts">
+    import type { Component, Snippet } from "svelte";
+    import Icon from './Icon.svelte';
+	import { fly } from "svelte/transition";
+	import { popBezier, popBezierInverse } from "../util/transitions.js";
+
+    /**
+     * @description
+     * A component that displays an icon with a possible label. It can also have a click event.
+     * The button has a padding of 0.75em by default to make it easier to tap on mobile devices. The padding can be changed using the `--padding` CSS variable.
+     * Icon and text color will be inherited from the parent element.
+     * @cssprop --padding - The padding of the icon button. (Default: 0.75em)
+     * @example
+     * <script>
+     * import Copy from 'lutra/Icons/Copy.svelte';
+     * import Link from 'lutra/Icons/Link.svelte';
+     * <\/script>
+     * <IconButton icon={Link} onclick={() => alert('clicked')} />
+     * <IconButton icon={Copy} onclick={() => alert('clicked')}>Copy</IconButton>
+     */
+    let {
+        icon,
+        disabled,
+        children,
+        onclick,
+        mask = true
+    }: {
+        /** The icon to display. */
+        icon: string | Component;
+        /** The children to display. */
+        children?: Snippet,
+        /** The onclick event. */
+        onclick?: (event: MouseEvent) => void,
+        /** Whether the button is disabled. */
+        disabled?: boolean,
+        /** Whether to mask the content. */
+        mask?: boolean
+    } = $props();
+
 </script>
 
 {#snippet inside()}
@@ -41,12 +70,12 @@ let {
         align-items: stretch;
         color: inherit;
         opacity: 1;
-        background-color: var(--field-bg);
+        background-color: var(--field-background-color, transparent);
         transition: background-color 0.04s;
-        border-radius: var(--field-radius);
+        border-radius: var(--field-border-radius);
     }
     .IconButton:hover {
-        background-color: var(--menu-bg-hover);
+        background-color: var(--menu-background-color-hover);
     }
     .IconButton:active {
         scale: 1;
@@ -55,7 +84,7 @@ let {
         border: none;
         background: none;
         cursor: pointer;
-        color: var(--text);
+        color: var(--text-color-p, light-dark(black, white));
     }
     .IconMask {
         height: 100%;

package/dist/components/IconButton.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Component, Snippet } from "svelte";
+type $$ComponentProps = {
+    /** The icon to display. */
+    icon: string | Component;
+    /** The children to display. */
+    children?: Snippet;
+    /** The onclick event. */
+    onclick?: (event: MouseEvent) => void;
+    /** Whether the button is disabled. */
+    disabled?: boolean;
+    /** Whether to mask the content. */
+    mask?: boolean;
+};
+declare const IconButton: Component<$$ComponentProps, {}, "">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;