lutra 0.0.33 → 0.1.4

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

@@ -0,0 +1,105 @@
+<script lang="ts">
+	import { browser } from "$app/environment";
+    import { onMount, 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);
+
+    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;
+    }
+
+    // Set the configuration in the context for child components to access
+    setContext(LutraContext.Config, config);
+
+    // Retrieve existing theme from context if available
+    let 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';
+    }
+
+    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>
+
+<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}" class:root>
+    {@render children()}
+</div>
+
+<style>
+    @layer base {
+        .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>
@@ -20,7 +45,7 @@ let offsetX = $state(0);
             </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>
@@ -46,22 +71,22 @@ let offsetX = $state(0);
         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/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/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/{display → components}/notifications.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type OverlayPosition } from "../layout/overlays.svelte.js";
+import { type OverlayPosition } from "./overlays.svelte.js";
 import type { Component, Snippet } from "svelte";
 /**
  * Add a notification to the screen.

package/dist/{display → components}/notifications.svelte.js

@@ -1,5 +1,4 @@
-import { createId } from "../utils/id.js";
-import { addOverlay, removeOverlay } from "../layout/overlays.svelte.js";
+import { addOverlay, removeOverlay } from "./overlays.svelte.js";
 import NotificationSvelte from "./Notification.svelte";
 /**
  * Add a notification to the screen.
@@ -13,11 +12,11 @@ import NotificationSvelte from "./Notification.svelte";
  * @returns {void}
  */
 export function addNotification(opts) {
-    const id = createId();
+    const id = crypto.randomUUID();
     addOverlay({
         id,
         z: 100,
-        content: NotificationSvelte,
+        component: NotificationSvelte,
         props: { id, ...opts },
         stack: opts.stack,
         position: opts.position || "bottom right",

package/dist/{layout → components}/overlays.svelte.d.ts

@@ -10,8 +10,10 @@ export type TransitionOpts = {
 export type OverlayItem = {
     id: string;
     z?: number;
-    content: string | Snippet | Component;
-    props?: Record<string, any>;
+    text?: string;
+    snippet?: Snippet;
+    component?: Component;
+    props?: any;
     layer?: string;
     anchor?: HTMLElement;
     transition?: TransitionOpts;

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);
+};