@marianmeres/stuic 2.0.0-next.4 → 2.0.0-next.5

package/dist/components/Button/Button.svelte

@@ -3,7 +3,7 @@
 		bg-button-bg text-button-text 
 		dark:bg-button-bg-dark dark:text-button-text-dark
 		font-mono text-sm text-center 
-		leading-4
+		leading-none
 		border-1
 		border-button-border dark:border-button-border-dark
 		rounded-md

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

@@ -1,4 +1,4 @@
-export declare const BUTTON_STUIC_BASE_CLASSES = "\n\t\tbg-button-bg text-button-text \n\t\tdark:bg-button-bg-dark dark:text-button-text-dark\n\t\tfont-mono text-sm text-center \n\t\tleading-4\n\t\tborder-1\n\t\tborder-button-border dark:border-button-border-dark\n\t\trounded-md\n\t\tinline-flex items-center justify-center gap-x-2\n\t\tpx-3 py-1.5\n\n\t\thover:brightness-[1.05]\n\t\tactive:brightness-[0.95]\n\t\tdisabled:hover:brightness-100\n\n\t\tfocus:brightness-[1.05] \n\t\tfocus:border-button-border-focus focus:dark:border-button-border-focus-dark\n\n\t\t        focus:outline-4         focus:outline-black/10         focus:dark:outline-white/20\n\t\tfocus-visible:outline-4 focus-visible:outline-black/10 focus-visible:dark:outline-white/20\n\t";
+export declare const BUTTON_STUIC_BASE_CLASSES = "\n\t\tbg-button-bg text-button-text \n\t\tdark:bg-button-bg-dark dark:text-button-text-dark\n\t\tfont-mono text-sm text-center \n\t\tleading-none\n\t\tborder-1\n\t\tborder-button-border dark:border-button-border-dark\n\t\trounded-md\n\t\tinline-flex items-center justify-center gap-x-2\n\t\tpx-3 py-1.5\n\n\t\thover:brightness-[1.05]\n\t\tactive:brightness-[0.95]\n\t\tdisabled:hover:brightness-100\n\n\t\tfocus:brightness-[1.05] \n\t\tfocus:border-button-border-focus focus:dark:border-button-border-focus-dark\n\n\t\t        focus:outline-4         focus:outline-black/10         focus:dark:outline-white/20\n\t\tfocus-visible:outline-4 focus-visible:outline-black/10 focus-visible:dark:outline-white/20\n\t";
 export declare const BUTTON_STUIC_PRESET_CLASSES: any;
 import type { Snippet } from "svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";

package/dist/components/ButtonGroupRadio/ButtonGroupRadio.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+	import { ItemCollection, type Item } from "@marianmeres/item-collection";
+	import { getId } from "../../utils/get-id.js";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import type { FieldRadiosOption } from "../Input/types.js";
+	import Button from "../Button/Button.svelte";
+	//
+	import "./index.css";
+
+	interface ItemColl extends ItemCollection<{ id: string; option: FieldRadiosOption }> {}
+
+	interface Props {
+		value?: string;
+		tabindex?: number; // tooShort
+		size?: "sm" | "md" | "lg" | string;
+		//
+		options: (string | FieldRadiosOption)[];
+		disabled?: boolean;
+		activeIndex?: number | undefined;
+		//
+		class?: string;
+		classButton?: string;
+		classButtonActive?: string;
+		style?: string;
+		// for side-effects, or validation... if would return explicit false, will not activate
+		onButtonClick?: (
+			index: number,
+			coll: ItemColl
+		) => Promise<boolean | undefined | void> | boolean | undefined | void;
+		buttonProps?: (index: number, coll: ItemColl) => undefined | Record<string, any>;
+	}
+
+	let {
+		options,
+		value = $bindable(),
+		tabindex = 0,
+		disabled,
+		size = "md",
+		//
+		activeIndex = $bindable(undefined),
+		//
+		class: classProp,
+		classButton,
+		classButtonActive,
+		style,
+		onButtonClick,
+		buttonProps,
+	}: Props = $props();
+
+	const coll: ItemColl = $derived.by(() => {
+		const out = new ItemCollection(
+			options.map((o, i) => {
+				// normalize string to FieldRadiosOption
+				if (typeof o === "string") o = { label: o };
+				// normalize FieldRadiosOption to ItemCollection's Item
+				return { id: `opt-${i}-${Math.random().toString(36).slice(2, 8)}`, option: o };
+			}),
+			{}
+		);
+
+		if (activeIndex !== undefined) out.setActiveIndex(activeIndex);
+
+		return out;
+	});
+
+	$effect(() => {
+		return coll.subscribe((c) => {
+			value = c.active?.option.value ?? c.active?.option.label;
+			activeIndex = c.activeIndex;
+		});
+	});
+
+	//
+	const CLS = `
+        p-1.5 rounded-lg inline-block space-x-2
+        bg-button-group-bg text-button-group-text
+        dark:bg-button-group-bg-dark dark:text-button-group-text-dark
+        border-1
+        border-button-group-border dark:border-button-group-border-dark
+    `;
+
+	// we need some active indication by default... use just something subtle here, in the wild
+	// this will be styled with classButtonActive
+	const CLS_ACTIVE = `
+	    shadow-[0px_0px_1px_1px_rgba(0_0_0_/_.6)]
+    `;
+
+	let els = $state<Record<number, HTMLButtonElement>>({});
+
+	async function maybe_activate(index: number, coll: ItemColl) {
+		if ((await onButtonClick?.(index, coll)) !== false) {
+			coll.setActiveIndex(index);
+			els[index].focus();
+		}
+	}
+</script>
+
+{#if coll.size}
+	<div
+		class={twMerge(CLS, classProp)}
+		{style}
+		role="radiogroup"
+		aria-labelledby={$coll?.active?.id || ""}
+	>
+		{#each coll.items as item, i}
+			<Button
+				tabindex={i === 0 ? tabindex : undefined}
+				class={twMerge(
+					"border-none shadow-none",
+					classButton,
+					$coll.activeIndex === i && [CLS_ACTIVE, classButtonActive].join(" ")
+				)}
+				{size}
+				role="radio"
+				aria-checked={$coll.activeIndex === i}
+				onclick={async () => {
+					await maybe_activate(i, coll);
+				}}
+				bind:el={els[i]}
+				onkeydown={async (e) => {
+					if (e.key === "ArrowRight") {
+						await maybe_activate(Math.min(i + 1, coll.size - 1), coll);
+					}
+					if (e.key === "ArrowLeft") {
+						await maybe_activate(Math.max(0, i - 1), coll);
+					}
+				}}
+				id={item.id}
+				{...buttonProps?.(i, coll) || {}}
+			>
+				{item.option.label}
+			</Button>
+		{/each}
+	</div>
+{/if}

package/dist/components/ButtonGroupRadio/ButtonGroupRadio.svelte.d.ts

@@ -0,0 +1,25 @@
+import { ItemCollection } from "@marianmeres/item-collection";
+import type { FieldRadiosOption } from "../Input/types.js";
+import "./index.css";
+interface ItemColl extends ItemCollection<{
+    id: string;
+    option: FieldRadiosOption;
+}> {
+}
+interface Props {
+    value?: string;
+    tabindex?: number;
+    size?: "sm" | "md" | "lg" | string;
+    options: (string | FieldRadiosOption)[];
+    disabled?: boolean;
+    activeIndex?: number | undefined;
+    class?: string;
+    classButton?: string;
+    classButtonActive?: string;
+    style?: string;
+    onButtonClick?: (index: number, coll: ItemColl) => Promise<boolean | undefined | void> | boolean | undefined | void;
+    buttonProps?: (index: number, coll: ItemColl) => undefined | Record<string, any>;
+}
+declare const ButtonGroupRadio: import("svelte").Component<Props, {}, "value" | "activeIndex">;
+type ButtonGroupRadio = ReturnType<typeof ButtonGroupRadio>;
+export default ButtonGroupRadio;

package/dist/components/ButtonGroupRadio/index.css

@@ -0,0 +1,14 @@
+@import "../../_shared.css";
+@plugin '@tailwindcss/forms';
+
+/* prettier-ignore */
+@theme inline {
+	--color-button-group-bg: var(--color-button-group-bg, var(--color-neutral-100));
+	--color-button-group-bg-dark: var(--color-button-group-bg-dark, var(--color-neutral-600));
+
+	--color-button-group-text: var(--color-button-group-text, var(--color-black));
+	--color-button-group-text-dark: var(--color-button-group-text-dark, var(--color-white));
+
+	--color-button-group-border: var(--color-button-group-border, var(--color-neutral-300));
+	--color-button-group-border-dark: var(--color-button-group-border-dark, var(--color-neutral-800));
+}

package/dist/components/Input/FieldOptions.svelte

@@ -13,7 +13,9 @@
 			submit: "Submit",
 			select_all: "Select all",
 			clear_all: "Clear all",
+			clear: "Clear",
 			search_placeholder: "Type to search...",
+			search_submit_placeholder: "Type to search and/or submit...",
 			cardinality_full: "Max selection reached",
 			select_from_list: "Please select from the list",
 			x_close: "Clear input or close [esc]",
@@ -222,11 +224,17 @@
 
 	// second, the selected ones
 	const _selectedColl = new ItemCollection([], {
+		// svelte-ignore state_referenced_locally
 		cardinality,
 		sortFn,
 		idPropName: itemIdPropName,
 	});
 
+	// reconfigure if the prop ever changes during runtime (most likely will NOT)
+	$effect(() => {
+		_selectedColl.configure({ cardinality });
+	});
+
 	// now, create the reactive, subscribed variants
 	let options = $derived($_optionsColl);
 	let selected = $derived($_selectedColl);
@@ -292,7 +300,41 @@
 		return prefix + strHash(`${id}`.repeat(3));
 	}
 
-	// this will set the outer bound value (always string) and close modal... further process is left on the consumer
+	// "inner" submit
+	function try_submit(force = false) {
+		if (innerValue) {
+			// doing label search, taking first result
+			let found = _optionsColl.search(innerValue)?.[0];
+			if (!found) {
+				if (!allowUnknown) {
+					return notifications?.error(t("select_from_list"), { ttl: 1000 });
+				}
+				found = { [itemIdPropName]: innerValue };
+			}
+
+			if (!isMultiple) _selectedColl.clear();
+
+			// actual selection addon
+			_selectedColl.add(found);
+
+			// we might have added a new one, so add it to options as well
+			// (will be noop if already exists)...
+			if (allowUnknown) {
+				_optionsColl.add(found);
+				_optionsColl.setActive(found);
+			}
+
+			// maybe submit
+			if (_selectedColl.isFull || force) submit();
+		}
+		// enter on empty input always submits
+		else {
+			submit();
+		}
+	}
+
+	// "outer" submit - will set the outer bound value (always string) and close modal...
+	// further process is left on the consumer
 	function submit() {
 		// clog("modal submit", $state.snapshot(selected.items));
 		value = JSON.stringify(selected.items);
@@ -413,40 +455,12 @@
 				tabindex={1}
 				{required}
 				{disabled}
-				placeholder={searchPlaceholder ?? t("search_placeholder")}
+				placeholder={searchPlaceholder ??
+					t(allowUnknown ? "search_submit_placeholder" : "search_placeholder")}
 				onkeydown={(e) => {
 					if (e.key === "Enter") {
 						e.preventDefault();
-
-						if (innerValue) {
-							// doing label search, taking first result
-							let found = _optionsColl.search(innerValue)?.[0];
-							if (!found) {
-								if (!allowUnknown) {
-									return notifications?.error(t("select_from_list"), { ttl: 1000 });
-								}
-								found = { [itemIdPropName]: innerValue };
-							}
-
-							if (!isMultiple) _selectedColl.clear();
-
-							// actual selection addon
-							_selectedColl.add(found);
-
-							// we might have added a new one, so add it to options as well
-							// (will be noop if already exists)...
-							if (allowUnknown) {
-								_optionsColl.add(found);
-								_optionsColl.setActive(found);
-							}
-
-							// maybe submit
-							if (_selectedColl.isFull) submit();
-						}
-						// enter on empty input always submits
-						else {
-							submit();
-						}
+						try_submit();
 					}
 				}}
 				autocomplete="off"
@@ -484,7 +498,7 @@
 							tabindex={5}
 							disabled={!selected.items.length}
 						>
-							{@html t("clear_all")}
+							{@html t(cardinality === 1 ? "clear" : "clear_all")}
 						</button>
 
 						<span class="p-1 m-1 text-xs">&nbsp;</span>
@@ -585,9 +599,9 @@
 								class="control"
 								type="button"
 								variant="primary"
-								onclick={(e) => {
+								onclick={async (e) => {
 									e.preventDefault();
-									submit();
+									try_submit(true);
 								}}
 								tabindex={3}
 							>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "2.0.0-next.4",
+  "version": "2.0.0-next.5",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -25,32 +25,32 @@
     "@marianmeres/icons-fns": "^4.3.1",
     "@marianmeres/random-human-readable": "^1.6.1",
     "@sveltejs/adapter-auto": "^4.0.0",
-    "@sveltejs/kit": "^2.21.1",
+    "@sveltejs/kit": "^2.21.5",
     "@sveltejs/package": "^2.3.11",
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@tailwindcss/cli": "^4.1.8",
+    "@sveltejs/vite-plugin-svelte": "^5.1.0",
+    "@tailwindcss/cli": "^4.1.10",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/typography": "^0.5.16",
-    "@tailwindcss/vite": "^4.1.8",
+    "@tailwindcss/vite": "^4.1.10",
     "dotenv": "^16.5.0",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.4.0",
     "publint": "^0.3.12",
-    "svelte": "^5.33.10",
+    "svelte": "^5.34.3",
     "svelte-check": "^4.2.1",
-    "tailwindcss": "^4.1.8",
+    "tailwindcss": "^4.1.10",
     "typescript": "^5.8.3",
     "vite": "^6.3.5",
-    "vitest": "^3.1.4"
+    "vitest": "^3.2.3"
   },
   "dependencies": {
     "@marianmeres/clog": "^2.2.3",
-    "@marianmeres/item-collection": "^1.2.14",
+    "@marianmeres/item-collection": "^1.2.15",
     "@marianmeres/parse-boolean": "^1.1.7",
     "@marianmeres/ticker": "^1.15.0",
     "esm-env": "^1.2.2",
     "runed": "^0.23.4",
-    "tailwind-merge": "^3.3.0"
+    "tailwind-merge": "^3.3.1"
   },
   "scripts": {
     "dev": "vite dev",