@marianmeres/stuic 2.65.0 → 3.0.0

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

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

@@ -87,28 +87,8 @@
 		}
 	});
 
-	let _classCommon = $derived(
-		[invalid && "invalid", disabled && "disabled", required && "required", size]
-			.filter(Boolean)
-			.join(" ")
-	);
-
 	let hasLabel = $derived(isTHCNotEmpty(label) || typeof label === "function");
 
-	const _preset = {
-		label: {
-			size: {
-				sm: "text-sm",
-				lg: "font-semibold",
-			} as any,
-		},
-		inputBox: {
-			size: {
-				sm: "text-sm",
-				lg: "p-1",
-			} as any,
-		},
-	};
 </script>
 
 {#snippet snippetOrThc({ id, value }: { id: string; value?: SnippetWithId | THC })}
@@ -122,20 +102,21 @@
 <div
 	class={twMerge(
 		"stuic-input",
-		_classCommon,
 		"mb-8",
+		invalid && "invalid",
+		disabled && "disabled",
 		hasLabel && labelLeft && "flex",
 		hasLabel && labelLeft && labelLeftWidth === "normal" && "width-normal",
 		hasLabel && labelLeft && labelLeftWidth === "wide" && "width-wide",
 		classProp
 	)}
+	data-size={size}
 	bind:clientWidth={width}
 	{style}
 >
 	<div
 		class={twMerge(
 			"label-box",
-			_classCommon,
 			"flex flex-1",
 			labelLeft ? "left items-start mt-2" : "items-end",
 			classLabelBox
@@ -145,11 +126,8 @@
 			<label
 				for={id}
 				class={twMerge(
-					"block",
-					_classCommon,
-					"flex-1 px-2 mb-1 text-base",
+					"block flex-1 px-2 mb-1 text-base",
 					required && "after:content-['*'] after:opacity-40 after:pl-1",
-					_preset.label.size[size],
 					classLabel
 				)}
 			>
@@ -163,7 +141,6 @@
 	<div
 		class={twMerge(
 			"input-box",
-			_classCommon,
 			hasLabel && labelLeft && labelLeftWidth === "normal" && "flex-3",
 			hasLabel && labelLeft && labelLeftWidth === "wide" && "flex-2",
 			classInputBox
@@ -172,23 +149,8 @@
 		<div
 			class={twMerge(
 				"input-wrap",
-				_classCommon,
-				`rounded-md border border-neutral-300 dark:border-neutral-600
-				bg-neutral-100 dark:bg-neutral-700
-				focus-within:border-input-accent focus-within:dark:border-input-accent-dark
-				focus-within:ring-input-accent/20 focus-within:dark:ring-input-accent-dark/20
-				focus-within:ring-4`,
-				disabled && "cursor-not-allowed opacity-50",
-				_preset.inputBox.size[size],
-				invalid
-					? twMerge(
-							classInputBoxWrap,
-							`border-input-accent-invalid dark:border-input-accent-invalid-dark
-							focus-within:border-input-accent-invalid focus-within:dark:border-input-accent-invalid-dark
-							focus-within:ring-input-accent-invalid/20 focus-within:dark:ring-input-accent-invalid-dark/20`,
-							classInputBoxWrapInvalid
-						)
-					: classInputBoxWrap
+				classInputBoxWrap,
+				invalid && classInputBoxWrapInvalid
 			)}
 		>
 			<div class="flex">
@@ -204,8 +166,7 @@
 				transition:slide={{ duration: 150 }}
 				class={twMerge(
 					"validation-box",
-					_classCommon,
-					"my-1 text-sm px-2 text-input-accent-invalid dark:text-input-accent-invalid-dark",
+					"my-1 text-sm px-2",
 					classValidationBox
 				)}
 			>
@@ -217,7 +178,6 @@
 			<div
 				class={twMerge(
 					"desc-box",
-					_classCommon,
 					"mx-2 mt-1 text-sm opacity-50",
 					classDescBox
 				)}
@@ -236,7 +196,7 @@
 		{/if}
 
 		{#if below}
-			<div class={twMerge("below-box", _classCommon, "mx-2 my-1", classBelowBox)}>
+			<div class={twMerge("below-box", "mx-2 my-1", classBelowBox)}>
 				{@render snippetOrThc({ id, value: below })}
 			</div>
 		{/if}