@jelinek/ui 0.5.3 → 0.9.1

package/dist/components/commerce/Pagination.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	interface Props {
+		/** Aktuální stránka (od 1). */
+		page: number;
+		/** Celkový počet stránek. */
+		count: number;
+		/** Zavolá se s číslem cílové stránky. */
+		onchange?: (page: number) => void;
+		/** Když je zadané, čísla se vykreslí jako odkazy (lepší pro SEO výpisů). */
+		href?: (page: number) => string;
+		class?: string;
+	}
+
+	let { page, count, onchange, href, class: className }: Props = $props();
+
+	// Window: always page 1 and the last page, the current page with one
+	// neighbour each side, ellipsis for the gaps. Seven slots at most, so the
+	// row never wraps awkwardly on a phone.
+	const items = $derived.by((): Array<number | '…'> => {
+		if (count <= 7) return Array.from({ length: count }, (_, i) => i + 1);
+		const middle = [page - 1, page, page + 1].filter((n) => n > 1 && n < count);
+		const out: Array<number | '…'> = [1];
+		if ((middle[0] ?? count) > 2) out.push('…');
+		out.push(...middle);
+		if ((middle[middle.length - 1] ?? 1) < count - 1) out.push('…');
+		out.push(count);
+		return out;
+	});
+
+	// 44px targets like the demo's gallery arrows; resting border-fg-muted2 /
+	// hover black follows the neutral-emphasis rule (colour is for errors).
+	// The current page is a filled JELINEK-BLACK square — same emphasis
+	// language as the active form frame, flips to light in dark mode for free.
+	const CELL =
+		'inline-flex h-11 min-w-11 items-center justify-center rounded-button border px-1 ' +
+		'font-secondary text-[0.98rem] text-fg [font-variant-numeric:tabular-nums] ' +
+		'transition-colors duration-[var(--dur-base)] ease-[var(--ease)]';
+	const IDLE = 'cursor-pointer border-fg-muted2 bg-surface hover:border-jelinek-black';
+	const CURRENT = 'border-jelinek-black bg-jelinek-black font-bold text-fg-inverse';
+	const ARROW_DISABLED = 'cursor-not-allowed border-border-subtle text-fg-muted2';
+
+	const go = (n: number) => {
+		if (n >= 1 && n <= count && n !== page) onchange?.(n);
+	};
+</script>
+
+{#snippet chevron(dir: 'prev' | 'next')}
+	<svg
+		viewBox="0 0 24 24"
+		class="size-4"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		aria-hidden="true"
+	>
+		<path d={dir === 'prev' ? 'm15 18-6-6 6-6' : 'm9 18 6-6-6-6'} />
+	</svg>
+{/snippet}
+
+<nav aria-label="Stránkování" class={cn('flex flex-wrap items-center gap-2', className)}>
+	{#if href && page > 1}
+		<a href={href(page - 1)} aria-label="Předchozí stránka" class="{CELL} {IDLE}">
+			{@render chevron('prev')}
+		</a>
+	{:else}
+		<button
+			type="button"
+			aria-label="Předchozí stránka"
+			disabled={page <= 1}
+			class={cn(CELL, page <= 1 ? ARROW_DISABLED : IDLE)}
+			onclick={() => go(page - 1)}
+		>
+			{@render chevron('prev')}
+		</button>
+	{/if}
+
+	{#each items as item, i (typeof item === 'number' ? item : `gap-${i}`)}
+		{#if item === '…'}
+			<span aria-hidden="true" class="px-1 font-secondary text-fg-muted1">…</span>
+		{:else if item === page}
+			<!-- The current page is not a control — nothing to click, just where
+			     you are. aria-current still names it for assistive tech. -->
+			<span aria-current="page" class="{CELL} {CURRENT}">{item}</span>
+		{:else if href}
+			<a href={href(item)} aria-label="Stránka {item}" class="{CELL} {IDLE}">{item}</a>
+		{:else}
+			<button
+				type="button"
+				aria-label="Stránka {item}"
+				class="{CELL} {IDLE}"
+				onclick={() => go(item)}>{item}</button
+			>
+		{/if}
+	{/each}
+
+	{#if href && page < count}
+		<a href={href(page + 1)} aria-label="Další stránka" class="{CELL} {IDLE}">
+			{@render chevron('next')}
+		</a>
+	{:else}
+		<button
+			type="button"
+			aria-label="Další stránka"
+			disabled={page >= count}
+			class={cn(CELL, page >= count ? ARROW_DISABLED : IDLE)}
+			onclick={() => go(page + 1)}
+		>
+			{@render chevron('next')}
+		</button>
+	{/if}
+</nav>

package/dist/components/commerce/Pagination.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    /** Aktuální stránka (od 1). */
+    page: number;
+    /** Celkový počet stránek. */
+    count: number;
+    /** Zavolá se s číslem cílové stránky. */
+    onchange?: (page: number) => void;
+    /** Když je zadané, čísla se vykreslí jako odkazy (lepší pro SEO výpisů). */
+    href?: (page: number) => string;
+    class?: string;
+}
+declare const Pagination: import("svelte").Component<Props, {}, "">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/components/commerce/PriceDisplay.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { formatPrice } from './money.js';
+
+	interface Props {
+		price: number;
+		/** Struck-through original — renders only when higher than `price`. */
+		originalPrice?: number;
+		/** Prefix the price with the „od“ qualifier (configurable products). */
+		from?: boolean;
+		size?: 'sm' | 'md' | 'lg';
+		currency?: string;
+		/** Text of the `from` qualifier. */
+		fromLabel?: string;
+	}
+
+	let {
+		price,
+		originalPrice,
+		from = false,
+		size = 'md',
+		currency,
+		fromLabel = 'od'
+	}: Props = $props();
+
+	const sizes = {
+		sm: 'text-(length:--step0)',
+		md: 'text-(length:--step2)',
+		lg: 'text-(length:--step4)'
+	};
+</script>
+
+<span class="inline-flex items-baseline gap-2 font-secondary font-bold {sizes[size]}">
+	{#if from}<span
+			class="text-fg-muted1 text-(length:--step-down2) font-light tracking-wide uppercase"
+			>{fromLabel}</span
+		>{/if}
+	<span>{formatPrice(price, currency)}</span>
+	{#if originalPrice && originalPrice > price}
+		<s class="text-fg-muted2 text-[0.7em] font-light">{formatPrice(originalPrice, currency)}</s>
+	{/if}
+</span>

package/dist/components/commerce/PriceDisplay.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    price: number;
+    /** Struck-through original — renders only when higher than `price`. */
+    originalPrice?: number;
+    /** Prefix the price with the „od“ qualifier (configurable products). */
+    from?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    currency?: string;
+    /** Text of the `from` qualifier. */
+    fromLabel?: string;
+}
+declare const PriceDisplay: import("svelte").Component<Props, {}, "">;
+type PriceDisplay = ReturnType<typeof PriceDisplay>;
+export default PriceDisplay;

package/dist/components/commerce/ProductHeader.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	// Name/price/stock/CTA block for the PDP. Two modes, mirroring matrace-fe's
+	// own Product/ProductHeader.svelte precedent: `compact` (rendered once,
+	// mobile-only, above the sticky gallery) shows identity + price/stock at a
+	// smaller size, but no CTA — the buy button stays desktop-only (the full
+	// header further down the page) and mobile's own sticky bar, both reachable
+	// without duplicating the primary action here.
+	import Button from '../Button.svelte';
+	import PriceDisplay from './PriceDisplay.svelte';
+	import RatingStars from './RatingStars.svelte';
+	import StockBadge from './StockBadge.svelte';
+	import { formatPrice } from './money.js';
+
+	interface Props {
+		name: string;
+		subtitle?: string;
+		price: number;
+		stock: 'in-stock' | 'on-order' | 'sold-out' | 'lead';
+		/** Localized/lead-time stock text — see StockBadge. */
+		stockLabel?: string;
+		rating?: { value: number; count: number };
+		compact?: boolean;
+		onaddtocart: () => void;
+		busy?: boolean;
+		/** CTA text; the formatted price is appended after an em-dash. */
+		addLabel?: string;
+		currency?: string;
+	}
+
+	let {
+		name,
+		subtitle,
+		price,
+		stock,
+		stockLabel,
+		rating,
+		compact = false,
+		onaddtocart,
+		busy = false,
+		addLabel = 'Přidat do košíku',
+		currency
+	}: Props = $props();
+</script>
+
+<div class="flex flex-col gap-3 font-secondary font-light">
+	<h1 class="text-(length:--step6) leading-tight font-bold">{name}</h1>
+	{#if subtitle}<p class="text-fg-muted1 text-(length:--step1)">{subtitle}</p>{/if}
+	{#if rating && rating.count > 0}
+		<RatingStars rating={rating.value} count={rating.count} />
+	{/if}
+
+	<div class="mt-1 flex flex-wrap items-center gap-3">
+		<PriceDisplay {price} {currency} size={compact ? 'md' : 'lg'} />
+		<StockBadge state={stock} label={stockLabel} {compact} />
+	</div>
+
+	{#if !compact}
+		<Button color="brown" fullWidth onclick={onaddtocart} disabled={busy} class="mt-1">
+			{addLabel} — {formatPrice(price, currency)}
+		</Button>
+	{/if}
+</div>

package/dist/components/commerce/ProductHeader.svelte.d.ts

@@ -0,0 +1,21 @@
+interface Props {
+    name: string;
+    subtitle?: string;
+    price: number;
+    stock: 'in-stock' | 'on-order' | 'sold-out' | 'lead';
+    /** Localized/lead-time stock text — see StockBadge. */
+    stockLabel?: string;
+    rating?: {
+        value: number;
+        count: number;
+    };
+    compact?: boolean;
+    onaddtocart: () => void;
+    busy?: boolean;
+    /** CTA text; the formatted price is appended after an em-dash. */
+    addLabel?: string;
+    currency?: string;
+}
+declare const ProductHeader: import("svelte").Component<Props, {}, "">;
+type ProductHeader = ReturnType<typeof ProductHeader>;
+export default ProductHeader;

package/dist/components/commerce/ProductStickyBar.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	// Condensed name/price/stock/CTA bar, shown once the full ProductHeader
+	// scrolls out of view (the page wires the IntersectionObserver and passes
+	// `visible`). Purely presentational: sits on top of the shared StickyBar
+	// primitive, which owns fixed positioning under the kit header and the
+	// glass chrome.
+	import Button from '../Button.svelte';
+	import PriceDisplay from './PriceDisplay.svelte';
+	import StickyBar from './StickyBar.svelte';
+	import StockBadge from './StockBadge.svelte';
+
+	interface Props {
+		name: string;
+		price: number;
+		stock: 'in-stock' | 'on-order' | 'sold-out' | 'lead';
+		stockLabel?: string;
+		visible: boolean;
+		onaddtocart: () => void;
+		busy?: boolean;
+		addLabel?: string;
+		currency?: string;
+	}
+
+	let {
+		name,
+		price,
+		stock,
+		stockLabel,
+		visible,
+		onaddtocart,
+		busy = false,
+		addLabel = 'Přidat do košíku',
+		currency
+	}: Props = $props();
+</script>
+
+<StickyBar {visible}>
+	<p class="min-w-0 flex-1 truncate font-bold">{name}</p>
+	<StockBadge state={stock} label={stockLabel} compact />
+	<PriceDisplay {price} {currency} size="md" />
+	<Button color="brown" onclick={onaddtocart} disabled={busy}>{addLabel}</Button>
+</StickyBar>

package/dist/components/commerce/ProductStickyBar.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    name: string;
+    price: number;
+    stock: 'in-stock' | 'on-order' | 'sold-out' | 'lead';
+    stockLabel?: string;
+    visible: boolean;
+    onaddtocart: () => void;
+    busy?: boolean;
+    addLabel?: string;
+    currency?: string;
+}
+declare const ProductStickyBar: import("svelte").Component<Props, {}, "">;
+type ProductStickyBar = ReturnType<typeof ProductStickyBar>;
+export default ProductStickyBar;

package/dist/components/commerce/ProductTabs.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	// Description / parameters / benefits switcher for the PDP, on kit Tabs/Tab.
+	// Each tab renders only when its content exists — a product with no benefits
+	// never shows an empty „Benefity“ tab, and the whole component renders
+	// nothing when all three are empty.
+	import Tab from '../Tab.svelte';
+	import Tabs from '../Tabs.svelte';
+
+	interface Props {
+		/** Sanitized HTML (sanitize server-side!) — never author-controlled raw input. */
+		description?: string;
+		parameters?: { label: string; value: string }[];
+		benefits?: string[];
+		/** Localized tab captions; Czech defaults. */
+		labels?: { description?: string; parameters?: string; benefits?: string };
+	}
+
+	let { description, parameters, benefits, labels }: Props = $props();
+
+	type TabKey = 'description' | 'parameters' | 'benefits';
+
+	let availableTabs = $derived(
+		(
+			[
+				description ? 'description' : null,
+				parameters && parameters.length > 0 ? 'parameters' : null,
+				benefits && benefits.length > 0 ? 'benefits' : null
+			] as (TabKey | null)[]
+		).filter((tab): tab is TabKey => tab !== null)
+	);
+
+	// Tabs' `value` is a plain bindable string (not typed to our TabKey union),
+	// so the raw binding target stays a string and every read narrows it
+	// against availableTabs.
+	let active = $state('');
+
+	// Keep the active tab valid as content availability changes (e.g. the
+	// description loads after the initial render) — default to the first
+	// available tab whenever the current pick is gone.
+	$effect(() => {
+		if (!availableTabs.includes(active as TabKey)) {
+			active = availableTabs[0] ?? '';
+		}
+	});
+
+	const caption = $derived({
+		description: labels?.description ?? 'Popis',
+		parameters: labels?.parameters ?? 'Parametry',
+		benefits: labels?.benefits ?? 'Benefity'
+	});
+</script>
+
+{#if availableTabs.length > 0}
+	<div>
+		<Tabs bind:value={active}>
+			{#each availableTabs as tab (tab)}
+				<Tab value={tab}>{caption[tab]}</Tab>
+			{/each}
+		</Tabs>
+
+		<div class="mt-5">
+			{#if active === 'description' && description}
+				<!-- font-normal pinned: Archer has no 300 cut, and a font-light
+				     ancestor (the guide's Demo panel) would otherwise substitute. -->
+				<div class="font-(family-name:--font-serif) font-normal text-(length:--step1) leading-relaxed">
+					<!-- eslint-disable-next-line svelte/no-at-html-tags -- documented prop contract: sanitized server-side, never author-controlled raw HTML. -->
+					{@html description}
+				</div>
+			{:else if active === 'parameters' && parameters}
+				<dl class="divide-border-subtle divide-y">
+					{#each parameters as parameter, index (`${index}-${parameter.label}-${parameter.value}`)}
+						<div class="flex items-baseline justify-between gap-4 py-2.5">
+							<dt class="text-fg-muted1 text-(length:--step-down1)">{parameter.label}</dt>
+							<dd class="text-right font-medium">{parameter.value}</dd>
+						</div>
+					{/each}
+				</dl>
+			{:else if active === 'benefits' && benefits}
+				<ul class="space-y-3 text-(length:--step-down1) leading-6">
+					{#each benefits as benefit (benefit)}
+						<li>{benefit}</li>
+					{/each}
+				</ul>
+			{/if}
+		</div>
+	</div>
+{/if}

package/dist/components/commerce/ProductTabs.svelte.d.ts

@@ -0,0 +1,18 @@
+interface Props {
+    /** Sanitized HTML (sanitize server-side!) — never author-controlled raw input. */
+    description?: string;
+    parameters?: {
+        label: string;
+        value: string;
+    }[];
+    benefits?: string[];
+    /** Localized tab captions; Czech defaults. */
+    labels?: {
+        description?: string;
+        parameters?: string;
+        benefits?: string;
+    };
+}
+declare const ProductTabs: import("svelte").Component<Props, {}, "">;
+type ProductTabs = ReturnType<typeof ProductTabs>;
+export default ProductTabs;

package/dist/components/commerce/QuantityStepper.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	interface Props {
+		value: number;
+		min?: number;
+		max?: number;
+		disabled?: boolean;
+		onchange: (value: number) => void;
+		/** Accessible labels of the − / + buttons. */
+		decreaseLabel?: string;
+		increaseLabel?: string;
+	}
+
+	let {
+		value,
+		min = 1,
+		max,
+		disabled = false,
+		onchange,
+		decreaseLabel = 'Snížit množství',
+		increaseLabel = 'Zvýšit množství'
+	}: Props = $props();
+</script>
+
+<div class="rounded-button border-border-subtle inline-flex items-center border font-secondary">
+	<button
+		type="button"
+		aria-label={decreaseLabel}
+		disabled={disabled || value <= min}
+		class="text-fg-muted1 hover:text-fg grid size-9 place-items-center disabled:opacity-40"
+		onclick={() => onchange(value - 1)}
+	>
+		<svg viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M5 12h14" /></svg>
+	</button>
+	<span class="min-w-8 text-center font-medium tabular-nums">{value}</span>
+	<button
+		type="button"
+		aria-label={increaseLabel}
+		disabled={disabled || (max !== undefined && value >= max)}
+		class="text-fg-muted1 hover:text-fg grid size-9 place-items-center disabled:opacity-40"
+		onclick={() => onchange(value + 1)}
+	>
+		<svg viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
+	</button>
+</div>

package/dist/components/commerce/QuantityStepper.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    value: number;
+    min?: number;
+    max?: number;
+    disabled?: boolean;
+    onchange: (value: number) => void;
+    /** Accessible labels of the − / + buttons. */
+    decreaseLabel?: string;
+    increaseLabel?: string;
+}
+declare const QuantityStepper: import("svelte").Component<Props, {}, "">;
+type QuantityStepper = ReturnType<typeof QuantityStepper>;
+export default QuantityStepper;

package/dist/components/commerce/RatingStars.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	interface Props {
+		/** 0–5, fractions paint a partial star. */
+		rating: number;
+		/** Review count printed after the stars. */
+		count?: number;
+	}
+
+	let { rating, count }: Props = $props();
+
+	// $props.id() instead of Math.random(): stable across SSR + hydration, so
+	// the gradient defs and their url(#…) references cannot mismatch.
+	const uid = $props.id();
+	const stars = $derived(
+		[1, 2, 3, 4, 5].map((i) => (rating >= i ? 1 : rating > i - 1 ? rating - (i - 1) : 0))
+	);
+</script>
+
+<span class="inline-flex items-center gap-1" role="img" aria-label="{rating.toFixed(1)} z 5">
+	{#each stars as fill, i (i)}
+		<svg viewBox="0 0 24 24" class="size-4">
+			<defs
+				><linearGradient id="{uid}-{i}"
+					><stop offset="{fill * 100}%" stop-color="var(--JELINEK-BROWN)" /><stop
+						offset="{fill * 100}%"
+						stop-color="var(--border-subtle)"
+					/></linearGradient
+				></defs
+			>
+			<path
+				fill="url(#{uid}-{i})"
+				d="M12 2l2.9 6.26 6.6.56-5 4.44 1.5 6.5L12 16.3 5.99 19.76l1.5-6.5-5-4.44 6.6-.56z"
+			/>
+		</svg>
+	{/each}
+	{#if count !== undefined}<span class="text-fg-muted1 font-secondary font-light text-(length:--step-down1) ml-1"
+			>({count})</span
+		>{/if}
+</span>

package/dist/components/commerce/RatingStars.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    /** 0–5, fractions paint a partial star. */
+    rating: number;
+    /** Review count printed after the stars. */
+    count?: number;
+}
+declare const RatingStars: import("svelte").Component<Props, {}, "">;
+type RatingStars = ReturnType<typeof RatingStars>;
+export default RatingStars;

package/dist/components/commerce/SearchField.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/cn.js';
+
+	interface Props {
+		value?: string;
+		/** Popisek pro čtečky (pole nemá viditelný label). */
+		label?: string;
+		placeholder?: string;
+		/** Zavolá se při odeslání (Enter) s aktuálním dotazem. */
+		onsearch?: (query: string) => void;
+		disabled?: boolean;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(''),
+		label = 'Hledat',
+		placeholder = 'Hledat…',
+		onsearch,
+		disabled = false,
+		class: className,
+		...rest
+	}: Props & Omit<HTMLInputAttributes, 'value'> = $props();
+
+	// Field chrome is TextField's BASE verbatim (border-fg-muted2, 11px/14px
+	// padding, 0.98rem, tokenised focus ring — see TextField.svelte for the
+	// full provenance notes), with left padding widened for the magnifier and
+	// right padding for the clear button. type="search" is NOT used: WebKit
+	// draws its own clear control there, which would double up with ours.
+	const FIELD =
+		'w-full rounded-button border border-fg-muted2 bg-surface py-[11px] pr-11 pl-11 ' +
+		'font-secondary font-light text-[0.98rem] text-fg placeholder:text-fg-muted2 ' +
+		'focus:outline-[length:var(--focus-width)] focus:outline-offset-1 ' +
+		'focus:outline-[var(--focus-color)] focus:border-[var(--focus-color)]';
+	const DISABLED =
+		'cursor-not-allowed border-border-subtle bg-surface-gray text-fg-muted2 ' +
+		'placeholder:text-fg-muted2';
+</script>
+
+<!-- role="search" comes with the <search>/form pattern: submit = Enter, which
+     is how people actually search. The magnifier is decorative (the field's
+     accessible name carries the meaning), the clear button is a real button. -->
+<form
+	role="search"
+	class={cn('relative', className)}
+	onsubmit={(e) => {
+		e.preventDefault();
+		onsearch?.(value);
+	}}
+>
+	<svg
+		viewBox="0 0 24 24"
+		class="pointer-events-none absolute top-1/2 left-3.5 size-5 -translate-y-1/2 text-fg-muted1"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		aria-hidden="true"
+	>
+		<circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" />
+	</svg>
+	<input
+		{...rest}
+		type="text"
+		aria-label={label}
+		{placeholder}
+		{disabled}
+		bind:value
+		class={cn(FIELD, disabled && DISABLED)}
+	/>
+	{#if value && !disabled}
+		<button
+			type="button"
+			aria-label="Vymazat hledání"
+			class="absolute top-1/2 right-2 inline-flex size-8 -translate-y-1/2 cursor-pointer
+				items-center justify-center rounded-button text-fg-muted1 transition-colors
+				duration-[var(--dur-base)] ease-[var(--ease)] hover:text-fg"
+			onclick={() => (value = '')}
+		>
+			<svg
+				viewBox="0 0 24 24"
+				class="size-4"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg
+			>
+		</button>
+	{/if}
+</form>

package/dist/components/commerce/SearchField.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props {
+    value?: string;
+    /** Popisek pro čtečky (pole nemá viditelný label). */
+    label?: string;
+    placeholder?: string;
+    /** Zavolá se při odeslání (Enter) s aktuálním dotazem. */
+    onsearch?: (query: string) => void;
+    disabled?: boolean;
+    class?: string;
+}
+type $$ComponentProps = Props & Omit<HTMLInputAttributes, 'value'>;
+declare const SearchField: import("svelte").Component<$$ComponentProps, {}, "value">;
+type SearchField = ReturnType<typeof SearchField>;
+export default SearchField;