From 0bba927acba236b06e4bccee1f69db4bf68d63a9 Mon Sep 17 00:00:00 2001
From: Elijah Duffy <elijah@thatoneguy.ca>
Date: Thu, 3 Jul 2025 14:48:26 -0700
Subject: [PATCH] add InputGroup component

---
 src/lib/InputGroup.svelte | 12 ++++++++++++
 src/lib/index.ts          |  1 +
 src/routes/+page.svelte   |  7 +++++--
 3 files changed, 18 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/InputGroup.svelte

diff --git a/src/lib/InputGroup.svelte b/src/lib/InputGroup.svelte
new file mode 100644
index 0000000..9975592
--- /dev/null
+++ b/src/lib/InputGroup.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import type { ClassValue } from 'svelte/elements';
+
+	interface Props {
+		class?: ClassValue | undefined | null;
+		children?: import('svelte').Snippet;
+	}
+
+	let { class: classList, children }: Props = $props();
+</script>
+
+<div class={['mt-4 flex min-w-80 items-end gap-2', classList]}>{@render children?.()}</div>
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 6001173..181ea4d 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -5,6 +5,7 @@ export { default as Combobox } from './Combobox.svelte';
 export { default as FramelessButton } from './FramelessButton.svelte';
 export { default as InjectGoogleMaps } from './InjectGoogleMaps.svelte';
 export { default as InjectUmami } from './InjectUmami.svelte';
+export { default as InputGroup } from './InputGroup.svelte';
 export { default as Label } from './Label.svelte';
 export { default as Link } from './Link.svelte';
 export { default as PhoneInput } from './PhoneInput.svelte';
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7c9e2a1..339ee89 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,6 +4,7 @@
 	import Combobox from '$lib/Combobox.svelte';
 	import Dateinput from '$lib/Dateinput.svelte';
 	import FramelessButton from '$lib/FramelessButton.svelte';
+	import InputGroup from '$lib/InputGroup.svelte';
 	import Link from '$lib/Link.svelte';
 	import PhoneInput from '$lib/PhoneInput.svelte';
 	import PinInput from '$lib/PinInput.svelte';
@@ -117,8 +118,10 @@
 <div class="component">
 	<p class="title">Styled Raw Input, Text Input</p>
 
-	<StyledRawInput placeholder="Type here..." />
-	<TextInput label="Write something here" placeholder="Enter text..." />
+	<InputGroup>
+		<StyledRawInput placeholder="Type here..." class="basis-1/2" />
+		<TextInput label="Write something here" placeholder="Enter text..." class="basis-1/2" />
+	</InputGroup>
 </div>
 
 <div class="component">