lutra 0.0.33 → 0.1.0

package/dist/display/Indicator.svelte

@@ -1,352 +0,0 @@
-<script lang="ts">import { isStatusColor, StatusColors } from "../utils/color.js";
-let {
-  color = "default",
-  motion,
-  label
-} = $props();
-let isSet = $derived(isStatusColor(color));
-let _label = $derived(isSet ? StatusColors[color] : label ? label : "status");
-</script>
-
-<span role="status" aria-label="{_label}" class="Indicator {color} {motion}" style="--bgColor: {isSet ? 'var(--status-'+color+')' : color};" />
-
-<style>
-    .Indicator {
-        --isize: var(--size, 0.75em);
-        --icount: var(--animation-iteration-count, infinite);
-        --bwidth: min(3px, calc(var(--isize) * 0.15));
-        display: inline-block;
-        position: relative;
-        vertical-align: middle;
-        margin-inline: var(--margin-inline, 0 calc(var(--isize) * 0.75));
-        background: var(--bgColor);
-        block-size: var(--isize);
-        inline-size: var(--isize);
-        border-radius: 50%;
-        mask-size: 0% 0%;
-        --dur: clamp(0.5s, var(--animation-duration, 1.2s), 3s);
-        transition: all calc(var(--dur) / 2), width 0s, height 0s, margin 0s;
-        margin-block-start: -2px;
-        animation-name: none;
-        animation-duration: var(--dur);
-        animation-iteration-count: var(--icount);
-        border-width: var(--bwidth);
-        border-style: solid;
-        border-color: transparent;
-        box-sizing: border-box;
-    }
-    .Indicator::after,
-    .Indicator::before {
-        box-sizing: border-box;
-        content: "";
-        position: absolute;
-        top: 0%;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-        border-width: var(--bwidth);
-        border-style: solid;
-        border-color: transparent;
-        animation-name: none;
-        animation-duration: var(--dur);
-        animation-iteration-count: var(--icount);
-    }
-
-    /**
-     * Tunnel
-     */
-
-    .Indicator.tunnel {
-        background: transparent;
-        border-color: var(--bgColor);
-    }
-    .Indicator.tunnel::after,
-    .Indicator.tunnel::before {
-        animation-name: tunnel;
-        animation-timing-function: ease-in;
-        border-width: calc(var(--bwidth) * 2);
-        animation-duration: calc(var(--dur) * 2);
-    }
-    .Indicator.tunnel::before {
-        animation-delay: calc(-1 * var(--dur) * 0.95);
-    }
-    @keyframes tunnel {
-        0% {
-            border-color: var(--bgColor);
-            transform: scale(0.1);
-            opacity: 0;
-        }
-        10% {
-            opacity: 1;
-        }
-        75% {
-            opacity: 1;
-        }
-        100% {
-            transform: scale(1.5);
-            opacity: 0;
-        }
-    }
-
-    /**
-     * Blink
-     */
-
-    .Indicator.blink {
-        animation-name: blink;
-        animation-timing-function: ease-in-out;
-    }
-    @keyframes blink {
-        0% {
-            opacity: 1;
-            transform: scale(1);
-            filter: drop-shadow(0 0 calc(var(--isize) * 0.15) var(--bgColor));
-        }
-        25% {
-            opacity: 0.5;
-            transform: scale(0.95);
-            filter: drop-shadow(0 0 calc(var(--isize) * 0.1) transparent);
-        }
-        50% {
-            opacity: 0.5;
-            transform: scale(0.95);
-            filter: drop-shadow(0 0 calc(var(--isize) * 0.1) transparent);
-        }
-        75% {
-            opacity: 1;
-            transform: scale(1);
-            filter: drop-shadow(0 0 calc(var(--isize) * 0.15) var(--bgColor));
-        }
-        100% {
-            opacity: 1;
-            transform: scale(1);
-            filter: drop-shadow(0 0 calc(var(--isize) * 0.15) var(--bgColor));
-        }
-    }
-
-    /**
-     * Bulge
-     */
-
-    .Indicator.bulge {
-        animation-name: bulge;
-        animation-timing-function: ease-in-out;
-    }
-    @keyframes bulge {
-        0% {
-            transform: scale(0.85);
-            filter: drop-shadow(0 0 calc(var(--isize) * 0.05) var(--bgColor)) brightness(1) saturate(1);
-        }
-        50% {
-            transform: scale(1);
-            filter: drop-shadow(0 0 calc(var(--isize) * 0.1) var(--bgColor)) brightness(1.15) saturate(1.15);
-        }
-        100% {
-            transform: scale(0.85);
-            filter: drop-shadow(0 0 calc(var(--isize) * 0.05) var(--bgColor)) brightness(1) saturate(1);
-        }
-    }
-
-    /**
-     * Highlight
-     */
-
-    .Indicator.highlight {
-        animation-name: hilite2;
-        animation-timing-function:cubic-bezier(0.445, 0.05, 0.55, 0.95);
-        border-width: 0;
-    }
-
-    @keyframes hilite2 {
-        0% {
-            filter: brightness(1) saturate(1) drop-shadow(0 0 calc(var(--isize) * 0.1) var(--bgColor));
-        }
-        35% {
-            filter: brightness(1) saturate(1) drop-shadow(0 0 calc(var(--isize) * 0.1) var(--bgColor));
-        }
-        50% {
-            filter: brightness(1.05) saturate(1.05) drop-shadow(0 0 calc(var(--isize) * 0.05) var(--bgColor));
-        }
-        65% {
-            filter: brightness(1) saturate(1) drop-shadow(0 0 calc(var(--isize) * 0.1) var(--bgColor));
-        }
-        100% {
-            filter: brightness(1) saturate(1) drop-shadow(0 0 calc(var(--isize) * 0.1) var(--bgColor));
-        }
-    }
-
-    .Indicator.highlight::before {
-        border-width: 0;
-    }
-
-    .Indicator.highlight::after {
-        background: linear-gradient(45deg, transparent, transparent, rgba(255,255,255,0.75), transparent, transparent);
-        animation-name: hilite;
-        animation-timing-function: linear;
-        mix-blend-mode: luminosity;
-        border-width: 0;
-        filter: blur(calc(var(--isize) * 0.12));
-        background-size: 500% 120%;
-    }
-    @keyframes hilite {
-        0% {
-            background-position: 100% center;
-        }
-        100% {
-            background-position: 0 center;
-        }
-    }
-
-    /**
-     * Spin
-     */
-
-    .Indicator.spin {
-        background: transparent;
-        --mask: radial-gradient(circle, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 45%, black 50%, black 100%);
-        -webkit-mask-image: var(--mask);
-        mask-image: var(--mask);
-        filter: drop-shadow(0 0 calc(var(--isize) * 0.05) var(--bgColor));
-    }
-    .Indicator.spin::after,
-    .Indicator.spin::before {
-        animation-name: spin;
-        background: none;
-        animation-timing-function: linear;
-        mask-mode: luminance;
-        background-origin: border-box;
-        background-clip: border-box;
-    }
-    .Indicator.spin::before {
-        animation-timing-function:cubic-bezier(0.445, 0.05, 0.55, 0.95);
-        animation-delay: calc(-1 * var(--dur) * 0.85);
-        animation-name: spin2;
-    }
-    @keyframes spin {
-        0% {
-            background-image: conic-gradient(from 0deg, transparent, transparent 73%, var(--bgColor) 73%, var(--bgColor) 100%);
-            transform: rotate(0deg) scale(1.2);
-        }
-        100% {
-            background-image: conic-gradient(from 0deg, transparent, transparent 73%, var(--bgColor) 73%, var(--bgColor) 100%);
-            transform: rotate(360deg) scale(1.2);
-        }
-    }
-    @keyframes spin2 {
-        0% {
-            background-image: conic-gradient(from 0deg, transparent, transparent 50%, var(--bgColor) 75%, var(--bgColor) 100%);
-            transform: rotate(0deg) scale(1.2);
-        }
-        100% {
-            background-image: conic-gradient(from 0deg, transparent, transparent 50%, var(--bgColor) 75%, var(--bgColor) 100%);
-            transform: rotate(360deg) scale(1.2);
-        }
-    }
-
-    /**
-     * Pulse
-     */
-
-    .Indicator.pulse {
-        animation-name: pulse;
-        animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
-    }
-    @keyframes pulse {
-        0% {
-            filter: drop-shadow(0 0 calc(var(--isize) * 0.03) var(--bgColor));
-            transform: scale(0.85);
-        }
-        25% {
-            filter: drop-shadow(0 0 calc(var(--isize) * 0.01) var(--bgColor)) brightness(1) saturate(1);
-            transform: scale(1);
-        }
-        50% {
-            filter: drop-shadow(0 0 calc(var(--isize) * 0.03) var(--bgColor)) brightness(1.25) saturate(1.25);
-            transform: scale(1);
-        }
-        75% {
-            filter: drop-shadow(0 0 calc(var(--isize) * 0.1) var(--bgColor)) brightness(1.25) saturate(1.25);
-        }
-        100% {
-            filter: drop-shadow(0 0 calc(var(--isize) * 0.03) var(--bgColor)) brightness(1) saturate(1);
-            transform: scale(0.85);
-        }
-    }
-    .Indicator.pulse::after {
-        border-color: var(--bgColor);
-        border-width: calc(var(--bwidth) * 0.75);
-        animation-name: task;
-        animation-timing-function: ease-out;
-        filter: drop-shadow(0 0 calc(var(--isize) * 0.025) var(--bgColor));
-    }
-    @keyframes task {
-        0% {
-            transform: scale(.5);
-            opacity: 1;
-            filter: blur(calc(var(--isize) * 0.05)) saturate(1);
-        }
-        75% {
-            opacity: 0.25;
-            filter: blur(calc(var(--isize) * 0.01)) saturate(1);
-        }
-        100% {
-            transform: scale(2.75);
-            opacity: 0;
-            filter: blur(0) saturate(0.5);
-        }
-    }
-
-    /**
-     * Typing 
-     */
-
-    .Indicator.typing {
-        --mask-image: radial-gradient(ellipse, black, black 65%, transparent 70%, transparent 100%);
-        mask-image: var(--mask-image);
-        -webkit-mask-image: var(--mask-image);
-        mask-size: 100% 100%;
-        width: calc(var(--isize) * 1.5);
-        background: transparent;
-        border-radius: 0;
-        position: relative;
-    }
-    .Indicator.typing::before,
-    .Indicator.typing::after {
-        animation-name: typing;
-        background: var(--bgColor);
-        width: calc(var(--isize) * 0.5);
-        height: calc(var(--isize) * 0.5);
-        top: 50%;
-        left: calc(50% - var(--isize) * 0.25);
-        animation-timing-function: ease-in;
-        animation-direction: reverse;
-    }
-    .Indicator.typing::before,
-    .Indicator.recording::before {
-        animation-delay: calc(-1 * var(--dur) * 0.5);
-    }
-    @keyframes typing {
-        0% {
-            transform: translateX(-100%) translateY(-50%) scale(0.25);
-            opacity: 0;
-        }
-        25% {
-            transform: translateX(-50%) translateY(-50%) scale(1);
-            opacity: 1;
-        }
-        50% {
-            transform: translateX(0) translateY(-50%) scale(1);
-            filter: drop-shadow(0 0 calc(var(--isize) * 0.01) var(--bgColor));
-        }
-        75% {
-            transform: translateX(50%) translateY(-50%) scale(1);
-            opacity: 1;
-        }
-        100% {
-            transform: translateX(100%) translateY(-50%) scale(0.25);
-            opacity: 0;
-        }
-    }
-
-</style>

package/dist/display/Indicator.svelte.d.ts

@@ -1,23 +0,0 @@
-import { type StatusColorOrString } from "../utils/color.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 Indicator: $$__sveltets_2_IsomorphicComponent<{
-    /** The color of the tag. Select from default status colors or provide a CSS Color value. */
-    color?: StatusColorOrString;
-    /** Possible motion to apply to the indicator. */
-    motion?: "pulse" | "spin" | "blink" | "highlight" | "bulge" | "tunnel" | "typing";
-    /** ARIA label to use when a custom color is applied */
-    label?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Indicator = InstanceType<typeof Indicator>;
-export default Indicator;

package/dist/display/Inset.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">let {
-  children
-} = $props();
-</script>
-
-<div class="Inset">
-    {@render children()}
-</div>
-
-<style>
-    .Inset {
-        margin-block: calc(var(--inset-block, 0) * -1);
-        margin-inline: calc(var(--inset-inline, 0) * -1);
-    }
-    .Inset > * {
-        display: block;
-    }
-</style>

package/dist/display/Inset.svelte.d.ts

@@ -1,18 +0,0 @@
-import type { Snippet } from "svelte";
-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 Inset: $$__sveltets_2_IsomorphicComponent<{
-    children: Snippet;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Inset = InstanceType<typeof Inset>;
-export default Inset;