lutra 0.1.0 → 0.1.5

package/dist/components/Tabs.svelte

@@ -0,0 +1,216 @@
+<script lang="ts">
+	import { browser } from "$app/environment";
+	import { page } from "$app/stores";
+	import type { TabItem } from "./MenuTypes.js";
+	import { onMount } from "svelte";
+
+    /**
+     * @description
+     * A tabbed navigation menu used to navigate between pages or sections of content.
+     * Clicking a tab will change the URL or trigger a JavaScript event.
+     * @example
+     * <Tabs contained rounded items={[
+     *     {
+     *         label: 'Tab 1',
+     *         href: '#tab1',
+     *     },
+     *     {
+     *         label: 'Tab 2',
+     *         href: '#tab2',
+     *     },
+     *     {
+     *         label: 'Tab 3',
+     *         href: '#tab3',
+     *     },
+     * ]} />
+     */
+    let {
+        items,
+        underline,
+        contained,
+        rounded,
+        selected = $bindable<{ label: string, href?: string, index: number } | null>(null)
+    }: {
+        /** Tab items to display. */
+        items: TabItem[];
+        /** Underline the active tab. The underline will slide to the selected tab unless reduced motion is enabled. */
+        underline?: boolean;
+        /** Contain the element in a box. */
+        contained?: boolean;
+        /** Round the corners of the element if contained. */
+        rounded?: boolean;
+        /** The index of the selected tab (bindable). */
+        selected?: { label: string, href?: string, index: number } | null;
+    } = $props();
+
+    const id = $state(`Tabs-${Math.random().toString(36).slice(2)}`);
+
+    const itemsWithId = $derived(items.map((item, index) => {
+        return { ...item, id: `Tab-${id}-${index}` };
+    }));
+
+    function onClickButton(event: MouseEvent, item: TabItem, index: number) {
+        if(item.onclick) {
+            item.onclick(event, item, index);
+        }
+        selected = { label: item.label, href: item.href, index };
+    }
+
+    let activeIndex = $derived.by(() => {
+        return items.findIndex((item, index) => {
+            console.log(item.href);
+            if(!item.href) return false;
+            // check if href ends in *
+            if(item.href.endsWith('*')) {
+                return $page.url.pathname.startsWith(item.href.slice(0, -1));
+            } else {
+                return $page.url.pathname.endsWith(item.href);
+            }
+        })
+    });
+
+    $effect(() => {
+        console.log(activeIndex);
+    });
+
+    let loaded = $state(false);
+
+    onMount(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+        loaded = true;
+    });
+
+    let underlineStyle = $derived.by(() => {
+        if(browser && underline && loaded) {
+            let active = items[activeIndex];
+            let activeElement: HTMLElement | null = document.querySelector(`#${id} li[data-index="${activeIndex}"]`);
+            if(activeElement) {
+                return `
+                    opacity: 1;
+                    width: ${activeElement.clientWidth}px;
+                    transform: translateX(${activeElement.offsetLeft}px)
+                `
+            }
+        }
+        return 'height: 0;';
+    
+    });
+
+    function removePossibleStar(href: string) {
+        return href.endsWith('*') ? href.slice(0, -1) : href;
+    }
+
+</script>
+
+<svelte:window onresize={() => { loaded = false; loaded = true; }} />
+
+<nav class="Tabs" {id} class:contained class:rounded>
+    <menu>
+        {#each items as item, index}
+            <li data-index={index} aria-current={item.active || activeIndex === index ? 'page' : undefined}>
+                {#if item.href}
+                    <a draggable="false" href={removePossibleStar(item.href)}>
+                        {item.label}
+                    </a>
+                {:else if item.onclick}
+                    <button type="button" draggable="false" onclick={(event) => onClickButton(event, item, index)}>
+                        {item.label}
+                    </button>
+                {/if}
+            </li>
+        {/each}
+        <div class="Underline" style={underlineStyle}></div>
+    </menu>
+</nav>
+
+<style>
+    .Tabs {
+        display: flex;
+        z-index: 2;
+        background: var(--menu-bg);
+        overflow: clip;
+    }
+    .Tabs.contained {
+        border: var(--menu-border);
+    }
+    .Tabs.rounded {
+        border-radius: var(--border-radius);
+    }
+    menu, li {
+        list-style: none;
+        margin: 0;
+    }
+    menu {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+        justify-content: flex-start;
+        padding: 0;
+        gap: var(--gap, 1rem);
+        inline-size: 100%;
+        border-block-end: var(--menu-border);
+    }
+    .Tabs.contained menu {
+        gap: 0;
+        flex-grow: 1;
+        justify-content: stretch;
+        border-block-end: 0;
+    }
+    a,
+    button {
+        display: block;
+        padding: var(--padding, 0.75rem 0.5rem);
+        color: var(--menu-text);
+        transition: all var(--menu-trans);
+        font-weight: 500;
+        font-size: var(--font-size, 0.9em);
+        letter-spacing: -0.05ch;
+        background: transparent;
+        border: none;
+        border-block-end: 2px solid transparent;
+        cursor: pointer;
+        text-decoration: none;
+    }
+    menu li:first-child > * {
+        padding-inline-start: 0;
+    }
+    .Tabs.contained li {
+        flex-grow: 1;
+        border-inline-end: var(--menu-border);
+        flex-basis: auto;
+    }
+    .Tabs.contained menu li:last-of-type {
+        border-inline-end: 0;
+    }
+    .Tabs.contained a,
+    .Tabs.contained button {
+        flex-grow: 1;
+        inline-size: 100%;
+        text-align: center;
+        padding-block-start: calc(0.75rem + 3px);
+        color: var(--menu-text);
+        font-weight: 600;
+    }
+    a:hover,
+    button:hover {
+        color: color-mix(in hsl shorter hue, var(--menu-text) var(--mix-amount), var(--mix-target));
+        background-color: color-mix(in hsl shorter hue, var(--menu-bg) var(--mix-amount), var(--mix-target));
+    }
+    li[aria-current="page"] a,
+    li[aria-current="page"] button {
+        background: var(--menu-bg-active);
+        color: var(--menu-text-active);
+        opacity: 1;
+    }
+    .Underline {
+        height: 2px;
+        background-color: var(--menu-text-active);
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        transition: all 0.2s ease-out;
+        opacity: 0;
+    }
+</style>

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

@@ -0,0 +1,20 @@
+import type { TabItem } from "./MenuTypes.js";
+type $$ComponentProps = {
+    /** Tab items to display. */
+    items: TabItem[];
+    /** Underline the active tab. The underline will slide to the selected tab unless reduced motion is enabled. */
+    underline?: boolean;
+    /** Contain the element in a box. */
+    contained?: boolean;
+    /** Round the corners of the element if contained. */
+    rounded?: boolean;
+    /** The index of the selected tab (bindable). */
+    selected?: {
+        label: string;
+        href?: string;
+        index: number;
+    } | null;
+};
+declare const Tabs: import("svelte").Component<$$ComponentProps, {}, "selected">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/components/Tag.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+	import { isStatusColor } from '../util/color.js';
+    import type { StatusColorOrString } from '../util/color.js';
+    /**
+     * @description
+     * A tag is a small piece of information that can be used to categorize or label an item. You can pick between `rounded`, `pill` or `rectangle` shapes. The font size and padding are relative to the parent element by default.
+     * Changing the font size without changing the padding will cause padding to be scaled with the font size. This can be changed by setting the `--padding` CSS prop.
+     * You can pass a `href` to make the tag a link, or an `onclick` function to make it a button. If you pass a `href`, you can also pass a `target` to specify the target of the link.
+     * @cssprop --font-size - The font size of the tag. (Default: 1em)
+     * @cssprop --font-weight - The font weight of the tag. (Default: 500)
+     * @cssprop --padding - The padding of the tag. (Default: 0.25em 0.5em)
+     * @cssprop --vertical-align - The vertical alignment of the tag. (Default: baseline)
+     * @example
+     * <Tag href="https://google.com" target="_blank" --font-size="1.5rem" color="alert">Tag with a link</Tag>
+     * <Tag --padding="0.5em 1em" color="warn" onclick={() => { alert("Hi!"); }}>Warning</Tag>
+     * <Tag color="ok">Status OK</Tag>
+     * <Tag color="info">Informational</Tag>
+     * <p>Here's an inline <Tag code>code tag</Tag> in some text</p>
+     */
+    let {
+        code,
+        color = "default",
+        shape = "pill",
+        onclick,
+        href,
+        target,
+        children,
+    }: { 
+        /** Use a mono-spaced font for the tag. */
+        code?: boolean;
+        /** The color of the tag. */
+        color?: StatusColorOrString;
+        /** The shape of the tag. */
+        shape?: "rounded" | "pill" | "rectangle";
+        /** A function to run when the tag is clicked. */
+        onclick?: (event: MouseEvent) => void;
+        /** A URL to link to. */
+        href?: string;
+        /** The target of the link. */
+        target?: string;
+        /** The content of the tag. */
+        children: Snippet;
+    } = $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+'-background)'}; --textColor: {!isSet ? color : 'var(--status-'+color+'-color)'};" onclick={onclick}>
+        {@render content()}
+    </a>
+{:else if onclick}
+    <button type="button" class:code class="Tag {shape}" style="--bgColor: {!isSet ? color : 'var(--status-'+color+'-background)'}; --textColor: {!isSet ? color : 'var(--status-'+color+'-color)'};" onclick={onclick}>
+        {@render content()}
+    </button>
+{:else}
+    <span class:code class="Tag {shape}" style="--bgColor: {!isSet ? color : 'var(--status-'+color+'-background)'}; --textColor: {!isSet ? color : 'var(--status-'+color+'-color)'};">
+        {@render content()}
+    </span>
+{/if}
+
+<style>
+    .Tag {
+        display: inline-flex;
+        padding: var(--padding, 0.5em 0.5em);
+        font-weight: var(--font-weight, 500);
+        background: var(--bgColor);
+        border-radius: var(--border-radius);
+        font-size: var(--font-size, 0.85em);
+        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(--textColor);
+        border: var(--border, var(--border-subtle));
+    }
+    em {
+        font-style: normal;
+        left: 50%;
+        text-box: trim-both cap alphabetic;
+        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/components/Tag.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from "svelte";
+import type { StatusColorOrString } from '../util/color.js';
+type $$ComponentProps = {
+    /** Use a mono-spaced font for the tag. */
+    code?: boolean;
+    /** The color of the tag. */
+    color?: StatusColorOrString;
+    /** The shape of the tag. */
+    shape?: "rounded" | "pill" | "rectangle";
+    /** A function to run when the tag is clicked. */
+    onclick?: (event: MouseEvent) => void;
+    /** A URL to link to. */
+    href?: string;
+    /** The target of the link. */
+    target?: string;
+    /** The content of the tag. */
+    children: Snippet;
+};
+declare const Tag: import("svelte").Component<$$ComponentProps, {}, "">;
+type Tag = ReturnType<typeof Tag>;
+export default Tag;

package/dist/components/Theme.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { browser } from "$app/environment";
-    import { setContext, type Snippet } from "svelte";
+    import { onMount, setContext, type Snippet } from "svelte";
     import { defaultConfig, type LutraConfig, type LutraRootConfig } from "../config.js";
     import { getContextItem, LutraContext, type LutraTheme } from "../types.js";
 
@@ -32,6 +32,8 @@
     // Retrieve existing configuration from context if available
     const existingConfig = getContextItem(LutraContext.Config);
 
+    let _theme = $state(theme);
+
     // If no config is provided, use the existing one from context or default to the defaultConfig
     if(!config) {
         config = existingConfig || defaultConfig;
@@ -41,7 +43,7 @@
     setContext(LutraContext.Config, config);
 
     // Retrieve existing theme from context if available
-    const existingTheme = getContextItem(LutraContext.Theme);
+    let existingTheme = getContextItem(LutraContext.Theme);
 
     function getTheme() {
         if(browser) {
@@ -53,11 +55,25 @@
 
     // If no theme is provided, determine it from localStorage or system preferences
     if(!theme) {
-        theme = existingTheme || getTheme();
+        _theme = existingTheme || getTheme();
     } else if(theme === 'invert') {
-        theme = (existingTheme || getTheme()) === 'light' ? 'dark' : 'light';
+        _theme = (existingTheme || getTheme()) === 'light' ? 'dark' : 'light';
     }
 
+    onMount(() => {
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        mediaQuery.addEventListener('change', (e) => {
+            if(browser && root && !theme && !existingTheme && !localStorage.getItem('lutra.theme')) {
+                _theme = e.matches ? 'dark' : 'light';
+            } else if(root && theme === "invert") {
+                _theme = existingTheme === 'light' ? 'dark' : 'light';
+                existingTheme = getContextItem(LutraContext.Theme);
+            } else if(root && !theme) {
+                _theme = existingTheme || getTheme();
+            }
+        });
+    });
+
     // Set the theme in the context for child components to access
     setContext(LutraContext.Theme, theme);
 </script>
@@ -68,20 +84,22 @@
     {/if}
 </svelte:head>
 
-<div class="Theme{theme ? ' '+theme : ''}" class:root>
+<div class="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;
+    @layer base {
+        .Theme {
+            display: contents;
+            color-scheme: light dark;
+        }
+        .Theme.light {
+            color-scheme: only light;
+        }
+        .Theme.dark {
+            color-scheme: only dark;
+        }
     }
 </style>
 

package/dist/components/Tooltip.svelte

@@ -45,7 +45,7 @@
             </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)"/>
+                    <path d="M16,0L0,0L8,8L16,0Z" fill="var(--tooltip-background)"/>
                 </g>
             </svg>
         </Theme>
@@ -71,22 +71,22 @@
         display: flex;
         flex-direction: column;
         align-items: center;
-        filter: drop-shadow(0px 2px 5px var(--border-subtle-color));
+        filter: drop-shadow(0px 2px 5px var(--tooltip-shadow-color));
         opacity: 0;
         pointer-events: none;
     }
     .TooltipContent {
-        background-color: var(--bg-app);
+        background-color: var(--tooltip-background);
         padding: 0.35rem 0.5rem;
-        border-radius: calc(var(--border-radius));
-        border-top: var(--border-subtle);
-        border-left: var(--border-subtle);
-        border-right: var(--border-subtle);
+        border-radius: var(--tooltip-border-radius);
+        border-top: var(--tooltip-border-size);
+        border-left: var(--tooltip-border-size);
+        border-right: var(--tooltip-border-size);
         display: block;
         font-size: max(0.75rem, 11px);
         line-height: 1.35;
         font-weight: 500;
-        color: var(--text-heading);
+        color: var(--tooltip-color);
         max-width: clamp(25ch, 100%, 25ch);
         width: max-content;
     }

package/dist/components/UIContent.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    let {
+        children,
+    }: {
+        children: Snippet;
+    } = $props();
+</script>
+
+<div class="UIContent">
+    {@render children()}
+</div>
+
+<style>
+    .UIContent {
+        display: contents;
+        --isPage: 0;
+    }
+</style>

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

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

package/dist/components/index.d.ts

@@ -0,0 +1,28 @@
+export { default as AspectRatio } from './AspectRatio.svelte';
+export { default as Avatar } from './Avatar.svelte';
+export { default as Close } from './Close.svelte';
+export { default as ContextTip } from './ContextTip.svelte';
+export { default as Dialog } from './Dialog.svelte';
+export { default as Icon } from './Icon.svelte';
+export { default as IconButton } from './IconButton.svelte';
+export { default as Image } from './Image.svelte';
+export { default as Indicator } from './Indicator.svelte';
+export { default as Inset } from './Inset.svelte';
+export { default as Layout } from './Layout.svelte';
+export { default as MenuDropdown } from './MenuDropdown.svelte';
+export { default as MenuItem } from './MenuItem.svelte';
+export { default as MenuItemContent } from './MenuItemContent.svelte';
+export { default as Modal } from './Modal.svelte';
+export { default as Notification } from './Notification.svelte';
+export { default as Overlay } from './Overlay.svelte';
+export { default as OverlayContainer } from './OverlayContainer.svelte';
+export { default as OverlayLayer } from './OverlayLayer.svelte';
+export { default as PageContent } from './PageContent.svelte';
+export { default as Tag } from './Tag.svelte';
+export { default as Table } from './Table.svelte';
+export { default as Theme } from './Theme.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
+export { default as UIContent } from './UIContent.svelte';
+export * from './MenuTypes.js';
+export * from './notifications.svelte.js';
+export * from './overlays.svelte.js';

package/dist/components/index.js

@@ -0,0 +1,29 @@
+export { default as AspectRatio } from './AspectRatio.svelte';
+export { default as Avatar } from './Avatar.svelte';
+export { default as Close } from './Close.svelte';
+export { default as ContextTip } from './ContextTip.svelte';
+export { default as Dialog } from './Dialog.svelte';
+export { default as Icon } from './Icon.svelte';
+export { default as IconButton } from './IconButton.svelte';
+export { default as Image } from './Image.svelte';
+export { default as Indicator } from './Indicator.svelte';
+export { default as Inset } from './Inset.svelte';
+export { default as Layout } from './Layout.svelte';
+export { default as MenuDropdown } from './MenuDropdown.svelte';
+export { default as MenuItem } from './MenuItem.svelte';
+export { default as MenuItemContent } from './MenuItemContent.svelte';
+export { default as Modal } from './Modal.svelte';
+export { default as Notification } from './Notification.svelte';
+export { default as Overlay } from './Overlay.svelte';
+export { default as OverlayContainer } from './OverlayContainer.svelte';
+export { default as OverlayLayer } from './OverlayLayer.svelte';
+export { default as PageContent } from './PageContent.svelte';
+export { default as Tag } from './Tag.svelte';
+export { default as Table } from './Table.svelte';
+export { default as Theme } from './Theme.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
+export { default as UIContent } from './UIContent.svelte';
+// Export TypeScript files and stores
+export * from './MenuTypes.js';
+export * from './notifications.svelte.js';
+export * from './overlays.svelte.js';

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

@@ -0,0 +1,21 @@
+import { type OverlayPosition } from "./overlays.svelte.js";
+import type { Component, 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 | Component} 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 | Component;
+    title?: string;
+    stack?: string;
+    autoClose?: number;
+}): void;

package/dist/components/notifications.svelte.js

@@ -0,0 +1,30 @@
+import { addOverlay, removeOverlay } from "./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 | Component} 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 = crypto.randomUUID();
+    addOverlay({
+        id,
+        z: 100,
+        component: NotificationSvelte,
+        props: { id, ...opts },
+        stack: opts.stack,
+        position: opts.position || "bottom right",
+        layer: "notifications",
+    });
+    if (opts.autoClose) {
+        setTimeout(() => {
+            removeOverlay(id);
+        }, opts.autoClose);
+    }
+}

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

@@ -0,0 +1,36 @@
+import type { Component, Snippet } from "svelte";
+export type OverlayPosition = "top left" | "top center" | "top right" | "bottom left" | "bottom center" | "bottom right" | "center" | "anchor";
+export type TransitionOpts = {
+    y?: number;
+    x?: number;
+    duration?: number;
+    origin?: string;
+    easing?: (t: number) => number;
+};
+export type OverlayItem = {
+    id: string;
+    z?: number;
+    text?: string;
+    snippet?: Snippet;
+    component?: Component;
+    props?: any;
+    layer?: string;
+    anchor?: HTMLElement;
+    transition?: TransitionOpts;
+    position?: OverlayPosition;
+    sticky?: boolean;
+    stack?: string;
+};
+declare let overlays: {
+    topRight: OverlayItem[];
+    topLeft: OverlayItem[];
+    topCenter: OverlayItem[];
+    bottomRight: OverlayItem[];
+    bottomLeft: OverlayItem[];
+    bottomCenter: OverlayItem[];
+    center: OverlayItem[];
+    anchor: OverlayItem[];
+};
+declare function addOverlay(opts: OverlayItem): void;
+declare function removeOverlay(id: string): void;
+export { overlays, addOverlay, removeOverlay };