@tabelhadev/tabelhawebui 0.28.4

package/dist/components/choice/MultiSelect.svelte

@@ -0,0 +1,278 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import type { SelectOption } from '../forms/Select.svelte';
+	import { clickOutside } from '../../actions/click-outside';
+
+	let {
+		options = [],
+		value = $bindable([]),
+		label,
+		name,
+		disabled = false,
+		placeholder = 'Selecione...',
+		filter = false,
+		filterPlaceholder = 'Buscar...',
+		'aria-label': ariaLabel,
+		class: className = '',
+		...rest
+	}: {
+		options?: SelectOption[];
+		value?: string[];
+		label?: string;
+		name?: string;
+		disabled?: boolean;
+		placeholder?: string;
+		filter?: boolean;
+		filterPlaceholder?: string;
+		class?: string;
+	} & { 'aria-label'?: string; id?: string } = $props();
+
+	let open = $state(false);
+	let rootEl = $state<HTMLDivElement | undefined>();
+	let query = $state('');
+
+	const selected = $derived(options.filter((o) => value.includes(o.value)));
+	const visibleOptions = $derived(
+		filter && query.trim()
+			? options.filter((o) => o.label.toLowerCase().includes(query.trim().toLowerCase()))
+			: options
+	);
+
+	function toggle() {
+		if (disabled) return;
+		open = !open;
+		if (open) query = '';
+	}
+
+	function toggleOption(option: SelectOption) {
+		if (option.disabled) return;
+		value = value.includes(option.value)
+			? value.filter((v) => v !== option.value)
+			: [...value, option.value];
+	}
+</script>
+
+<div
+	class="twui-multiselect {className}"
+	bind:this={rootEl}
+	use:clickOutside={() => (open = false)}
+>
+	<button
+		type="button"
+		class="twui-multiselect-trigger"
+		{...rest}
+		aria-label={ariaLabel ?? label}
+		disabled={disabled}
+		aria-haspopup="listbox"
+		aria-expanded={open}
+		onclick={toggle}
+	>
+		<span class="twui-multiselect-value {selected.length ? '' : 'twui-multiselect-placeholder'}">
+			{selected.length ? selected.map((o) => o.label).join(', ') : placeholder}
+		</span>
+		<svg
+			class="twui-multiselect-chevron {open ? 'twui-multiselect-chevron-open' : ''}"
+			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="m6 9 6 6 6-6" /></svg>
+	</button>
+
+	{#if name}
+		<input type="hidden" {name} value={value.join(',')} />
+	{/if}
+
+	{#if open}
+		<div
+			class="twui-multiselect-popover"
+			role="listbox"
+			aria-multiselectable="true"
+			transition:fade={{ duration: 100 }}
+		>
+			{#if filter}
+				<div class="twui-multiselect-filter">
+					<input
+						type="text"
+						class="twui-multiselect-filter-input"
+						placeholder={filterPlaceholder}
+						bind:value={query}
+						aria-label={filterPlaceholder}
+					/>
+				</div>
+			{/if}
+			{#if visibleOptions.length > 0}
+				{#each visibleOptions as option (option.value)}
+					<button
+						type="button"
+						role="option"
+						aria-selected={value.includes(option.value)}
+						class="twui-multiselect-option {value.includes(option.value) ? 'twui-multiselect-option-selected' : ''}"
+						disabled={option.disabled}
+						onclick={() => toggleOption(option)}
+					>
+						<span class="twui-multiselect-check" aria-hidden="true">{value.includes(option.value) ? '✓' : ''}</span>
+						{option.label}
+					</button>
+				{/each}
+			{:else}
+				<div class="twui-multiselect-empty">Nenhum resultado</div>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.twui-multiselect {
+		position: relative;
+		width: 100%;
+	}
+
+	.twui-multiselect-trigger {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 8px;
+		width: 100%;
+		padding: 8px 12px;
+		border: 1px solid var(--twui-rule);
+		background: var(--twui-paper);
+		font-family: var(--twui-font-mono);
+		font-size: 14px;
+		text-align: left;
+		color: var(--twui-ink);
+		cursor: pointer;
+		transition:
+			border-color 0.15s ease,
+			box-shadow 0.15s ease;
+	}
+
+	.twui-multiselect-trigger:focus-visible {
+		border-color: var(--twui-accent);
+	}
+
+	.twui-multiselect-trigger:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.twui-multiselect-value {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.twui-multiselect-placeholder {
+		color: var(--twui-ink-faint);
+	}
+
+	.twui-multiselect-chevron {
+		flex-shrink: 0;
+		color: var(--twui-ink-soft);
+		transition: transform 0.15s ease;
+	}
+
+	.twui-multiselect-chevron-open {
+		transform: rotate(180deg);
+	}
+
+	.twui-multiselect-popover {
+		position: absolute;
+		top: calc(100% + 4px);
+		right: 0;
+		left: 0;
+		z-index: 50;
+		max-height: 240px;
+		overflow-y: auto;
+		border: 1px solid var(--twui-rule);
+		background: var(--twui-paper-raised);
+		box-shadow: var(--twui-shadow-offset, 3px 3px 0 0 var(--twui-rule));
+		padding: 4px;
+	}
+
+	.twui-multiselect-filter {
+		padding: 4px 4px 8px;
+		border-bottom: 1px solid var(--twui-rule);
+		margin-bottom: 4px;
+	}
+
+	.twui-multiselect-filter-input {
+		width: 100%;
+		padding: 6px 8px;
+		border: 1px solid var(--twui-rule);
+		background: var(--twui-paper);
+		font-family: var(--twui-font-mono);
+		font-size: 13px;
+		color: var(--twui-ink);
+		outline: none;
+	}
+
+	.twui-multiselect-filter-input::placeholder {
+		color: var(--twui-ink-faint);
+	}
+
+	.twui-multiselect-filter-input:focus-visible {
+		border-color: var(--twui-accent);
+	}
+
+	.twui-multiselect-option {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		width: 100%;
+		padding: 6px 10px;
+		border: none;
+		background: transparent;
+		font-family: var(--twui-font-mono);
+		font-size: 13px;
+		text-align: left;
+		color: var(--twui-ink);
+		cursor: pointer;
+	}
+
+	.twui-multiselect-option:hover {
+		background: var(--twui-accent-soft);
+		color: var(--twui-accent);
+	}
+
+	.twui-multiselect-option-selected {
+		color: var(--twui-accent);
+		font-weight: 500;
+	}
+
+	.twui-multiselect-option:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	.twui-multiselect-check {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 14px;
+		height: 14px;
+		flex-shrink: 0;
+		border: 1px solid var(--twui-rule);
+		border-radius: 2px;
+		font-size: 10px;
+		line-height: 1;
+	}
+
+	.twui-multiselect-option-selected .twui-multiselect-check {
+		border-color: var(--twui-accent);
+		background: var(--twui-accent);
+		color: var(--twui-paper);
+	}
+
+	.twui-multiselect-empty {
+		padding: 8px 10px;
+		font-family: var(--twui-font-mono);
+		font-size: 13px;
+		color: var(--twui-ink-faint);
+	}
+</style>

package/dist/components/choice/MultiSelect.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { SelectOption } from '../forms/Select.svelte';
+type $$ComponentProps = {
+    options?: SelectOption[];
+    value?: string[];
+    label?: string;
+    name?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    filter?: boolean;
+    filterPlaceholder?: string;
+    class?: string;
+} & {
+    'aria-label'?: string;
+    id?: string;
+};
+declare const MultiSelect: import("svelte").Component<$$ComponentProps, {}, "value">;
+type MultiSelect = ReturnType<typeof MultiSelect>;
+export default MultiSelect;

package/dist/components/choice/Rating.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	let {
+		value = $bindable(0),
+		max = 5,
+		readonly = false,
+		cancel = false,
+		cancelLabel = 'Cancelar avaliação',
+		label = 'Avaliação',
+		class: className = ''
+	}: {
+		value?: number;
+		max?: number;
+		readonly?: boolean;
+		cancel?: boolean;
+		cancelLabel?: string;
+		label?: string;
+		class?: string;
+	} = $props();
+</script>
+
+<div class="twui-rating {className}" role="radiogroup" aria-label={label}>
+	{#if cancel}
+		<button
+			type="button"
+			class="twui-rating-cancel"
+			aria-label={cancelLabel}
+			onclick={() => (value = 0)}
+		>×</button>
+	{/if}
+	{#each Array(max) as _, i (i)}
+		<button
+			type="button"
+			class="twui-rating-star {i < value ? 'twui-rating-star-on' : ''}"
+			role="radio"
+			aria-checked={i < value}
+			aria-label={`${i + 1} de ${max}`}
+			disabled={readonly}
+			onclick={() => (value = i + 1)}
+		>★</button>
+	{/each}
+</div>
+
+<style>
+	.twui-rating {
+		display: inline-flex;
+		align-items: center;
+		gap: 2px;
+	}
+
+	.twui-rating-star,
+	.twui-rating-cancel {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 24px;
+		height: 24px;
+		padding: 0;
+		border: none;
+		background: transparent;
+		font-size: 16px;
+		line-height: 1;
+		color: var(--twui-ink-faint);
+		cursor: pointer;
+		transition: color 0.15s ease;
+	}
+
+	.twui-rating-star:hover:not(:disabled) {
+		color: var(--twui-accent);
+	}
+
+	.twui-rating-star-on {
+		color: var(--twui-accent);
+	}
+
+	.twui-rating-cancel {
+		color: var(--twui-ink-faint);
+		font-size: 15px;
+		margin-right: 4px;
+	}
+
+	.twui-rating:has(.twui-rating-star:focus-visible),
+	.twui-rating:has(.twui-rating-cancel:focus-visible) {
+		outline: 2px solid var(--twui-accent);
+		outline-offset: 2px;
+	}
+
+	.twui-rating-star:disabled {
+		opacity: 0.6;
+		cursor: default;
+	}
+</style>

package/dist/components/choice/Rating.svelte.d.ts

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    value?: number;
+    max?: number;
+    readonly?: boolean;
+    cancel?: boolean;
+    cancelLabel?: string;
+    label?: string;
+    class?: string;
+};
+declare const Rating: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Rating = ReturnType<typeof Rating>;
+export default Rating;

package/dist/components/choice/Toggle.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	let {
+		class: className = '',
+		checked = $bindable(false),
+		name,
+		value,
+		disabled = false,
+		invalid = false,
+		label,
+		'aria-label': ariaLabel,
+		...rest
+	}: HTMLInputAttributes & {
+		checked?: boolean;
+		name?: string;
+		value?: string;
+		disabled?: boolean;
+		invalid?: boolean;
+		label?: string;
+	} = $props();
+</script>
+
+<label class="twui-toggle {disabled ? 'twui-toggle-disabled' : ''} {className}">
+	<input
+		{...rest}
+		type="checkbox"
+		{name}
+		{value}
+		{disabled}
+		checked={checked}
+		onchange={(e) => (checked = e.currentTarget.checked)}
+		class="twui-toggle-input"
+		role="switch"
+		aria-checked={checked}
+		aria-invalid={invalid}
+		aria-label={ariaLabel ?? label}
+	/>
+	<span class="twui-toggle-track {invalid ? 'twui-toggle-invalid' : ''}" aria-hidden="true">
+		<span class="twui-toggle-knob"></span>
+	</span>
+	{#if label}
+		<span class="twui-toggle-label">{label}</span>
+	{/if}
+</label>
+
+<style>
+	.twui-toggle {
+		display: inline-flex;
+		align-items: center;
+		gap: 8px;
+		cursor: pointer;
+		font-family: var(--twui-font-mono);
+		font-size: 14px;
+		color: var(--twui-ink);
+	}
+
+	.twui-toggle-input {
+		position: absolute;
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	.twui-toggle-track {
+		position: relative;
+		width: 34px;
+		height: 18px;
+		flex-shrink: 0;
+		border: 1px solid var(--twui-rule);
+		background: var(--twui-paper);
+		border-radius: 9999px;
+		transition:
+			border-color 0.15s ease,
+			background 0.15s ease;
+	}
+
+	.twui-toggle-knob {
+		position: absolute;
+		top: 2px;
+		left: 2px;
+		width: 12px;
+		height: 12px;
+		border-radius: 9999px;
+		background: var(--twui-ink-soft);
+		transition:
+			transform 0.15s ease,
+			background 0.15s ease;
+	}
+
+	.twui-toggle-input:checked + .twui-toggle-track {
+		border-color: var(--twui-accent);
+		background: var(--twui-accent);
+	}
+
+	.twui-toggle-input:checked + .twui-toggle-track .twui-toggle-knob {
+		transform: translateX(16px);
+		background: var(--twui-paper);
+	}
+
+	.twui-toggle:has(.twui-toggle-input:focus-visible) .twui-toggle-track {
+		box-shadow: 0 0 0 2px var(--twui-accent-soft);
+	}
+
+	.twui-toggle-invalid {
+		border-color: var(--twui-danger);
+	}
+
+	.twui-toggle-disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+</style>

package/dist/components/choice/Toggle.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLInputAttributes & {
+    checked?: boolean;
+    name?: string;
+    value?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    label?: string;
+};
+declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "checked">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

package/dist/components/feedback/Badge.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		variant = 'primary',
+		children,
+		class: className = ''
+	}: {
+		variant?: 'primary' | 'secondary' | 'outline' | 'success' | 'danger' | 'info' | 'warn';
+		children: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+<span class="twui-badge twui-badge-{variant} {className}">
+	[&nbsp;{@render children()}&nbsp;]
+</span>
+
+<style>
+	.twui-badge {
+		display: inline-flex;
+		align-items: center;
+		padding: 2px 6px;
+		border: 1px solid var(--twui-rule);
+		font-family: var(--twui-font-mono);
+		font-size: 12px;
+		color: var(--twui-ink-soft);
+		line-height: 1.4;
+	}
+
+	.twui-badge-primary {
+		background: color-mix(in oklab, var(--twui-accent) 12%, transparent);
+		color: var(--twui-accent);
+	}
+
+	.twui-badge-secondary {
+		background: var(--twui-rule);
+		color: var(--twui-ink);
+	}
+
+	.twui-badge-outline {
+		border-color: var(--twui-ink-soft);
+		background: transparent;
+		color: var(--twui-ink);
+	}
+
+	.twui-badge-success {
+		background: color-mix(in oklab, var(--twui-signal, #22c55e) 10%, transparent);
+		color: var(--twui-signal, #22c55e);
+	}
+
+	.twui-badge-danger {
+		background: color-mix(in oklab, var(--twui-danger) 10%, transparent);
+		color: var(--twui-danger);
+	}
+
+	.twui-badge-info {
+		background: color-mix(in oklab, var(--twui-accent) 10%, transparent);
+		color: var(--twui-accent);
+	}
+
+	.twui-badge-warn {
+		background: color-mix(in oklab, var(--twui-warning, #f59e0b) 10%, transparent);
+		color: var(--twui-warning, #f59e0b);
+	}
+</style>

package/dist/components/feedback/Badge.svelte.d.ts

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

package/dist/components/feedback/ErrorPage.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		status,
+		title,
+		description = '',
+		homeHref = '/',
+		homeLabel = 'Voltar ao início',
+		actions,
+		class: className = ''
+	}: {
+		status: number;
+		title: string;
+		description?: string;
+		homeHref?: string;
+		homeLabel?: string;
+		actions?: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+<div class="twui-error-page {className}">
+	<div class="twui-error-code" aria-hidden="true">{status}</div>
+	<h1 class="twui-error-title">{title}</h1>
+	{#if description}
+		<p class="twui-error-description">{description}</p>
+	{/if}
+	<div class="twui-error-actions">
+		<a class="twui-error-home" href={homeHref}>{homeLabel}</a>
+		{#if actions}
+			{@render actions()}
+		{/if}
+	</div>
+</div>
+
+<style>
+	.twui-error-page {
+		display: flex;
+		min-height: 100svh;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 8px;
+		padding: 24px;
+		text-align: center;
+		background: var(--twui-paper);
+	}
+
+	.twui-error-code {
+		font-family: var(--twui-font-mono);
+		font-size: 88px;
+		font-weight: 700;
+		line-height: 1;
+		color: var(--twui-accent);
+	}
+
+	.twui-error-title {
+		margin: 0;
+		font-family: var(--twui-font-mono);
+		font-size: 16px;
+		font-weight: 600;
+		color: var(--twui-ink);
+	}
+
+	.twui-error-description {
+		margin: 0;
+		max-width: 420px;
+		font-family: var(--twui-font-mono);
+		font-size: 13px;
+		color: var(--twui-ink-soft);
+	}
+
+	.twui-error-actions {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 8px;
+		margin-top: 12px;
+	}
+
+	.twui-error-home {
+		display: inline-flex;
+		align-items: center;
+		border: 1px solid var(--twui-accent);
+		background: var(--twui-accent);
+		padding: 8px 16px;
+		font-family: var(--twui-font-mono);
+		font-size: 13px;
+		font-weight: 500;
+		color: var(--twui-paper);
+		text-decoration: none;
+		cursor: pointer;
+	}
+
+	.twui-error-home:hover {
+		opacity: 0.85;
+	}
+</style>

package/dist/components/feedback/ErrorPage.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    status: number;
+    title: string;
+    description?: string;
+    homeHref?: string;
+    homeLabel?: string;
+    actions?: Snippet;
+    class?: string;
+};
+declare const ErrorPage: import("svelte").Component<$$ComponentProps, {}, "">;
+type ErrorPage = ReturnType<typeof ErrorPage>;
+export default ErrorPage;