lutra 0.0.20 → 0.1.0

package/dist/nav/NavMenu.svelte

@@ -1,183 +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}
-                                <svelte:component this={i.icon} />
-                            {/if}
-                            {i.label}
-                        </a>
-                    {:else}
-                        <span>
-                            {#if i.icon}
-                                <svelte:component this={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,20 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { MenuItem } from "./MenuTypes.js";
-declare const __propDef: {
-    props: {
-        items: MenuItem[];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type NavMenuProps = typeof __propDef.props;
-export type NavMenuEvents = typeof __propDef.events;
-export type NavMenuSlots = typeof __propDef.slots;
-export default class NavMenu extends SvelteComponent<NavMenuProps, NavMenuEvents, NavMenuSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        items: MenuItem[];
-    }>);
-}
-export {};

package/dist/nav/TabbedContent.svelte

@@ -1,43 +0,0 @@
-<script lang="ts">import { page } from "$app/stores";
-import Tabs from "./Tabs.svelte";
-const {
-  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,24 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { TabbedContentItem } from "./MenuTypes.js";
-declare const __propDef: {
-    props: {
-        items: TabbedContentItem[];
-        contained?: boolean | undefined;
-        rounded?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type TabbedContentProps = typeof __propDef.props;
-export type TabbedContentEvents = typeof __propDef.events;
-export type TabbedContentSlots = typeof __propDef.slots;
-export default class TabbedContent extends SvelteComponent<TabbedContentProps, TabbedContentEvents, TabbedContentSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        items: TabbedContentItem[];
-        contained?: boolean | undefined;
-        rounded?: boolean | undefined;
-    }>);
-}
-export {};

package/dist/nav/Tabs.svelte

@@ -1,118 +0,0 @@
-<script lang="ts">const {
-  items,
-  underline,
-  contained,
-  rounded
-} = $props();
-function onClickButton(event, item, index) {
-}
-</script>
-
-<nav class="Tabs" class:contained class:rounded>
-    <menu>
-        {#each items as item, index}
-            <li data-index={index} aria-current={item.active ? 'page' : undefined}>
-                {#if item.href}
-                    <a draggable="false" href={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"></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: 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: 0.75rem 0.5rem;
-        color: var(--menu-text);
-        transition: all var(--menu-trans);
-        font-weight: 500;
-        letter-spacing: -0.05ch;
-        background: transparent;
-        border: none;
-        border-block-end: 2px solid transparent;
-        cursor: pointer;
-        text-decoration: none;
-    }
-    .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 {
-        background: var(--menu-bg-hover);
-        color: var(--menu-text-hover);
-    }
-    li[aria-current="page"] a,
-    li[aria-current="page"] button {
-        background: var(--menu-bg-active);
-        color: var(--menu-text-active);
-        opacity: 1;
-        border-block-end: 2px solid var(--menu-text-active);
-    }
-    .Underline {
-        inline-size: 0px;
-        block-size: 2px;
-        background-color: var(--menu-text-active);
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        transition: all 0.3s ease-in-out;
-        opacity: 0;
-    }
-</style>

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

@@ -1,26 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { TabItem } from "./MenuTypes.js";
-declare const __propDef: {
-    props: {
-        items: TabItem[];
-        underline?: boolean | undefined;
-        contained?: boolean | undefined;
-        rounded?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type TabsProps = typeof __propDef.props;
-export type TabsEvents = typeof __propDef.events;
-export type TabsSlots = typeof __propDef.slots;
-export default class Tabs extends SvelteComponent<TabsProps, TabsEvents, TabsSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        items: TabItem[];
-        underline?: boolean | undefined;
-        contained?: boolean | undefined;
-        rounded?: boolean | undefined;
-    }>);
-}
-export {};

package/dist/nav/index.d.ts

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

package/dist/nav/index.js

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