@tabelhadev/tabelhawebui 0.28.4

package/dist/components/layout/Panel.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		focused = false,
+		toggleable = false,
+		title,
+		defaultOpen = true,
+		children,
+		class: className = ''
+	}: {
+		focused?: boolean;
+		toggleable?: boolean;
+		title?: string;
+		defaultOpen?: boolean;
+		children: Snippet;
+		class?: string;
+	} = $props();
+
+	let open = $state(true);
+	$effect(() => {
+		if (toggleable) open = defaultOpen;
+	});
+</script>
+
+<div class="twui-panel {focused ? 'twui-panel-focused' : ''} {className}">
+	{#if toggleable}
+		<button
+			type="button"
+			class="twui-panel-header"
+			aria-expanded={open}
+			onclick={() => (open = !open)}
+		>
+			<span class="twui-panel-title">{title}</span>
+			<svg
+				class="twui-panel-chevron {open ? 'twui-panel-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}
+			<div class="twui-panel-body">
+				{@render children()}
+			</div>
+		{/if}
+	{:else}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.twui-panel {
+		border: 1px solid var(--twui-rule);
+		background: var(--twui-paper-raised);
+	}
+
+	.twui-panel-focused {
+		border-color: var(--twui-accent);
+	}
+
+	.twui-panel-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 8px;
+		width: 100%;
+		padding: 12px 16px;
+		border: none;
+		border-bottom: 1px solid var(--twui-rule);
+		background: transparent;
+		font-family: var(--twui-font-mono);
+		font-size: 14px;
+		font-weight: 500;
+		text-align: left;
+		color: var(--twui-ink);
+		cursor: pointer;
+	}
+
+	.twui-panel-title {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.twui-panel-chevron {
+		flex-shrink: 0;
+		color: var(--twui-ink-soft);
+		transition: transform 0.15s ease;
+	}
+
+	.twui-panel-chevron-open {
+		transform: rotate(180deg);
+	}
+
+	.twui-panel-body {
+		padding: 16px;
+	}
+</style>

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

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

package/dist/components/layout/Prose.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { children }: { children: Snippet } = $props();
+</script>
+
+<div class="twui-prose">
+	{@render children()}
+</div>
+
+<style>
+	.twui-prose {
+		max-width: none;
+		color: var(--twui-ink);
+		font-family: var(--twui-font-serif, 'Newsreader', serif);
+		font-size: 1.05rem;
+		line-height: 1.625;
+		text-align: justify;
+		hyphens: auto;
+	}
+
+	.twui-prose :global(h1),
+	.twui-prose :global(h2),
+	.twui-prose :global(h3),
+	.twui-prose :global(h4) {
+		color: var(--twui-ink);
+		font-family: var(--twui-font-mono, 'JetBrains Mono', monospace);
+		letter-spacing: -0.02em;
+		line-height: 1.2;
+		margin: 1.6em 0 0.5em;
+	}
+
+	.twui-prose :global(h2)::before {
+		content: '// ';
+		color: var(--twui-ink-faint);
+	}
+
+	.twui-prose :global(p) {
+		margin: 0 0 1em;
+	}
+
+	.twui-prose :global(a) {
+		color: var(--twui-accent-ink);
+		text-decoration: underline;
+		text-underline-offset: 4px;
+		text-decoration-color: var(--twui-accent);
+	}
+
+	.twui-prose :global(ul),
+	.twui-prose :global(ol) {
+		margin: 0 0 1em;
+		padding-left: 1.4em;
+	}
+
+	.twui-prose :global(li) {
+		margin: 0.3em 0;
+	}
+
+	.twui-prose :global(code) {
+		font-family: var(--twui-font-mono, 'JetBrains Mono', monospace);
+		font-size: 0.9em;
+		color: var(--twui-accent-ink);
+		background: color-mix(in oklab, var(--twui-accent) 10%, transparent);
+		padding: 0.1em 0.35em;
+		border-radius: 4px;
+	}
+
+	.twui-prose :global(pre) {
+		background: color-mix(in oklab, var(--twui-ink) 6%, var(--twui-paper));
+		border: 1px solid var(--twui-rule);
+		border-radius: 8px;
+		padding: 1em;
+		overflow: auto;
+		margin: 0 0 1em;
+	}
+
+	.twui-prose :global(pre code) {
+		background: none;
+		padding: 0;
+		color: var(--twui-ink);
+		font-size: 0.85em;
+	}
+
+	.twui-prose :global(blockquote) {
+		margin: 0 0 1em;
+		padding-left: 1em;
+		border-left: 2px solid var(--twui-rule);
+		color: var(--twui-ink-soft);
+	}
+
+	.twui-prose :global(strong) {
+		color: var(--twui-ink);
+		font-weight: 700;
+	}
+
+	.twui-prose :global(hr) {
+		border: none;
+		border-top: 1px solid var(--twui-rule);
+		margin: 1.5em 0;
+	}
+</style>

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

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

package/dist/components/layout/RuleCard.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import type { Snippet, Component } from 'svelte';
+
+	let {
+		icon,
+		title,
+		children,
+		class: className = ''
+	}: {
+		icon?: Component<{ class?: string; strokeWidth?: number }>;
+		title: string;
+		children: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+<div class="twui-rulecard {className}">
+	<div class="twui-rulecard-label">
+		{#if icon}
+			{@const Icon = icon}
+			<Icon class="twui-rulecard-icon" strokeWidth={1.75} />
+		{/if}
+		{title}
+	</div>
+	<div class="twui-rulecard-prose">
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	.twui-rulecard {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		border: 1px solid var(--twui-rule);
+		background: var(--twui-paper-raised);
+		padding: 24px;
+	}
+
+	.twui-rulecard-label {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		font-family: var(--twui-font-mono);
+		font-size: 12px;
+		letter-spacing: 0.025em;
+		text-transform: uppercase;
+		color: var(--twui-ink-soft);
+	}
+
+	.twui-rulecard-icon {
+		width: 16px;
+		height: 16px;
+		color: var(--twui-accent);
+	}
+
+	.twui-rulecard-prose {
+		font-family: var(--twui-font-serif, 'Newsreader', Georgia, serif);
+		font-size: 18px;
+		line-height: 1.625;
+		color: var(--twui-ink);
+	}
+</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet, Component } from 'svelte';
+type $$ComponentProps = {
+    icon?: Component<{
+        class?: string;
+        strokeWidth?: number;
+    }>;
+    title: string;
+    children: Snippet;
+    class?: string;
+};
+declare const RuleCard: Component<$$ComponentProps, {}, "">;
+type RuleCard = ReturnType<typeof RuleCard>;
+export default RuleCard;

package/dist/components/layout/SectionHeading.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	let {
+		eyebrow,
+		title,
+		lead,
+		justify = false,
+		class: className = ''
+	}: {
+		eyebrow: string;
+		title: string;
+		lead?: string;
+		justify?: boolean;
+		class?: string;
+	} = $props();
+</script>
+
+<div class="twui-section-heading {className}">
+	<div class="twui-landing-eyebrow">{eyebrow}</div>
+	<h2 class="twui-section-heading-title">{title}</h2>
+	{#if lead}
+		<p class="twui-section-heading-lead {justify ? 'twui-section-heading-lead-justify' : ''}">{lead}</p>
+	{/if}
+</div>
+
+<style>
+	.twui-landing-eyebrow {
+		font-family: var(--twui-font-mono);
+		font-size: 12px;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: var(--twui-accent);
+	}
+
+	.twui-section-heading-title {
+		margin: 12px 0 0;
+		font-family: var(--twui-font-mono);
+		font-size: 28px;
+		font-weight: 700;
+		letter-spacing: -0.01em;
+		text-wrap: balance;
+		color: var(--twui-ink);
+	}
+
+	.twui-section-heading-lead {
+		margin: 12px 0 0;
+		max-width: 36rem;
+		font-family: var(--twui-font-serif, 'Newsreader', Georgia, serif);
+		font-size: 17px;
+		line-height: 1.6;
+		color: var(--twui-ink-soft);
+	}
+
+	.twui-section-heading-lead-justify {
+		text-align: justify;
+		text-justify: inter-word;
+	}
+</style>

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

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

package/dist/components/layout/StatTile.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import CardRoot from '../card/Card.svelte';
+	import CardContent from '../card/CardContent.svelte';
+
+	let {
+		label,
+		value,
+		href,
+		valueClass = '',
+		footer,
+		class: className = ''
+	}: {
+		label: string;
+		value: string;
+		href?: string;
+		valueClass?: string;
+		footer?: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+<CardRoot class="twui-stat-tile {className}">
+	<CardContent>
+		<p class="twui-stat-tile-label">
+			{#if href}
+				<a href={href} class="twui-stat-tile-label-link">{label}</a>
+			{:else}
+				{label}
+			{/if}
+		</p>
+		<p class="twui-stat-tile-value {valueClass}">
+			{value}
+		</p>
+		{#if footer}
+			<div class="twui-stat-tile-footer">
+				{@render footer()}
+			</div>
+		{/if}
+	</CardContent>
+</CardRoot>
+
+<style>
+	.twui-stat-tile-label {
+		margin: 0;
+		font-family: var(--twui-font-mono);
+		font-size: 0.75rem;
+		color: var(--twui-ink-soft);
+	}
+
+	.twui-stat-tile-label-link {
+		color: inherit;
+		text-decoration: none;
+		transition: color 0.15s ease;
+	}
+
+	.twui-stat-tile-label-link:hover {
+		color: var(--twui-accent);
+	}
+
+	.twui-stat-tile-value {
+		margin-top: 4px;
+		margin-bottom: 0;
+		font-family: var(--twui-font-mono);
+		font-size: 1.25rem;
+		font-weight: 700;
+		color: var(--twui-ink);
+	}
+
+	.twui-stat-tile-footer {
+		margin-top: 4px;
+		font-family: var(--twui-font-mono);
+		font-size: 0.75rem;
+		color: var(--twui-ink-faint);
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    label: string;
+    value: string;
+    href?: string;
+    valueClass?: string;
+    footer?: Snippet;
+    class?: string;
+};
+declare const StatTile: import("svelte").Component<$$ComponentProps, {}, "">;
+type StatTile = ReturnType<typeof StatTile>;
+export default StatTile;

package/dist/components/layout/TerminalWindow.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		title,
+		children,
+		class: className = ''
+	}: {
+		title: string;
+		children: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+<div class="twui-terminal {className}">
+	<div class="twui-terminal-bar">
+		<span class="twui-terminal-dots" aria-hidden="true">
+			<span class="twui-terminal-dot twui-terminal-dot-red"></span>
+			<span class="twui-terminal-dot twui-terminal-dot-yellow"></span>
+			<span class="twui-terminal-dot twui-terminal-dot-green"></span>
+		</span>
+		<span class="twui-terminal-title">{title}</span>
+	</div>
+	<div class="twui-terminal-body">
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	.twui-terminal {
+		border: 1px solid var(--twui-rule);
+		background: var(--twui-paper-raised);
+		overflow: hidden;
+	}
+
+	.twui-terminal-bar {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		padding: 10px 14px;
+		border-bottom: 1px solid var(--twui-rule);
+		background: var(--twui-paper-raised);
+	}
+
+	.twui-terminal-dots {
+		display: flex;
+		gap: 6px;
+	}
+
+	.twui-terminal-dot {
+		width: 10px;
+		height: 10px;
+		border-radius: 9999px;
+	}
+
+	.twui-terminal-dot-red {
+		background: var(--twui-red, var(--twui-latte-red, #d20f39));
+	}
+
+	.twui-terminal-dot-yellow {
+		background: var(--twui-yellow, var(--twui-latte-yellow, #df8e1d));
+	}
+
+	.twui-terminal-dot-green {
+		background: var(--twui-green, var(--twui-latte-green, #40a02b));
+	}
+
+	.twui-terminal-title {
+		font-family: var(--twui-font-mono);
+		font-size: 12px;
+		color: var(--twui-ink-soft);
+	}
+
+	.twui-terminal-body {
+		padding: 16px;
+		background: var(--twui-paper);
+		font-family: var(--twui-font-mono);
+		font-size: 13px;
+		color: var(--twui-ink);
+	}
+</style>

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

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

package/dist/components/layout/Wordmark.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	let {
+		prefix = 'TAbelha',
+		suffix = '',
+		class: className = ''
+	}: {
+		prefix?: string;
+		suffix?: string;
+		class?: string;
+	} = $props();
+</script>
+
+<span class="twui-wordmark {className}">
+	{prefix}<span class="twui-wordmark-accent">{suffix}</span>
+</span>
+
+<style>
+	.twui-wordmark {
+		color: var(--twui-ink);
+		white-space: nowrap;
+	}
+
+	.twui-wordmark-accent {
+		color: var(--twui-accent);
+	}
+</style>

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

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

package/dist/components/list/List.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Checkbox from '../forms/Checkbox.svelte';
+
+	let {
+		selectAll,
+		children,
+		class: className = ''
+	}: {
+		selectAll?: { label: string; checked: boolean; onchange: () => void };
+		children: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+<ul class="twui-list {className}">
+	{#if selectAll}
+		<li class="twui-list-selectall">
+			<Checkbox checked={selectAll.checked} onchange={selectAll.onchange} label={selectAll.label} />
+		</li>
+	{/if}
+	{@render children()}
+</ul>
+
+<style>
+	.twui-list {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+
+	.twui-list-selectall {
+		padding: 4px 12px 8px;
+		margin-bottom: 4px;
+		border-bottom: 1px solid var(--twui-rule);
+	}
+</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    selectAll?: {
+        label: string;
+        checked: boolean;
+        onchange: () => void;
+    };
+    children: Snippet;
+    class?: string;
+};
+declare const List: import("svelte").Component<$$ComponentProps, {}, "">;
+type List = ReturnType<typeof List>;
+export default List;