@tabelhadev/tabelhawebui 0.28.4

package/dist/components/card/CardAction.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		children,
+		navigate = false,
+		class: className = ''
+	}: {
+		children?: Snippet;
+		/** When true (and no children), render a default right-arrow affordance. */
+		navigate?: boolean;
+		class?: string;
+	} = $props();
+</script>
+
+<div class="twui-card-action {className}">
+	{#if navigate && !children}
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			class="twui-card-action-nav"
+			aria-hidden="true"
+		>
+			<path d="M5 12h14" />
+			<path d="m13 5 7 7-7 7" />
+		</svg>
+	{:else if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.twui-card-action {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 12px 16px;
+	}
+
+	:global(.twui-card-header) > .twui-card-action {
+		flex-direction: column;
+		align-items: flex-end;
+		gap: 8px;
+		padding: 0;
+	}
+
+	.twui-card-action-nav {
+		width: 16px;
+		height: 16px;
+		color: var(--twui-accent);
+	}
+</style>

package/dist/components/card/CardAction.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
+    /** When true (and no children), render a default right-arrow affordance. */
+    navigate?: boolean;
+    class?: string;
+};
+declare const CardAction: import("svelte").Component<$$ComponentProps, {}, "">;
+type CardAction = ReturnType<typeof CardAction>;
+export default CardAction;

package/dist/components/card/CardContent.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		children,
+		class: className = ''
+	}: {
+		children: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+<div class="twui-card-content {className}">
+	{@render children()}
+</div>
+
+<style>
+	.twui-card-content {
+		flex: 1 1 auto;
+		display: flex;
+		flex-direction: column;
+		padding: 16px;
+		min-height: 0;
+	}
+</style>

package/dist/components/card/CardContent.svelte.d.ts

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

package/dist/components/card/CardDescription.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		children,
+		class: className = ''
+	}: {
+		children: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+<p class="twui-card-description {className}">
+	{@render children()}
+</p>
+
+<style>
+	.twui-card-description {
+		margin: 0;
+		font-family: var(--twui-font-mono);
+		font-size: 12px;
+		color: var(--twui-ink-soft);
+	}
+</style>

package/dist/components/card/CardDescription.svelte.d.ts

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

package/dist/components/card/CardFooter.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		children,
+		class: className = ''
+	}: {
+		children: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+<div class="twui-card-footer {className}">
+	{@render children()}
+</div>
+
+<style>
+	.twui-card-footer {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 12px 16px;
+		border-top: 1px solid var(--twui-rule);
+	}
+</style>

package/dist/components/card/CardFooter.svelte.d.ts

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

package/dist/components/card/CardHeader.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		children,
+		title,
+		description,
+		class: className = ''
+	}: {
+		children?: Snippet;
+		title?: Snippet;
+		description?: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+<div class="twui-card-header {className}">
+	{#if title || description}
+		<div class="twui-card-header-main">
+			{#if title}{@render title()}{/if}
+			{#if description}{@render description()}{/if}
+		</div>
+		{#if children}
+			<div class="twui-card-header-side">
+				{@render children()}
+			</div>
+		{/if}
+	{:else if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.twui-card-header {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		gap: 16px;
+		padding: 12px 16px;
+		border-bottom: 1px solid var(--twui-rule);
+	}
+
+	.twui-card-header-main {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		min-width: 0;
+	}
+
+	.twui-card-header-side {
+		flex-shrink: 0;
+	}
+</style>

package/dist/components/card/CardHeader.svelte.d.ts

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

package/dist/components/card/CardTitle.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		children,
+		class: className = ''
+	}: {
+		children: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+<h2 class="twui-card-title {className}">
+	{@render children()}
+</h2>
+
+<style>
+	.twui-card-title {
+		margin: 0;
+		font-family: var(--twui-font-mono);
+		font-size: 14px;
+		font-weight: 600;
+		color: var(--twui-ink);
+	}
+</style>

package/dist/components/card/CardTitle.svelte.d.ts

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

package/dist/components/chat/ChatMessage.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	let {
+		role,
+		content = '',
+		streaming = false,
+		name,
+		class: className = ''
+	}: {
+		role: 'user' | 'assistant';
+		content?: string;
+		streaming?: boolean;
+		name?: string;
+		class?: string;
+	} = $props();
+
+	const defaultNames = { user: 'Você', assistant: 'IA' };
+	const label = $derived(name ?? defaultNames[role]);
+	const showTyping = $derived(streaming && content === '');
+</script>
+
+<div
+	class="twui-chat-message twui-chat-message-{role} {showTyping ? 'twui-chat-message-typing' : ''} {className}"
+	role="status"
+	aria-label={showTyping ? `${label} está digitando` : `${label}`}
+>
+	{#if !showTyping}
+		<span class="twui-chat-message-bubble">{content}</span>
+	{:else}
+		<span class="twui-chat-message-bubble twui-chat-message-bubble-typing" aria-hidden="true">
+			<span class="twui-chat-message-dot"></span>
+			<span class="twui-chat-message-dot"></span>
+			<span class="twui-chat-message-dot"></span>
+		</span>
+	{/if}
+</div>
+
+<style>
+	.twui-chat-message {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 4px;
+		max-width: 85%;
+	}
+
+	.twui-chat-message-user {
+		align-items: flex-end;
+		align-self: flex-end;
+	}
+
+	.twui-chat-message-bubble {
+		padding: 8px 12px;
+		border: 1px solid var(--twui-rule);
+		font-family: var(--twui-font-serif, Georgia, serif);
+		font-size: 14px;
+		line-height: 1.5;
+		color: var(--twui-ink);
+		box-shadow: var(--twui-shadow-offset, 3px 3px 0 0 var(--twui-rule));
+		white-space: pre-wrap;
+	}
+
+	.twui-chat-message-user .twui-chat-message-bubble {
+		background: var(--twui-accent-soft);
+		border-color: var(--twui-accent);
+		color: var(--twui-accent);
+	}
+
+	.twui-chat-message-assistant .twui-chat-message-bubble {
+		background: var(--twui-paper-raised);
+	}
+
+	.twui-chat-message-bubble-typing {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+	}
+
+	.twui-chat-message-dot {
+		width: 5px;
+		height: 5px;
+		border-radius: 9999px;
+		background: currentColor;
+		opacity: 0.35;
+		animation: twui-chat-message-blink 1.2s ease-in-out infinite;
+	}
+
+	.twui-chat-message-dot:nth-child(2) {
+		animation-delay: 0.2s;
+	}
+
+	.twui-chat-message-dot:nth-child(3) {
+		animation-delay: 0.4s;
+	}
+
+	@keyframes twui-chat-message-blink {
+		0%,
+		100% {
+			opacity: 0.35;
+		}
+		50% {
+			opacity: 1;
+		}
+	}
+</style>

package/dist/components/chat/ChatMessage.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    role: 'user' | 'assistant';
+    content?: string;
+    streaming?: boolean;
+    name?: string;
+    class?: string;
+};
+declare const ChatMessage: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChatMessage = ReturnType<typeof ChatMessage>;
+export default ChatMessage;

package/dist/components/choice/Listbox.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+	import type { SelectOption } from '../forms/Select.svelte';
+
+	let {
+		options = [],
+		multiple = false,
+		value = $bindable(multiple ? ([] as string[]) : ''),
+		disabled = false,
+		filter = false,
+		filterPlaceholder = 'Buscar...',
+		checkmark = true,
+		'aria-label': ariaLabel,
+		class: className = ''
+	}: {
+		options?: SelectOption[];
+		multiple?: boolean;
+		value?: string | string[];
+		disabled?: boolean;
+		filter?: boolean;
+		filterPlaceholder?: string;
+		checkmark?: boolean;
+		'aria-label'?: string;
+		class?: string;
+	} = $props();
+
+	let query = $state('');
+
+	const visibleOptions = $derived(
+		filter && query.trim()
+			? options.filter((o) => o.label.toLowerCase().includes(query.trim().toLowerCase()))
+			: options
+	);
+
+	function isSelected(option: SelectOption): boolean {
+		return multiple ? (value as string[]).includes(option.value) : value === option.value;
+	}
+
+	function select(option: SelectOption) {
+		if (option.disabled || disabled) return;
+		if (multiple) {
+			const arr = value as string[];
+			value = arr.includes(option.value)
+				? arr.filter((v) => v !== option.value)
+				: [...arr, option.value];
+		} else {
+			value = option.value;
+		}
+	}
+</script>
+
+<div class="twui-listbox {className}">
+	{#if filter}
+		<div class="twui-listbox-filter">
+			<input
+				type="text"
+				class="twui-listbox-filter-input"
+				placeholder={filterPlaceholder}
+				bind:value={query}
+				aria-label={filterPlaceholder}
+			/>
+		</div>
+	{/if}
+	<div
+		class="twui-listbox-list"
+		role="listbox"
+		aria-label={ariaLabel}
+		aria-multiselectable={multiple || undefined}
+	>
+		{#if visibleOptions.length > 0}
+			{#each visibleOptions as option (option.value)}
+				<button
+					type="button"
+					role="option"
+					aria-selected={isSelected(option)}
+					disabled={option.disabled || disabled}
+					class="twui-listbox-option {isSelected(option) ? 'twui-listbox-option-selected' : ''}"
+					onclick={() => select(option)}
+				>
+					{#if checkmark && multiple}
+						<span class="twui-listbox-check" aria-hidden="true">{isSelected(option) ? '✓' : ''}</span>
+					{/if}
+					{option.label}
+				</button>
+			{/each}
+		{:else}
+			<div class="twui-listbox-empty">Nenhum resultado</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.twui-listbox {
+		border: 1px solid var(--twui-rule);
+		background: var(--twui-paper-raised);
+	}
+
+	.twui-listbox-filter {
+		padding: 8px;
+		border-bottom: 1px solid var(--twui-rule);
+	}
+
+	.twui-listbox-filter-input {
+		width: 100%;
+		padding: 6px 8px;
+		border: 1px solid var(--twui-rule);
+		background: var(--twui-paper);
+		font-family: var(--twui-font-mono);
+		font-size: 13px;
+		color: var(--twui-ink);
+		outline: none;
+	}
+
+	.twui-listbox-filter-input::placeholder {
+		color: var(--twui-ink-faint);
+	}
+
+	.twui-listbox-filter-input:focus-visible {
+		border-color: var(--twui-accent);
+	}
+
+	.twui-listbox-list {
+		max-height: 240px;
+		overflow-y: auto;
+		padding: 4px;
+	}
+
+	.twui-listbox-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-listbox-option:hover:not(:disabled) {
+		background: var(--twui-accent-soft);
+		color: var(--twui-accent);
+	}
+
+	.twui-listbox-option-selected {
+		background: var(--twui-accent-soft);
+		color: var(--twui-accent);
+		font-weight: 500;
+	}
+
+	.twui-listbox-option:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	.twui-listbox-check {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 14px;
+		height: 14px;
+		flex-shrink: 0;
+		border: 1px solid var(--twui-rule);
+		border-radius: 2px;
+		font-size: 10px;
+		line-height: 1;
+	}
+
+	.twui-listbox-option-selected .twui-listbox-check {
+		border-color: var(--twui-accent);
+		background: var(--twui-accent);
+		color: var(--twui-paper);
+	}
+
+	.twui-listbox-empty {
+		padding: 12px 10px;
+		font-family: var(--twui-font-mono);
+		font-size: 13px;
+		color: var(--twui-ink-faint);
+	}
+</style>

package/dist/components/choice/Listbox.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { SelectOption } from '../forms/Select.svelte';
+type $$ComponentProps = {
+    options?: SelectOption[];
+    multiple?: boolean;
+    value?: string | string[];
+    disabled?: boolean;
+    filter?: boolean;
+    filterPlaceholder?: string;
+    checkmark?: boolean;
+    'aria-label'?: string;
+    class?: string;
+};
+declare const Listbox: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Listbox = ReturnType<typeof Listbox>;
+export default Listbox;