lutra 0.0.33 → 0.1.4

package/dist/form/Button.svelte

@@ -1,28 +1,44 @@
-<script lang="ts">import Icon from "../display/Icon.svelte";
-import { getContext } from "svelte";
-let {
-  href,
-  type = "button",
-  class: className,
-  size = "md",
-  kind = "default",
-  disabled = false,
-  icon,
-  onclick,
-  children
-} = $props();
-const form = getContext("form");
+<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}" {href} {onclick}>
+    <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}" type={type} disabled={disabled || form?.state === 'loading'} {onclick}>
+    <button class="Button button {size} {kind} {className} {align}" type={type} disabled={disabled || form?.state === 'loading'} {onclick}>
         {#if icon}
             <Icon {icon} />
         {/if}
@@ -36,4 +52,7 @@ const form = getContext("form");
         align-items: center;
         justify-content: center;
     }
+    .Button.full {
+        width: 100%;
+    }
 </style>

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

@@ -1,26 +1,15 @@
 import { type Component, 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 Button: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     href?: string;
-    type?: "button" | "submit" | "reset";
-    kind?: "default" | "outlined" | "secondary" | "warn";
-    size?: "sm" | "md" | "lg" | "xl";
+    type?: 'button' | 'submit' | 'reset';
+    kind?: 'default' | 'outlined' | 'secondary' | 'warn';
+    size?: 'sm' | 'md' | 'lg' | 'xl';
     class?: string;
     disabled?: boolean;
-    icon?: string | Snippet | Component;
+    icon?: string | Component;
     onclick?: (event: MouseEvent) => void;
     children: Snippet;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Button = InstanceType<typeof Button>;
+};
+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

@@ -1,22 +1,47 @@
-<script lang="ts">import Label from "./Label.svelte";
-import FieldError from "./FieldError.svelte";
-import StringOrSnippet from "../utils/StringOrSnippet.svelte";
-let {
-  id,
-  contained,
-  prefix,
-  suffix,
-  label,
-  labelTip,
-  help,
-  type = "text",
-  direction = "column",
-  // 'row' | 'column'
-  required,
-  children,
-  field,
-  issue
-} = $props();
+<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()}
@@ -33,7 +58,7 @@ let {
 
 <div class="FieldContentContainer">
     <div class="FieldContent {type} {direction}" class:contained>
-        <Label {label} tip={labelTip} {id} {required} />
+        <Label {label} tip={labelTip} help={labelHelp} {id} {required} />
         {#if contained}
             <div
                 class="Field"
@@ -80,13 +105,13 @@ let {
     .FieldContentContainer {
         display: flex;
         flex-direction: column;
-        gap: 0.75em;
+        gap: var(--form-field-gap, var(--space-sm));
     }
     .FieldContent {
         display: flex;
-        gap: 0.75em;
+        gap: var(--form-label-gap, var(--space-sm));
         flex-direction: column;
-        font-size: var(--font-size, 1em);
+        font-size: 1em;
     }
     .FieldContent.row {
         flex-direction: row-reverse;
@@ -95,14 +120,13 @@ let {
         flex-shrink: 0;
     }
     .Field {
-        background-color: var(--field-bg);
+        background: var(--field-background, transparent);
         border: var(--field-border-size) var(--field-border-style) var(--field-border-color);
-        border-radius: var(--field-radius);
+        border-radius: var(--field-border-radius);
         display: flex;
     }
-    .Field:has(input:user-invalid),
     .Field.invalid {
-        border-color: var(--field-border-color-error);
+        border-color: var(--field-border-color-invalid);
     }
     .Field > *:not(input) {
         flex-grow: 0;
@@ -111,9 +135,9 @@ let {
     .Fix {
         display: flex;
         align-items: center;
-        padding-inline: 0.75em;
+        padding-inline: var(--form-field-gap, var(--space-md));
         font-size: 1em;
-        line-height: 1.5;
+        text-box: trim-both cap alphabetic;
         color: var(--text-subtle);
     }
     .Suffix {
@@ -122,22 +146,23 @@ let {
     .Prefix {
         padding-inline-end: 0;
     }
-    .Field:has(input:focus-visible),
-    .Field:has(select:focus-visible),
-    .Field:has(textarea:focus-visible) {
-        outline: var(--focus-outline);
+    .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(input:focus-visible:user-invalid),
-    .Field:has(select:focus-visible:user-invalid),
-    .Field:has(textarea:focus-visible:user-invalid),
-    .Field.invalid:has(input:focus-visible) {
-        outline-color: var(--focus-color-error); 
+    .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: 0.35em;
+        padding-inline-start: var(--space-025);
     }
     .Field :global(button) {
-        margin-right: 2px;
+        margin-right: var(--space-025);
     }
     .Field :global(button:focus-visible) {
         outline: var(--focus-outline);
@@ -145,9 +170,9 @@ let {
         border-radius: calc(var(--field-radius) - 2px);
     }
     .Help {
-        font-size: 0.85em;
-        color: var(--text-subtle);
-        line-height: 1.4;
-        font-weight: 400;
+        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

@@ -1,16 +1,6 @@
-import type { Snippet } from "svelte";
+import { type Snippet } from "svelte";
 import type { FormField, FormIssue } from "./types.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 FieldContent: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     id: string;
     contained?: boolean;
     prefix?: string | Snippet;
@@ -19,13 +9,13 @@ declare const FieldContent: $$__sveltets_2_IsomorphicComponent<{
     type?: string;
     label?: string | Snippet;
     labelTip?: string | Snippet;
-    direction?: "row" | "column";
+    labelHelp?: string | Snippet;
+    direction?: 'row' | 'column';
     required?: boolean;
     children: Snippet;
     field?: FormField;
     issue?: FormIssue;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type FieldContent = InstanceType<typeof FieldContent>;
+};
+declare const FieldContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type FieldContent = ReturnType<typeof FieldContent>;
 export default FieldContent;

package/dist/form/FieldError.svelte

@@ -1,14 +1,24 @@
-<script lang="ts">let {
-  code,
-  message
-} = $props();
+<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>
-    .Error {
-        color: var(--text-warn);
+    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>