lutra 0.1.69 → 0.1.73

package/dist/form/Toggle.svelte

@@ -1,4 +1,170 @@
 <script lang="ts">
+	import { getContext, onMount, type Snippet } from "svelte";
+	import type { LutraForm } from "./types.js";
+	import { fieldChange } from "./client.svelte.js";
+	import FieldContent from "./FieldContent.svelte";
+	import { getFromObjWithStringPath } from "./form.js";
+	import { ZodType } from "zod";
 
+    /**
+     * @description
+     * A mobile-style toggle switch. Renders as `<input type="checkbox" role="switch">`
+     * for full accessibility. Integrates with the Lutra form system for validation,
+     * error display and field state tracking.
+     *
+     * @example
+     * <Toggle name="notifications" label="Enable notifications" />
+     * <Toggle name="darkMode" label="Dark mode" value={true} />
+     */
+    let {
+        disabled,
+        help,
+        id = $bindable(crypto.randomUUID()),
+        label,
+        labelHelp,
+        labelTip,
+        name,
+        onblur,
+        onchange,
+        onfocus,
+        required,
+        scale = 'md',
+        title,
+        value = $bindable(false),
+        ...rest
+    }: {
+        /** Whether the toggle is disabled. */
+        disabled?: boolean;
+        /** Help text to display below the toggle. */
+        help?: string | Snippet;
+        /** A random id is generated if not provided. */
+        id?: string;
+        /** The label for the toggle. */
+        label?: string | Snippet;
+        /** Help text to display below the label. */
+        labelHelp?: string | Snippet;
+        /** Context tooltip for the label. Renders with a questionmark using ContextTip. */
+        labelTip?: string | Snippet;
+        /** The name of the toggle field. */
+        name: string;
+        /** The onblur event handler. */
+        onblur?: (e: FocusEvent) => void;
+        /** Onchange event handler. */
+        onchange?: (e: Event) => void;
+        /** Onfocus event handler. */
+        onfocus?: (e: FocusEvent) => void;
+        /** Whether the toggle is required. */
+        required?: boolean;
+        /** Size variant controlling font-size. Em-based tokens cascade automatically. */
+        scale?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+        /** A string that defines the title of the toggle. */
+        title?: string;
+        /** The checked state of the toggle. */
+        value?: boolean;
+    } = $props();
+
+    let el: HTMLInputElement | undefined = $state();
+
+    const form = getContext<LutraForm<any>>('form');
+    const field = $derived(form?.fields[name]);
+    const issue = $derived(form?.issues?.find((issue) => issue.name === name));
+    const validator = getContext<Record<string, ZodType>>('form.validators')?.[name];
+    const data = form?.data;
+    const originalData = form?.originalData;
+
+    if(!value) value = form ? (getFromObjWithStringPath(Object.assign(originalData ?? {}, data ?? {}), name) as boolean) : false;
+
+    onMount(() => {
+        if(value) fieldChange(form, name, () => el)({} as any);
+    });
 </script>
 
+<FieldContent
+    {id}
+    {label}
+    {labelHelp}
+    {labelTip}
+    contained={false}
+    direction="row"
+    {field}
+    {issue}
+    type="toggle"
+    {help}
+    {required}
+    {scale}
+>
+    <input
+        type="checkbox"
+        role="switch"
+        class="Toggle"
+        bind:this={el}
+        {disabled}
+        {id}
+        {name}
+        {title}
+        required={required || field?.required}
+        onchange={fieldChange(form, name, () => el, validator, onchange)}
+        {onblur}
+        {onfocus}
+        bind:checked={value}
+        aria-checked={value}
+        {...rest}
+    />
+</FieldContent>
+
+<style>
+    input.Toggle {
+        appearance: none;
+        width: var(--toggle-width);
+        height: var(--toggle-height);
+        border-radius: calc(infinity * 1px);
+        background: var(--toggle-background);
+        border: var(--field-border-size) var(--field-border-style) var(--toggle-border-color);
+        cursor: pointer;
+        position: relative;
+        flex-shrink: 0;
+        padding: 0;
+        margin: 0;
+        transition:
+            background var(--transition-duration-fast) var(--transition-timing-function),
+            border-color var(--transition-duration-fast) var(--transition-timing-function);
+    }
+
+    input.Toggle::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        inset-inline-start: var(--toggle-thumb-offset);
+        width: var(--toggle-thumb-size);
+        height: var(--toggle-thumb-size);
+        border-radius: 50%;
+        background: var(--toggle-thumb-color);
+        translate: 0 -50%;
+        transition: translate var(--transition-duration-fast) var(--transition-timing-function);
+        box-shadow: var(--toggle-thumb-shadow);
+    }
+
+    input.Toggle:checked {
+        background: var(--toggle-background-checked);
+        border-color: var(--toggle-border-color-checked);
+    }
+
+    input.Toggle:checked::before {
+        translate: calc(var(--toggle-width) - var(--toggle-height)) -50%;
+    }
+
+    input.Toggle:checked::after {
+        content: none;
+        display: none;
+    }
+
+    input.Toggle:focus-visible {
+        outline: var(--focus-ring-size) solid var(--focus-ring-color);
+        outline-offset: var(--focus-ring-offset);
+    }
+
+    input.Toggle:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+</style>

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

@@ -1,18 +1,34 @@
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Toggle: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Toggle = InstanceType<typeof Toggle>;
+import { type Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Whether the toggle is disabled. */
+    disabled?: boolean;
+    /** Help text to display below the toggle. */
+    help?: string | Snippet;
+    /** A random id is generated if not provided. */
+    id?: string;
+    /** The label for the toggle. */
+    label?: string | Snippet;
+    /** Help text to display below the label. */
+    labelHelp?: string | Snippet;
+    /** Context tooltip for the label. Renders with a questionmark using ContextTip. */
+    labelTip?: string | Snippet;
+    /** The name of the toggle field. */
+    name: string;
+    /** The onblur event handler. */
+    onblur?: (e: FocusEvent) => void;
+    /** Onchange event handler. */
+    onchange?: (e: Event) => void;
+    /** Onfocus event handler. */
+    onfocus?: (e: FocusEvent) => void;
+    /** Whether the toggle is required. */
+    required?: boolean;
+    /** Size variant controlling font-size. Em-based tokens cascade automatically. */
+    scale?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** A string that defines the title of the toggle. */
+    title?: string;
+    /** The checked state of the toggle. */
+    value?: boolean;
+};
+declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "id" | "value">;
+type Toggle = ReturnType<typeof Toggle>;
 export default Toggle;

package/dist/form/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Button } from './Button.svelte';
 export { default as FormActions } from './FormActions.svelte';
 export { default as FieldError } from './FieldError.svelte';
+export { default as FieldGroup } from './FieldGroup.svelte';
 export { default as FormSection } from './FormSection.svelte';
 export { default as Fieldset } from './Fieldset.svelte';
 export { default as Form } from './Form.svelte';
@@ -9,9 +10,11 @@ export { default as Input } from './Input.svelte';
 export { default as InputLength } from './InputLength.svelte';
 export { default as Label } from './Label.svelte';
 export { default as LogoUpload } from './LogoUpload.svelte';
+export { default as SegmentedControl } from './SegmentedControl.svelte';
 export { default as Select } from './Select.svelte';
 export { default as Textarea } from './Textarea.svelte';
 export { default as Toggle } from './Toggle.svelte';
+export * from './SegmentedControlTypes.js';
 export * from './types.js';
 export * from './form.js';
 export * from './client.svelte.js';

package/dist/form/index.js

@@ -1,6 +1,7 @@
 export { default as Button } from './Button.svelte';
 export { default as FormActions } from './FormActions.svelte';
 export { default as FieldError } from './FieldError.svelte';
+export { default as FieldGroup } from './FieldGroup.svelte';
 export { default as FormSection } from './FormSection.svelte';
 export { default as Fieldset } from './Fieldset.svelte';
 export { default as Form } from './Form.svelte';
@@ -9,9 +10,11 @@ export { default as Input } from './Input.svelte';
 export { default as InputLength } from './InputLength.svelte';
 export { default as Label } from './Label.svelte';
 export { default as LogoUpload } from './LogoUpload.svelte';
+export { default as SegmentedControl } from './SegmentedControl.svelte';
 export { default as Select } from './Select.svelte';
 export { default as Textarea } from './Textarea.svelte';
 export { default as Toggle } from './Toggle.svelte';
+export * from './SegmentedControlTypes.js';
 export * from './types.js';
 export * from './form.js';
 export * from './client.svelte.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lutra",
-	"version": "0.1.69",
+	"version": "0.1.73",
 	"scripts": {
 		"dev": "vite dev",
 		"bump-and-publish:patch": "pnpm version:patch && pnpm build && npm publish",