@tabelhadev/tabelhawebui 0.28.4

package/dist/components/landing/LandingRoadmap.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		items,
+		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).
+		items: Array<{ icon: Snippet; label: string }>;
+		class?: string;
+	} = $props();
+</script>
+
+<div class="twui-landing-roadmap {className}">
+	{#each items as item (item.label)}
+		<span class="twui-landing-roadmap-item">
+			{@render item.icon()}
+			{item.label}
+		</span>
+	{/each}
+</div>
+
+<style>
+	.twui-landing-roadmap {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+	}
+
+	.twui-landing-roadmap-item {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		padding: 4px 10px;
+		border: 1px solid var(--twui-rule);
+		font-family: var(--twui-font-mono);
+		font-size: 12px;
+		color: var(--twui-ink-soft);
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    items: Array<{
+        icon: Snippet;
+        label: string;
+    }>;
+    class?: string;
+};
+declare const LandingRoadmap: import("svelte").Component<$$ComponentProps, {}, "">;
+type LandingRoadmap = ReturnType<typeof LandingRoadmap>;
+export default LandingRoadmap;

package/dist/components/landing/LandingSection.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		id,
+		children,
+		class: className = ''
+	}: {
+		id?: string;
+		children?: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+<section {id} class="twui-landing-section {className}">
+	{@render children?.()}
+</section>
+
+<style>
+	.twui-landing-section {
+		display: flex;
+		flex-direction: column;
+		gap: 2rem;
+	}
+</style>

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

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

package/dist/components/landing/LandingSectionHeading.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import SectionHeading from '../layout/SectionHeading.svelte';
+
+	let {
+		eyebrow,
+		title,
+		lead,
+		justify = false,
+		class: className = ''
+	}: {
+		eyebrow: string;
+		title: string;
+		lead?: string;
+		justify?: boolean;
+		class?: string;
+	} = $props();
+</script>
+
+<SectionHeading {eyebrow} {title} {lead} {justify} class={className} />

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

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    eyebrow: string;
+    title: string;
+    lead?: string;
+    justify?: boolean;
+    class?: string;
+};
+declare const LandingSectionHeading: import("svelte").Component<$$ComponentProps, {}, "">;
+type LandingSectionHeading = ReturnType<typeof LandingSectionHeading>;
+export default LandingSectionHeading;

package/dist/components/landing/LandingSteps.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import Card from '../card/Card.svelte';
+	import CardContent from '../card/CardContent.svelte';
+
+	let {
+		steps,
+		justify = false,
+		class: className = ''
+	}: {
+		steps: Array<{ number: string; color: string; title: string; body: string }>;
+		justify?: boolean;
+		class?: string;
+	} = $props();
+</script>
+
+<ol class="twui-landing-steps {className}">
+	{#each steps as step (step.number)}
+		<li class="twui-landing-step">
+			<Card>
+				<CardContent>
+					<div
+						class="twui-landing-step-number"
+						style="background:color-mix(in srgb, {step.color} 12%, transparent); color:{step.color}"
+					>
+						{step.number}
+					</div>
+					<h3 class="twui-landing-step-title">{step.title}</h3>
+					<p class="twui-landing-step-body {justify ? 'twui-landing-step-body-justify' : ''}">{step.body}</p>
+				</CardContent>
+			</Card>
+		</li>
+	{/each}
+</ol>
+
+<style>
+	.twui-landing-steps {
+		display: grid;
+		grid-template-columns: 1fr;
+		gap: 16px;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	.twui-landing-step {
+		display: flex;
+		min-width: 0;
+	}
+
+	.twui-landing-step > :global(.twui-card) {
+		flex: 1;
+	}
+
+	.twui-landing-step-number {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 36px;
+		height: 36px;
+		margin-bottom: 12px;
+		border-radius: 8px;
+		font-family: var(--twui-font-mono);
+		font-size: 16px;
+		font-weight: 700;
+		line-height: 1;
+	}
+
+	.twui-landing-step-title {
+		margin: 0;
+		font-family: var(--twui-font-mono);
+		font-size: 14px;
+		font-weight: 600;
+		color: var(--twui-ink);
+	}
+
+	.twui-landing-step-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-step-body-justify {
+		text-align: justify;
+		text-justify: inter-word;
+	}
+
+	@media (min-width: 640px) {
+		.twui-landing-steps {
+			grid-template-columns: repeat(2, 1fr);
+		}
+	}
+
+	@media (min-width: 1024px) {
+		.twui-landing-steps {
+			grid-template-columns: repeat(4, 1fr);
+		}
+	}
+</style>

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

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    steps: Array<{
+        number: string;
+        color: string;
+        title: string;
+        body: string;
+    }>;
+    justify?: boolean;
+    class?: string;
+};
+declare const LandingSteps: import("svelte").Component<$$ComponentProps, {}, "">;
+type LandingSteps = ReturnType<typeof LandingSteps>;
+export default LandingSteps;

package/dist/components/layout/BracketLink.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+	let {
+		children,
+		class: className = '',
+		...rest
+	}: {
+		children: Snippet;
+		class?: string;
+	} & HTMLAnchorAttributes = $props();
+</script>
+
+<a class="twui-bracketlink {className}" {...rest}>
+	<span class="twui-bracketlink-bracket" aria-hidden="true">[</span>{@render children()}<span
+		class="twui-bracketlink-bracket"
+		aria-hidden="true"
+		>]</span
+	>
+</a>
+
+<style>
+	.twui-bracketlink {
+		font-family: var(--twui-font-mono);
+		font-size: 14px;
+		color: var(--twui-ink);
+		text-decoration: none;
+		transition: color 0.15s ease;
+	}
+
+	.twui-bracketlink-bracket {
+		color: var(--twui-ink-faint);
+		transition: color 0.15s ease;
+	}
+
+	.twui-bracketlink:hover,
+	.twui-bracketlink:hover .twui-bracketlink-bracket {
+		color: var(--twui-accent);
+	}
+</style>

package/dist/components/layout/BracketLink.svelte.d.ts

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

package/dist/components/layout/Divider.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	let {
+		layout = 'horizontal',
+		type = 'solid',
+		label,
+		class: className = ''
+	}: {
+		layout?: 'horizontal' | 'vertical';
+		type?: 'solid' | 'dashed';
+		label?: string;
+		class?: string;
+	} = $props();
+</script>
+
+{#if layout === 'vertical'}
+	<div class="twui-divider twui-divider-vertical twui-divider-{type} {className}" aria-hidden="true"></div>
+{:else if label}
+	<div class="twui-divider twui-divider-with-label {className}" role="separator">
+		<span class="twui-divider-line twui-divider-{type}" aria-hidden="true"></span>
+		<span class="twui-divider-label-text">{label}</span>
+		<span class="twui-divider-line twui-divider-{type}" aria-hidden="true"></span>
+	</div>
+{:else}
+	<div class="twui-divider twui-divider-{type} {className}" role="separator" aria-hidden="true"></div>
+{/if}
+
+<style>
+	.twui-divider {
+		border-top: 1px solid var(--twui-rule);
+	}
+
+	.twui-divider-dashed {
+		border-top-style: dashed;
+	}
+
+	.twui-divider-vertical {
+		display: inline-block;
+		height: 1em;
+		margin: 0 8px;
+		border-top: none;
+		border-left: 1px solid var(--twui-rule);
+		vertical-align: middle;
+	}
+
+	.twui-divider-vertical.twui-divider-dashed {
+		border-left-style: dashed;
+	}
+
+	.twui-divider-with-label {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		border-top: none;
+	}
+
+	.twui-divider-line {
+		flex: 1;
+		border-top: 1px solid var(--twui-rule);
+	}
+
+	.twui-divider-line.twui-divider-dashed {
+		border-top-style: dashed;
+	}
+
+	.twui-divider-label-text {
+		font-family: var(--twui-font-mono);
+		font-size: 12px;
+		color: var(--twui-ink-faint);
+	}
+</style>

package/dist/components/layout/Divider.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    layout?: 'horizontal' | 'vertical';
+    type?: 'solid' | 'dashed';
+    label?: string;
+    class?: string;
+};
+declare const Divider: import("svelte").Component<$$ComponentProps, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;

package/dist/components/layout/Eyebrow.svelte

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

package/dist/components/layout/Eyebrow.svelte.d.ts

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

package/dist/components/layout/PageHeader.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Button from '../actions/Button.svelte';
+
+	let {
+		title,
+		subtitle,
+		prefix,
+		action,
+		back,
+		class: className = ''
+	}: {
+		title: string;
+		subtitle?: Snippet | string;
+		prefix?: Snippet;
+		action?: Snippet;
+		back?: { label: string; href: string };
+		class?: string;
+	} = $props();
+
+	const subtitleSnippet = $derived(typeof subtitle === 'function' ? (subtitle as Snippet) : null);
+</script>
+
+<header class="twui-page-header {className}">
+	<div class="twui-page-header-text">
+		<h1 class="twui-page-header-title">{title}</h1>
+		{#if subtitle}
+			<p class="twui-page-header-subtitle">
+				{#if prefix}
+					{@render prefix()}
+				{:else}
+					<span class="twui-page-header-prefix">//</span>
+				{/if}
+				{#if subtitleSnippet}
+					{@render subtitleSnippet()}
+				{:else}
+					{subtitle}
+				{/if}
+			</p>
+		{/if}
+	</div>
+	{#if action || back}
+		<div class="twui-page-header-action">
+			{#if action}
+				{@render action()}
+			{/if}
+			{#if back}
+				<Button href={back.href} variant="ghost" size="sm" class="-ml-2">
+					<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="size-4"
+						aria-hidden="true"
+					>
+						<path d="m12 19-7-7 7-7" />
+						<path d="M19 12H5" />
+					</svg>
+					{back.label}
+				</Button>
+			{/if}
+		</div>
+	{/if}
+</header>
+
+<style>
+	.twui-page-header {
+		display: flex;
+		align-items: baseline;
+		justify-content: space-between;
+		gap: 16px;
+	}
+
+	.twui-page-header-text {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+
+	.twui-page-header-title {
+		margin: 0;
+		font-family: var(--twui-font-mono);
+		font-size: 1.5rem;
+		font-weight: 700;
+		color: var(--twui-ink);
+	}
+
+	.twui-page-header-subtitle {
+		margin: 0;
+		font-family: var(--twui-font-mono);
+		font-size: 0.875rem;
+		color: var(--twui-ink-soft);
+	}
+
+	.twui-page-header-prefix {
+		color: var(--twui-ink-faint);
+	}
+
+	.twui-page-header-action {
+		flex-shrink: 0;
+	}
+</style>

package/dist/components/layout/PageHeader.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    title: string;
+    subtitle?: Snippet | string;
+    prefix?: Snippet;
+    action?: Snippet;
+    back?: {
+        label: string;
+        href: string;
+    };
+    class?: string;
+};
+declare const PageHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type PageHeader = ReturnType<typeof PageHeader>;
+export default PageHeader;

package/dist/components/layout/PageSeo.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { page } from '$app/state';
+
+	let {
+		siteName,
+		title,
+		description,
+		type = 'website',
+		locale = 'pt_BR'
+	}: {
+		siteName: string;
+		title: string;
+		description: string;
+		type?: 'website' | 'article';
+		locale?: string;
+	} = $props();
+
+	const canonical = $derived(`${page.url.origin}${page.url.pathname}`);
+</script>
+
+<svelte:head>
+	<title>{title}</title>
+	<meta name="description" content={description} />
+	<link rel="canonical" href={canonical} />
+	<meta property="og:type" content={type} />
+	<meta property="og:site_name" content={siteName} />
+	<meta property="og:locale" content={locale} />
+	<meta property="og:title" content={title} />
+	<meta property="og:description" content={description} />
+	<meta property="og:url" content={canonical} />
+	<meta name="twitter:card" content="summary" />
+	<meta name="twitter:title" content={title} />
+	<meta name="twitter:description" content={description} />
+</svelte:head>

package/dist/components/layout/PageSeo.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    siteName: string;
+    title: string;
+    description: string;
+    type?: 'website' | 'article';
+    locale?: string;
+};
+declare const PageSeo: import("svelte").Component<$$ComponentProps, {}, "">;
+type PageSeo = ReturnType<typeof PageSeo>;
+export default PageSeo;

package/dist/components/layout/PageShell.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-page-shell {className}">
+	{@render children()}
+</div>
+
+<style>
+	.twui-page-shell {
+		display: flex;
+		flex-direction: column;
+		gap: 20px;
+		padding: 56px 24px 32px;
+		width: 100%;
+	}
+</style>

package/dist/components/layout/PageShell.svelte.d.ts

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