@tabelhadev/tabelhawebui 0.28.4

package/dist/components/forms/TagInput.svelte

@@ -0,0 +1,336 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import { clickOutside } from '../../actions/click-outside';
+	import { comboboxKeydown } from '../../actions/combobox-keyboard-nav';
+
+	let {
+		options = [],
+		value = $bindable([]),
+		label,
+		name,
+		disabled = false,
+		placeholder = 'Adicione uma tag…',
+		createLabel = 'Criar tag',
+		'aria-label': ariaLabel,
+		class: className = '',
+		...rest
+	}: {
+		options?: string[];
+		value?: string[];
+		label?: string;
+		name?: string;
+		disabled?: boolean;
+		placeholder?: string;
+		createLabel?: string;
+		class?: string;
+	} & { 'aria-label'?: string; id?: string } = $props();
+
+	let open = $state(false);
+	let query = $state('');
+	let activeIndex = $state(-1);
+	let rootEl = $state<HTMLDivElement | undefined>();
+	let inputEl = $state<HTMLInputElement | undefined>();
+
+	const trimmedQuery = $derived(query.trim());
+	const filtered = $derived(
+		trimmedQuery
+			? options.filter(
+					(o) =>
+						!value.includes(o) &&
+						o.toLowerCase().includes(trimmedQuery.toLowerCase())
+				)
+			: options.filter((o) => !value.includes(o))
+	);
+	const canCreate = $derived(
+		trimmedQuery !== '' &&
+			!options.some((o) => o.toLowerCase() === trimmedQuery.toLowerCase())
+	);
+	const matches = $derived(canCreate ? [...filtered, trimmedQuery] : filtered);
+
+	function addTag(tag: string) {
+		const trimmed = tag.trim();
+		if (!trimmed || value.includes(trimmed)) {
+			query = '';
+			activeIndex = -1;
+			return;
+		}
+		value = [...value, trimmed];
+		query = '';
+		activeIndex = -1;
+	}
+
+	function removeTag(tag: string) {
+		value = value.filter((v) => v !== tag);
+	}
+
+	const onKeydown = comboboxKeydown({
+		get open() { return open; },
+		get activeIndex() { return activeIndex; },
+		get itemCount() { return matches.length; },
+		onActiveIndexChange: (i) => (activeIndex = i),
+		onClose: () => (open = false),
+		onConfirm: (i) => addTag(matches[i]),
+		onOpen: () => { open = true; }
+	});
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (disabled) return;
+		onKeydown(e);
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			if (open && activeIndex >= 0 && matches[activeIndex] !== undefined) {
+				addTag(matches[activeIndex]);
+			} else {
+				addTag(query);
+			}
+			inputEl?.focus();
+			return;
+		}
+		if (e.key === 'Backspace' && query === '' && value.length > 0) {
+			removeTag(value[value.length - 1]);
+		}
+	}
+</script>
+
+<div
+	class="twui-tag-input {className}"
+	bind:this={rootEl}
+	use:clickOutside={() => (open = false)}
+>
+	{#if label}
+		<label class="twui-tag-input-label" for={rest.id}>{label}</label>
+	{/if}
+
+	<div class="twui-tag-input-field">
+		{#each value as tag (tag)}
+			<span class="twui-tag-input-chip">
+				{tag}
+				<button
+					type="button"
+					class="twui-tag-input-chip-remove"
+					aria-label={`Remover ${tag}`}
+					disabled={disabled}
+					onclick={() => removeTag(tag)}
+				>×</button>
+			</span>
+		{/each}
+		<input
+			type="text"
+			class="twui-tag-input-text"
+			bind:this={inputEl}
+			bind:value={query}
+			{...rest}
+			placeholder={value.length ? '' : placeholder}
+			disabled={disabled}
+			role="combobox"
+			aria-haspopup="listbox"
+			aria-expanded={open}
+			aria-autocomplete="list"
+			aria-label={ariaLabel ?? label}
+			onkeydown={handleKeydown}
+			onfocus={() => (open = true)}
+			oninput={() => {
+				open = true;
+				activeIndex = -1;
+			}}
+		/>
+	</div>
+
+	{#if name}
+		<input type="hidden" {name} value={value.join(',')} />
+	{/if}
+
+	{#if open && (filtered.length > 0 || canCreate)}
+		<ul
+			class="twui-tag-input-popover"
+			role="listbox"
+			aria-multiselectable="true"
+			transition:fade={{ duration: 100 }}
+		>
+			{#each matches as opt, i (opt)}
+				{#if canCreate && i === matches.length - 1}
+					<li>
+						<button
+							type="button"
+							role="option"
+							aria-selected="false"
+							class="twui-tag-input-option twui-tag-input-option-create {i ===
+							activeIndex
+								? 'twui-tag-input-option-active'
+								: ''}"
+							onclick={() => addTag(opt)}
+							onmouseenter={() => (activeIndex = i)}
+						>
+							<span class="twui-tag-input-create-icon" aria-hidden="true">+</span>
+							<span>{createLabel}: {opt}</span>
+						</button>
+					</li>
+				{:else}
+					<li>
+						<button
+							type="button"
+							role="option"
+							aria-selected="false"
+							class="twui-tag-input-option {i === activeIndex
+								? 'twui-tag-input-option-active'
+								: ''}"
+							onclick={() => addTag(opt)}
+							onmouseenter={() => (activeIndex = i)}
+						>
+							{opt}
+						</button>
+					</li>
+				{/if}
+			{/each}
+		</ul>
+	{/if}
+</div>
+
+<style>
+	.twui-tag-input {
+		position: relative;
+		width: 100%;
+	}
+
+	.twui-tag-input-label {
+		display: inline-flex;
+		margin-bottom: 6px;
+		font-family: var(--twui-font-mono);
+		font-size: 13px;
+		font-weight: 500;
+		color: var(--twui-ink);
+	}
+
+	.twui-tag-input-field {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 6px;
+		padding: 6px 8px;
+		border: 1px solid var(--twui-rule);
+		background: var(--twui-paper);
+		transition:
+			border-color 0.15s ease,
+			box-shadow 0.15s ease;
+	}
+
+	.twui-tag-input-field:focus-within {
+		border-color: var(--twui-accent);
+	}
+
+	.twui-tag-input-chip {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		padding: 2px 4px 2px 8px;
+		border: 1px solid var(--twui-rule);
+		background: var(--twui-paper-raised);
+		font-family: var(--twui-font-mono);
+		font-size: 13px;
+		color: var(--twui-ink);
+	}
+
+	.twui-tag-input-chip-remove {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 18px;
+		height: 18px;
+		padding: 0;
+		border: none;
+		background: transparent;
+		font-size: 14px;
+		line-height: 1;
+		color: var(--twui-ink-faint);
+		cursor: pointer;
+		transition: color 0.15s ease;
+	}
+
+	.twui-tag-input-chip-remove:hover {
+		color: var(--twui-danger);
+	}
+
+	.twui-tag-input-chip-remove:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.twui-tag-input-text {
+		flex: 1;
+		min-width: 8rem;
+		padding: 4px;
+		border: none;
+		background: transparent;
+		font-family: var(--twui-font-mono);
+		font-size: 14px;
+		color: var(--twui-ink);
+		outline: none;
+	}
+
+	.twui-tag-input-text::placeholder {
+		color: var(--twui-ink-faint);
+	}
+
+	.twui-tag-input-text:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.twui-tag-input-popover {
+		position: absolute;
+		top: calc(100% + 4px);
+		right: 0;
+		left: 0;
+		z-index: 50;
+		max-height: 240px;
+		overflow-y: auto;
+		margin: 0;
+		padding: 4px;
+		list-style: none;
+		border: 1px solid var(--twui-rule);
+		background: var(--twui-paper-raised);
+		box-shadow: var(--twui-shadow-offset, 3px 3px 0 0 var(--twui-rule));
+	}
+
+	.twui-tag-input-popover li {
+		padding: 0;
+	}
+
+	.twui-tag-input-option {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		width: 100%;
+		padding: 6px 10px;
+		border: none;
+		background: transparent;
+		font-family: var(--twui-font-mono);
+		font-size: 13px;
+		text-align: left;
+		color: var(--twui-ink);
+		cursor: pointer;
+	}
+
+	.twui-tag-input-option:hover,
+	.twui-tag-input-option-active {
+		background: var(--twui-accent-soft);
+		color: var(--twui-accent);
+	}
+
+	.twui-tag-input-option-create {
+		color: var(--twui-ink-soft);
+	}
+
+	.twui-tag-input-option-create .twui-tag-input-create-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 16px;
+		height: 16px;
+		border: 1px solid var(--twui-rule);
+		border-radius: 2px;
+		font-size: 12px;
+		line-height: 1;
+		color: var(--twui-accent);
+	}
+</style>

package/dist/components/forms/TagInput.svelte.d.ts

@@ -0,0 +1,16 @@
+type $$ComponentProps = {
+    options?: string[];
+    value?: string[];
+    label?: string;
+    name?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    createLabel?: string;
+    class?: string;
+} & {
+    'aria-label'?: string;
+    id?: string;
+};
+declare const TagInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type TagInput = ReturnType<typeof TagInput>;
+export default TagInput;

package/dist/components/forms/Textarea.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+	let {
+		class: className = '',
+		value = $bindable(''),
+		rows = 4,
+		invalid = false,
+		...rest
+	}: HTMLTextareaAttributes & {
+		value?: string;
+		rows?: number;
+		invalid?: boolean;
+	} = $props();
+</script>
+
+<textarea
+	{...rest}
+	{rows}
+	value={value}
+	oninput={(e) => (value = e.currentTarget.value)}
+	aria-invalid={invalid}
+	class="twui-textarea {invalid ? 'twui-textarea-invalid' : ''} {className}"
+></textarea>
+
+<style>
+	.twui-textarea {
+		width: 100%;
+		min-height: 96px;
+		padding: 8px 12px;
+		border: 1px solid var(--twui-rule);
+		background: var(--twui-paper);
+		font-family: var(--twui-font-mono);
+		font-size: 14px;
+		line-height: 1.5;
+		color: var(--twui-ink);
+		outline: none;
+		resize: vertical;
+		transition:
+			border-color 0.15s ease,
+			box-shadow 0.15s ease;
+	}
+
+	.twui-textarea::placeholder {
+		color: var(--twui-ink-faint);
+	}
+
+	.twui-textarea:focus-visible {
+		border-color: var(--twui-accent);
+	}
+
+	.twui-textarea:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.twui-textarea-invalid {
+		border-color: var(--twui-danger);
+	}
+
+	.twui-textarea-invalid:focus-visible {
+		border-color: var(--twui-danger);
+	}
+</style>

package/dist/components/forms/Textarea.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLTextareaAttributes & {
+    value?: string;
+    rows?: number;
+    invalid?: boolean;
+};
+declare const Textarea: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/components/landing/Landing.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		children,
+		class: className = ''
+	}: {
+		children?: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+<div class="twui-landing {className}">
+	<div
+		aria-hidden="true"
+		class="pointer-events-none absolute inset-x-0 top-0 -z-10 h-150"
+		style="background-image: var(--gradient-hero)"
+	></div>
+
+	<div class="twui-landing-inner">
+		{@render children?.()}
+	</div>
+</div>
+
+<style>
+	.twui-landing {
+		position: relative;
+		display: flex;
+		width: 100%;
+		flex: 1;
+		flex-direction: column;
+	}
+
+	.twui-landing-inner {
+		display: flex;
+		width: 100%;
+		flex-direction: column;
+		gap: 6rem;
+		padding: 4rem 1.5rem 2rem;
+	}
+
+	@media (min-width: 768px) {
+		.twui-landing-inner {
+			padding-top: 6rem;
+		}
+	}
+</style>

package/dist/components/landing/Landing.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
+    class?: string;
+};
+declare const Landing: import("svelte").Component<$$ComponentProps, {}, "">;
+type Landing = ReturnType<typeof Landing>;
+export default Landing;

package/dist/components/landing/LandingFeatures.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Card from '../card/Card.svelte';
+	import CardContent from '../card/CardContent.svelte';
+
+	let {
+		features,
+		justify = false,
+		class: className = ''
+	}: {
+		// icon is a Snippet (e.g. `icon: () => <Icon class="..." />`). Don't use
+		// a Component directly: there's no way to distinguish snippet from component in
+		// Svelte 5 runtime (would break on SSR).
+		features: Array<{
+			icon: Snippet;
+			iconBg?: string;
+			iconColor?: string;
+			title: string;
+			body: string;
+		}>;
+		justify?: boolean;
+		class?: string;
+	} = $props();
+</script>
+
+<div class="twui-landing-features {className}">
+	{#each features as feature (feature.title)}
+		<Card>
+			<CardContent>
+				<div
+					class="twui-landing-feature-icon"
+					style="background:{feature.iconBg ?? 'var(--twui-accent-soft)'}; color:{feature.iconColor ?? 'var(--twui-accent)'}"
+				>
+					{@render feature.icon()}
+				</div>
+				<h3 class="twui-landing-feature-title">{feature.title}</h3>
+				<p class="twui-landing-feature-body {justify ? 'twui-landing-feature-body-justify' : ''}">{feature.body}</p>
+			</CardContent>
+		</Card>
+	{/each}
+</div>
+
+<style>
+	.twui-landing-features {
+		display: grid;
+		grid-template-columns: 1fr;
+		gap: 16px;
+	}
+
+	.twui-landing-feature-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 36px;
+		height: 36px;
+		margin-bottom: 12px;
+		border-radius: 8px;
+	}
+
+	.twui-landing-feature-title {
+		margin: 0;
+		font-family: var(--twui-font-mono);
+		font-size: 14px;
+		font-weight: 600;
+		color: var(--twui-ink);
+	}
+
+	.twui-landing-feature-body {
+		margin: 6px 0 0;
+		font-family: var(--twui-font-serif, 'Newsreader', Georgia, serif);
+		font-size: 15px;
+		line-height: 1.55;
+		color: var(--twui-ink-soft);
+	}
+
+	.twui-landing-feature-body-justify {
+		text-align: justify;
+		text-justify: inter-word;
+	}
+
+	@media (min-width: 640px) {
+		.twui-landing-features {
+			grid-template-columns: repeat(2, 1fr);
+		}
+	}
+
+	@media (min-width: 1024px) {
+		.twui-landing-features {
+			grid-template-columns: repeat(3, 1fr);
+		}
+	}
+</style>

package/dist/components/landing/LandingFeatures.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    features: Array<{
+        icon: Snippet;
+        iconBg?: string;
+        iconColor?: string;
+        title: string;
+        body: string;
+    }>;
+    justify?: boolean;
+    class?: string;
+};
+declare const LandingFeatures: import("svelte").Component<$$ComponentProps, {}, "">;
+type LandingFeatures = ReturnType<typeof LandingFeatures>;
+export default LandingFeatures;

package/dist/components/landing/LandingHero.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		eyebrow,
+		title,
+		lead,
+		actions,
+		note,
+		justify = false,
+		class: className = ''
+	}: {
+		eyebrow?: string;
+		title?: string | Snippet;
+		lead?: string;
+		actions?: Snippet;
+		note?: string;
+		justify?: boolean;
+		class?: string;
+	} = $props();
+</script>
+
+<section class="twui-landing-hero {className}">
+	{#if eyebrow}
+		<div class="twui-landing-eyebrow">{eyebrow}</div>
+	{/if}
+	<h1 class="twui-landing-hero-title">
+		{#if typeof title === 'function'}
+			{@render title()}
+		{:else}
+			{title}
+		{/if}
+	</h1>
+	{#if lead}
+		<p class="twui-landing-hero-lead {justify ? 'twui-landing-hero-lead-justify' : ''}">{lead}</p>
+	{/if}
+	{#if actions}
+		<div class="twui-landing-hero-actions">{@render actions()}</div>
+	{/if}
+	{#if note}
+		<p class="twui-landing-hero-note">{note}</p>
+	{/if}
+</section>
+
+<style>
+	.twui-landing-eyebrow {
+		font-family: var(--twui-font-mono);
+		font-size: 12px;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: var(--twui-accent);
+	}
+
+	.twui-landing-hero-title {
+		margin: 16px 0 0;
+		font-family: var(--twui-font-mono);
+		font-size: 40px;
+		font-weight: 700;
+		line-height: 1.15;
+		letter-spacing: -0.02em;
+		text-wrap: balance;
+		color: var(--twui-ink);
+	}
+
+	.twui-landing-hero-lead {
+		margin: 16px 0 0;
+		max-width: 36rem;
+		font-family: var(--twui-font-serif, 'Newsreader', Georgia, serif);
+		font-size: 18px;
+		line-height: 1.6;
+		color: var(--twui-ink-soft);
+	}
+
+	.twui-landing-hero-lead-justify {
+		text-align: justify;
+		text-justify: inter-word;
+	}
+
+	.twui-landing-hero-actions {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 12px;
+		margin-top: 24px;
+	}
+
+	.twui-landing-hero-note {
+		margin: 16px 0 0;
+		font-family: var(--twui-font-mono);
+		font-size: 12px;
+		color: var(--twui-ink-faint);
+	}
+</style>

package/dist/components/landing/LandingHero.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    eyebrow?: string;
+    title?: string | Snippet;
+    lead?: string;
+    actions?: Snippet;
+    note?: string;
+    justify?: boolean;
+    class?: string;
+};
+declare const LandingHero: import("svelte").Component<$$ComponentProps, {}, "">;
+type LandingHero = ReturnType<typeof LandingHero>;
+export default LandingHero;