lutra 0.0.33 → 0.1.0

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/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/Layout.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+    import "../css/lutra.css";
+	import Theme from "./Theme.svelte";
+    /**
+     * @description
+     * Default layout component that imports default styles and wraps the entire application in a theme.
+     */
+    let {
+        theme,
+        children,
+    }: { 
+        /** The theme to use for the layout. Leave empty to detect automatically or get from user preferences, if any exist. */
+        theme?: 'light' | 'dark' | undefined;
+        /** The content to display. */
+        children: Snippet;
+    } = $props();
+</script>
+
+<Theme theme={theme}>
+    <div class="Layout">
+        {@render children()}
+    </div>
+</Theme>
+
+<style>
+    .Layout {
+        background: var(--bg-app);
+        min-height: 100dvh;
+        height: 100dvh;
+    }
+</style>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+import "../css/lutra.css";
+type $$ComponentProps = {
+    /** The theme to use for the layout. Leave empty to detect automatically or get from user preferences, if any exist. */
+    theme?: 'light' | 'dark' | undefined;
+    /** The content to display. */
+    children: Snippet;
+};
+declare const Layout: import("svelte").Component<$$ComponentProps, {}, "">;
+type Layout = ReturnType<typeof Layout>;
+export default Layout;

package/dist/components/PageContent.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    /**
+     * @description
+     * A container for page content.
+     * If you want to add padding to the container, pass in `pad`. You can also pass in an array of booleans or strings to specify padding on the block and inline axis.
+     * Padding will be halved for smaller viewport sizes.
+     * @example
+     * <PageContent pad>
+     *   <p>Paragraph</p>
+     * </PageContent>
+     */
+    let {
+        children,
+        pad = false,
+        middle = false,
+        center = false,
+        style,
+    }: {
+        children: Snippet;
+        /** Add padding to the container. Pass in either a boolean or an array of booleans to specify padding on the block and inline axes. */
+        pad?: boolean |
+            [boolean, boolean] |
+            [boolean, boolean, boolean] |
+            [boolean, boolean, boolean, boolean] |
+            string |
+            [string, string] |
+            [string, string, string] |
+            [string, string, string, string] |
+            'xs' |
+            's' |
+            'm' |
+            'l' |
+            'xl' |
+            'xxl';
+        /** Center the content in the block direction. */
+        middle?: boolean;
+        /** Center the content in the inline direction. */
+        center?: boolean;
+        style?: string;
+    } = $props();
+
+    let padStyle = $derived.by(() => {
+        if(typeof pad === 'boolean') {
+            return `--padBlockStart: ${pad ? 'var(--page-padding, var(--padding-block, var(--pad-xl)))' : '0'};
+                    --padBlockEnd: ${pad ? 'var(--page-padding, var(--padding-block, var(--pad-xl)))' : '0'};
+                    --padInlineStart: ${pad ? 'var(--page-padding, var(--padding-inline, var(--pad-xl)))' : '0'};
+                    --padInlineEnd: ${pad ? 'var(--page-padding, var(--padding-inline, var(--pad-xl)))' : '0'};`;
+        } else if(typeof pad === 'string') {
+            return `--padBlockStart: ${pad};
+                    --padBlockEnd: ${pad};
+                    --padInlineStart: ${pad};
+                    --padInlineEnd: ${pad};`;
+        }
+        else if(Array.isArray(pad) && pad.length > 1 && typeof pad[0] === 'string') {
+            switch(pad.length) {
+                case 2:
+                    return `--padBlockStart: ${pad[0]};
+                            --padBlockEnd: ${pad[0]};
+                            --padInlineStart: ${pad[1]};
+                            --padInlineEnd: ${pad[1]};`;
+                case 3:
+                    return `--padBlockStart: ${pad[0]};
+                            --padBlockEnd: ${pad[1]};
+                            --padInlineStart: ${pad[2]};
+                            --padInlineEnd: ${pad[2]};`;
+                case 4:
+                    return `--padBlockStart: ${pad[0]};
+                            --padBlockEnd: ${pad[1]};
+                            --padInlineStart: ${pad[2]};
+                            --padInlineEnd: ${pad[3]};`;
+            }
+        } else if(Array.isArray(pad) && pad.length > 1) {
+            switch(pad.length) {
+                case 2:
+                    return `--padBlockStart: ${pad[0] ? 'var(--page-padding, var(--padding-block, var(--pad-xl)))' : '0'};
+                            --padBlockEnd: ${pad[0] ? 'var(--page-padding, var(--padding-block, var(--pad-xl)))' : '0'};
+                            --padInlineStart: ${pad[1] ? 'var(--page-padding, var(--padding-inline, var(--pad-xl)))' : '0'};
+                            --padInlineEnd: ${pad[1] ? 'var(--page-padding, var(--padding-inline, var(--pad-xl)))' : '0'};`;
+                case 3:
+                    return `--padBlockStart: ${pad[0] ? 'var(--page-padding, var(--padding-block, var(--pad-xl)))' : '0'};
+                            --padBlockEnd: ${pad[1] ? 'var(--page-padding, var(--padding-block, var(--pad-xl)))' : '0'};
+                            --padInlineStart: ${pad[2] ? 'var(--page-padding, var(--padding-inline, var(--pad-xl)))' : '0'};
+                            --padInlineEnd: ${pad[2] ? 'var(--page-padding, var(--padding-inline, var(--pad-xl)))' : '0'};`;
+                case 4:
+                    return `--padBlockStart: ${pad[0] ? 'var(--page-padding, var(--padding-block, var(--pad-xl)))' : '0'};
+                            --padBlockEnd: ${pad[1] ? 'var(--page-padding, var(--padding-block, var(--pad-xl)))' : '0'};
+                            --padInlineStart: ${pad[2] ? 'var(--page-padding, var(--padding-inline, var(--pad-xl)))' : '0'};
+                            --padInlineEnd: ${pad[3] ? 'var(--page-padding, var(--padding-inline, var(--pad-xl)))' : '0'};`;
+            }
+        }
+        return '';
+    });
+
+</script>
+
+<div class="PageContent" class:middle class:center style={padStyle}>
+    {@render children()}
+</div>
+
+<style>
+    .PageContent {
+        display: block;
+        min-width: 0;
+        min-height: 0;
+    }
+</style>

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

@@ -0,0 +1,38 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
+    /** Add padding to the container. Pass in either a boolean or an array of booleans to specify padding on the block and inline axes. */
+    pad?: boolean | [
+        boolean,
+        boolean
+    ] | [
+        boolean,
+        boolean,
+        boolean
+    ] | [
+        boolean,
+        boolean,
+        boolean,
+        boolean
+    ] | string | [
+        string,
+        string
+    ] | [
+        string,
+        string,
+        string
+    ] | [
+        string,
+        string,
+        string,
+        string
+    ] | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+    /** Center the content in the block direction. */
+    middle?: boolean;
+    /** Center the content in the inline direction. */
+    center?: boolean;
+    style?: string;
+};
+declare const PageContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type PageContent = ReturnType<typeof PageContent>;
+export default PageContent;

package/dist/components/Theme.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { browser } from "$app/environment";
+    import { setContext, type Snippet } from "svelte";
+    import { defaultConfig, type LutraConfig, type LutraRootConfig } from "../config.js";
+    import { getContextItem, LutraContext, type LutraTheme } from "../types.js";
+
+    /**
+     * @description
+     * A theme component. It is used to set the theme of the app in the root of the layout. You can also use it to set the theme of a specific section of the app.
+     */
+
+    // Destructuring props with default values
+    let {
+        theme,
+        config,
+        children
+    }: {
+        /**
+         * The theme to use. Leave undefined to use the system theme.
+         */
+        theme?: LutraTheme;
+        /**
+         * Lutra config. Leave undefined to use the default config.
+         */
+        config?: LutraRootConfig;
+        children: Snippet
+    } = $props();
+
+    // Determine if this is the root theme context
+    const root = getContextItem(LutraContext.Theme) === undefined;
+
+    // Retrieve existing configuration from context if available
+    const existingConfig = getContextItem(LutraContext.Config);
+
+    // If no config is provided, use the existing one from context or default to the defaultConfig
+    if(!config) {
+        config = existingConfig || defaultConfig;
+    }
+
+    // Set the configuration in the context for child components to access
+    setContext(LutraContext.Config, config);
+
+    // Retrieve existing theme from context if available
+    const existingTheme = getContextItem(LutraContext.Theme);
+
+    function getTheme() {
+        if(browser) {
+            return localStorage.getItem('lutra.theme') || (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light';
+        }
+        // TODO: Implement Sec-CH-Prefers-Color-Scheme header getting from context
+        return getContextItem(LutraContext.SecChPrefersColorScheme) || 'light';
+    }
+
+    // If no theme is provided, determine it from localStorage or system preferences
+    if(!theme) {
+        theme = existingTheme || getTheme();
+    } else if(theme === 'invert') {
+        theme = (existingTheme || getTheme()) === 'light' ? 'dark' : 'light';
+    }
+
+    // Set the theme in the context for child components to access
+    setContext(LutraContext.Theme, theme);
+</script>
+
+<svelte:head>
+    {#if !root}
+        <meta name="theme-color" content="{theme === 'dark' ? (config?.themeColor?.dark || '#000') : (config?.themeColor?.light || '#fff')}" />
+    {/if}
+</svelte:head>
+
+<div class="Theme{theme ? ' '+theme : ''}" class:root>
+    {@render children()}
+</div>
+
+<style>
+    .Theme {
+        display: contents;
+        color-scheme: light dark;
+    }
+    .Theme.light {
+        color-scheme: light;
+    }
+    .Theme.dark {
+        color-scheme: dark;
+    }
+</style>
+

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

@@ -0,0 +1,17 @@
+import { type Snippet } from "svelte";
+import { type LutraRootConfig } from "../config.js";
+import { type LutraTheme } from "../types.js";
+type $$ComponentProps = {
+    /**
+     * The theme to use. Leave undefined to use the system theme.
+     */
+    theme?: LutraTheme;
+    /**
+     * Lutra config. Leave undefined to use the default config.
+     */
+    config?: LutraRootConfig;
+    children: Snippet;
+};
+declare const Theme: import("svelte").Component<$$ComponentProps, {}, "">;
+type Theme = ReturnType<typeof Theme>;
+export default Theme;

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

@@ -1,11 +1,36 @@
-<script lang="ts">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)}`;
-let offsetX = $state(0);
+<script lang="ts">
+    import Theme from "./Theme.svelte";
+    import type { Snippet } from "svelte";
+
+    /**
+     * @description
+     * A tooltip component that displays a tooltip when hovering or focusing on the trigger element.
+     * When hovering, the tooltip will fade in with a default delay of 0.5s (can be changed with the `--delay` CSS prop). With a keyboard focus, the tooltip will fade in immediately.
+     * @supports prefers-reduced-motion
+     * @supports hover
+     * @aria role="tooltip"
+     * @aria aria-describedby=""
+     * @cssprop --delay - The delay of the tooltip fade in animation. (Default: 0.5s)
+     * @example
+     * <h3>Tooltip example</h3>
+     * <p>Lorem ipsum <Tooltip tip="This is a tooltip"><a href="#">dolor sit amet</a></Tooltip></p>
+     */
+    let {
+        children,
+        tip,
+        open,
+    }: {
+        /** 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;
+    } = $props();
+
+    const id = `tt-${Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)}`;
+    let offsetX = $state(0);
+
 </script>
 
 <span class="Tooltip" class:open>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** 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;
+};
+declare const Tooltip: import("svelte").Component<$$ComponentProps, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/config.d.ts

@@ -0,0 +1,30 @@
+export interface LutraConfig {
+    /**
+     * Whether to show a background color or image on the components.
+     */
+    background?: boolean;
+    /**
+     * Whether to use a contained layout (with borders and rounded corners).
+     */
+    contained?: boolean;
+}
+export interface LutraRootConfig extends LutraConfig {
+    /**
+     * The default theme to use.
+     */
+    theme?: 'light' | 'dark' | 'auto' | 'inherit';
+    /**
+     * Theme color for the theme-color meta tag. Only used in the root theme.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
+     */
+    themeColor?: {
+        light?: string;
+        dark?: string;
+    };
+}
+/**
+ * Default Lutra config.
+ */
+export declare const defaultConfig: LutraConfig;
+export declare const defaultRootConfig: LutraRootConfig;
+export declare const setConfig: (config: Partial<LutraConfig>) => void;

package/dist/config.js

@@ -0,0 +1,18 @@
+/**
+ * Default Lutra config.
+ */
+export const defaultConfig = {
+    background: true,
+    contained: true,
+};
+export const defaultRootConfig = {
+    theme: 'auto',
+    themeColor: {
+        light: '#fff',
+        dark: '#000',
+    },
+    ...defaultConfig,
+};
+export const setConfig = (config) => {
+    Object.assign(config, config);
+};

package/dist/css/0-layers.css

@@ -0,0 +1 @@
+@layer l-base, base-overrides, l-typo, typo-overrides, l-layout, layout-overrides, l-media, media-overrides, misc;