@tabelhadev/tabelhawebui 0.28.4

package/dist/components/navigation/ThemeToggle.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    labels?: {
+        light: string;
+        dark: string;
+    };
+    icons?: {
+        sun: Snippet;
+        moon: Snippet;
+    };
+    showLabel?: boolean;
+    label?: {
+        light: string;
+        dark: string;
+    };
+    class?: string;
+};
+declare const ThemeToggle: import("svelte").Component<$$ComponentProps, {}, "">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;

package/dist/components/overlay/Dialog.svelte

@@ -0,0 +1,200 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { fade } from 'svelte/transition';
+	import { lockScroll } from '../../actions/scroll-lock';
+	import { trapFocus } from '../../actions/focus-trap';
+	import DialogActions from './DialogActions.svelte';
+
+	let {
+		open = $bindable(false),
+		title,
+		size = 'md',
+		closeLabel = 'Fechar',
+		animate = true,
+		children,
+		footer,
+		footerStart,
+		footerEnd,
+		class: className = ''
+	}: {
+		open?: boolean;
+		title?: string;
+		size?: 'sm' | 'md' | 'lg';
+		closeLabel?: string;
+		animate?: boolean;
+		children: Snippet;
+		/** Full custom footer: rendered as-is inside the docked bar. */
+		footer?: Snippet;
+		/** Secondary action (dismiss/back), docked left. */
+		footerStart?: Snippet;
+		/** Primary action(s), docked right. */
+		footerEnd?: Snippet;
+		class?: string;
+	} = $props();
+
+	let panelEl = $state<HTMLDivElement | undefined>();
+
+	const reduced = () =>
+		typeof window !== 'undefined' &&
+		window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+	function overlayTransition(node: HTMLElement) {
+		if (!animate || reduced()) return fade(node, { duration: 0 });
+		return fade(node, { duration: 150 });
+	}
+
+	const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
+
+	function panelTransition(node: HTMLElement) {
+		if (!animate || reduced()) return fade(node, { duration: 0 });
+		return {
+			duration: 160,
+			easing: easeOutCubic,
+			css: (t: number) => `transform: scale(${0.95 + t * 0.05}); opacity: ${t};`
+		};
+	}
+
+	$effect(() => {
+		if (!open) return;
+		return lockScroll();
+	});
+
+	$effect(() => {
+		if (!open || !panelEl) return;
+		return trapFocus(panelEl, () => (open = false));
+	});
+</script>
+
+{#if open}
+	<div
+		class="twui-dialog-overlay"
+		role="presentation"
+		transition:overlayTransition
+		onpointerdown={(e) => {
+			if (e.target === e.currentTarget) open = false;
+		}}
+	>
+		<div
+			class="twui-dialog twui-dialog-{size} {className}"
+			role="dialog"
+			aria-modal="true"
+			aria-label={title}
+			tabindex="-1"
+			bind:this={panelEl}
+			transition:panelTransition
+		>
+			<div class="twui-dialog-header">
+				{#if title}
+					<h2 class="twui-dialog-title">{title}</h2>
+				{/if}
+				<button type="button" class="twui-dialog-close" aria-label={closeLabel} onclick={() => (open = false)}>
+					×
+				</button>
+			</div>
+			<div class="twui-dialog-body">
+				{@render children()}
+			</div>
+		{#if footer || footerStart || footerEnd}
+			<div class="twui-dialog-footer">
+				{#if footer}
+					{@render footer()}
+				{:else}
+					<DialogActions>
+						{#snippet start()}
+							{#if footerStart}{@render footerStart()}{/if}
+						{/snippet}
+						{#snippet end()}
+							{#if footerEnd}{@render footerEnd()}{/if}
+						{/snippet}
+					</DialogActions>
+				{/if}
+			</div>
+		{/if}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.twui-dialog-overlay {
+		position: fixed;
+		inset: 0;
+		z-index: 90;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 24px;
+		background: color-mix(in srgb, var(--twui-ink) 25%, transparent);
+	}
+
+	.twui-dialog {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		max-height: 85vh;
+		border: 1px solid var(--twui-rule);
+		background: var(--twui-paper-raised);
+		box-shadow: var(--twui-shadow-offset, 3px 3px 0 0 var(--twui-rule));
+		outline: none;
+	}
+
+	/* The `size` prop maps to Tailwind max-width values; the `class` prop still wins. */
+	.twui-dialog-sm {
+		max-width: 448px; /* max-w-md */
+	}
+	.twui-dialog-md {
+		max-width: 576px; /* max-w-xl */
+	}
+	.twui-dialog-lg {
+		max-width: 768px; /* max-w-3xl */
+	}
+
+	.twui-dialog-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 12px;
+		padding: 12px 16px;
+		border-bottom: 1px solid var(--twui-rule);
+	}
+
+	.twui-dialog-title {
+		margin: 0;
+		font-family: var(--twui-font-mono);
+		font-size: 14px;
+		font-weight: 600;
+		color: var(--twui-ink);
+	}
+
+	.twui-dialog-close {
+		border: none;
+		background: transparent;
+		font-size: 18px;
+		line-height: 1;
+		color: var(--twui-ink-faint);
+		cursor: pointer;
+	}
+
+	.twui-dialog-close:hover {
+		color: var(--twui-accent);
+	}
+
+	.twui-dialog-body {
+		padding: 16px;
+		overflow-y: auto;
+		/* The native scrollbar breaks the mono aesthetic; scrolling still works
+		   by keyboard/wheel, the indicator is just hidden (same as the Select). */
+		scrollbar-width: none;
+	}
+	.twui-dialog-body::-webkit-scrollbar {
+		display: none;
+	}
+
+	.twui-dialog-footer {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		gap: 8px;
+		padding: 12px 16px;
+		border-top: 1px solid var(--twui-rule);
+	}
+</style>

package/dist/components/overlay/Dialog.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    open?: boolean;
+    title?: string;
+    size?: 'sm' | 'md' | 'lg';
+    closeLabel?: string;
+    animate?: boolean;
+    children: Snippet;
+    /** Full custom footer: rendered as-is inside the docked bar. */
+    footer?: Snippet;
+    /** Secondary action (dismiss/back), docked left. */
+    footerStart?: Snippet;
+    /** Primary action(s), docked right. */
+    footerEnd?: Snippet;
+    class?: string;
+};
+declare const Dialog: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/components/overlay/DialogActions.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		start,
+		end,
+		class: className = ''
+	}: {
+		start?: Snippet;
+		end?: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+<!-- Standard modal footer-actions row: secondary action on the left, primary
+     on the right. The end block is pushed right by itself, so a dialog with
+     only a primary button still aligns it correctly. -->
+<div class="twui-dialog-actions {className}">
+	{#if start}
+		<div class="twui-dialog-actions-start">
+			{@render start()}
+		</div>
+	{/if}
+	{#if end}
+		<div class="twui-dialog-actions-end">
+			{@render end()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.twui-dialog-actions {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.twui-dialog-actions-start {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.twui-dialog-actions-end {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		margin-left: auto;
+	}
+</style>

package/dist/components/overlay/DialogActions.svelte.d.ts

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

package/dist/components/overlay/Dropdown.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { clickOutside } from '../../actions/click-outside';
+
+	let {
+		trigger,
+		children,
+		align = 'right',
+		class: className = ''
+	}: {
+		trigger: Snippet;
+		children: Snippet;
+		align?: 'left' | 'right';
+		class?: string;
+	} = $props();
+
+	let open = $state(false);
+	let rootEl = $state<HTMLDivElement | undefined>();
+</script>
+
+<div class="twui-dropdown {className}" bind:this={rootEl} use:clickOutside={() => (open = false)}>
+	<button
+		type="button"
+		class="twui-dropdown-trigger"
+		aria-haspopup="menu"
+		aria-expanded={open}
+		onclick={() => (open = !open)}
+	>
+		{@render trigger()}
+	</button>
+	{#if open}
+		<ul
+			class="twui-dropdown-menu {align === 'left' ? 'twui-dropdown-menu-left' : 'twui-dropdown-menu-right'}"
+			role="menu"
+		>
+			{@render children()}
+		</ul>
+	{/if}
+</div>
+
+<style>
+	.twui-dropdown {
+		position: relative;
+	}
+
+	.twui-dropdown-trigger {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		padding: 0;
+		border: none;
+		background: transparent;
+		font-family: inherit;
+		font-size: 14px;
+		color: var(--twui-ink-soft);
+		cursor: pointer;
+		transition: color 0.15s ease;
+	}
+
+	.twui-dropdown-trigger:hover {
+		color: var(--twui-accent);
+	}
+
+	.twui-dropdown-menu {
+		position: absolute;
+		top: 100%;
+		z-index: 10;
+		margin-top: 8px;
+		min-width: 10rem;
+		border: 1px solid var(--twui-rule);
+		background: var(--twui-paper);
+		padding: 4px 0;
+		box-shadow: var(--twui-shadow-offset, 3px 3px 0 0 var(--twui-rule));
+		list-style: none;
+	}
+
+	.twui-dropdown-menu-right {
+		right: 0;
+	}
+
+	.twui-dropdown-menu-left {
+		left: 0;
+	}
+
+	.twui-dropdown-menu > :global(li),
+	.twui-dropdown-menu > :global(a),
+	.twui-dropdown-menu > :global(button) {
+		display: block;
+		width: 100%;
+		border: none;
+		background: transparent;
+		padding: 6px 12px;
+		text-align: left;
+		font-family: inherit;
+		font-size: 14px;
+		white-space: nowrap;
+		color: var(--twui-ink);
+		cursor: pointer;
+		transition:
+			background-color 0.15s ease,
+			color 0.15s ease;
+	}
+
+	.twui-dropdown-menu > :global(li:hover),
+	.twui-dropdown-menu > :global(a:hover),
+	.twui-dropdown-menu > :global(button:hover) {
+		background: var(--twui-accent-soft);
+		color: var(--twui-accent);
+	}
+</style>

package/dist/components/overlay/Dropdown.svelte.d.ts

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

package/dist/components/overlay/FloatingActionPill.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { fade, scale } from 'svelte/transition';
+
+	let {
+		position = 'bottom-right',
+		expanded = false,
+		animate = true,
+		ariaLabel,
+		ariaExpandedLabel = 'Fechar',
+		children,
+		class: className = '',
+		...rest
+	}: {
+		position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+		expanded?: boolean;
+		animate?: boolean;
+		ariaLabel: string;
+		ariaExpandedLabel?: string;
+		children: Snippet;
+		class?: string;
+	} & HTMLButtonAttributes = $props();
+
+	const reduced = () =>
+		typeof window !== 'undefined' &&
+		window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+	function pillTransition(node: HTMLElement) {
+		if (!animate || reduced()) return fade(node, { duration: 0 });
+		return scale(node, { duration: 150, easing: (t) => 1 - Math.pow(1 - t, 3) });
+	}
+</script>
+
+<button
+	type="button"
+	class="twui-floating-action-pill twui-floating-action-pill-{position} {className}"
+	aria-label={expanded ? ariaExpandedLabel : ariaLabel}
+	aria-expanded={expanded}
+	transition:pillTransition
+	{...rest}
+>
+	{@render children()}
+</button>
+
+<style>
+	.twui-floating-action-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);
+		cursor: pointer;
+		box-shadow: var(--twui-shadow-offset, 3px 3px 0 0 var(--twui-rule));
+		transition:
+			color 0.15s ease,
+			transform 0.1s ease,
+			box-shadow 0.1s ease;
+	}
+
+	.twui-floating-action-pill:hover {
+		color: var(--twui-accent);
+	}
+
+	.twui-floating-action-pill:active {
+		transform: translate(2px, 2px);
+		box-shadow: none;
+	}
+
+	.twui-floating-action-pill-bottom-right {
+		right: 1rem;
+		bottom: 1.5rem;
+	}
+
+	.twui-floating-action-pill-bottom-left {
+		left: 1rem;
+		bottom: 1.5rem;
+	}
+
+	.twui-floating-action-pill-top-right {
+		right: 1rem;
+		top: 1rem;
+	}
+
+	.twui-floating-action-pill-top-left {
+		left: 1rem;
+		top: 1rem;
+	}
+</style>

package/dist/components/overlay/FloatingActionPill.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type $$ComponentProps = {
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    expanded?: boolean;
+    animate?: boolean;
+    ariaLabel: string;
+    ariaExpandedLabel?: string;
+    children: Snippet;
+    class?: string;
+} & HTMLButtonAttributes;
+declare const FloatingActionPill: import("svelte").Component<$$ComponentProps, {}, "">;
+type FloatingActionPill = ReturnType<typeof FloatingActionPill>;
+export default FloatingActionPill;