@tabelhadev/tabelhawebui 0.28.4

package/dist/components/list/ListItem.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Checkbox from '../forms/Checkbox.svelte';
+
+	let {
+		selectable = false,
+		checked = $bindable(false),
+		href,
+		start,
+		content,
+		end,
+		class: className = ''
+	}: {
+		selectable?: boolean;
+		checked?: boolean;
+		href?: string;
+		start?: Snippet;
+		content?: Snippet;
+		end?: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+{#if href}
+	<a href={href} class="twui-list-item twui-list-item-link {className}">
+		{#if selectable}
+			<span class="twui-list-item-select" onclick={(e) => e.stopPropagation()} role="presentation">
+				<Checkbox bind:checked />
+			</span>
+		{/if}
+		{#if start}{@render start()}{/if}
+		<span class="twui-list-item-content">{#if content}{@render content()}{/if}</span>
+		{#if end}<span class="twui-list-item-end">{@render end()}</span>{/if}
+	</a>
+{:else}
+	<div class="twui-list-item {className}">
+		{#if selectable}
+			<span class="twui-list-item-select"><Checkbox bind:checked /></span>
+		{/if}
+		{#if start}{@render start()}{/if}
+		<span class="twui-list-item-content">{#if content}{@render content()}{/if}</span>
+		{#if end}<span class="twui-list-item-end">{@render end()}</span>{/if}
+	</div>
+{/if}
+
+<style>
+	.twui-list-item {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		padding: 8px 12px;
+		border-radius: 6px;
+		font-family: var(--twui-font-mono);
+		font-size: 14px;
+		line-height: 1.4;
+		color: var(--twui-ink);
+		text-decoration: none;
+		transition: background 0.15s ease;
+	}
+
+	.twui-list-item-link:hover {
+		background: var(--twui-paper-raised);
+		color: var(--twui-ink);
+	}
+
+	.twui-list-item-select {
+		display: inline-flex;
+		flex-shrink: 0;
+	}
+
+	.twui-list-item-content {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.twui-list-item-end {
+		flex-shrink: 0;
+		color: var(--twui-ink-faint);
+		font-size: 12px;
+	}
+</style>

package/dist/components/list/ListItem.svelte.d.ts

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

package/dist/components/marketing/MarketingShell.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { page } from '$app/state';
+	import ThemeToggle from '../navigation/ThemeToggle.svelte';
+	import Wordmark from '../layout/Wordmark.svelte';
+	import MarketingShellFooter from './MarketingShellFooter.svelte';
+
+	let {
+		prefix = 'TAbelha',
+		suffix = '',
+		brandHref = '/',
+		header,
+		actions,
+		nav,
+		children,
+		footerLinks = [],
+		footerLicense,
+		footerRepoUrl,
+		class: className = ''
+	}: {
+		prefix?: string;
+		suffix?: string;
+		brandHref?: string;
+		header?: Snippet;
+		actions?: Snippet;
+		nav?: { href: string; label: string }[];
+		children: Snippet;
+		footerLinks?: { href: string; label: string }[];
+		footerLicense?: string;
+		footerRepoUrl?: string;
+		class?: string;
+	} = $props();
+
+	const isActive = (href: string) =>
+		href === '/'
+			? page.url.pathname === '/'
+			: page.url.pathname === href || page.url.pathname.startsWith(`${href}/`);
+</script>
+
+<div class="twui-ms {className}">
+	<header class="twui-ms-header">
+		<div class="twui-ms-header-inner">
+			<a href={brandHref} class="twui-ms-brand-link">
+				<Wordmark {prefix} {suffix} />
+			</a>
+			{#if header}
+				<div class="twui-ms-header-mid">{@render header()}</div>
+			{:else if nav}
+				<nav class="twui-ms-nav">
+					{#each nav as item (item.href)}
+						<a
+							href={item.href}
+							class="twui-ms-nav-link"
+							class:twui-ms-nav-link-active={isActive(item.href)}
+							aria-current={isActive(item.href) ? 'page' : undefined}
+						>
+							{item.label}
+						</a>
+					{/each}
+				</nav>
+			{/if}
+			<div class="twui-ms-header-end">
+				{#if actions}
+					<div class="twui-ms-actions">{@render actions()}</div>
+				{/if}
+				<ThemeToggle />
+			</div>
+		</div>
+	</header>
+	<main class="twui-ms-main">
+		{@render children()}
+	</main>
+	<MarketingShellFooter
+		{prefix}
+		{suffix}
+		license={footerLicense}
+		repoUrl={footerRepoUrl}
+		links={footerLinks}
+	/>
+</div>
+
+<style>
+	.twui-ms {
+		display: flex;
+		margin: 0 auto;
+		width: 100%;
+		max-width: 64rem;
+		min-height: 100svh;
+		flex-direction: column;
+		border-left: 1px solid var(--twui-rule);
+		border-right: 1px solid var(--twui-rule);
+	}
+
+	.twui-ms-header {
+		position: sticky;
+		top: 0;
+		z-index: 40;
+		border-bottom: 1px solid var(--twui-rule);
+		background: color-mix(in srgb, var(--twui-paper) 60%, transparent);
+		backdrop-filter: blur(8px);
+	}
+
+	.twui-ms-header-inner {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 16px;
+		padding: 0 24px;
+		height: 56px;
+	}
+
+	.twui-ms-brand-link {
+		font-family: var(--twui-font-mono);
+		font-size: 14px;
+		font-weight: 600;
+		letter-spacing: -0.02em;
+		text-decoration: none;
+		white-space: nowrap;
+	}
+
+	.twui-ms-header-mid {
+		display: flex;
+		flex: 1;
+		justify-content: center;
+	}
+
+	.twui-ms-nav {
+		display: flex;
+		flex: 1;
+		justify-content: center;
+		align-items: center;
+		gap: 16px;
+		font-family: var(--twui-font-mono);
+		font-size: 14px;
+	}
+
+	.twui-ms-nav-link {
+		color: var(--twui-ink-soft);
+		text-decoration: none;
+	}
+
+	.twui-ms-nav-link:hover {
+		color: var(--twui-ink);
+	}
+
+	.twui-ms-nav-link-active {
+		color: var(--twui-accent-ink);
+		text-decoration: underline;
+		text-underline-offset: 4px;
+		text-decoration-color: var(--twui-accent);
+	}
+
+	.twui-ms-header-end {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.twui-ms-actions {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.twui-ms-main {
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+	}
+</style>

package/dist/components/marketing/MarketingShell.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    prefix?: string;
+    suffix?: string;
+    brandHref?: string;
+    header?: Snippet;
+    actions?: Snippet;
+    nav?: {
+        href: string;
+        label: string;
+    }[];
+    children: Snippet;
+    footerLinks?: {
+        href: string;
+        label: string;
+    }[];
+    footerLicense?: string;
+    footerRepoUrl?: string;
+    class?: string;
+};
+declare const MarketingShell: import("svelte").Component<$$ComponentProps, {}, "">;
+type MarketingShell = ReturnType<typeof MarketingShell>;
+export default MarketingShell;

package/dist/components/marketing/MarketingShellFooter.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import Wordmark from '../layout/Wordmark.svelte';
+
+	let {
+		prefix = 'TAbelha',
+		suffix = '',
+		license,
+		repoUrl,
+		links = [],
+		class: className = ''
+	}: {
+		prefix?: string;
+		suffix?: string;
+		license?: string;
+		repoUrl?: string;
+		links?: { href: string; label: string }[];
+		class?: string;
+	} = $props();
+</script>
+
+<footer class="twui-ms-footer {className}">
+	<p class="twui-ms-footer-brand">
+		<Wordmark {prefix} {suffix} />
+	</p>
+	{#if license}
+		<p class="twui-ms-footer-license">{license}</p>
+	{/if}
+	{#if links.length > 0 || repoUrl}
+		<nav class="twui-ms-footer-nav">
+			{#each links as link, i}
+				{#if i > 0}<span class="twui-ms-footer-sep" aria-hidden="true">&middot;</span>{/if}
+				<a class="twui-ms-footer-link" href={link.href}>{link.label}</a>
+			{/each}
+			{#if repoUrl}
+				{#if links.length > 0}<span class="twui-ms-footer-sep" aria-hidden="true">&middot;</span>{/if}
+				<a class="twui-ms-footer-link" href={repoUrl} target="_blank" rel="noreferrer">C&oacute;digo-fonte</a>
+			{/if}
+		</nav>
+	{/if}
+</footer>
+
+<style>
+	.twui-ms-footer {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 8px;
+		padding: 24px 24px;
+		border-top: 1px solid var(--twui-rule);
+		text-align: center;
+	}
+
+	.twui-ms-footer-brand {
+		font-family: var(--twui-font-mono);
+		font-size: 12px;
+		font-weight: 600;
+		letter-spacing: -0.01em;
+	}
+
+	.twui-ms-footer-license {
+		font-family: var(--twui-font-mono);
+		font-size: 12px;
+		color: var(--twui-ink-faint);
+	}
+
+	.twui-ms-footer-nav {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: center;
+		column-gap: 4px;
+		row-gap: 4px;
+		font-family: var(--twui-font-mono);
+		font-size: 12px;
+	}
+
+	.twui-ms-footer-link {
+		color: var(--twui-ink-soft);
+		text-decoration: none;
+		transition: color 0.15s ease;
+	}
+
+	.twui-ms-footer-link:hover {
+		color: var(--twui-ink);
+	}
+
+	.twui-ms-footer-sep {
+		padding: 0 4px;
+		color: var(--twui-ink-faint);
+		user-select: none;
+	}
+</style>

package/dist/components/marketing/MarketingShellFooter.svelte.d.ts

@@ -0,0 +1,14 @@
+type $$ComponentProps = {
+    prefix?: string;
+    suffix?: string;
+    license?: string;
+    repoUrl?: string;
+    links?: {
+        href: string;
+        label: string;
+    }[];
+    class?: string;
+};
+declare const MarketingShellFooter: import("svelte").Component<$$ComponentProps, {}, "">;
+type MarketingShellFooter = ReturnType<typeof MarketingShellFooter>;
+export default MarketingShellFooter;

package/dist/components/navigation/Accordion.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		items,
+		value = $bindable([]),
+		multiple = false,
+		class: className = ''
+	}: {
+		items: { value: string; title: string; disabled?: boolean; content?: Snippet }[];
+		value?: string[];
+		multiple?: boolean;
+		class?: string;
+	} = $props();
+
+	function toggle(itemValue: string) {
+		if (multiple) {
+			value = value.includes(itemValue)
+				? value.filter((v) => v !== itemValue)
+				: [...value, itemValue];
+		} else {
+			value = value.includes(itemValue) ? [] : [itemValue];
+		}
+	}
+</script>
+
+<div class="twui-accordion {className}">
+	{#each items as item (item.value)}
+		{@const open = value.includes(item.value)}
+		<div class="twui-accordion-item {open ? 'twui-accordion-item-open' : ''}">
+			<button
+				type="button"
+				class="twui-accordion-header"
+				disabled={item.disabled}
+				aria-expanded={open}
+				onclick={() => toggle(item.value)}
+			>
+				<span class="twui-accordion-title">{item.title}</span>
+				<svg
+					class="twui-accordion-chevron {open ? 'twui-accordion-chevron-open' : ''}"
+					width="14"
+					height="14"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					aria-hidden="true"
+				><path d="m6 9 6 6 6-6" /></svg>
+			</button>
+			{#if open && item.content}
+				<div class="twui-accordion-content">
+					{@render item.content()}
+				</div>
+			{/if}
+		</div>
+	{/each}
+</div>
+
+<style>
+	.twui-accordion {
+		border: 1px solid var(--twui-rule);
+		background: var(--twui-paper-raised);
+	}
+
+	.twui-accordion-item + .twui-accordion-item {
+		border-top: 1px solid var(--twui-rule);
+	}
+
+	.twui-accordion-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 8px;
+		width: 100%;
+		padding: 12px 16px;
+		border: none;
+		background: transparent;
+		font-family: var(--twui-font-mono);
+		font-size: 14px;
+		font-weight: 500;
+		text-align: left;
+		color: var(--twui-ink);
+		cursor: pointer;
+	}
+
+	.twui-accordion-header:hover:not(:disabled) {
+		color: var(--twui-accent);
+	}
+
+	.twui-accordion-header:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	.twui-accordion-chevron {
+		flex-shrink: 0;
+		color: var(--twui-ink-soft);
+		transition: transform 0.15s ease;
+	}
+
+	.twui-accordion-chevron-open {
+		transform: rotate(180deg);
+	}
+
+	.twui-accordion-content {
+		padding: 4px 16px 16px;
+	}
+</style>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    items: {
+        value: string;
+        title: string;
+        disabled?: boolean;
+        content?: Snippet;
+    }[];
+    value?: string[];
+    multiple?: boolean;
+    class?: string;
+};
+declare const Accordion: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/navigation/Carousel.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		items,
+		page = $bindable(0),
+		item,
+		prevLabel = 'Anterior',
+		nextLabel = 'Próxima',
+		class: className = ''
+	}: {
+		items: unknown[];
+		page?: number;
+		item: Snippet<[value: unknown]>;
+		prevLabel?: string;
+		nextLabel?: string;
+		class?: string;
+	} = $props();
+</script>
+
+<div class="twui-carousel {className}">
+	<div class="twui-carousel-viewport">
+		{@render item(items[page])}
+	</div>
+	<div class="twui-carousel-nav">
+		<button
+			type="button"
+			class="twui-carousel-btn"
+			disabled={page <= 0}
+			onclick={() => (page -= 1)}
+			aria-label={prevLabel}
+		>‹</button>
+		<div class="twui-carousel-dots">
+			{#each items as _, i (i)}
+				<button
+					type="button"
+					class="twui-carousel-dot {i === page ? 'twui-carousel-dot-active' : ''}"
+					aria-label={`Página ${i + 1}`}
+					onclick={() => (page = i)}
+				></button>
+			{/each}
+		</div>
+		<button
+			type="button"
+			class="twui-carousel-btn"
+			disabled={page >= items.length - 1}
+			onclick={() => (page += 1)}
+			aria-label={nextLabel}
+		>›</button>
+	</div>
+</div>
+
+<style>
+	.twui-carousel {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+	}
+
+	.twui-carousel-viewport {
+		min-height: 0;
+	}
+
+	.twui-carousel-nav {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 12px;
+	}
+
+	.twui-carousel-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 28px;
+		height: 28px;
+		padding: 0;
+		border: 1px solid var(--twui-rule);
+		background: transparent;
+		font-size: 15px;
+		color: var(--twui-ink);
+		cursor: pointer;
+	}
+
+	.twui-carousel-btn:hover:not(:disabled) {
+		border-color: var(--twui-accent);
+		color: var(--twui-accent);
+	}
+
+	.twui-carousel-btn:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	.twui-carousel-dots {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+
+	.twui-carousel-dot {
+		width: 8px;
+		height: 8px;
+		padding: 0;
+		border: 1px solid var(--twui-rule);
+		border-radius: 9999px;
+		background: transparent;
+		cursor: pointer;
+	}
+
+	.twui-carousel-dot-active {
+		border-color: var(--twui-accent);
+		background: var(--twui-accent);
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    items: unknown[];
+    page?: number;
+    item: Snippet<[value: unknown]>;
+    prevLabel?: string;
+    nextLabel?: string;
+    class?: string;
+};
+declare const Carousel: import("svelte").Component<$$ComponentProps, {}, "page">;
+type Carousel = ReturnType<typeof Carousel>;
+export default Carousel;