@jelinek/ui 0.5.2 → 0.9.0

package/dist/components/commerce/FreeShippingBar.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { formatMoney } from './money.js';
+
+	interface Props {
+		threshold: number;
+		remaining: number;
+		qualified: boolean;
+		currency?: string;
+		qualifiedLabel?: string;
+		/** Builds the „zbývá X do dopravy zdarma“ line from the formatted amount. */
+		remainingLabel?: (amount: string) => string;
+	}
+
+	let {
+		threshold,
+		remaining,
+		qualified,
+		currency,
+		qualifiedLabel = 'Máte dopravu zdarma',
+		remainingLabel = (amount) => `Do dopravy zdarma zbývá ${amount}`
+	}: Props = $props();
+
+	// Guards the division below: a misconfigured (or not-yet-loaded) threshold
+	// of 0 would otherwise divide by zero. Treated as "already qualified" —
+	// nothing more to progress toward.
+	let pct = $derived(
+		threshold > 0 ? Math.min(100, Math.round(((threshold - remaining) / threshold) * 100)) : 100
+	);
+</script>
+
+<div class="rounded-card border-border-subtle border p-3">
+	<p class="flex items-center gap-1.5 text-(length:--step-down1) font-medium text-fg mb-2">
+		<svg
+			viewBox="0 0 24 24"
+			class="size-4 shrink-0 {qualified ? 'text-(--sem-success-strong)' : 'text-fg-muted1'}"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			aria-hidden="true"
+			><path d="M14 17h-9v-11h9zM14 9h4l3 3v5h-7" /><circle cx="7.5" cy="17.5" r="1.5" /><circle
+				cx="16.5"
+				cy="17.5"
+				r="1.5"
+			/></svg
+		>
+		{#if qualified}
+			<span>{qualifiedLabel}</span>
+		{:else}
+			<span>{remainingLabel(formatMoney(remaining, currency))}</span>
+		{/if}
+	</p>
+	<div class="rounded-pill bg-surface-gray h-2 w-full overflow-hidden">
+		<!-- bg-(--JELINEK-BROWN) rather than an accent alias utility: this token
+		     is the one a division re-theme (the mattress/magenta swap) actually
+		     overrides at :root, so the fill tracks the division. -->
+		<div
+			class="rounded-pill h-full bg-(--JELINEK-BROWN) transition-all duration-500"
+			style="width: {qualified ? 100 : pct}%"
+		></div>
+	</div>
+</div>

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

@@ -0,0 +1,12 @@
+interface Props {
+    threshold: number;
+    remaining: number;
+    qualified: boolean;
+    currency?: string;
+    qualifiedLabel?: string;
+    /** Builds the „zbývá X do dopravy zdarma“ line from the formatted amount. */
+    remainingLabel?: (amount: string) => string;
+}
+declare const FreeShippingBar: import("svelte").Component<Props, {}, "">;
+type FreeShippingBar = ReturnType<typeof FreeShippingBar>;
+export default FreeShippingBar;

package/dist/components/commerce/Gallery.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+	// PDP image mosaic + lightbox. Mechanics (keyboard nav, touch swipe, counter)
+	// originate in matrace-fe's Product/Gallery.svelte, rebuilt on the kit's own
+	// Modal — Modal already owns Esc/backdrop-click/scroll-lock/focus, so this
+	// component only adds prev/next + swipe + counter.
+	import type { Snippet } from 'svelte';
+	import Modal from './Modal.svelte';
+
+	interface Props {
+		images: { src: string; full: string; alt: string }[];
+		/**
+		 * Rendered over the hero tile's bottom edge from lg up — the store puts
+		 * its TrustBadges strip here. A snippet, not a baked-in child: the kit
+		 * doesn't decide what earns a place on the photo.
+		 */
+		badge?: Snippet;
+		/** Localized texts; Czech defaults. */
+		labels?: {
+			close?: string;
+			previous?: string;
+			next?: string;
+			/** Lightbox position, e.g. „3 / 8“. */
+			counter?: (index: number, total: number) => string;
+			/** Overflow tile, e.g. „+4 fotky“. */
+			more?: (count: number) => string;
+		};
+	}
+
+	let { images, badge, labels }: Props = $props();
+
+	const closeLabel = $derived(labels?.close ?? 'Zavřít');
+	const prevLabel = $derived(labels?.previous ?? 'Předchozí fotka');
+	const nextLabel = $derived(labels?.next ?? 'Další fotka');
+	const counterLabel = $derived(labels?.counter ?? ((i: number, t: number) => `${i} / ${t}`));
+	const moreLabel = $derived(labels?.more ?? ((n: number) => `+${n}`));
+
+	const VISIBLE_TILES = 4;
+	let visibleImages = $derived(images.slice(0, VISIBLE_TILES));
+	let hiddenCount = $derived(Math.max(0, images.length - VISIBLE_TILES));
+
+	let lightboxOpen = $state(false);
+	let lightboxIndex = $state(0);
+
+	function openLightbox(index: number) {
+		lightboxIndex = index;
+		lightboxOpen = true;
+	}
+
+	function closeLightbox() {
+		lightboxOpen = false;
+	}
+
+	function prev() {
+		lightboxIndex = (lightboxIndex - 1 + images.length) % images.length;
+	}
+
+	function next() {
+		lightboxIndex = (lightboxIndex + 1) % images.length;
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (!lightboxOpen) return;
+		if (e.key === 'ArrowLeft') prev();
+		if (e.key === 'ArrowRight') next();
+	}
+
+	// Swipe support — 50px threshold, same as matrace-fe.
+	let touchStartX = 0;
+
+	function handleTouchStart(e: TouchEvent) {
+		touchStartX = e.changedTouches[0].screenX;
+	}
+
+	function handleTouchEnd(e: TouchEvent) {
+		const delta = e.changedTouches[0].screenX - touchStartX;
+		const threshold = 50;
+		if (delta < -threshold) next();
+		if (delta > threshold) prev();
+	}
+
+	// Display utility (grid / hidden md:grid) is applied per-usage below, never
+	// here — keeping it out of the shared string avoids two display utilities
+	// landing on the same class list.
+	const navButtonClass =
+		'size-10 place-items-center rounded-pill bg-(--glass-fill) text-fg backdrop-blur-[25px] transition-opacity hover:opacity-80';
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if images.length > 0}
+	<div class="grid grid-cols-2 gap-2.5">
+		{#each visibleImages as image, i (image.src)}
+			{#if i === 0}
+				<button
+					type="button"
+					class="group rounded-image bg-surface-gray relative col-span-2 aspect-video overflow-hidden"
+					onclick={() => openLightbox(0)}
+					aria-label={image.alt}
+				>
+					<img
+						src={image.src}
+						alt={image.alt}
+						loading="eager"
+						class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
+					/>
+					{#if badge}
+						<div class="pointer-events-none absolute inset-0 hidden lg:block" aria-hidden="true">
+							{@render badge()}
+						</div>
+					{/if}
+				</button>
+			{:else if i === visibleImages.length - 1 && hiddenCount > 0}
+				<button
+					type="button"
+					class="group rounded-image bg-surface-gray relative aspect-[5/3] overflow-hidden"
+					onclick={() => openLightbox(i)}
+					aria-label={`${image.alt} — ${moreLabel(hiddenCount)}`}
+				>
+					<img src={image.src} alt={image.alt} loading="lazy" class="h-full w-full object-cover" />
+					<div
+						class="text-step1 absolute inset-0 flex items-center justify-center bg-(--glass-fill) font-medium text-fg backdrop-blur-[25px]"
+					>
+						{moreLabel(hiddenCount)}
+					</div>
+				</button>
+			{:else}
+				<button
+					type="button"
+					class="group rounded-image bg-surface-gray relative aspect-[5/3] overflow-hidden"
+					onclick={() => openLightbox(i)}
+					aria-label={image.alt}
+				>
+					<img
+						src={image.src}
+						alt={image.alt}
+						loading="lazy"
+						class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
+					/>
+				</button>
+			{/if}
+		{/each}
+	</div>
+{/if}
+
+<Modal open={lightboxOpen} onclose={closeLightbox} {closeLabel}>
+	<div
+		class="relative flex max-h-[calc(90dvh-2rem)] w-[86vw] max-w-3xl flex-col items-center gap-3 p-4"
+		role="group"
+		aria-label={counterLabel(lightboxIndex + 1, images.length)}
+		ontouchstart={handleTouchStart}
+		ontouchend={handleTouchEnd}
+	>
+		<button
+			type="button"
+			class="grid {navButtonClass} absolute top-2 right-2 z-10"
+			onclick={closeLightbox}
+			aria-label={closeLabel}
+		>
+			<svg viewBox="0 0 24 24" class="size-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>
+		</button>
+
+		{#if images[lightboxIndex]}
+			<img
+				src={images[lightboxIndex].full}
+				alt={images[lightboxIndex].alt}
+				class="rounded-image max-h-[70dvh] max-w-full object-contain"
+			/>
+		{/if}
+
+		<div class="flex items-center gap-4">
+			<button
+				type="button"
+				class="hidden md:grid {navButtonClass}"
+				onclick={prev}
+				aria-label={prevLabel}
+			>
+				<svg viewBox="0 0 24 24" class="size-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6" /></svg>
+			</button>
+			<p aria-live="polite" class="text-fg-muted1 min-w-16 text-center tabular-nums">
+				{counterLabel(lightboxIndex + 1, images.length)}
+			</p>
+			<button
+				type="button"
+				class="hidden md:grid {navButtonClass}"
+				onclick={next}
+				aria-label={nextLabel}
+			>
+				<svg viewBox="0 0 24 24" class="size-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6" /></svg>
+			</button>
+		</div>
+	</div>
+</Modal>

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

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    images: {
+        src: string;
+        full: string;
+        alt: string;
+    }[];
+    /**
+     * Rendered over the hero tile's bottom edge from lg up — the store puts
+     * its TrustBadges strip here. A snippet, not a baked-in child: the kit
+     * doesn't decide what earns a place on the photo.
+     */
+    badge?: Snippet;
+    /** Localized texts; Czech defaults. */
+    labels?: {
+        close?: string;
+        previous?: string;
+        next?: string;
+        /** Lightbox position, e.g. „3 / 8“. */
+        counter?: (index: number, total: number) => string;
+        /** Overflow tile, e.g. „+4 fotky“. */
+        more?: (count: number) => string;
+    };
+}
+declare const Gallery: import("svelte").Component<Props, {}, "">;
+type Gallery = ReturnType<typeof Gallery>;
+export default Gallery;

package/dist/components/commerce/Modal.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import type { Snippet } from 'svelte';
+	import { portal, lockScroll } from './overlay.js';
+
+	interface Props {
+		open: boolean;
+		onclose: () => void;
+		labelledby?: string;
+		/** Accessible label of the backdrop close button. */
+		closeLabel?: string;
+		class?: string;
+		children: Snippet;
+	}
+
+	let {
+		open,
+		onclose,
+		labelledby,
+		closeLabel = 'Zavřít',
+		class: className = '',
+		children
+	}: Props = $props();
+
+	let panel: HTMLElement | undefined = $state();
+
+	$effect(() => {
+		if (!open) return;
+		const unlock = lockScroll();
+		panel?.focus();
+		const onKey = (e: KeyboardEvent) => e.key === 'Escape' && onclose();
+		window.addEventListener('keydown', onKey);
+		return () => {
+			unlock();
+			window.removeEventListener('keydown', onKey);
+		};
+	});
+</script>
+
+{#if open}
+	<!-- z-scale contract: site header sits at z-1100; overlay primitives (this,
+	     Drawer) go above it at z-[1200]; Toaster tops everything at z-[1500]. -->
+	<div use:portal class="fixed inset-0 z-[1200]">
+		<button
+			type="button"
+			aria-label={closeLabel}
+			class="absolute inset-0 bg-black/40"
+			transition:fade={{ duration: 150 }}
+			onclick={onclose}
+		></button>
+		<div
+			bind:this={panel}
+			tabindex="-1"
+			role="dialog"
+			aria-modal="true"
+			aria-labelledby={labelledby}
+			class="rounded-card bg-surface shadow-interactive absolute inset-0 m-auto h-fit max-h-[90dvh] w-fit max-w-[92vw] outline-none {className}"
+			transition:fade={{ duration: 200 }}
+		>
+			{@render children()}
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    open: boolean;
+    onclose: () => void;
+    labelledby?: string;
+    /** Accessible label of the backdrop close button. */
+    closeLabel?: string;
+    class?: string;
+    children: Snippet;
+}
+declare const Modal: import("svelte").Component<Props, {}, "">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/components/commerce/OrderSummary.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { formatMoney } from './money.js';
+
+	interface Props {
+		currency?: string;
+		itemsTotal: number;
+		discount?: number;
+		shipping?: number;
+		/** Extra fees total (dobírka, výnos…); 0 hides the row. */
+		surcharges?: number;
+		grand: number;
+		/** Deposit due now; 0 hides the highlighted row. */
+		deposit?: number;
+		shippingFree?: boolean;
+		labels?: {
+			itemsTotal?: string;
+			discount?: string;
+			shipping?: string;
+			free?: string;
+			surcharges?: string;
+			grandTotal?: string;
+			depositDue?: string;
+			vatIncluded?: string;
+		};
+	}
+
+	let {
+		currency,
+		itemsTotal,
+		discount = 0,
+		shipping = 0,
+		surcharges = 0,
+		grand,
+		deposit = 0,
+		shippingFree = false,
+		labels
+	}: Props = $props();
+
+	const l = $derived({
+		itemsTotal: labels?.itemsTotal ?? 'Zboží celkem',
+		discount: labels?.discount ?? 'Sleva',
+		shipping: labels?.shipping ?? 'Doprava',
+		free: labels?.free ?? 'Zdarma',
+		surcharges: labels?.surcharges ?? 'Příplatky',
+		grandTotal: labels?.grandTotal ?? 'Celkem',
+		depositDue: labels?.depositDue ?? 'Záloha nyní',
+		vatIncluded: labels?.vatIncluded ?? 'Ceny včetně DPH'
+	});
+</script>
+
+<div class="space-y-2 text-(length:--step-down1)">
+	<div class="flex justify-between">
+		<span class="text-fg-muted1">{l.itemsTotal}</span>
+		<span class="text-fg">{formatMoney(itemsTotal, currency)}</span>
+	</div>
+	{#if discount > 0}
+		<div class="text-(--color-accent-text) flex justify-between">
+			<span>{l.discount}</span>
+			<span>−{formatMoney(discount, currency)}</span>
+		</div>
+	{/if}
+	<div class="flex justify-between">
+		<span class="text-fg-muted1">{l.shipping}</span>
+		<span class="text-fg">
+			{shippingFree || shipping === 0 ? l.free : formatMoney(shipping, currency)}
+		</span>
+	</div>
+	{#if surcharges > 0}
+		<div class="flex justify-between">
+			<span class="text-fg-muted1">{l.surcharges}</span>
+			<span class="text-fg">{formatMoney(surcharges, currency)}</span>
+		</div>
+	{/if}
+	<div class="border-border-subtle flex items-baseline justify-between border-t pt-2">
+		<span class="text-(length:--step0) font-bold text-fg">{l.grandTotal}</span>
+		<span class="text-(length:--step4) font-bold text-fg">{formatMoney(grand, currency)}</span>
+	</div>
+	{#if deposit > 0}
+		<div class="rounded-card bg-sem-warning flex justify-between px-2.5 py-1.5 text-fg">
+			<span>{l.depositDue}</span>
+			<span class="font-bold">{formatMoney(deposit, currency)}</span>
+		</div>
+	{/if}
+	<p class="text-fg-muted2 pt-1 text-(length:--step-down2)">{l.vatIncluded}</p>
+</div>

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

@@ -0,0 +1,25 @@
+interface Props {
+    currency?: string;
+    itemsTotal: number;
+    discount?: number;
+    shipping?: number;
+    /** Extra fees total (dobírka, výnos…); 0 hides the row. */
+    surcharges?: number;
+    grand: number;
+    /** Deposit due now; 0 hides the highlighted row. */
+    deposit?: number;
+    shippingFree?: boolean;
+    labels?: {
+        itemsTotal?: string;
+        discount?: string;
+        shipping?: string;
+        free?: string;
+        surcharges?: string;
+        grandTotal?: string;
+        depositDue?: string;
+        vatIncluded?: string;
+    };
+}
+declare const OrderSummary: import("svelte").Component<Props, {}, "">;
+type OrderSummary = ReturnType<typeof OrderSummary>;
+export default OrderSummary;

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-bold {sizes[size]}">
+	{#if from}<span
+			class="text-fg-muted1 text-(length:--step-down2) font-normal tracking-wide uppercase"
+			>{fromLabel}</span
+		>{/if}
+	<span>{formatPrice(price, currency)}</span>
+	{#if originalPrice && originalPrice > price}
+		<s class="text-fg-muted2 text-[0.7em] font-normal">{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">
+	<h1 class="text-(length:--step5) 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;