lutra 0.1.0 → 0.1.5

package/dist/form/Button.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import Icon from '../components/Icon.svelte';
+	import { getContext, type Component, type Snippet } from 'svelte';
+	import type { LutraForm } from './types.js';
+
+    let {
+        href,
+        type = 'button',
+        class: className,
+        size = 'md',
+        kind = 'default',
+        disabled = false,
+        icon,
+        onclick,
+        children,
+    }: {
+        href?: string;
+        type?: 'button' | 'submit' | 'reset';
+        kind?: 'default' | 'outlined' | 'secondary' | 'warn';
+        size?: 'sm' | 'md' | 'lg' | 'xl';
+        class?: string;
+        disabled?: boolean;
+        icon?: string | Component;
+        onclick?: (event: MouseEvent) => void;
+        children: Snippet;
+    } = $props();
+
+    const form = getContext<LutraForm<any>>('form');
+    const align = getContext('form.actions.align');
+
+</script>
+
+{#if href}
+    <a class="Button Link button {size} {kind} {className} {align}" {href} {onclick}>
+        {#if icon}
+            <Icon {icon} />
+        {/if}
+        {@render children()}
+    </a>
+{:else}
+    <button class="Button button {size} {kind} {className} {align}" type={type} disabled={disabled || form?.state === 'loading'} {onclick}>
+        {#if icon}
+            <Icon {icon} />
+        {/if}
+        {@render children()}
+    </button>
+{/if}
+
+<style>
+    .Button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .Button.full {
+        width: 100%;
+    }
+</style>

package/dist/form/Button.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type Component, type Snippet } from 'svelte';
+type $$ComponentProps = {
+    href?: string;
+    type?: 'button' | 'submit' | 'reset';
+    kind?: 'default' | 'outlined' | 'secondary' | 'warn';
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    class?: string;
+    disabled?: boolean;
+    icon?: string | Component;
+    onclick?: (event: MouseEvent) => void;
+    children: Snippet;
+};
+declare const Button: Component<$$ComponentProps, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/form/Datepicker.svelte

@@ -0,0 +1,311 @@
+<script lang="ts">
+  import TabbedContent from "../components/TabbedContent.svelte";
+  import TabbedContentItem from "../components/TabbedContentItem.svelte";
+import UiContent from "../components/UIContent.svelte";
+  import { getLocaleFirstDayOfWeek } from "../util/locale.js";
+
+    let {
+        range
+    }: {
+        range?: {
+            min?: Date;
+            max?: Date;
+        }
+    } = $props();
+
+    const currentYear = new Date().getFullYear();
+    const startYear = Math.max(2020, currentYear - 5);
+    let years = $state(
+        Array.from(
+            { length: currentYear - startYear + 1 },
+            (_, i) => startYear + i
+        ).reverse()
+    );
+
+    let selectedStartYear = $state(currentYear);
+    let selectedEndYear = $state(currentYear);
+    let selectedStartMonth = $state(1);
+    let selectedEndMonth = $state(12);
+    let selectedStartDay = $state(1);
+    let selectedEndDay = $state(31);
+    
+    let months = $state(
+        Array.from(
+            { length: 12 },
+            (_, i) => i + 1
+        )
+    );
+
+    const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+    const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+    let monthName = $derived(monthNames[selectedStartMonth - 1]);
+
+    let localeFirstDay = $state(getLocaleFirstDayOfWeek());
+    let dayNamesOrdered = $derived([
+        ...dayNames.slice(localeFirstDay),
+        ...dayNames.slice(0, localeFirstDay)
+    ]);
+
+    function daysInMonth(year: number, month: number): number {
+        return new Date(year, month, 0).getDate();
+    }
+
+    let daysInCurrentMonth = $derived(daysInMonth(selectedStartYear, selectedStartMonth));
+    let firstWeekdayIndex = $derived(new Date(selectedStartYear, selectedStartMonth - 1, 1).getDay());
+    let firstWeekdayOffset = $derived((7 + firstWeekdayIndex - localeFirstDay) % 7);
+    let daysGrid = $derived((() => {
+        const totalCells = 42; // 6 rows x 7 days
+        const grid: Array<number | null> = [];
+        for (let i = 0; i < totalCells; i++) {
+            const dayNumber = i - firstWeekdayOffset + 1;
+            grid.push(dayNumber >= 1 && dayNumber <= daysInCurrentMonth ? dayNumber : null);
+        }
+        return grid;
+    })());
+
+    $effect(() => {
+        if (selectedStartDay > daysInCurrentMonth) {
+            selectedStartDay = daysInCurrentMonth;
+        }
+        if (selectedStartDay < 1) {
+            selectedStartDay = 1;
+        }
+    });
+
+    function pad2(n: number): string { return n < 10 ? `0${n}` : `${n}`; }
+    function toLocalDateTimeInputValue(date: Date): string {
+        const y = date.getFullYear();
+        const m = pad2(date.getMonth() + 1);
+        const d = pad2(date.getDate());
+        const hh = pad2(date.getHours());
+        const mm = pad2(date.getMinutes());
+        return `${y}-${m}-${d}T${hh}:${mm}`;
+    }
+
+    let startValue = $derived.by(() => {
+        return toLocalDateTimeInputValue(new Date(selectedStartYear, selectedStartMonth - 1, selectedStartDay));
+    });
+    let endValue = $derived.by(() => {
+        return toLocalDateTimeInputValue(new Date(selectedEndYear, selectedEndMonth - 1, selectedEndDay));
+    });
+
+</script>
+
+<UiContent>
+    <div class="Datepicker">
+        <div class="Fields">
+            <div class="Field Start">
+                <h6>From</h6>
+                <input type="datetime-local" bind:value={startValue} />
+            </div>
+            <div class="Field End">
+                <h6>To</h6>
+                <input type="datetime-local" bind:value={endValue} />
+            </div>
+        </div>
+        <div class="Components">
+            <div class="ComponentContainer YearComponent">
+                <div class="Component Years">
+                    {#each years as year}
+                        <button type="button" class="Year" class:selected={selectedStartYear === year} onclick={() => selectedStartYear = year}>{year}</button>
+                    {/each}
+                </div>
+            </div>
+            <div class="ComponentContainer MonthComponent">
+                <div class="Component Months">
+                    {#each months as month}
+                        <button type="button" class="Month" class:selected={selectedStartMonth === month} onclick={() => selectedStartMonth = month}>
+                            <span class="MonthName">{monthNames[month - 1]}</span>
+                            <span class="MonthNumber">{month}</span>
+                        </button>
+                    {/each}
+                </div>
+            </div>
+            <div class="ComponentContainer DayComponent">
+                <div class="Component Days">
+                    {#each dayNamesOrdered as name}
+                        <div class="DayName">{name}</div>
+                    {/each}
+                    {#each daysGrid as cell}
+                        {#if cell === null}
+                            <div class="Day Empty"></div>
+                        {:else}
+                            <button type="button" class="Day" class:selected={selectedStartDay === cell} onmousedown={(e) => {
+                                e.preventDefault();
+                                selectedStartDay = cell;
+                            }}>{cell}</button>
+                        {/if}
+                    {/each}
+                </div>
+            </div>
+        </div>
+    </div>
+</UiContent>
+
+<style>
+    button {
+        background-color: transparent;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+        transition: all var(--transition-duration-fast) var(--transition-timing-function);
+        margin: 0;
+    }
+    .Datepicker {
+        width: fit-content;
+        display: grid;
+        grid-template-rows: 1fr auto;
+        border: var(--border-size-thin) solid var(--border-color);
+        border-radius: var(--border-radius-sm);
+    }
+    .Components, .Fields {
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-column: span 3;
+        padding: var(--space-md);
+    }
+    .Components {
+        flex-direction: row;
+        justify-content: start;
+        align-items: start;
+        gap: var(--space-md);
+        user-select: none;
+    }
+    .YearComponent, 
+    .MonthComponent {
+        grid-column: span 1;
+    }
+    .DayComponent {
+        grid-column: span 1;
+    }
+    .Years {
+        display: flex;
+        flex-direction: column;
+        justify-content: start;
+        align-items: start;
+        gap: var(--space-md);
+    }
+    .Year {
+        display: block;
+        font-size: 2em;
+        padding: var(--space-sm);
+        text-box: trim-both cap alphabetic;
+    }
+    .Months {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        gap: var(--space-sm);
+    }
+    .Month {
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-column: span 2;
+        line-height: 1;
+        padding: var(--space-sm);
+        text-align: right;
+        white-space: nowrap;
+    }
+    .MonthNumber {
+        font-size: 1.5em;
+        text-align: right;
+        text-box: trim-both cap alphabetic;
+    }
+
+    .MonthName {
+        font-size: 0.75em;
+        text-align: left;
+        text-box: trim-both cap alphabetic;
+        opacity: 0.5;
+    }
+
+    .Days {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: start;
+        align-items: start;
+        gap: var(--space-sm);
+    }
+    .DayName {
+        display: flex;
+        text-box: trim-both cap alphabetic;
+        justify-content: center;
+        font-size: 0.75em;
+        opacity: 0.5;
+        align-items: center;
+    }
+    .Day {
+        display: flex;
+        text-box: trim-both cap alphabetic;
+        justify-content: center;
+        align-items: center;
+        border: var(--border-size-thin) solid var(--border-color);
+        border-radius: calc(var(--border-radius-sm) / 2);
+        padding: var(--space-050);
+        line-height: 1;
+        text-box: trim-both cap alphabetic;
+    }
+    .Day.Empty {
+        border-color: transparent;
+    }
+    .selected {
+        background-color: var(--background-selected);
+        border-radius: calc(var(--border-radius-sm) / 2);
+    }
+
+    .Fields {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        border-bottom: var(--border-size-thin) solid var(--border-color);
+        padding: 0;
+    }
+    .Field {
+        display: grid;
+        grid-areas: "content";
+        border-right: var(--field-border-size) var(--field-border-style) var(--field-border-color);
+        align-items: center;
+    }
+    .Field:first-child { border-top-left-radius: var(--border-radius-sm); }
+    .Field:last-child { border-top-right-radius: var(--border-radius-sm); border-right: none; }
+    .Field h6 {
+        font-size: 0.85em;
+        font-weight: 400;
+        opacity: 0.5;
+        padding: var(--space-sm);
+        margin: 0;
+        height: 100%;
+        line-height: 1.5;
+        text-box: trim-both cap alphabetic;
+    }
+    .Field input {
+        font-family: var(--font-family-mono);
+        font-weight: 500;
+        font-size: 1.5em;
+        border: none;
+        padding: var(--space-md) var(--space-sm);
+        line-height: 1.5;
+        width: 100%;
+        text-box: trim-both cap alphabetic;
+        outline: none;
+    }
+    .Field input:focus-visible {
+        outline: none;
+    }
+    .Field:has(input:focus-visible) {
+        outline: var(--focus-ring);
+        border-color: var(--focus-ring-color);
+    }
+    /* Hide native datetime-local picker UI; we render our own date grid */
+    .Field input[type="datetime-local"] {
+        -webkit-appearance: textfield;
+        appearance: textfield;
+    }
+    .Field input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+        display: none;
+    }
+    .Field input[type="datetime-local"]::-webkit-clear-button,
+    .Field input[type="datetime-local"]::-webkit-inner-spin-button {
+        display: none;
+    }
+</style>

package/dist/form/Datepicker.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    range?: {
+        min?: Date;
+        max?: Date;
+    };
+};
+declare const Datepicker: import("svelte").Component<$$ComponentProps, {}, "">;
+type Datepicker = ReturnType<typeof Datepicker>;
+export default Datepicker;

package/dist/form/FieldContent.svelte

@@ -0,0 +1,178 @@
+<script lang="ts">
+	import { getContext, type Snippet } from "svelte";
+	import Label from "./Label.svelte";
+	import FieldError from "./FieldError.svelte";
+	import type { FormField, FormIssue } from "./types.js";
+	import StringOrSnippet from "../util/StringOrSnippet.svelte";
+
+    /**
+     * @description
+     * This component is used internally by the Input, Select, etc. components to render the label and the input field in a consistent way.
+     */
+    let {
+        id,
+        contained,
+        prefix,
+        suffix,
+        label,
+        labelTip,
+        labelHelp,
+        help,
+        type = "text",
+        direction = 'column', // 'row' | 'column'
+        required,
+        children,
+        field,
+        issue,
+    }: {
+        id: string;
+        contained?: boolean;
+        prefix?: string | Snippet;
+        suffix?: string | Snippet;
+        help?: string | Snippet;
+        type?: string;
+        label?: string | Snippet;
+        labelTip?: string | Snippet;
+        labelHelp?: string | Snippet;
+        direction?: 'row' | 'column';
+        required?: boolean;
+        children: Snippet;
+        field?: FormField;
+        issue?: FormIssue;
+    } = $props();
+
+    if(contained === undefined) { contained = getContext('lutra.form.contained') ?? getContext('lutra.contained') ?? false; }
+</script>
+
+{#snippet _prefix()}
+    <div class="Fix Prefix">
+        <StringOrSnippet content={prefix} />
+    </div>
+{/snippet}
+
+{#snippet _suffix()}
+    <div class="Fix Suffix">
+        <StringOrSnippet content={suffix} />
+    </div>
+{/snippet}
+
+<div class="FieldContentContainer">
+    <div class="FieldContent {type} {direction}" class:contained>
+        <Label {label} tip={labelTip} help={labelHelp} {id} {required} />
+        {#if contained}
+            <div
+                class="Field"
+                class:hasPrefix={prefix}
+                class:hasSuffix={suffix}
+                class:invalid={field?.tainted && issue?.code}
+            >
+                {#if prefix}
+                    {@render _prefix()}
+                {/if}
+    
+                {@render children()}
+    
+                {#if suffix}
+                    {@render _suffix()}
+                {/if}
+            </div>
+        {:else}
+            {#if prefix}
+                {@render _prefix()}
+            {/if}
+    
+            {@render children()}
+    
+            {#if suffix}
+                {@render _suffix()}
+            {/if}
+        {/if}
+    
+    </div>
+    
+    {#if help}
+        <div class="Help">
+            <StringOrSnippet content={help} />
+        </div>
+    {/if}
+    
+    {#if field?.tainted && issue?.code}
+        <FieldError code={issue.code} message={issue.message} />
+    {/if}
+</div>
+
+<style>
+    .FieldContentContainer {
+        display: flex;
+        flex-direction: column;
+        gap: var(--form-field-gap, var(--space-sm));
+    }
+    .FieldContent {
+        display: flex;
+        gap: var(--form-label-gap, var(--space-sm));
+        flex-direction: column;
+        font-size: 1em;
+    }
+    .FieldContent.row {
+        flex-direction: row-reverse;
+        justify-content: start;
+        align-items: center;
+        flex-shrink: 0;
+    }
+    .Field {
+        background: var(--field-background, transparent);
+        border: var(--field-border-size) var(--field-border-style) var(--field-border-color);
+        border-radius: var(--field-border-radius);
+        display: flex;
+    }
+    .Field.invalid {
+        border-color: var(--field-border-color-invalid);
+    }
+    .Field > *:not(input) {
+        flex-grow: 0;
+        flex-shrink: 0;
+    }
+    .Fix {
+        display: flex;
+        align-items: center;
+        padding-inline: var(--form-field-gap, var(--space-md));
+        font-size: 1em;
+        text-box: trim-both cap alphabetic;
+        color: var(--text-subtle);
+    }
+    .Suffix {
+        padding-inline-start: 0;
+    }
+    .Prefix {
+        padding-inline-end: 0;
+    }
+    .Field:has(:global(input:focus-visible)),
+    .Field:has(:global(select:focus-visible)),
+    .Field:has(:global(textarea:focus-visible)) {
+        outline: var(--focus-ring);
+        border-color: var(--focus-ring-color);
+    }
+    .Field:has(:global(input:focus-visible:user-invalid)),
+    .Field:has(:global(select:focus-visible:user-invalid)),
+    .Field:has(:global(textarea:focus-visible:user-invalid)) {
+        outline-color: var(--focus-ring-color-invalid); 
+        border-color: var(--focus-ring-color-invalid);
+    }
+    .Field.hasPrefix :global(input) {
+        padding-inline-start: var(--space-025);
+    }
+    .Field :global(button) {
+        margin-right: var(--space-025);
+    }
+    .Field :global(button:focus-visible) {
+        outline: var(--focus-outline);
+        outline-offset: 3px;
+        border-radius: calc(var(--field-radius) - 2px);
+    }
+    .Help {
+        font-size: min(11px, var(--font-size-075));
+        line-height: var(--font-line-height-tight);
+        color: var(--text-color-p-subtle);
+        font-weight: var(--font-weight-normal);
+    }
+</style>

package/dist/form/FieldContent.svelte.d.ts

@@ -0,0 +1,21 @@
+import { type Snippet } from "svelte";
+import type { FormField, FormIssue } from "./types.js";
+type $$ComponentProps = {
+    id: string;
+    contained?: boolean;
+    prefix?: string | Snippet;
+    suffix?: string | Snippet;
+    help?: string | Snippet;
+    type?: string;
+    label?: string | Snippet;
+    labelTip?: string | Snippet;
+    labelHelp?: string | Snippet;
+    direction?: 'row' | 'column';
+    required?: boolean;
+    children: Snippet;
+    field?: FormField;
+    issue?: FormIssue;
+};
+declare const FieldContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type FieldContent = ReturnType<typeof FieldContent>;
+export default FieldContent;

package/dist/form/FieldError.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    /**
+     * @description
+     * This component is used internally by the Input, Select, etc. components to render the error message.
+     */
+    let {
+        code,
+        message
+    }: {
+        code: string;
+        message?: string;
+    } = $props();
+</script>
+
+<p class="Error">{message ? message : code}</p>
+
+<style>
+    p.Error {
+        color: var(--field-color-danger, light-dark(red, red));
+        font-size: max(0.85em, 11px);
+        font-weight: var(--font-weight-normal);
+        text-wrap: balance;
+    }
+</style>

package/dist/form/FieldError.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    code: string;
+    message?: string;
+};
+declare const FieldError: import("svelte").Component<$$ComponentProps, {}, "">;
+type FieldError = ReturnType<typeof FieldError>;
+export default FieldError;