@joyautomation/salt 0.0.22 → 0.1.0

package/dist/actions.js

@@ -3,13 +3,13 @@ export const setTheme = async ({ request, cookies }) => {
     const theme = data.get('theme');
     cookies.set(`theme`, theme, {
         path: '/',
-        secure: false,
+        secure: false
     });
     const themeName = theme === 'themeDark' ? 'dark mode' : 'light mode';
     return {
         context: 'setTheme',
         type: 'success',
         message: `You are now in ${themeName}.`,
-        theme,
+        theme
     };
 };

package/dist/client.js

@@ -1,12 +1,12 @@
 export function setTheme(form) {
-    if (form?.context === "setTheme") {
-        if (form?.theme === "themeDark") {
-            document.body.classList.add("themeDark");
-            document.body.classList.remove("themeLight");
+    if (form?.context === 'setTheme') {
+        if (form?.theme === 'themeDark') {
+            document.body.classList.add('themeDark');
+            document.body.classList.remove('themeLight');
         }
         else {
-            document.body.classList.remove("themeDark");
-            document.body.classList.add("themeLight");
+            document.body.classList.remove('themeDark');
+            document.body.classList.add('themeLight');
         }
     }
 }

package/dist/components/ThemeButton.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { enhance } from '$app/forms'
-  import Moon from './icons/Moon.svelte'
-  import Sun from './icons/Sun.svelte'
+  import Moon from './icons/outline/Moon.svelte'
+  import Sun from './icons/outline/Sun.svelte'
   export let theme: string
   export let action = 'setTheme'
 </script>

package/dist/components/Toggle.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { enhance } from '$app/forms';
-
 	export let id: string;
 	export let checked = false;
 	export let name: string;

package/dist/components/forms/Form.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import Input from './Input.svelte';
+	import Select from './Select.svelte';
+	import type { FormInputs } from './types.js';
+	import { slide } from 'svelte/transition';
+
+	const {
+		inputs: propInputs,
+		action,
+		buttonText = 'Submit',
+		onsubmitstart,
+		onsubmitend
+	}: {
+		inputs: FormInputs;
+		action: string;
+		buttonText?: string;
+		onsubmitstart?: () => void;
+		onsubmitend?: () => void;
+	} = $props();
+
+	let inputs = $state(propInputs);
+	let submitting = $state(false);
+
+	$effect(() => {
+		inputs = propInputs;
+	});
+
+	const valid = $derived(
+		inputs.every((row) =>
+			row.every((input) => {
+				return input.validations.every(([validation, _message]) => {
+					return !validation(input.value, inputs);
+				});
+			})
+		)
+	);
+</script>
+
+<form
+	class="form space-y-1"
+	method="post"
+	{action}
+	use:enhance={() => {
+		submitting = true;
+		onsubmitstart?.();
+		return async ({ update }) => {
+			submitting = false;
+			onsubmitend?.();
+			update({ reset: false });
+		};
+	}}
+>
+	{#each inputs as row}
+		<div class="form__row">
+			{#each row as input}
+				<div>
+					{#if input.type === 'select'}
+						<Select {...input} bind:value={input.value} {inputs} options={input.options || []} />
+					{:else}
+						<Input {...input} bind:value={input.value} {inputs} />
+					{/if}
+				</div>
+			{/each}
+		</div>
+	{/each}
+	<button class="button--primary" disabled={!valid || submitting}>
+		{#if submitting}
+			<div class="form__spinner-container" transition:slide>
+				<span class="form__spinner"></span>
+			</div>
+		{:else}
+			<div transition:slide>
+				{buttonText}
+			</div>
+		{/if}
+	</button>
+</form>
+
+<style>.form {
+  display: flex;
+  flex-direction: column;
+}
+.form > .form__row {
+  display: flex;
+}
+.form > .form__row > * {
+  flex-grow: 1;
+}
+
+.form__spinner-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.form__spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--theme-neutral-300);
+  border-top-color: var(--white, #fff);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}</style>

package/dist/components/forms/Form.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { FormInputs } from './types.js';
+type $$ComponentProps = {
+    inputs: FormInputs;
+    action: string;
+    buttonText?: string;
+    onsubmitstart?: () => void;
+    onsubmitend?: () => void;
+};
+declare const Form: import("svelte").Component<$$ComponentProps, {}, "">;
+type Form = ReturnType<typeof Form>;
+export default Form;

package/dist/components/forms/Input.svelte

@@ -1,20 +1,77 @@
 <script lang="ts">
-	import type { InputProps } from './types.js'
+	import { slide } from 'svelte/transition';
+	import type { FormInputs, InputProps } from './types.js';
 
-	const { id, name, label, type, value, validation }: InputProps = $props()
-	const validationResult = $derived(validation(value))
+	let {
+		id,
+		name,
+		label,
+		type,
+		step,
+		value = $bindable(''),
+		validations,
+		inputs,
+		touched = false,
+		onblur = () => {}
+	}: InputProps & { inputs?: FormInputs; touched?: boolean; onblur?: () => void } = $props();
+	const validationResult = $derived(
+		validations.find(([validation, _message]) => {
+			return validation(value, inputs ?? []);
+		})?.[1] || null
+	);
 </script>
 
-<div class="input">
-	<label for={id}>{label}</label>
-	<input {id} {name} {type} />
-	{#if validationResult != null}<div class="input__validation">{validationResult}</div>{/if}
+<div class="input" class:input--invalid={touched && validationResult != null}>
+	{#if label != null}
+		<label for={id}>{label}</label>
+	{/if}
+	{#if type === 'textarea'}
+		<textarea {id} {name} bind:value {onblur}></textarea>
+	{:else}
+		<input {id} {name} {step} {type} bind:value {onblur} />
+	{/if}
+	{#if touched && validationResult != null}<div transition:slide class="input__validation">
+			{validationResult}
+		</div>{/if}
 </div>
 
 <style>.input {
   display: flex;
   flex-direction: column;
 }
+.input > .input__validation {
+  color: var(--theme-error-400, var(--red-400));
+  font-size: var(--text-xs);
+  line-height: var(--text-xs-lh);
+}
+.input > label {
+  color: var(--theme-text);
+  font-family: var(--theme-font-basic, inherit);
+  font-size: var(--text-sm);
+  line-height: var(--text-sm-lh);
+  text-transform: capitalize;
+}
 .input > * {
   margin-top: var(--spacing-unit);
+}
+.input > input, .input > textarea {
+  background-color: var(--theme-neutral-200);
+  border: solid 1px var(--theme-neutral-300);
+  color: var(--theme-text);
+  padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
+  border-radius: var(--rounded-sm);
+  font-size: var(--text-base);
+}
+.input > input:focus, .input > textarea:focus {
+  outline: none;
+  border-color: var(--theme-primary);
+}
+.input > textarea {
+  resize: vertical;
+  min-height: 100px;
+  font-family: inherit;
+}
+
+.input--invalid > input, .input--invalid > textarea {
+  border: solid 1px var(--theme-error-400, var(--red-400));
 }</style>

package/dist/components/forms/Input.svelte.d.ts

@@ -1,4 +1,9 @@
-import type { InputProps } from './types.js';
-declare const Input: import("svelte").Component<InputProps, {}, "">;
+import type { FormInputs, InputProps } from './types.js';
+type $$ComponentProps = InputProps & {
+    inputs?: FormInputs;
+    touched?: boolean;
+    onblur?: () => void;
+};
+declare const Input: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/components/forms/SearchableSelect.svelte

@@ -0,0 +1,309 @@
+<script lang="ts">
+	import ChevronDown from '../icons/outline/ChevronDown.svelte';
+
+	type Option = {
+		value: string;
+		label: string;
+		sublabel?: string;
+	};
+
+	type Props = {
+		options: Option[];
+		placeholder?: string;
+		onSelect: (option: Option) => void;
+		disabled?: boolean;
+	};
+
+	let { options, placeholder = 'Select...', onSelect, disabled = false }: Props = $props();
+
+	let isOpen = $state(false);
+	let searchQuery = $state('');
+	let highlightedIndex = $state(-1);
+	let inputRef: HTMLInputElement | undefined = $state();
+	let dropdownRef: HTMLDivElement | undefined = $state();
+
+	let filteredOptions = $derived(
+		searchQuery.trim() === ''
+			? options
+			: options.filter((opt) => {
+					const query = searchQuery.toLowerCase();
+					return (
+						opt.label.toLowerCase().includes(query) ||
+						(opt.sublabel && opt.sublabel.toLowerCase().includes(query))
+					);
+				})
+	);
+
+	function openDropdown() {
+		if (disabled) return;
+		isOpen = true;
+		highlightedIndex = -1;
+		setTimeout(() => inputRef?.focus(), 0);
+	}
+
+	function closeDropdown() {
+		isOpen = false;
+		searchQuery = '';
+		highlightedIndex = -1;
+	}
+
+	function selectOption(option: Option) {
+		onSelect(option);
+		closeDropdown();
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (!isOpen) {
+			if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+				e.preventDefault();
+				openDropdown();
+			}
+			return;
+		}
+
+		switch (e.key) {
+			case 'ArrowDown':
+				e.preventDefault();
+				highlightedIndex = Math.min(highlightedIndex + 1, filteredOptions.length - 1);
+				scrollToHighlighted();
+				break;
+			case 'ArrowUp':
+				e.preventDefault();
+				highlightedIndex = Math.max(highlightedIndex - 1, 0);
+				scrollToHighlighted();
+				break;
+			case 'Enter':
+				e.preventDefault();
+				if (highlightedIndex >= 0 && highlightedIndex < filteredOptions.length) {
+					selectOption(filteredOptions[highlightedIndex]);
+				}
+				break;
+			case 'Escape':
+				e.preventDefault();
+				closeDropdown();
+				break;
+			case 'Tab':
+				closeDropdown();
+				break;
+		}
+	}
+
+	function scrollToHighlighted() {
+		if (!dropdownRef || highlightedIndex < 0) return;
+		const items = dropdownRef.querySelectorAll('.searchable-select__option');
+		const item = items[highlightedIndex] as HTMLElement;
+		if (item) {
+			item.scrollIntoView({ block: 'nearest' });
+		}
+	}
+
+	function handleClickOutside(e: MouseEvent) {
+		const target = e.target as Node;
+		if (dropdownRef && !dropdownRef.contains(target)) {
+			closeDropdown();
+		}
+	}
+
+	$effect(() => {
+		if (isOpen) {
+			document.addEventListener('click', handleClickOutside, true);
+			return () => document.removeEventListener('click', handleClickOutside, true);
+		}
+	});
+
+	$effect(() => {
+		if (searchQuery) {
+			highlightedIndex = filteredOptions.length > 0 ? 0 : -1;
+		}
+	});
+</script>
+
+<div class="searchable-select" class:searchable-select--disabled={disabled}>
+	<button
+		type="button"
+		class="searchable-select__trigger"
+		onclick={openDropdown}
+		onkeydown={handleKeydown}
+		{disabled}
+		aria-haspopup="listbox"
+		aria-expanded={isOpen}
+	>
+		<span class="searchable-select__placeholder">{placeholder}</span>
+		<span class="searchable-select__chevron" class:searchable-select__chevron--open={isOpen}>
+			<ChevronDown size="1rem" />
+		</span>
+	</button>
+
+	{#if isOpen}
+		<div class="searchable-select__dropdown" bind:this={dropdownRef}>
+			<div class="searchable-select__search">
+				<input
+					bind:this={inputRef}
+					type="text"
+					class="searchable-select__input"
+					placeholder="Search..."
+					bind:value={searchQuery}
+					onkeydown={handleKeydown}
+				/>
+			</div>
+			<div class="searchable-select__options" role="listbox">
+				{#if filteredOptions.length === 0}
+					<div class="searchable-select__empty">No matches found</div>
+				{:else}
+					{#each filteredOptions as option, i}
+						<button
+							type="button"
+							class="searchable-select__option"
+							class:searchable-select__option--highlighted={i === highlightedIndex}
+							onclick={() => selectOption(option)}
+							onmouseenter={() => (highlightedIndex = i)}
+							role="option"
+							aria-selected={i === highlightedIndex}
+						>
+							<span class="searchable-select__option-label">{option.label}</span>
+							{#if option.sublabel}
+								<span class="searchable-select__option-sublabel">{option.sublabel}</span>
+							{/if}
+						</button>
+					{/each}
+				{/if}
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>.searchable-select {
+  position: relative;
+  width: 100%;
+}
+
+.searchable-select--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.searchable-select__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 40px;
+  padding: 0 calc(var(--spacing-unit) * 2);
+  border: 1px solid var(--theme-neutral-300);
+  border-radius: var(--rounded-sm);
+  background-color: var(--theme-neutral-200);
+  color: var(--theme-text);
+  font-size: var(--text-base);
+  cursor: pointer;
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+.searchable-select__trigger:hover:not(:disabled) {
+  border-color: var(--theme-neutral-400);
+}
+.searchable-select__trigger:focus {
+  outline: none;
+  border-color: var(--theme-primary);
+}
+
+.searchable-select__placeholder {
+  color: var(--theme-neutral-500);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.searchable-select__chevron {
+  display: flex;
+  align-items: center;
+  color: var(--theme-neutral-500);
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
+  margin-left: calc(var(--spacing-unit) * 1);
+}
+
+.searchable-select__chevron--open {
+  transform: rotate(-180deg);
+}
+
+.searchable-select__dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: 100;
+  border: 1px solid var(--theme-neutral-300);
+  border-radius: var(--rounded-md, var(--rounded-sm));
+  background-color: var(--theme-neutral-100);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+}
+
+.searchable-select__search {
+  padding: calc(var(--spacing-unit) * 1.5);
+  border-bottom: 1px solid var(--theme-neutral-200);
+}
+
+.searchable-select__input {
+  width: 100%;
+  height: 32px;
+  padding: 0 calc(var(--spacing-unit) * 1.5);
+  border: 1px solid var(--theme-neutral-300);
+  border-radius: var(--rounded-sm);
+  background-color: var(--theme-neutral-50, var(--theme-neutral-100));
+  color: var(--theme-text);
+  font-size: var(--text-sm);
+}
+.searchable-select__input::placeholder {
+  color: var(--theme-neutral-400);
+}
+.searchable-select__input:focus {
+  outline: none;
+  border-color: var(--theme-primary);
+}
+
+.searchable-select__options {
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.searchable-select__option {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
+  border: none;
+  background: transparent;
+  color: var(--theme-text);
+  font-size: var(--text-sm);
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+}
+.searchable-select__option:hover, .searchable-select__option.searchable-select__option--highlighted {
+  background-color: var(--theme-neutral-200);
+}
+
+.searchable-select__option-label {
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.searchable-select__option-sublabel {
+  font-size: var(--text-xs);
+  color: var(--theme-neutral-500);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.searchable-select__empty {
+  padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2);
+  text-align: center;
+  color: var(--theme-neutral-500);
+  font-size: var(--text-sm);
+}</style>

package/dist/components/forms/SearchableSelect.svelte.d.ts

@@ -0,0 +1,14 @@
+type Option = {
+    value: string;
+    label: string;
+    sublabel?: string;
+};
+type Props = {
+    options: Option[];
+    placeholder?: string;
+    onSelect: (option: Option) => void;
+    disabled?: boolean;
+};
+declare const SearchableSelect: import("svelte").Component<Props, {}, "">;
+type SearchableSelect = ReturnType<typeof SearchableSelect>;
+export default SearchableSelect;

package/dist/components/forms/Select.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { slide } from 'svelte/transition';
+	import type { FormInputs, InputProps } from './types.js';
+
+	let {
+		id,
+		name,
+		label,
+		value = $bindable(''),
+		validations,
+		inputs,
+		options
+	}: InputProps & { inputs?: FormInputs; options: { value: string; label: string }[] } = $props();
+	const validationResult = $derived(
+		validations.find(([validation, _message]) => {
+			return validation(value, inputs ?? []);
+		})?.[1] || null
+	);
+</script>
+
+<div class="select-field" class:select-field--invalid={validationResult != null}>
+	{#if label != null}
+		<label for={id}>{label}</label>
+	{/if}
+	<select {id} {name} bind:value>
+		{#each options as option}
+			<option value={option.value}>{option.label}</option>
+		{/each}
+	</select>
+	{#if validationResult != null}<div transition:slide class="select-field__validation">
+			{validationResult}
+		</div>{/if}
+</div>
+
+<style>.select-field {
+  display: flex;
+  flex-direction: column;
+}
+.select-field > .select-field__validation {
+  color: var(--theme-error-400, var(--red-400));
+  font-size: var(--text-xs);
+  line-height: var(--text-xs-lh);
+}
+.select-field > label {
+  color: var(--theme-text);
+  font-family: var(--theme-font-basic, inherit);
+  font-size: var(--text-sm);
+  line-height: var(--text-sm-lh);
+  text-transform: capitalize;
+}
+.select-field > * {
+  margin-top: var(--spacing-unit);
+}
+.select-field > select {
+  background-color: var(--theme-neutral-200);
+  border: solid 1px var(--theme-neutral-300);
+  color: var(--theme-text);
+  padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
+  border-radius: var(--rounded-sm);
+  font-size: var(--text-base);
+}
+.select-field > select:focus {
+  outline: none;
+  border-color: var(--theme-primary);
+}
+
+.select-field--invalid > select {
+  border: solid 1px var(--theme-error-400, var(--red-400));
+}</style>

package/dist/components/forms/Select.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { FormInputs, InputProps } from './types.js';
+type $$ComponentProps = InputProps & {
+    inputs?: FormInputs;
+    options: {
+        value: string;
+        label: string;
+    }[];
+};
+declare const Select: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/forms/index.d.ts

@@ -1 +1,5 @@
-export {};
+export { default as Form } from './Form.svelte';
+export { default as Input } from './Input.svelte';
+export { default as Select } from './Select.svelte';
+export { default as SearchableSelect } from './SearchableSelect.svelte';
+export type { InputProps, FormInputs, FormInputsPartial } from './types.js';

package/dist/components/forms/index.js

@@ -1 +1,4 @@
-"use strict";
+export { default as Form } from './Form.svelte';
+export { default as Input } from './Input.svelte';
+export { default as Select } from './Select.svelte';
+export { default as SearchableSelect } from './SearchableSelect.svelte';