@marianmeres/stuic 2.66.0 → 3.0.1

package/dist/components/Input/FieldInput.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" module>
 	import type { Snippet } from "svelte";
 	import type { HTMLInputAttributes } from "svelte/elements";
+	import type { TypeaheadOptions } from "../../actions/typeahead.svelte.js";
 	import type { ValidateOptions } from "../../actions/validate.svelte.js";
 	import type { THC } from "../Thc/Thc.svelte";
 
@@ -17,6 +18,7 @@
 		tabindex?: number;
 		renderSize?: "sm" | "md" | "lg" | string;
 		useTrim?: boolean;
+		useTypeahead?: boolean | Omit<TypeaheadOptions, "enabled">;
 		required?: boolean;
 		disabled?: boolean;
 		validate?: boolean | Omit<ValidateOptions, "setValidationResult">;
@@ -42,6 +44,7 @@
 
 <script lang="ts">
 	import { trim } from "../../actions/trim.svelte.js";
+	import { typeahead } from "../../actions/typeahead.svelte.js";
 	import {
 		validate as validateAction,
 		type ValidationResult,
@@ -61,6 +64,7 @@
 		class: classProp,
 		renderSize = "md",
 		useTrim = true,
+		useTypeahead,
 		//
 		required = false,
 		disabled = false,
@@ -126,11 +130,15 @@
 		bind:this={input}
 		{type}
 		{id}
-		class={twMerge("form-input", renderSize, classInput)}
+		class={twMerge(classInput)}
 		use:trim={() => ({
 			enabled: useTrim,
 			setValue: (v: string) => useTrim && (value = v),
 		})}
+		use:typeahead={() => ({
+			enabled: !!useTypeahead,
+			...(typeof useTypeahead === "boolean" ? {} : useTypeahead),
+		})}
 		use:validateAction={() => ({
 			enabled: !!validate,
 			...(typeof validate === "boolean" ? {} : validate),

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

@@ -1,5 +1,6 @@
 import type { Snippet } from "svelte";
 import type { HTMLInputAttributes } from "svelte/elements";
+import type { TypeaheadOptions } from "../../actions/typeahead.svelte.js";
 import type { ValidateOptions } from "../../actions/validate.svelte.js";
 import type { THC } from "../Thc/Thc.svelte";
 type SnippetWithId = Snippet<[{
@@ -16,6 +17,7 @@ export interface Props extends HTMLInputAttributes, Record<string, any> {
     tabindex?: number;
     renderSize?: "sm" | "md" | "lg" | string;
     useTrim?: boolean;
+    useTypeahead?: boolean | Omit<TypeaheadOptions, "enabled">;
     required?: boolean;
     disabled?: boolean;
     validate?: boolean | Omit<ValidateOptions, "setValidationResult">;

package/dist/components/Input/FieldOptions.svelte

@@ -228,10 +228,13 @@
 	}
 
 	function getIconThc(isSelected: boolean): { html: string } {
+		const size = 19;
 		if (isMultiple) {
-			return { html: isSelected ? iconCheckboxCheck() : iconCheckboxEmpty() };
+			return {
+				html: isSelected ? iconCheckboxCheck({ size }) : iconCheckboxEmpty({ size }),
+			};
 		}
-		return { html: isSelected ? iconRadioCheck() : iconRadioEmpty() };
+		return { html: isSelected ? iconRadioCheck({ size }) : iconRadioEmpty({ size }) };
 	}
 
 	function sortFn(a: Item, b: Item) {
@@ -542,7 +545,7 @@
 				let extra = '';
 				if (vals.length > limit) {
 					vals = vals.slice(0, limit);
-					extra = `, ... <span class="text-sm opacity-75">(+${(origLength - limit)})</span>`;
+					extra = `, ... <span class="text-sm stuic-field-options-muted">(+${(origLength - limit)})</span>`;
 				}
 				return vals.filter(v => v != null).map(_renderOptionLabel).join(", ") + extra;
 			} catch (e) {
@@ -558,7 +561,7 @@
 		bind:this={modalDialog}
 		preEscapeClose={escape}
 		classDialog="items-start"
-		class="w-full max-w-2xl bg-transparent pointer-events-none"
+		class={twMerge("w-full max-w-2xl bg-transparent! shadow-none! pointer-events-none")}
 		ariaLabelledby={id}
 		{noScrollLock}
 	>
@@ -569,8 +572,8 @@
 					class={twMerge("m-2 mb-12 shadow-xl", classModalField)}
 					classInputBoxWrap={twMerge(
 						// always look like focused
-						`border border-input-accent dark:border-input-accent-dark`,
-						`ring-input-accent/20 dark:ring-input-accent-dark/20 ring-4`
+						`border border-(--stuic-input-accent)`,
+						`ring-(--stuic-input-accent)/20 ring-4`
 					)}
 					{id}
 					{required}
@@ -580,7 +583,7 @@
 						bind:this={input}
 						{type}
 						{id}
-						class={twMerge("form-input", renderSize, classInput)}
+						class={twMerge(renderSize, classInput)}
 						tabindex={1}
 						{required}
 						{disabled}
@@ -599,16 +602,16 @@
 					/>
 
 					{#snippet inputBelow()}
-						<div class="h-full border-t p-2 border-black/20">
+						<div
+							class="h-full border-t p-2"
+							style="border-color: var(--stuic-field-options-divider);"
+						>
 							<div class="text-sm -mt-1 flex items-center">
 								{#if isMultiple}
 									<button
 										type="button"
 										onclick={() => _selectedColl.addMany(options.items)}
-										class={twMerge(
-											"control flex items-center p-1 m-1 text-sm opacity-75 underline rounded",
-											"hover:opacity-100 focus-visible:outline-neutral-400 focus-visible:opacity-100"
-										)}
+										class="control flex items-center p-1 m-1 text-sm underline rounded stuic-field-options-control"
 										tabindex={4}
 										disabled={!options.size}
 									>
@@ -621,11 +624,8 @@
 										_selectedColl.clear();
 										input?.focus();
 									}}
-									class={twMerge(
-										"control flex items-center p-1 m-1 text-sm opacity-75 underline rounded",
-										"hover:opacity-100 focus-visible:outline-neutral-400 focus-visible:opacity-100"
-									)}
-									class:opacity-20={!selected.items.length}
+									class="control flex items-center p-1 m-1 text-sm underline rounded stuic-field-options-control"
+									data-disabled={!selected.items.length || undefined}
 									tabindex={5}
 									disabled={!selected.items.length}
 								>
@@ -634,7 +634,7 @@
 
 								<span class="p-1 m-1 text-sm">&nbsp;</span>
 								<span
-									class="flex-1 block justify-end opacity-75 text-right text-xs p-1 pr-2"
+									class="flex-1 block justify-end text-right text-xs p-1 pr-2 stuic-field-options-muted"
 								>
 									{selected.items.length}
 									{#if cardinality > 0 && cardinality < Infinity}
@@ -655,11 +655,15 @@
 								tabindex="-1"
 							>
 								{#if isFetching && !options.items.length}
-									<div class="flex opacity-50 text-sm h-full items-center justify-center">
+									<div
+										class="flex text-sm h-full items-center justify-center stuic-field-options-placeholder"
+									>
 										<Spinner class="w-4" />
 									</div>
 								{:else if !options.items.length && !allowUnknown}
-									<div class="flex opacity-50 text-sm h-full items-center justify-center">
+									<div
+										class="flex text-sm h-full items-center justify-center stuic-field-options-placeholder"
+									>
 										{@html t("no_results")}
 									</div>
 								{/if}
@@ -682,8 +686,7 @@
 									{#if _optgroup}
 										<div
 											class={twMerge(
-												"mb-1 p-1 text-xs font-semibold uppercase tracking-wide",
-												"text-neutral-500 dark:text-neutral-400",
+												"mb-1 p-1 text-xs font-semibold uppercase tracking-wide stuic-field-options-optgroup",
 												classOptgroup
 											)}
 										>
@@ -717,7 +720,9 @@
 													active={isSelected}
 													focused={active}
 													contentBefore={showIcons ? getIconThc(isSelected) : undefined}
-													classContentBefore={isSelected ? "opacity-100" : "opacity-50"}
+													classContentBefore={isSelected
+														? "stuic-field-options-icon stuic-field-options-icon--selected"
+														: "stuic-field-options-icon"}
 													class={classOption}
 													classActive={classOptionActive}
 													classFocused={classOptionActive}
@@ -734,7 +739,7 @@
 							</div>
 							<!-- {/if} -->
 							<div class="p-2 px-3 flex items-end justify-between">
-								<div class="text-xs opacity-75">
+								<div class="text-xs stuic-field-options-muted">
 									<!-- Use arrows to navigate. Spacebar and Enter to select and/or submit. -->
 									{#if allowUnknown}
 										{@html t("unknown_allowed")}
@@ -746,7 +751,7 @@
 									<Button
 										class="control"
 										type="button"
-										variant="primary"
+										intent="primary"
 										onclick={async (e) => {
 											e.preventDefault();
 											try_submit(true);
@@ -761,22 +766,20 @@
 					{/snippet}
 
 					{#snippet inputAfter()}
-						<div class="flex pl-2 items-center justify-center opacity-50">
+						<div
+							class="flex pl-2 items-center justify-center stuic-field-options-placeholder"
+						>
 							{#if isFetching}
 								<Spinner class="w-4" />
 							{/if}
 						</div>
 						<div class="flex pl-2 pr-1 items-center justify-center">
-							<button
+							<Button
+								x
+								variant="ghost"
+								roundedFull
 								type="button"
-								class={twMerge(
-									"opacity-75 rounded",
-									"hover:opacity-100 hover:bg-neutral-200 dark:hover:bg-neutral-800",
-									"focus-visible:opacity-100 focus-visible:outline-0",
-									"focus-visible:bg-neutral-200 dark:focus-visible:bg-neutral-800"
-								)}
-								use:tooltip
-								aria-label={t("x_close")}
+								tooltip={t("x_close")}
 								onclick={(e) => {
 									e.preventDefault();
 									if (innerValue.trim() == "") {
@@ -787,14 +790,14 @@
 									input?.focus();
 								}}
 								tabindex={2}
-							>
-								<X class="m-2 size-6" />
-							</button>
+							/>
 						</div>
 					{/snippet}
 
 					{#snippet inputBefore()}
-						<div class="flex flex-col items-center justify-center pl-3 opacity-75">
+						<div
+							class="flex flex-col items-center justify-center pl-3 stuic-field-options-muted"
+						>
 							{@html iconSearch({ size: 19, strokeWidth: 3 })}
 						</div>
 					{/snippet}

package/dist/components/Input/FieldRadios.svelte

@@ -63,30 +63,23 @@
 	let validation = $state<ValidationResult | undefined>();
 	let invalid = $derived(validation && !validation?.valid);
 
-	//
-	let _classCommon = $derived(
-		[invalid && "invalid", disabled && "disabled", required && "required", renderSize]
-			.filter(Boolean)
-			.join(" ")
-	);
 	// $inspect(value);
 </script>
 
 {#if _options.length}
-	<div class={twMerge("stuic-radios", _classCommon)} {style}>
+	<div
+		class={twMerge("stuic-radios", invalid && "invalid", disabled && "disabled")}
+		data-size={renderSize}
+		{style}
+	>
 		<div
 			class={twMerge(
 				"radios-box",
-				_classCommon,
-				"gap-y-2 grid rounded-md p-2 mb-8",
-				"border border-neutral-300 dark:border-neutral-600",
-				"bg-neutral-100 dark:bg-neutral-700",
-				invalid && "border-input-accent-invalid dark:border-input-accent-invalid-dark",
+				"gap-y-2 grid p-2 mb-8",
 				classProp
 			)}
 		>
 			{#each _options as o, i}
-				<!-- value={o.value || o.label} -->
 				<FieldRadioInternal
 					{name}
 					bind:group={value}
@@ -114,9 +107,7 @@
 				transition:slide={{ duration: 150 }}
 				class={twMerge(
 					"validation-box",
-					_classCommon,
-					`mt-1 px-2 text-sm text-input-accent dark:text-input-accent-dark 
-					tracking-tight`,
+					"mt-1 px-2 text-sm tracking-tight",
 					classValidationBox
 				)}
 			>

package/dist/components/Input/FieldSelect.svelte

@@ -137,7 +137,7 @@
 		bind:value
 		bind:this={input}
 		{id}
-		class={twMerge("form-input", renderSize, classInput)}
+		class={twMerge(classInput)}
 		use:validateAction={() => ({
 			enabled: !!validate,
 			...(typeof validate === "boolean" ? {} : validate),

package/dist/components/Input/FieldSwitch.svelte

@@ -111,14 +111,10 @@
 	{classLabel}
 	{classLabelBox}
 	{classInputBox}
-	classInputBoxWrap={twMerge(
-		"border-0 focus-within:border-0 focus-within:dark:border-0 focus-within:ring-0",
-		"bg-transparent dark:bg-transparent",
-		classInputBoxWrap
-	)}
 	{classDescBox}
 	{classBelowBox}
 	{validation}
+	classInputBoxWrap={twMerge("input-wrap-transparent", classInputBoxWrap)}
 	{style}
 >
 	<Switch bind:checked {name} {required} {disabled} {validate} {setValidationResult} />

package/dist/components/Input/FieldTextarea.svelte

@@ -125,7 +125,7 @@
 		bind:value
 		bind:this={input}
 		{id}
-		class={twMerge("form-input min-h-16", renderSize, classInput)}
+		class={twMerge("min-h-16", classInput)}
 		use:trim={() => ({
 			enabled: useTrim,
 			setValue: (v: string) => (value = v),

package/dist/components/Input/README.md

@@ -232,3 +232,197 @@ Validation is handled by the `validate` action. Pass `validate={true}` for defau
   }}
 />
 ```
+
+## CSS Variables
+
+### Component Tokens
+
+Override globally in `:root` or locally via `style` prop:
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-input-radius` | `--radius-md` | Border radius |
+| `--stuic-input-font-family` | `--font-sans` | Font family |
+| `--stuic-input-transition` | `150ms` | Transition duration |
+| `--stuic-input-ring-width` | `4px` | Focus ring width |
+| `--stuic-input-ring-color` | `--stuic-color-ring` | Focus ring color |
+| `--stuic-input-accent` | `--stuic-color-primary` | Accent color |
+| `--stuic-input-accent-error` | `--stuic-color-destructive` | Error/validation color |
+
+### Color Tokens
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-input-bg` | `--stuic-color-input` | Background color |
+| `--stuic-input-border` | `--stuic-color-border` | Border color |
+| `--stuic-input-border-focus` | `--stuic-input-accent` | Border color on focus |
+| `--stuic-input-text` | `--stuic-color-foreground` | Text color |
+| `--stuic-input-placeholder` | `--stuic-color-muted-foreground` | Placeholder color |
+
+### Size Tokens
+
+Each size (sm, md, lg) has corresponding tokens:
+
+| Variable | sm | md | lg |
+|----------|----|----|-----|
+| `--stuic-input-padding-x-{size}` | `calc(--spacing * 2.5)` | `calc(--spacing * 3)` | `calc(--spacing * 4)` |
+| `--stuic-input-padding-y-{size}` | `calc(--spacing * 2)` | `calc(--spacing * 2.5)` | `calc(--spacing * 3)` |
+| `--stuic-input-font-size-{size}` | `--text-sm` | `--text-base` | `--text-lg` |
+| `--stuic-input-min-height-{size}` | `2.5rem` | `2.75rem` | `3rem` |
+
+### Checkbox/Radio Tokens
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-checkbox-size` | `1.25rem` | Checkbox size |
+| `--stuic-checkbox-radius` | `--radius-sm` | Checkbox border radius |
+| `--stuic-radio-size` | `1rem` | Radio button size |
+| `--stuic-checkbox-bg` | `--stuic-color-muted` | Unchecked background |
+| `--stuic-checkbox-border` | `--stuic-color-border` | Unchecked border |
+| `--stuic-checkbox-checked-bg` | `--stuic-input-accent` | Checked background |
+| `--stuic-checkbox-checked-border` | `--stuic-input-accent` | Checked border |
+
+### Range Input Tokens
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-input-range-thumb-size` | `18px` | Slider thumb size |
+| `--stuic-input-range-track-height` | `4px` | Track height |
+| `--stuic-input-range-track-radius` | `18px` | Track border radius |
+| `--stuic-input-range-track-bg` | `--stuic-color-muted` | Track background |
+
+### Customization Examples
+
+```css
+/* Global: Make all inputs have pill shape */
+:root {
+  --stuic-input-radius: 9999px;
+}
+
+/* Global: Custom accent color */
+:root {
+  --stuic-input-accent: var(--color-violet-600);
+}
+```
+
+```svelte
+<!-- Local: Custom radius for one input -->
+<FieldInput
+  label="Search"
+  style="--stuic-input-radius: 9999px;"
+/>
+```
+
+## Data Attributes
+
+Components use data attributes for CSS styling:
+
+- `data-size` - The size value ("sm", "md", "lg")
+
+## Class Props
+
+| Prop | Target |
+|------|--------|
+| `class` | Root container |
+| `classInput` | Input element |
+| `classLabel` | Label element |
+| `classLabelBox` | Label container |
+| `classInputBox` | Input container (outer) |
+| `classInputBoxWrap` | Input wrapper (inner, has border) |
+| `classInputBoxWrapInvalid` | Input wrapper when invalid |
+| `classDescBox` | Description container |
+| `classBelowBox` | Below slot container |
+
+---
+
+## FieldOptions
+
+A modal-based multi-select/single-select component with search functionality, typeahead support, and option grouping.
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | `"[]"` | JSON array of selected items (bindable) |
+| `name` | `string` | - | Form field name |
+| `getOptions` | `(q: string, current: Item[]) => Promise<{found: Item[]}>` | - | Async function to fetch options |
+| `cardinality` | `number` | `Infinity` | Max selections (-1 for unlimited) |
+| `allowUnknown` | `boolean` | `false` | Allow typing custom values |
+| `renderOptionLabel` | `(item: Item) => string` | - | Custom option label renderer |
+| `renderOptionGroup` | `(s: string) => string` | - | Custom optgroup label renderer |
+| `renderValue` | `(stringifiedItems: string) => string` | - | Custom value display renderer |
+| `showIconsCheckbox` | `boolean` | `true` | Show checkbox icons in multi-select |
+| `showIconsRadio` | `boolean` | `false` | Show radio icons in single-select |
+| `searchPlaceholder` | `string` | - | Custom search placeholder |
+| `itemIdPropName` | `string` | `"id"` | Property name for item ID |
+| `notifications` | `NotificationsStack` | - | Notification handler for errors |
+
+### Class Props
+
+| Prop | Target |
+|------|--------|
+| `classOption` | Option item (ListItemButton) |
+| `classOptionActive` | Active/selected option |
+| `classOptgroup` | Option group label |
+| `classModalField` | Modal field wrapper |
+
+### CSS Variables
+
+#### Component Tokens
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-field-options-divider` | `--stuic-color-border` | Divider/separator color |
+| `--stuic-field-options-control-text` | `--stuic-color-muted-foreground` | Control button text color |
+| `--stuic-field-options-control-text-hover` | `--stuic-color-foreground` | Control button hover text color |
+| `--stuic-field-options-control-ring` | `--stuic-color-ring` | Control button focus ring |
+| `--stuic-field-options-muted-text` | `--stuic-color-muted-foreground` | Muted/secondary text color |
+| `--stuic-field-options-optgroup-text` | `--stuic-color-muted-foreground` | Option group label color |
+
+### Usage
+
+```svelte
+<script lang="ts">
+  import { FieldOptions } from 'stuic';
+
+  let value = $state('[]');
+
+  async function getOptions(query: string, current: any[]) {
+    const response = await fetch(`/api/search?q=${query}`);
+    const data = await response.json();
+    return { found: data.items };
+  }
+</script>
+
+<FieldOptions
+  label="Select Tags"
+  name="tags"
+  bind:value
+  {getOptions}
+  cardinality={5}
+  allowUnknown
+/>
+```
+
+### Customization Examples
+
+```css
+/* Make optgroup labels more prominent */
+:root {
+  --stuic-field-options-optgroup-text: var(--stuic-color-primary);
+}
+
+/* Custom control button colors */
+:root {
+  --stuic-field-options-control-text: var(--stuic-color-primary);
+  --stuic-field-options-control-text-hover: var(--stuic-color-primary-hover);
+}
+```
+
+```svelte
+<!-- Local customization -->
+<FieldOptions
+  style="--stuic-field-options-divider: var(--color-red-500);"
+  ...
+/>
+```

package/dist/components/Input/_internal/FieldRadioInternal.svelte

@@ -69,21 +69,7 @@
 	let id = getId();
 	let idDesc = getId();
 
-	//
-	let _classCommon = $derived(
-		[invalid && "invalid", disabled && "disabled", renderSize].filter(Boolean).join(" ")
-	);
 
-	const _preset = {
-		labelBox: {
-			label: {
-				size: {
-					sm: "text-sm mt-0.5",
-					lg: "font-semibold",
-				} as any,
-			},
-		},
-	};
 </script>
 
 {#snippet snippetOrThc({ id, value }: { id: string; value?: SnippetWithId | THC })}
@@ -97,7 +83,6 @@
 <label
 	class={twMerge(
 		"radio-box",
-		_classCommon,
 		"flex items-start cursor-pointer pr-1",
 		disabled && "cursor-not-allowed",
 		classRadioBox
@@ -106,7 +91,6 @@
 	<div
 		class={twMerge(
 			"input-box",
-			_classCommon,
 			"flex h-6 items-center ml-1",
 			classInputBox
 		)}
@@ -118,26 +102,7 @@
 			bind:group
 			{value}
 			{name}
-			class={twMerge(
-				_classCommon,
-				`size-4 rounded-full
-				bg-neutral-100
-				border-neutral-300
-				text-input-accent dark:text-input-accent-dark
-				cursor-pointer
-
-				checked:border-input-accent checked:bg-input-accent 
-				checked:dark:border-input-accent-dark checked:dark:bg-input-accent-dark
-
-				focus:border-input-accent
-				focus:ring-4
-				focus:ring-offset-0
-				focus:ring-input-accent/20 focus:dark:ring-input-accent-dark/20
-
-				disabled:cursor-not-allowed`,
-				disabled && "cursor-not-allowed",
-				classInput
-			)}
+			class={twMerge(classInput)}
 			aria-describedby={description ? idDesc : undefined}
 			use:validateAction={() => ({
 				enabled: !!validate,
@@ -149,14 +114,12 @@
 			{...rest}
 		/>
 	</div>
-	<div class={twMerge("label-box", _classCommon, "ml-3 w-full", classLabelBox)}>
+	<div class={twMerge("label-box", "ml-3 w-full", classLabelBox)}>
 		{#if label}
 			<div
 				class={twMerge(
 					"label",
-					_classCommon,
 					"block w-full cursor-pointer",
-					renderSize && _preset.labelBox.label.size[renderSize],
 					required && "after:content-['*'] after:opacity-40 after:pl-1",
 					classLabel
 				)}
@@ -173,7 +136,6 @@
 				id={idDesc}
 				class={twMerge(
 					"desc-box",
-					_classCommon,
 					"text-sm opacity-50 cursor-pointer font-normal",
 					disabled && "cursor-not-allowed",
 					classDescBox