@tabelhadev/tabelhawebui 0.28.4

package/dist/components/actions/Button.svelte

@@ -0,0 +1,169 @@
+<script module lang="ts">
+	export type ButtonVariant = 'primary' | 'ghost' | 'danger' | 'outline';
+	export type ButtonSize = 'sm' | 'md' | 'lg' | 'icon-sm';
+
+	// Variant class helper for use where a real <Button> doesn't fit (e.g. decorative <span>).
+	export function buttonVariants(
+		opts: { variant?: ButtonVariant; size?: ButtonSize } = {}
+	): string {
+		const { variant = 'primary', size = 'md' } = opts;
+		return `twui-button twui-button-${variant} twui-button-${size}`;
+	}
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+
+	let {
+		variant = 'primary',
+		size = 'md',
+		href,
+		loading = false,
+		children,
+		class: className = '',
+		...rest
+	}: {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+		href?: string;
+		loading?: boolean;
+		children: Snippet;
+		class?: string;
+	} & HTMLButtonAttributes & HTMLAnchorAttributes = $props();
+</script>
+
+{#if href}
+	<a
+		href={href}
+		class="twui-button twui-button-{variant} twui-button-{size} {loading ? 'twui-button-loading' : ''} {className}"
+		aria-busy={loading}
+		{...rest}
+	>
+		{#if loading}
+			<span class="twui-button-spinner" aria-hidden="true"></span>
+		{/if}
+		{@render children()}
+	</a>
+{:else}
+	<button
+		class="twui-button twui-button-{variant} twui-button-{size} {loading ? 'twui-button-loading' : ''} {className}"
+		disabled={rest.disabled || loading}
+		aria-busy={loading}
+		{...rest}
+	>
+		{#if loading}
+			<span class="twui-button-spinner" aria-hidden="true"></span>
+		{/if}
+		{@render children()}
+	</button>
+{/if}
+
+<style>
+	.twui-button {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 6px;
+		border: 1px solid transparent;
+		background: transparent;
+		font-family: var(--twui-font-mono, 'JetBrains Mono', monospace);
+		font-size: 14px;
+		font-weight: 500;
+		white-space: nowrap;
+		cursor: pointer;
+		text-decoration: none;
+		transition:
+			background-color 0.15s ease,
+			color 0.15s ease,
+			border-color 0.15s ease;
+	}
+
+	.twui-button:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.twui-button-spinner {
+		width: 12px;
+		height: 12px;
+		flex-shrink: 0;
+		border: 2px solid currentColor;
+		border-right-color: transparent;
+		border-radius: 9999px;
+		animation: twui-button-spin 0.7s linear infinite;
+	}
+
+	@keyframes twui-button-spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.twui-button-sm {
+		padding: 4px 12px;
+		font-size: 13px;
+	}
+
+	.twui-button-md {
+		padding: 6px 16px;
+		font-size: 14px;
+	}
+
+	.twui-button-lg {
+		padding: 8px 24px;
+		font-size: 14px;
+	}
+
+	.twui-button-icon-sm {
+		width: 28px;
+		height: 28px;
+		padding: 0;
+	}
+
+	.twui-button-primary {
+		background: color-mix(in oklab, var(--twui-accent) 12%, transparent);
+		border-color: var(--twui-accent);
+		color: var(--twui-accent);
+	}
+
+	.twui-button-primary:hover:not(:disabled) {
+		background: color-mix(in oklab, var(--twui-accent) 25%, transparent);
+		border-color: var(--twui-accent);
+		color: var(--twui-accent);
+	}
+
+	.twui-button-ghost {
+		background: transparent;
+		border-color: transparent;
+		color: var(--twui-ink-soft);
+	}
+
+	.twui-button-ghost:hover:not(:disabled) {
+		background: color-mix(in oklab, var(--twui-ink-soft) 10%, transparent);
+		color: var(--twui-ink);
+	}
+
+	.twui-button-danger {
+		background: transparent;
+		border-color: var(--twui-danger);
+		color: var(--twui-danger);
+	}
+
+	.twui-button-danger:hover:not(:disabled) {
+		background: color-mix(in oklab, var(--twui-danger) 15%, transparent);
+		color: var(--twui-danger);
+	}
+
+	.twui-button-outline {
+		background: transparent;
+		border-color: var(--twui-ink-soft);
+		color: var(--twui-ink);
+	}
+
+	.twui-button-outline:hover:not(:disabled) {
+		background: var(--twui-accent-soft);
+		border-color: var(--twui-accent);
+		color: var(--twui-accent);
+	}
+</style>

package/dist/components/actions/Button.svelte.d.ts

@@ -0,0 +1,19 @@
+export type ButtonVariant = 'primary' | 'ghost' | 'danger' | 'outline';
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'icon-sm';
+export declare function buttonVariants(opts?: {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+}): string;
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+type $$ComponentProps = {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    href?: string;
+    loading?: boolean;
+    children: Snippet;
+    class?: string;
+} & HTMLButtonAttributes & HTMLAnchorAttributes;
+declare const Button: import("svelte").Component<$$ComponentProps, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/appshell/AppShell.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import AppShellSidebar from './AppShellSidebar.svelte';
+	import AppShellBottomNav from './AppShellBottomNav.svelte';
+	import AppShellContent from './AppShellContent.svelte';
+	import type { AppShellNavItem } from './types';
+
+	let {
+		brand = { prefix: 'TAbelha', suffix: '' },
+		navItems = [],
+		currentPath = '',
+		logoutAction = '',
+		profile,
+		children,
+		pad = true,
+		class: className = ''
+	}: {
+		brand?: { prefix?: string; suffix?: string };
+		navItems?: AppShellNavItem[];
+		currentPath?: string;
+		logoutAction?: string;
+		profile?: AppShellNavItem;
+		children: Snippet;
+		/** When false, the content area skips its built-in padding. */
+		pad?: boolean;
+		class?: string;
+	} = $props();
+</script>
+
+<div class="twui-appshell {className}">
+	<AppShellSidebar {brand} {navItems} {currentPath} {logoutAction} {profile} />
+	<div class="twui-appshell-body">
+		<AppShellContent {pad}>{@render children()}</AppShellContent>
+	</div>
+	<AppShellBottomNav {navItems} {currentPath} />
+</div>
+
+<style>
+	.twui-appshell {
+		display: flex;
+		min-height: 100svh;
+	}
+
+	.twui-appshell-body {
+		display: flex;
+		flex: 1;
+		min-width: 0;
+		flex-direction: column;
+	}
+</style>

package/dist/components/appshell/AppShell.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { AppShellNavItem } from './types';
+type $$ComponentProps = {
+    brand?: {
+        prefix?: string;
+        suffix?: string;
+    };
+    navItems?: AppShellNavItem[];
+    currentPath?: string;
+    logoutAction?: string;
+    profile?: AppShellNavItem;
+    children: Snippet;
+    /** When false, the content area skips its built-in padding. */
+    pad?: boolean;
+    class?: string;
+};
+declare const AppShell: import("svelte").Component<$$ComponentProps, {}, "">;
+type AppShell = ReturnType<typeof AppShell>;
+export default AppShell;

package/dist/components/appshell/AppShellBottomNav.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { isPathActive } from './utils';
+	import type { AppShellNavItem } from './types';
+
+	let {
+		navItems = [],
+		currentPath = '',
+		class: className = ''
+	}: {
+		navItems?: AppShellNavItem[];
+		currentPath?: string;
+		class?: string;
+	} = $props();
+</script>
+
+<nav class="twui-appshell-bottomnav {className}" aria-label="Navegação principal">
+	{#each navItems as item (item.href)}
+		{@const active = isPathActive(currentPath, item.href)}
+		<a
+			href={item.href}
+			class="twui-appshell-bottomnav-item {active ? 'twui-appshell-bottomnav-item-active' : ''}"
+			aria-current={active ? 'page' : undefined}
+		>
+			{#if item.icon}{@render item.icon()}{/if}
+			<span>{item.label}</span>
+		</a>
+	{/each}
+</nav>
+
+<style>
+	.twui-appshell-bottomnav {
+		position: fixed;
+		inset-inline: 0;
+		bottom: 0;
+		z-index: 50;
+		display: flex;
+		align-items: center;
+		justify-content: space-around;
+		padding: 8px 0;
+		border-top: 1px solid var(--twui-rule);
+		background: var(--twui-paper-raised);
+	}
+
+	@media (min-width: 1024px) {
+		.twui-appshell-bottomnav {
+			display: none;
+		}
+	}
+
+	.twui-appshell-bottomnav-item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 2px;
+		padding: 4px 16px;
+		font-family: var(--twui-font-mono);
+		font-size: 12px;
+		line-height: 1.2;
+		color: var(--twui-ink-soft);
+		text-decoration: none;
+		transition: color 0.15s ease;
+	}
+
+	.twui-appshell-bottomnav-item-active {
+		color: var(--twui-accent);
+	}
+</style>

package/dist/components/appshell/AppShellBottomNav.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { AppShellNavItem } from './types';
+type $$ComponentProps = {
+    navItems?: AppShellNavItem[];
+    currentPath?: string;
+    class?: string;
+};
+declare const AppShellBottomNav: import("svelte").Component<$$ComponentProps, {}, "">;
+type AppShellBottomNav = ReturnType<typeof AppShellBottomNav>;
+export default AppShellBottomNav;

package/dist/components/appshell/AppShellContent.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		children,
+		pad = true,
+		class: className = ''
+	}: {
+		children: Snippet;
+		/** When false, skip the built-in padding so a child `Page.Shell` owns spacing. */
+		pad?: boolean;
+		class?: string;
+	} = $props();
+</script>
+
+<main class="twui-appshell-content {className}" class:twui-appshell-content-nopad={!pad}>
+	{@render children()}
+</main>
+
+<style>
+	.twui-appshell-content {
+		margin-inline: auto;
+		width: 100%;
+		max-width: 72rem;
+		flex: 1;
+		padding: 1rem 1rem 6rem;
+	}
+
+	@media (min-width: 1024px) {
+		.twui-appshell-content {
+			padding: 2rem;
+		}
+	}
+
+	.twui-appshell-content-nopad {
+		padding: 0;
+	}
+</style>

package/dist/components/appshell/AppShellContent.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+    /** When false, skip the built-in padding so a child `Page.Shell` owns spacing. */
+    pad?: boolean;
+    class?: string;
+};
+declare const AppShellContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type AppShellContent = ReturnType<typeof AppShellContent>;
+export default AppShellContent;

package/dist/components/appshell/AppShellSidebar.svelte

@@ -0,0 +1,196 @@
+<script lang="ts">
+	import Wordmark from '../layout/Wordmark.svelte';
+	import ThemeToggle from '../navigation/ThemeToggle.svelte';
+	import { isPathActive } from './utils';
+	import type { AppShellNavItem } from './types';
+
+		let {
+		brand = { prefix: 'TAbelha', suffix: '' },
+		navItems = [],
+		currentPath = '',
+		logoutAction = '',
+		profile,
+		class: className = ''
+	}: {
+		brand?: { prefix?: string; suffix?: string };
+		navItems?: AppShellNavItem[];
+		currentPath?: string;
+		logoutAction?: string;
+		profile?: AppShellNavItem;
+		class?: string;
+	} = $props();
+</script>
+
+<aside class="twui-appshell-sidebar {className}">
+	<div class="twui-appshell-sidebar-brand">
+		<a href="/" class="twui-appshell-sidebar-brand-link" aria-label="Ir para o início">
+			<Wordmark prefix={brand.prefix} suffix={brand.suffix} />
+		</a>
+	</div>
+	<div class="twui-appshell-sidebar-sep" role="presentation"></div>
+	<nav class="twui-appshell-sidebar-nav" aria-label="Navegação principal">
+		{#each navItems as item (item.href)}
+			{@const active = isPathActive(currentPath, item.href)}
+			<a
+				href={item.href}
+				class="twui-appshell-nav-item {active ? 'twui-appshell-nav-item-active' : ''}"
+				aria-current={active ? 'page' : undefined}
+			>
+				{#if item.icon}{@render item.icon()}{/if}
+				<span>{item.label}</span>
+			</a>
+		{/each}
+	</nav>
+	<div class="twui-appshell-sidebar-sep" role="presentation"></div>
+	<div class="twui-appshell-sidebar-footer">
+		{#if profile}
+			{@const active = isPathActive(currentPath, profile.href)}
+			<a
+				href={profile.href}
+				class="twui-appshell-nav-item twui-appshell-sidebar-profile {active
+					? 'twui-appshell-nav-item-active'
+					: ''}"
+				aria-current={active ? 'page' : undefined}
+			>
+				{#if profile.icon}{@render profile.icon()}{/if}
+				<span>{profile.label}</span>
+			</a>
+		{/if}
+		<ThemeToggle showLabel class="twui-appshell-sidebar-theme" />
+		{#if logoutAction}
+			<form method="POST" action={logoutAction} class="twui-appshell-sidebar-logout-form">
+				<button type="submit" class="twui-appshell-sidebar-logout">
+					<svg
+						width="16"
+						height="16"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						aria-hidden="true"
+					>
+						<path d="M12 2v10" />
+						<path d="M18.4 6.6a9 9 0 1 1-12.77.04" />
+					</svg>
+					<span>Sair</span>
+				</button>
+			</form>
+		{/if}
+	</div>
+</aside>
+
+<style>
+	.twui-appshell-sidebar {
+		display: none;
+		flex-direction: column;
+		position: sticky;
+		top: 0;
+		height: 100svh;
+		width: 15rem;
+		flex-shrink: 0;
+		border-right: 1px solid var(--twui-rule);
+		background: var(--twui-paper-raised);
+	}
+
+	@media (min-width: 1024px) {
+		.twui-appshell-sidebar {
+			display: flex;
+		}
+	}
+
+	.twui-appshell-sidebar-brand {
+		padding: 20px 20px 16px;
+	}
+
+	.twui-appshell-sidebar-brand-link {
+		text-decoration: none;
+	}
+
+	.twui-appshell-sidebar-sep {
+		border-top: 1px solid var(--twui-rule);
+	}
+
+	.twui-appshell-sidebar-nav {
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+		gap: 4px;
+		padding: 16px 12px;
+		overflow-y: auto;
+	}
+
+	.twui-appshell-nav-item {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		padding: 6px 8px;
+		border-left: 2px solid transparent;
+		font-family: var(--twui-font-mono);
+		font-size: 14px;
+		line-height: 1.4;
+		color: var(--twui-ink-soft);
+		text-decoration: none;
+		transition: color 0.15s ease;
+	}
+
+	.twui-appshell-nav-item:hover {
+		color: var(--twui-ink);
+	}
+
+	.twui-appshell-nav-item-active {
+		border-left-color: var(--twui-accent);
+		color: var(--twui-accent);
+		font-weight: 500;
+	}
+
+	.twui-appshell-nav-item-active:hover {
+		color: var(--twui-accent);
+	}
+
+	.twui-appshell-sidebar-footer {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		padding: 16px 12px;
+	}
+
+	.twui-appshell-sidebar-profile {
+		display: flex;
+	}
+
+	.twui-appshell-sidebar-logout-form {
+		margin: 0;
+	}
+
+	.twui-appshell-sidebar-logout {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		width: 100%;
+		padding: 6px 8px;
+		border: none;
+		border-left: 2px solid transparent;
+		background: transparent;
+		font-family: var(--twui-font-mono);
+		font-size: 14px;
+		line-height: 1.4;
+		color: var(--twui-danger);
+		text-align: left;
+		cursor: pointer;
+		transition: color 0.15s ease;
+	}
+
+	.twui-appshell-sidebar-logout:hover {
+		color: var(--twui-ink);
+	}
+
+	:global(.twui-appshell-sidebar .twui-appshell-sidebar-footer .twui-appshell-sidebar-theme) {
+		width: 100%;
+		justify-content: flex-start;
+		gap: 12px;
+		padding: 6px 8px;
+		border-left: 2px solid transparent;
+	}
+</style>

package/dist/components/appshell/AppShellSidebar.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { AppShellNavItem } from './types';
+type $$ComponentProps = {
+    brand?: {
+        prefix?: string;
+        suffix?: string;
+    };
+    navItems?: AppShellNavItem[];
+    currentPath?: string;
+    logoutAction?: string;
+    profile?: AppShellNavItem;
+    class?: string;
+};
+declare const AppShellSidebar: import("svelte").Component<$$ComponentProps, {}, "">;
+type AppShellSidebar = ReturnType<typeof AppShellSidebar>;
+export default AppShellSidebar;

package/dist/components/appshell/types.d.ts

@@ -0,0 +1,6 @@
+import type { Snippet } from "svelte";
+export interface AppShellNavItem {
+    href: string;
+    label: string;
+    icon?: Snippet;
+}

package/dist/components/appshell/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/appshell/utils.d.ts

@@ -0,0 +1 @@
+export declare function isPathActive(currentPath: string, href: string): boolean;

package/dist/components/appshell/utils.js

@@ -0,0 +1,3 @@
+export function isPathActive(currentPath, href) {
+    return currentPath === href || currentPath.startsWith(href + "/");
+}

package/dist/components/card/Card.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		variant = 'base',
+		children,
+		class: className = ''
+	}: {
+		variant?: 'base' | 'danger';
+		children: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+<section class="twui-card twui-card-{variant} {className}">
+	{@render children()}
+</section>
+
+<style>
+	.twui-card {
+		display: flex;
+		flex-direction: column;
+		border: 1px solid var(--twui-rule);
+		background: var(--twui-paper-raised);
+	}
+
+	.twui-card-danger {
+		border-color: var(--twui-danger);
+		background: color-mix(in oklab, var(--twui-danger) 8%, var(--twui-paper-raised));
+	}
+</style>

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

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