Merge pull request #20 from max-got/additional-inputs

feat: Additional inputs

package.json

@@ -19,6 +19,7 @@
 		"@sveltejs/kit": "^2.7.2",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@types/hast": "^3.0.4",
+		"@types/inputmask": "^5.0.7",
 		"autoprefixer": "^10.4.20",
 		"eslint": "^9.0.0",
 		"eslint-config-prettier": "^9.1.0",
@@ -44,6 +45,7 @@
 		"bits-ui": "1.0.0-next.31",
 		"clsx": "^2.1.1",
 		"hastscript": "^9.0.0",
+		"inputmask": "^5.0.7",
 		"lucide-svelte": "^0.453.0",
 		"mode-watcher": "^0.4.1",
 		"svelte-tel-input": "^3.5.1",

src/lib/components/inputs/input-44.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-	// Dependencies: pnpm install bits-ui
 	import { PinInput, type PinInputCell } from 'bits-ui';
 	import Label from '$lib/components/ui/label.svelte';
 	import { cn } from '$lib/utils.js';
 
-	let value = '';
+	let value = $state('');
 </script>
 
 {#snippet Cell(cell: PinInputCell)}

src/lib/components/inputs/input-52.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import Label from '$lib/components/ui/label.svelte';
+	import Input from '$lib/components/ui/input.svelte';
+</script>
+
+<div class="space-y-2">
+	<Label for="input-52">Read-only input</Label>
+	<Input
+		id="input-52"
+		class="read-only:bg-muted"
+		value="This is a read-only input"
+		readonly
+		placeholder="Email"
+		type="email"
+	/>
+</div>

src/lib/components/inputs/input-53.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import Label from '$lib/components/ui/label.svelte';
+	import Input from '$lib/components/ui/input.svelte';
+	import {
+		Tooltip,
+		TooltipContent,
+		TooltipProvider,
+		TooltipTrigger
+	} from '$lib/components/ui/tooltip/index.js';
+	import { cn } from '$lib/utils.js';
+	import Check from 'lucide-svelte/icons/check';
+	import Copy from 'lucide-svelte/icons/copy';
+
+	let copied = $state(false);
+	let inputElement = $state<HTMLInputElement | null>(null);
+
+	async function handleCopy() {
+		if (!inputElement) return;
+
+		await navigator.clipboard.writeText(inputElement.value);
+		copied = true;
+		setTimeout(() => {
+			copied = false;
+		}, 1500);
+	}
+</script>
+
+<div class="space-y-2">
+	<Label for="input-53">Copy to clipboard</Label>
+	<div class="relative">
+		<Input
+			bind:ref={inputElement}
+			id="input-53"
+			class="pe-9"
+			type="text"
+			value="pnpm install origin-ui-svelte"
+			readonly
+		/>
+		<TooltipProvider>
+			<Tooltip>
+				<TooltipTrigger
+					onclick={handleCopy}
+					class="absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-lg border border-transparent text-muted-foreground/80 ring-offset-background transition-shadow hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed"
+					aria-label={copied ? 'Copied' : 'Copy to clipboard'}
+					disabled={copied}
+				>
+					{#snippet child({ props })}
+						<button {...props}>
+							<div
+								class={cn('transition-all', copied ? 'scale-100 opacity-100' : 'scale-0 opacity-0')}
+							>
+								<Check class="stroke-emerald-500" size={16} stroke-width={2} aria-hidden="true" />
+							</div>
+							<div
+								class={cn(
+									'absolute transition-all',
+									copied ? 'scale-0 opacity-0' : 'scale-100 opacity-100'
+								)}
+							>
+								<Copy size={16} stroke-width={2} aria-hidden="true" />
+							</div>
+						</button>
+					{/snippet}
+				</TooltipTrigger>
+				<TooltipContent
+					class="border border-input bg-popover px-2 py-1 text-xs text-muted-foreground"
+				>
+					Copy to clipboard
+				</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
+	</div>
+</div>

src/lib/components/inputs/input-54.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import Label from '$lib/components/ui/label.svelte';
+	import Input from '$lib/components/ui/input.svelte';
+
+	import InputmaskLib from 'inputmask';
+	const Inputmask = InputmaskLib.default || InputmaskLib;
+
+	let inputElement = $state<HTMLInputElement | null>(null);
+
+	$effect(() => {
+		if (!inputElement) return;
+		const im = new Inputmask('AA99 AAA', {
+			placeholder: '',
+			showMaskOnHover: false
+		}).mask(inputElement);
+
+		return () => im.remove();
+	});
+</script>
+
+<div class="space-y-2">
+	<Label for="input-54">Input with mask</Label>
+	<Input id="input-54" placeholder="AB12 CDE" type="text" bind:ref={inputElement} />
+	<p class="mt-2 text-xs text-muted-foreground" role="region" aria-live="polite">
+		Built with <a
+			class="underline hover:text-foreground"
+			href="https://github.com/RobinHerbots/inputmask"
+			target="_blank"
+			rel="noopener nofollow">inputmask</a
+		>
+	</p>
+</div>

src/lib/components/inputs/input-55.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import Label from '$lib/components/ui/label.svelte';
+	import Input from '$lib/components/ui/input.svelte';
+
+	import InputmaskLib from 'inputmask';
+	const Inputmask = InputmaskLib.default || InputmaskLib;
+
+	let inputElement = $state<HTMLInputElement | null>(null);
+
+	$effect(() => {
+		if (!inputElement) return;
+		const im = new Inputmask('99:99:99', {
+			placeholder: '-',
+			showMaskOnHover: false
+		}).mask(inputElement);
+
+		return () => im.remove();
+	});
+</script>
+
+<div class="space-y-2">
+	<Label for="input-55">Timestamp</Label>
+	<Input id="input-55" placeholder="00:00:00" type="text" bind:ref={inputElement} />
+	<p class="mt-2 text-xs text-muted-foreground" role="region" aria-live="polite">
+		Built with <a
+			class="underline hover:text-foreground"
+			href="https://github.com/RobinHerbots/inputmask"
+			target="_blank"
+			rel="noopener nofollow">inputmask</a
+		>
+	</p>
+</div>

src/lib/components/textareas/textarea-01.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import Label from '$lib/components/ui/label.svelte';
+	import Textarea from '$lib/components/ui/textarea.svelte';
+</script>
+
+<div class="space-y-2">
+	<Label for="textarea-01">Simple textarea</Label>
+	<Textarea id="textarea-01" placeholder="Leave a comment" />
+</div>

src/lib/components/textareas/textarea-02.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import Label from '$lib/components/ui/label.svelte';
+	import Textarea from '$lib/components/ui/textarea.svelte';
+</script>
+
+<div class="space-y-2">
+	<Label for="textarea-02">
+		Required textarea <span class="text-destructive">*</span>
+	</Label>
+	<Textarea id="textarea-02" placeholder="Leave a message" required />
+</div>

src/lib/components/textareas/textarea-03.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import Label from '$lib/components/ui/label.svelte';
+	import Textarea from '$lib/components/ui/textarea.svelte';
+</script>
+
+<div class="space-y-2">
+	<Label for="textarea-03">Textarea with helper text</Label>
+	<Textarea id="textarea-03" placeholder="Leave a comment" />
+	<p class="mt-2 text-xs text-muted-foreground" role="region" aria-live="polite">
+		Please add as many details as you can
+	</p>
+</div>

src/lib/components/textareas/textarea-04.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import Label from '$lib/components/ui/label.svelte';
+	import Textarea from '$lib/components/ui/textarea.svelte';
+</script>
+
+<div class="mb-2 flex items-center justify-between gap-1">
+	<Label for="textarea-04" class="mb-0">Textarea with hint</Label>
+	<span class="text-sm text-muted-foreground">Optional</span>
+</div>
+<Textarea id="textarea-04" placeholder="Leave a comment" />

src/lib/components/textareas/textarea-05.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import Label from '$lib/components/ui/label.svelte';
+	import Textarea from '$lib/components/ui/textarea.svelte';
+</script>
+
+<div class="space-y-2" style:--ring="234 89% 74%">
+	<Label for="textarea-05">Textarea with colored border and ring</Label>
+	<Textarea id="textarea-05" placeholder="Leave a comment" />
+</div>

src/lib/components/textareas/textarea-06.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import Label from '$lib/components/ui/label.svelte';
+	import Textarea from '$lib/components/ui/textarea.svelte';
+</script>
+
+<div class="space-y-2">
+	<Label for="textarea-06">Textarea with error</Label>
+	<Textarea
+		id="textarea-06"
+		class="border-destructive/80 text-destructive focus-visible:border-destructive/80 focus-visible:ring-destructive/30"
+		placeholder="Leave a comment"
+		value="Hello!"
+	/>
+	<p class="mt-2 text-xs text-destructive" role="alert" aria-live="polite">
+		Message should be at least 10 characters
+	</p>
+</div>

src/lib/components/textareas/textarea-07.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import Label from '$lib/components/ui/label.svelte';
+	import Textarea from '$lib/components/ui/textarea.svelte';
+</script>
+
+<div class="space-y-2">
+	<Label for="textarea-07">Textarea with gray background</Label>
+	<Textarea
+		id="textarea-07"
+		class="border-transparent bg-muted shadow-none"
+		placeholder="Leave a comment"
+	/>
+</div>

src/lib/components/textareas/textarea-08.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import Label from '$lib/components/ui/label.svelte';
+	import Textarea from '$lib/components/ui/textarea.svelte';
+</script>
+
+<div class="space-y-2">
+	<Label for="textarea-08">Shorter textarea</Label>
+	<Textarea id="textarea-08" class="min-h-[none]" placeholder="Leave a comment" rows={2} />
+</div>

src/lib/components/textareas/textarea-09.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import Label from '$lib/components/ui/label.svelte';
+	import Textarea from '$lib/components/ui/textarea.svelte';
+</script>
+
+<div class="space-y-2">
+	<Label for="textarea-09">Disabled textarea</Label>
+	<Textarea id="textarea-09" disabled placeholder="Leave a comment" />
+</div>

src/lib/components/textareas/textarea-10.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import Label from '$lib/components/ui/label.svelte';
+	import Textarea from '$lib/components/ui/textarea.svelte';
+	import Button from '$lib/components/ui/button.svelte';
+</script>
+
+<div class="space-y-2">
+	<Label for="textarea-10">Textarea with left button</Label>
+	<Textarea id="textarea-10" placeholder="Leave a comment" />
+	<Button variant="outline">Send</Button>
+</div>

src/lib/components/textareas/textarea-11.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import Label from '$lib/components/ui/label.svelte';
+	import Textarea from '$lib/components/ui/textarea.svelte';
+	import Button from '$lib/components/ui/button.svelte';
+</script>
+
+<div class="space-y-2">
+	<Label for="textarea-11">Textarea with right button</Label>
+	<Textarea id="textarea-11" placeholder="Leave a comment" />
+	<div class="flex justify-end">
+		<Button variant="outline">Send</Button>
+	</div>
+</div>

src/lib/components/textareas/textarea-12.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import Label from '$lib/components/ui/label.svelte';
+	import Textarea from '$lib/components/ui/textarea.svelte';
+	import Button from '$lib/components/ui/button.svelte';
+</script>
+
+<div class="space-y-2">
+	<Label for="textarea-12">Textarea with button</Label>
+	<Textarea id="textarea-12" placeholder="Leave a comment" />
+	<Button variant="outline" class="w-full">Send</Button>
+</div>