lutra 0.0.33 → 0.1.0

package/dist/nav/NavMenu.svelte

@@ -1,181 +0,0 @@
-<script lang="ts">import { page } from "$app/stores";
-import UiContent from "../layout/UIContent.svelte";
-let {
-  items
-} = $props();
-function parseHref(href) {
-  if (!href) return {
-    href: void 0,
-    exact: false
-  };
-  if (href.endsWith("*")) {
-    return {
-      href: href.slice(0, -1),
-      exact: false
-    };
-  }
-  return {
-    href,
-    exact: true
-  };
-}
-function parseLinks(items2) {
-  return items2.map((item) => {
-    if (item.href) {
-      return {
-        ...item,
-        ...parseHref(item.href)
-      };
-    }
-    if (!item.children) return item;
-    return {
-      ...item,
-      children: parseLinks(item.children)
-    };
-  });
-}
-const parsedItems = parseLinks(items);
-</script>
-
-<UiContent>
-    <nav>
-        <ul>
-            {#snippet link(i)}
-                <li aria-current={i.exact ? ($page?.url?.pathname === i.href ? 'page' : undefined) : ($page?.url?.pathname?.startsWith(i.href) ? 'page' : undefined)}>
-                    {#if i.href}
-                        <a href={i.href}>
-                            {#if i.icon}
-                                <i.icon />
-                            {/if}
-                            {i.label}
-                        </a>
-                    {:else}
-                        <span>
-                            {#if i.icon}
-                                <i.icon />
-                            {/if}
-                            {i.label}
-                        </span>
-                    {/if}
-                    {#if i.children}
-                        <ul>
-                            {#each i.children as child}
-                                {@render link(child)}
-                            {/each}
-                        </ul>
-                    {/if}
-                </li>
-            {/snippet}
-            {#each parsedItems as item, index}
-                {@render link(item)}
-            {/each}
-        </ul>
-    </nav>
-</UiContent>
-
-<style>
-    nav {
-    }
-    ul {
-        display: flex;
-        list-style: none;
-        padding: 0;
-        margin: 0;
-    }
-    a, span {
-        display: flex;
-        align-items: center;
-        padding: 0.5rem 0.75rem;
-        text-decoration: none;
-        font-weight: 500;
-        color: var(--menu-text);
-    }
-    a:hover, span:hover {
-        background: var(--menu-bg-hover);
-        color: var(--menu-text-hover);
-    }
-    /** loop */
-    ul > li > ul {
-        display: none;
-        position: absolute;
-        flex-direction: column;
-        top: 100%;
-        left: 0;
-        background: var(--menu-bg);
-        border: var(--menu-border);
-    }
-    ul > li:hover > ul,
-    ul > li:focus-within > ul {
-        display: flex;
-    }
-    ul > li:hover,
-    ul > li:focus-within {
-        background: var(--menu-bg-hover);
-    }
-    ul > li:hover > a,
-    ul > li:focus-within > a,
-    ul > li:hover > span,
-    ul > li:focus-within > span {
-        color: var(--menu-text-hover);
-    }
-
-    ul > li {
-        border-block-end: var(--menu-border);
-        position: relative;
-        white-space: nowrap;
-    }
-    ul > li:last-child {
-        border-block-end: none;
-    }
-    ul > li > ul {
-        left: 100%;
-        top: -1px;
-    }
-    ul > li:has(ul) > a {
-        padding-inline-end: 2rem;
-    }
-    ul > li:has(ul) > a::after {
-        content: "▶";
-        padding-inline-start: 0.5rem;
-        font-size: 9px;
-        position: absolute;
-        right: 0.75rem;
-        color: var(--menu-text);
-    }
-    /** top level */
-    nav > ul {
-        flex-direction: row;
-        gap: 1px;
-        position: relative;
-    }
-    nav > ul > li {
-        border-block-end: none;
-    }
-    nav > ul > li > a {
-        border-radius: var(--border-radius);
-    }
-    nav > ul > li > a:hover {
-        border-radius: var(--border-radius);
-    }
-    nav > ul > li > ul {
-        top: 100%;
-        left: 0;
-        background: var(--menu-bg);
-        border: var(--menu-border);
-        filter: drop-shadow(0 0.25rem 0.5rem var(--shadow));
-    }
-    nav > ul > li:has(ul) > a {
-        padding: 0.75rem 1rem;
-    }
-    nav > ul > li:has(ul) > a::after {
-        content: "";
-        padding: 0;
-    }
-    ul > li[aria-current="page"] a {
-        background: var(--menu-bg-active);
-        color: var(--menu-text-active);
-    }
-    ul > li[aria-current="page"] a:hover {
-        color: var(--menu-text-active-hover);
-    }
-</style>

package/dist/nav/NavMenu.svelte.d.ts

@@ -1,19 +0,0 @@
-import type { MenuItem } from "./MenuTypes.js";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports;
-    z_$$bindings?: Bindings;
-}
-declare const NavMenu: $$__sveltets_2_IsomorphicComponent<{
-    /** Menu items to display */
-    items: MenuItem[];
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type NavMenu = InstanceType<typeof NavMenu>;
-export default NavMenu;

package/dist/nav/TabbedContent.svelte

@@ -1,43 +0,0 @@
-<script lang="ts">import { page } from "$app/stores";
-import Tabs from "./Tabs.svelte";
-let {
-  items,
-  contained,
-  rounded
-} = $props();
-function formatHash(hash) {
-  hash = hash.toLowerCase().replace(/\s/g, "-");
-  if (!hash.startsWith("#")) {
-    hash = `#${hash}`;
-  }
-  return hash;
-}
-;
-let itemsWithHref = $derived(items.map((item, index) => {
-  const href = item.hash ? formatHash(item.hash) : `#${item.label.toLowerCase().replace(/\s/g, "-")}`;
-  return {
-    content: item.content,
-    label: item.label,
-    href,
-    active: $page.url?.hash === href
-  };
-}));
-let activeItem = $derived(itemsWithHref.find((item) => item.active) || itemsWithHref[0]);
-let activeContent = $derived(activeItem?.content);
-</script>
-
-<div>
-    <Tabs items={itemsWithHref} {contained} {rounded} />
-
-    {#if activeContent}
-        {@render activeContent()}
-    {/if}
-</div>
-
-<style>
-    div {
-        display: flex;
-        flex-direction: column;
-        gap: var(--gap, 1.5rem);
-    }
-</style>

package/dist/nav/TabbedContent.svelte.d.ts

@@ -1,23 +0,0 @@
-import type { TabbedContentItem } from "./MenuTypes.js";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports;
-    z_$$bindings?: Bindings;
-}
-declare const TabbedContent: $$__sveltets_2_IsomorphicComponent<{
-    /** Tab items to display. */
-    items: TabbedContentItem[];
-    /** Contain the element in a box. */
-    contained?: boolean;
-    /** Round the corners of the element if contained. */
-    rounded?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type TabbedContent = InstanceType<typeof TabbedContent>;
-export default TabbedContent;

package/dist/nav/Tabs.svelte

@@ -1,158 +0,0 @@
-<script lang="ts">import { browser } from "$app/environment";
-import { page } from "$app/stores";
-import { onMount } from "svelte";
-let {
-  items,
-  underline,
-  contained,
-  rounded
-} = $props();
-const id = $state(`Tabs-${Math.random().toString(36).slice(2)}`);
-function onClickButton(event, item, index) {
-}
-let activeIndex = $derived.by(() => {
-  return items.findIndex((item, index) => {
-    if (!item.href) return false;
-    if (item.href.endsWith("*")) {
-      return $page.url.pathname.startsWith(item.href.slice(0, -1));
-    } else {
-      return $page.url.pathname.endsWith(item.href);
-    }
-  });
-});
-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 = 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) {
-  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/nav/Tabs.svelte.d.ts

@@ -1,25 +0,0 @@
-import type { TabItem } from "../nav/index.js";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports;
-    z_$$bindings?: Bindings;
-}
-declare const Tabs: $$__sveltets_2_IsomorphicComponent<{
-    /** 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;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Tabs = InstanceType<typeof Tabs>;
-export default Tabs;

package/dist/nav/index.d.ts

@@ -1,7 +0,0 @@
-export { default as Breadcrumb } from './Breadcrumb.svelte';
-export { default as Menu } from './Menu.svelte';
-export { default as MenuItem } from './MenuItem.svelte';
-export { default as NavMenu } from './NavMenu.svelte';
-export { default as TabbedContent } from './TabbedContent.svelte';
-export { default as Tabs } from './Tabs.svelte';
-export type { BreadcrumbItem, MenuItem as MenuItemType, TabItem, TabbedContentItem } from './MenuTypes.js';

package/dist/nav/index.js

@@ -1,6 +0,0 @@
-export { default as Breadcrumb } from './Breadcrumb.svelte';
-export { default as Menu } from './Menu.svelte';
-export { default as MenuItem } from './MenuItem.svelte';
-export { default as NavMenu } from './NavMenu.svelte';
-export { default as TabbedContent } from './TabbedContent.svelte';
-export { default as Tabs } from './Tabs.svelte';