@tabelhadev/tabelhawebui 0.28.4

package/dist/components/feedback/Message.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		severity = 'info',
+		variant = 'simple',
+		size,
+		closable = false,
+		life,
+		closeLabel = 'Fechar',
+		children,
+		class: className = ''
+	}: {
+		severity?: 'info' | 'success' | 'warn' | 'error';
+		variant?: 'simple' | 'outlined';
+		size?: 'small';
+		closable?: boolean;
+		life?: number;
+		closeLabel?: string;
+		children: Snippet;
+		class?: string;
+	} = $props();
+
+	let visible = $state(true);
+
+	$effect(() => {
+		if (!visible || !life) return;
+		const id = setTimeout(() => (visible = false), life);
+		return () => clearTimeout(id);
+	});
+</script>
+
+{#if visible}
+	<div
+		class="twui-message twui-message-{severity} twui-message-{variant} {size ? `twui-message-${size}` : ''} {className}"
+		role="alert"
+	>
+		<span class="twui-message-ind" aria-hidden="true"></span>
+		<div class="twui-message-content">
+			{@render children()}
+		</div>
+		{#if closable}
+			<button
+				type="button"
+				class="twui-message-close"
+				aria-label={closeLabel}
+				onclick={() => (visible = false)}
+			>×</button>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.twui-message {
+		display: flex;
+		align-items: flex-start;
+		gap: 8px;
+		padding: 10px 12px;
+		border: 1px solid var(--twui-rule);
+		border-left-width: 3px;
+		background: var(--twui-paper-raised);
+		font-family: var(--twui-font-mono);
+		font-size: 13px;
+		color: var(--twui-ink);
+	}
+
+	.twui-message-small {
+		padding: 6px 10px;
+		font-size: 12px;
+	}
+
+	.twui-message-outlined {
+		background: transparent;
+	}
+
+	.twui-message-ind {
+		flex-shrink: 0;
+		width: 8px;
+		height: 8px;
+		margin-top: 3px;
+		border-radius: 9999px;
+		background: var(--twui-ink-soft);
+	}
+
+	.twui-message-info {
+		border-left-color: var(--twui-info, var(--twui-latte-sky, #04a5e5));
+	}
+	.twui-message-info .twui-message-ind {
+		background: var(--twui-info, var(--twui-latte-sky, #04a5e5));
+	}
+
+	.twui-message-success {
+		border-left-color: var(--twui-signal);
+	}
+	.twui-message-success .twui-message-ind {
+		background: var(--twui-signal);
+	}
+
+	.twui-message-warn {
+		border-left-color: var(--twui-yellow);
+	}
+	.twui-message-warn .twui-message-ind {
+		background: var(--twui-yellow);
+	}
+
+	.twui-message-error {
+		border-left-color: var(--twui-danger);
+	}
+	.twui-message-error .twui-message-ind {
+		background: var(--twui-danger);
+	}
+
+	.twui-message-content {
+		flex: 1;
+	}
+
+	.twui-message-close {
+		flex-shrink: 0;
+		border: none;
+		background: transparent;
+		font-size: 15px;
+		line-height: 1;
+		color: var(--twui-ink-faint);
+		cursor: pointer;
+	}
+
+	.twui-message-close:hover {
+		color: var(--twui-ink);
+	}
+</style>

package/dist/components/feedback/Message.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    severity?: 'info' | 'success' | 'warn' | 'error';
+    variant?: 'simple' | 'outlined';
+    size?: 'small';
+    closable?: boolean;
+    life?: number;
+    closeLabel?: string;
+    children: Snippet;
+    class?: string;
+};
+declare const Message: import("svelte").Component<$$ComponentProps, {}, "">;
+type Message = ReturnType<typeof Message>;
+export default Message;

package/dist/components/feedback/ProgressBar.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	let {
+		value,
+		label = true,
+		class: className = ''
+	}: {
+		value?: number;
+		label?: boolean;
+		class?: string;
+	} = $props();
+</script>
+
+<div
+	class="twui-progress {className}"
+	role="progressbar"
+	aria-valuenow={value}
+	aria-valuemin={0}
+	aria-valuemax={100}
+>
+	<div
+		class="twui-progress-fill {value === undefined ? 'twui-progress-indeterminate' : ''}"
+		style={value !== undefined ? `width: ${Math.min(100, Math.max(0, value))}%` : undefined}
+	>
+		{#if label && value !== undefined}
+			<span class="twui-progress-label">{Math.round(value)}%</span>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.twui-progress {
+		position: relative;
+		height: 14px;
+		border: 1px solid var(--twui-rule);
+		background: var(--twui-paper);
+		overflow: hidden;
+	}
+
+	.twui-progress-fill {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		height: 100%;
+		background: var(--twui-accent);
+		transition: width 0.2s ease;
+	}
+
+	.twui-progress-label {
+		padding: 0 6px;
+		font-family: var(--twui-font-mono);
+		font-size: 10px;
+		line-height: 1;
+		color: var(--twui-paper);
+	}
+
+	.twui-progress-indeterminate {
+		width: 40%;
+		animation: twui-progress-slide 1.2s ease-in-out infinite;
+	}
+
+	@keyframes twui-progress-slide {
+		0% {
+			margin-left: -40%;
+		}
+		100% {
+			margin-left: 100%;
+		}
+	}
+</style>

package/dist/components/feedback/ProgressBar.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    value?: number;
+    label?: boolean;
+    class?: string;
+};
+declare const ProgressBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProgressBar = ReturnType<typeof ProgressBar>;
+export default ProgressBar;

package/dist/components/feedback/Skeleton.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	let {
+		width = '100%',
+		height = '16px',
+		rounded = false,
+		class: className = ''
+	}: {
+		width?: string;
+		height?: string;
+		rounded?: boolean;
+		class?: string;
+	} = $props();
+</script>
+
+<div
+	class="twui-skeleton {rounded ? 'twui-skeleton-rounded' : ''} {className}"
+	style={`width: ${width}; height: ${height}`}
+	aria-hidden="true"
+></div>
+
+<style>
+	.twui-skeleton {
+		border-radius: 2px;
+		background: var(--twui-paper-raised);
+		background-image: linear-gradient(
+			90deg,
+			var(--twui-paper-raised) 0%,
+			var(--twui-rule) 50%,
+			var(--twui-paper-raised) 100%
+		);
+		background-size: 200% 100%;
+		animation: twui-skeleton-shimmer 1.2s ease-in-out infinite;
+	}
+
+	.twui-skeleton-rounded {
+		border-radius: 9999px;
+	}
+
+	@keyframes twui-skeleton-shimmer {
+		from {
+			background-position: 200% 0;
+		}
+		to {
+			background-position: -200% 0;
+		}
+	}
+</style>

package/dist/components/feedback/Skeleton.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    width?: string;
+    height?: string;
+    rounded?: boolean;
+    class?: string;
+};
+declare const Skeleton: import("svelte").Component<$$ComponentProps, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/components/feedback/Status.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		kind = 'info',
+		icon,
+		children,
+		class: className = ''
+	}: {
+		kind?: 'success' | 'warning' | 'error' | 'info';
+		icon?: Snippet;
+		children: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+<span class="twui-status twui-status-{kind} {icon ? 'twui-status-icon' : ''} {className}">
+	{#if icon}
+		{@render icon()}
+	{/if}
+	{@render children()}
+</span>
+
+<style>
+	.twui-status {
+		display: inline-flex;
+		align-items: center;
+		font-family: var(--twui-font-mono);
+		font-size: 12px;
+	}
+
+	.twui-status::before {
+		content: '●';
+		margin-right: 6px;
+		font-size: 8px;
+	}
+
+	.twui-status-icon::before {
+		content: none;
+	}
+
+	.twui-status > :global(svg) {
+		width: 12px;
+		height: 12px;
+		margin-right: 6px;
+	}
+
+	.twui-status-success {
+		color: var(--twui-signal);
+	}
+	.twui-status-success::before {
+		color: var(--twui-signal);
+	}
+
+	.twui-status-warning {
+		color: var(--twui-yellow);
+	}
+	.twui-status-warning::before {
+		color: var(--twui-yellow);
+	}
+
+	.twui-status-error {
+		color: var(--twui-danger);
+	}
+	.twui-status-error::before {
+		color: var(--twui-danger);
+	}
+
+	.twui-status-info {
+		color: var(--twui-ink-soft);
+	}
+	.twui-status-info::before {
+		color: var(--twui-ink-soft);
+	}
+</style>

package/dist/components/feedback/Status.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    kind?: 'success' | 'warning' | 'error' | 'info';
+    icon?: Snippet;
+    children: Snippet;
+    class?: string;
+};
+declare const Status: import("svelte").Component<$$ComponentProps, {}, "">;
+type Status = ReturnType<typeof Status>;
+export default Status;

package/dist/components/feedback/StatusPill.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		position = 'bottom-right',
+		closable = false,
+		visible = $bindable(true),
+		dismissLabel = 'Fechar status',
+		style,
+		children,
+		class: className = ''
+	}: {
+		position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+		closable?: boolean;
+		visible?: boolean;
+		dismissLabel?: string;
+		style?: string;
+		children: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+{#if visible}
+	<div
+		class="twui-status-pill twui-status-pill-{position} {closable ? 'twui-status-pill-closable' : ''} {className}"
+		style={style}
+		role="status"
+	>
+		{@render children()}
+		{#if closable}
+			<button
+				type="button"
+				class="twui-status-pill-close"
+				aria-label={dismissLabel}
+				onclick={() => (visible = false)}
+			>×</button>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.twui-status-pill {
+		position: fixed;
+		z-index: 40;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 8px;
+		padding: 6px 12px;
+		border: 1px solid var(--twui-rule);
+		background: var(--twui-paper-raised);
+		font-family: var(--twui-font-mono);
+		font-size: 12px;
+		color: var(--twui-ink);
+		box-shadow: var(--twui-shadow-offset, 3px 3px 0 0 var(--twui-rule));
+	}
+
+	.twui-status-pill-bottom-right {
+		right: 1rem;
+		bottom: 1.5rem;
+	}
+
+	.twui-status-pill-bottom-left {
+		left: 1rem;
+		bottom: 1.5rem;
+	}
+
+	.twui-status-pill-top-right {
+		right: 1rem;
+		top: 1rem;
+	}
+
+	.twui-status-pill-top-left {
+		left: 1rem;
+		top: 1rem;
+	}
+
+	.twui-status-pill-close {
+		margin-left: 2px;
+		padding-left: 8px;
+		border: none;
+		border-left: 1px solid var(--twui-rule);
+		background: transparent;
+		font-size: 14px;
+		line-height: 1;
+		color: var(--twui-ink-faint);
+		cursor: pointer;
+		transition: color 0.15s ease;
+	}
+
+	.twui-status-pill-close:hover {
+		color: var(--twui-accent);
+	}
+</style>

package/dist/components/feedback/StatusPill.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    closable?: boolean;
+    visible?: boolean;
+    dismissLabel?: string;
+    style?: string;
+    children: Snippet;
+    class?: string;
+};
+declare const StatusPill: import("svelte").Component<$$ComponentProps, {}, "visible">;
+type StatusPill = ReturnType<typeof StatusPill>;
+export default StatusPill;

package/dist/components/feedback/Toaster.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+	import { toasts, dismiss, type ToastKind } from './toast.svelte.js';
+
+	let {
+		closeLabel = 'Fechar',
+		position = 'top-right'
+	}: {
+		closeLabel?: string;
+		position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+	} = $props();
+
+	function kindColor(kind: ToastKind): string {
+		switch (kind) {
+			case 'success':
+				return 'var(--twui-signal)';
+			case 'error':
+				return 'var(--twui-danger)';
+			case 'warning':
+				return 'var(--twui-yellow)';
+			case 'info':
+				return 'var(--twui-ink-soft)';
+		}
+	}
+</script>
+
+{#if toasts.current.length > 0}
+	<div class="twui-toaster twui-toaster-{position}">
+		{#each toasts.current as t (t.id)}
+			<div
+				class="twui-toast"
+				role="status"
+				style="border-left: 2px solid {kindColor(t.kind)}"
+			>
+				<span class="twui-toast-message">{t.message}</span>
+				{#if t.action}
+					<button class="twui-toast-action" onclick={() => { t.action!.onClick(); dismiss(t.id); }}>
+						{t.action.label}
+					</button>
+				{/if}
+				<button class="twui-toast-close" aria-label={closeLabel} onclick={() => dismiss(t.id)}>×</button>
+			</div>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.twui-toaster {
+		position: fixed;
+		z-index: 100;
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		max-width: 360px;
+	}
+
+	.twui-toaster-top-right {
+		top: 16px;
+		right: 16px;
+	}
+
+	.twui-toaster-top-left {
+		top: 16px;
+		left: 16px;
+	}
+
+	.twui-toaster-bottom-right {
+		bottom: 16px;
+		right: 16px;
+		flex-direction: column-reverse;
+	}
+
+	.twui-toaster-bottom-left {
+		bottom: 16px;
+		left: 16px;
+		flex-direction: column-reverse;
+	}
+
+	.twui-toast {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		padding: 10px 12px;
+		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-toast-message {
+		flex: 1;
+		font-family: var(--twui-font-mono);
+		font-size: 13px;
+		color: var(--twui-ink);
+	}
+
+	.twui-toast-action {
+		border: 1px solid var(--twui-accent);
+		background: var(--twui-accent-soft);
+		padding: 4px 8px;
+		font-family: var(--twui-font-mono);
+		font-size: 12px;
+		color: var(--twui-accent);
+		cursor: pointer;
+	}
+
+	.twui-toast-action:hover {
+		background: var(--twui-accent);
+		color: var(--twui-paper);
+	}
+
+	.twui-toast-close {
+		border: none;
+		background: transparent;
+		font-size: 16px;
+		line-height: 1;
+		color: var(--twui-ink-faint);
+		cursor: pointer;
+	}
+
+	.twui-toast-close:hover {
+		color: var(--twui-ink);
+	}
+</style>

package/dist/components/feedback/Toaster.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    closeLabel?: string;
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+};
+declare const Toaster: import("svelte").Component<$$ComponentProps, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
+export default Toaster;