@stisocial/ui 0.0.0-stage → 0.2.0

package/dist/components/TopProgressBar/TopProgressBar.css

@@ -0,0 +1,52 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-TopProgressBar-root-804e6 {
+    z-index: var(--sti-z-toast);
+    pointer-events: none;
+    block-size: 3px;
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline: 0;
+  }
+
+  .sti-TopProgressBar-bar-a3ff6 {
+    --sti-top-progress: 0;
+    background: var(--sti-fg-accent);
+    block-size: 100%;
+    box-shadow: 0 0 var(--sti-space-2) color-mix(in oklab, var(--sti-fg-accent) 60%, transparent);
+    transform: scaleX(var(--sti-top-progress));
+    transform-origin: 0;
+    transition: transform var(--sti-duration-slow) var(--sti-ease-out);
+  }
+
+  .sti-TopProgressBar-root-804e6:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) .sti-TopProgressBar-bar-a3ff6 {
+    transform-origin: 100%;
+  }
+
+  .sti-TopProgressBar-root-804e6[data-phase="finishing"] {
+    animation: sti-TopProgressBar-sti-top-progress-out-f8be1 var(--sti-duration-base) var(--sti-ease-in)
+      var(--sti-duration-fast) both;
+  }
+
+  @keyframes sti-TopProgressBar-sti-top-progress-out-f8be1 {
+    to {
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-TopProgressBar-bar-a3ff6 {
+      transition: none;
+    }
+
+    .sti-TopProgressBar-root-804e6[data-phase="finishing"] {
+      animation: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-TopProgressBar-bar-a3ff6 {
+      background: highlight;
+    }
+  }
+}

package/dist/components/TopProgressBar/TopProgressBar.d.ts

@@ -0,0 +1,21 @@
+export interface TopProgressBarProps {
+  /** Sayfa geçişi ya da uzun istek sürüyor. */
+  isLoading: boolean;
+  /**
+   * Gösterge bu süreden sonra belirir (ms): hızlı geçişlerde ekranda bir şey yanıp sönmez.
+   * Varsayılan 150.
+   */
+  delay?: number;
+  /** Ekran okuyucunun okuyacağı ad; varsayılan "Sayfa yükleniyor". */
+  label?: string;
+  className?: string;
+}
+/** Bir sonraki ilerleme: %90'a yaklaşır ama ulaşmaz (süresi bilinmeyen işte ilerleme durmaz). */
+export declare const trickle: (p: number) => number;
+/**
+ * Sayfa geçişi göstergesi: ekranın en üstünde ince turkuaz çizgi. Süresi bilinmeyen işte ilerleme
+ * %90'a yaklaşarak sürer, iş bitince tamamlanır ve kaybolur; kısa işlerde (gecikmeden önce biten)
+ * hiç görünmez. Hareket azaltmada geçiş canlandırılmaz. Ekran okuyucuya adlı ilerleme göstergesi
+ * olarak bildirilir.
+ */
+export declare function TopProgressBar({ isLoading, delay, label, className }: TopProgressBarProps): import("react").JSX.Element | null;

package/dist/components/TopProgressBar/TopProgressBar.js

@@ -0,0 +1,65 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import TopProgressBar_module_default from "./TopProgressBar.module.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+// src/components/TopProgressBar/TopProgressBar.tsx
+/** Bir sonraki ilerleme: %90'a yaklaşır ama ulaşmaz (süresi bilinmeyen işte ilerleme durmaz). */
+const trickle = (p) => Math.min(.9, p + (.9 - p) * .12);
+/**
+* Sayfa geçişi göstergesi: ekranın en üstünde ince turkuaz çizgi. Süresi bilinmeyen işte ilerleme
+* %90'a yaklaşarak sürer, iş bitince tamamlanır ve kaybolur; kısa işlerde (gecikmeden önce biten)
+* hiç görünmez. Hareket azaltmada geçiş canlandırılmaz. Ekran okuyucuya adlı ilerleme göstergesi
+* olarak bildirilir.
+*/
+function TopProgressBar({ isLoading, delay = 150, label, className }) {
+	const t = useMessages();
+	const [phase, setPhase] = useState("idle");
+	const [progress, setProgress] = useState(0);
+	const bar = useRef(null);
+	useEffect(() => {
+		if (isLoading) {
+			if (phase === "running") return;
+			const start = window.setTimeout(() => {
+				setProgress(.08);
+				setPhase("running");
+			}, delay);
+			return () => window.clearTimeout(start);
+		}
+		if (phase !== "running") return;
+		setProgress(1);
+		setPhase("finishing");
+	}, [
+		isLoading,
+		phase,
+		delay
+	]);
+	useEffect(() => {
+		if (phase === "running") {
+			const timer = window.setInterval(() => setProgress(trickle), 300);
+			return () => window.clearInterval(timer);
+		}
+		if (phase === "finishing") {
+			const timer = window.setTimeout(() => {
+				setPhase("idle");
+				setProgress(0);
+			}, 400);
+			return () => window.clearTimeout(timer);
+		}
+	}, [phase]);
+	useEffect(() => {
+		bar.current?.style.setProperty("--sti-top-progress", String(progress));
+	}, [progress]);
+	if (phase === "idle") return null;
+	return /* @__PURE__ */ jsx("div", {
+		role: "progressbar",
+		"aria-label": label ?? t.topProgressLabel,
+		className: [TopProgressBar_module_default.root, className].filter(Boolean).join(" "),
+		"data-phase": phase,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: bar,
+			className: TopProgressBar_module_default.bar
+		})
+	});
+}
+export { TopProgressBar, trickle };

package/dist/components/TopProgressBar/TopProgressBar.module.js

@@ -0,0 +1,8 @@
+import './TopProgressBar.css';
+// src/components/TopProgressBar/TopProgressBar.module.css
+var TopProgressBar_module_default = {
+	"root": "sti-TopProgressBar-root-804e6",
+	"bar": "sti-TopProgressBar-bar-a3ff6",
+	"sti-top-progress-out": "sti-TopProgressBar-sti-top-progress-out-f8be1"
+};
+export { TopProgressBar_module_default as default };

package/dist/components/TotalsBlock/TotalsBlock.css

@@ -0,0 +1,86 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-TotalsBlock-root-08e5d {
+    --sti-totals-width: calc(var(--sti-space-32) * 2.5);
+    --sti-totals-line: var(--sti-border-subtle);
+    inline-size: 100%;
+    max-inline-size: var(--sti-totals-width);
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    font-size: var(--sti-document-font-size, var(--sti-font-size-md));
+    line-height: var(--sti-document-line-height, var(--sti-line-height-md));
+    margin-inline-start: auto;
+  }
+
+  .sti-TotalsBlock-root-08e5d[data-size="sm"] {
+    --sti-document-font-size: var(--sti-font-size-sm);
+    --sti-document-line-height: var(--sti-line-height-sm);
+    --sti-document-cell: var(--sti-space-1);
+  }
+
+  .sti-TotalsBlock-root-08e5d[data-size="lg"] {
+    --sti-document-font-size: var(--sti-font-size-body);
+    --sti-document-line-height: var(--sti-line-height-body);
+    --sti-document-cell: var(--sti-space-3);
+  }
+
+  .sti-TotalsBlock-list-2fc5f {
+    margin: 0;
+    display: grid;
+  }
+
+  .sti-TotalsBlock-row-fa85c {
+    justify-content: space-between;
+    align-items: baseline;
+    gap: 0 var(--sti-space-4);
+    padding-block: var(--sti-document-cell, var(--sti-space-2));
+    border-block-end: var(--sti-border-width) solid var(--sti-totals-line);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-TotalsBlock-label-eb8ed {
+    color: var(--sti-fg-muted);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-TotalsBlock-value-e31ea {
+    font-variant-numeric: tabular-nums;
+    text-align: end;
+    margin: 0;
+    margin-inline-start: auto;
+  }
+
+  .sti-TotalsBlock-row-fa85c[data-total] {
+    border-block-end: 0;
+    border-block-start: var(--sti-border-width-strong) solid var(--sti-border-strong);
+    font-size: var(--sti-font-size-lg);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-lg);
+  }
+
+  .sti-TotalsBlock-row-fa85c[data-total] > .sti-TotalsBlock-label-eb8ed {
+    color: var(--sti-fg);
+  }
+
+  .sti-TotalsBlock-row-fa85c:has( + .sti-TotalsBlock-row-fa85c[data-total]) {
+    border-block-end: 0;
+  }
+
+  @media (forced-colors: active) {
+    .sti-TotalsBlock-row-fa85c {
+      border-color: graytext;
+    }
+
+    .sti-TotalsBlock-row-fa85c[data-total] {
+      border-block-start-color: canvastext;
+    }
+  }
+
+  @media print {
+    .sti-TotalsBlock-root-08e5d {
+      break-inside: avoid;
+    }
+  }
+}

package/dist/components/TotalsBlock/TotalsBlock.d.ts

@@ -0,0 +1,32 @@
+import { Locale } from "../../provider/locale.js";
+import { DocumentSize } from "../_document/types.js";
+import { DocumentTotals } from "./totals.js";
+export interface TotalsBlockLabels {
+  subtotal?: string;
+  discount?: string;
+  /** `{rate}` yer tutucusu oranı alır ("KDV %{rate}"). */
+  vat?: string;
+  vatTotal?: string;
+  total?: string;
+}
+export interface TotalsBlockProps {
+  /** Toplamlar; `calculateTotals(lines)` ile hesaplanır ya da elle verilir. */
+  totals: DocumentTotals;
+  /** ISO 4217 para birimi; varsayılan "TRY". */
+  currency?: string;
+  /** Oran başına KDV satırları yerine tek "Toplam KDV" satırı. */
+  isVatCollapsed?: boolean;
+  labels?: TotalsBlockLabels;
+  /** Bloğun adı (ekran okuyucu); varsayılan "Toplamlar". */
+  title?: string;
+  size?: DocumentSize;
+  locale?: Locale;
+  className?: string;
+  id?: string;
+}
+/**
+ * Ara toplam, iskonto, KDV ve genel toplam bloğu. Ad–değer listesidir (`dl`); tutarlar sağa
+ * yaslı ve eşit genişlikte rakamlıdır, genel toplam üstten çizgiyle ayrılır ve büyüktür.
+ * İskonto ve oran satırları yalnız varsa yazılır. Sunucu bileşenidir.
+ */
+export declare function TotalsBlock({ totals, currency, isVatCollapsed, labels, title, size, locale, className, id }: TotalsBlockProps): import("react").JSX.Element;

package/dist/components/TotalsBlock/TotalsBlock.js

@@ -0,0 +1,88 @@
+import { Amount } from "../Amount/Amount.js";
+import { documentText, fill } from "../_document/text.js";
+import TotalsBlock_module_default from "./TotalsBlock.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/TotalsBlock/TotalsBlock.tsx
+/**
+* Ara toplam, iskonto, KDV ve genel toplam bloğu. Ad–değer listesidir (`dl`); tutarlar sağa
+* yaslı ve eşit genişlikte rakamlıdır, genel toplam üstten çizgiyle ayrılır ve büyüktür.
+* İskonto ve oran satırları yalnız varsa yazılır. Sunucu bileşenidir.
+*/
+function TotalsBlock({ totals, currency = "TRY", isVatCollapsed = false, labels, title, size, locale, className, id }) {
+	const t = documentText(locale);
+	const text = {
+		subtotal: labels?.subtotal ?? t.documentSubtotal,
+		discount: labels?.discount ?? t.documentDiscount,
+		vat: labels?.vat ?? t.documentVat,
+		vatTotal: labels?.vatTotal ?? t.documentVatTotal,
+		total: labels?.total ?? t.documentTotal
+	};
+	const money = (value) => /* @__PURE__ */ jsx(Amount, {
+		value,
+		currency,
+		locale
+	});
+	return /* @__PURE__ */ jsx("section", {
+		id,
+		className: [TotalsBlock_module_default.root, className].filter(Boolean).join(" "),
+		"data-size": size,
+		"data-sti-document-totals": "",
+		"aria-label": title ?? t.documentTotals,
+		children: /* @__PURE__ */ jsxs("dl", {
+			className: TotalsBlock_module_default.list,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: TotalsBlock_module_default.row,
+					children: [/* @__PURE__ */ jsx("dt", {
+						className: TotalsBlock_module_default.label,
+						children: text.subtotal
+					}), /* @__PURE__ */ jsx("dd", {
+						className: TotalsBlock_module_default.value,
+						children: money(totals.subtotal)
+					})]
+				}),
+				totals.discount > 0 ? /* @__PURE__ */ jsxs("div", {
+					className: TotalsBlock_module_default.row,
+					children: [/* @__PURE__ */ jsx("dt", {
+						className: TotalsBlock_module_default.label,
+						children: text.discount
+					}), /* @__PURE__ */ jsx("dd", {
+						className: TotalsBlock_module_default.value,
+						children: money(-totals.discount)
+					})]
+				}) : null,
+				isVatCollapsed ? totals.vatTotal > 0 && /* @__PURE__ */ jsxs("div", {
+					className: TotalsBlock_module_default.row,
+					children: [/* @__PURE__ */ jsx("dt", {
+						className: TotalsBlock_module_default.label,
+						children: text.vatTotal
+					}), /* @__PURE__ */ jsx("dd", {
+						className: TotalsBlock_module_default.value,
+						children: money(totals.vatTotal)
+					})]
+				}) : totals.vat.map((v) => /* @__PURE__ */ jsxs("div", {
+					className: TotalsBlock_module_default.row,
+					children: [/* @__PURE__ */ jsx("dt", {
+						className: TotalsBlock_module_default.label,
+						children: fill(text.vat, { rate: v.rate })
+					}), /* @__PURE__ */ jsx("dd", {
+						className: TotalsBlock_module_default.value,
+						children: money(v.amount)
+					})]
+				}, v.rate)),
+				/* @__PURE__ */ jsxs("div", {
+					className: TotalsBlock_module_default.row,
+					"data-total": "",
+					children: [/* @__PURE__ */ jsx("dt", {
+						className: TotalsBlock_module_default.label,
+						children: text.total
+					}), /* @__PURE__ */ jsx("dd", {
+						className: TotalsBlock_module_default.value,
+						children: money(totals.total)
+					})]
+				})
+			]
+		})
+	});
+}
+export { TotalsBlock };

package/dist/components/TotalsBlock/TotalsBlock.module.js

@@ -0,0 +1,10 @@
+import './TotalsBlock.css';
+// src/components/TotalsBlock/TotalsBlock.module.css
+var TotalsBlock_module_default = {
+	"root": "sti-TotalsBlock-root-08e5d",
+	"list": "sti-TotalsBlock-list-2fc5f",
+	"row": "sti-TotalsBlock-row-fa85c",
+	"label": "sti-TotalsBlock-label-eb8ed",
+	"value": "sti-TotalsBlock-value-e31ea"
+};
+export { TotalsBlock_module_default as default };

package/dist/components/TotalsBlock/index.d.ts

@@ -0,0 +1,3 @@
+import { DocumentTotals, VatLine, calculateTotals } from "./totals.js";
+import { TotalsBlock, TotalsBlockLabels, TotalsBlockProps } from "./TotalsBlock.js";
+export { type DocumentTotals, TotalsBlock, TotalsBlockLabels, TotalsBlockProps, type VatLine, calculateTotals };

package/dist/components/TotalsBlock/totals.d.ts

@@ -0,0 +1,28 @@
+import { DocumentLine } from "../_document/types.js";
+/** Bir KDV oranının matrahı ve tutarı. */
+export interface VatLine {
+  /** Yüzde olarak oran (20). */
+  rate: number;
+  /** Bu orana tabi iskontolu tutar (matrah). */
+  base: number;
+  /** Matrahın KDV'si. */
+  amount: number;
+}
+export interface DocumentTotals {
+  /** İskontosuz ara toplam (KDV hariç). */
+  subtotal: number;
+  /** Toplam iskonto (pozitif sayı). */
+  discount: number;
+  /** Orana göre KDV dökümü; yalnız sıfırdan büyük oranlar, küçükten büyüğe. */
+  vat: readonly VatLine[];
+  /** Toplam KDV. */
+  vatTotal: number;
+  /** Genel toplam = ara toplam − iskonto + KDV. */
+  total: number;
+}
+/**
+ * Kalemlerden toplamları hesaplar. Her kalemin tutarı kuruşa yuvarlanır, iskonto kalem
+ * düzeyindedir, KDV oran başına matrah toplamı üzerinden hesaplanır ve kuruşa yuvarlanır
+ * (fatura düzenleme uygulamalarındaki olağan yöntem). Sonlu olmayan sayılar hata verir.
+ */
+export declare function calculateTotals(lines: readonly DocumentLine[]): DocumentTotals;

package/dist/components/TotalsBlock/totals.js

@@ -0,0 +1,38 @@
+// src/components/TotalsBlock/totals.ts
+/** Kuruşa yuvarlanmış tamsayı: 0,1 + 0,2 gibi kayan nokta sapmaları tutara girmez. */
+const cents = (value) => Math.round(value * 100);
+const major = (value) => value / 100;
+/**
+* Kalemlerden toplamları hesaplar. Her kalemin tutarı kuruşa yuvarlanır, iskonto kalem
+* düzeyindedir, KDV oran başına matrah toplamı üzerinden hesaplanır ve kuruşa yuvarlanır
+* (fatura düzenleme uygulamalarındaki olağan yöntem). Sonlu olmayan sayılar hata verir.
+*/
+function calculateTotals(lines) {
+	let subtotal = 0;
+	let discount = 0;
+	const bases = /* @__PURE__ */ new Map();
+	for (const line of lines) {
+		if (!Number.isFinite(line.quantity) || !Number.isFinite(line.unitPrice)) throw new RangeError("Kalem miktarı ve birim fiyatı sonlu bir sayı olmalıdır");
+		const gross = cents(line.quantity * line.unitPrice);
+		const rate = Math.min(Math.max(line.discountRate ?? 0, 0), 100);
+		const off = Math.round(gross * rate / 100);
+		subtotal += gross;
+		discount += off;
+		const vatRate = line.vatRate ?? 0;
+		bases.set(vatRate, (bases.get(vatRate) ?? 0) + gross - off);
+	}
+	const vat = [...bases.entries()].filter(([rate]) => rate > 0).sort(([a], [b]) => a - b).map(([rate, base]) => ({
+		rate,
+		base: major(base),
+		amount: major(Math.round(base * rate / 100))
+	}));
+	const vatCents = vat.reduce((sum, v) => sum + cents(v.amount), 0);
+	return {
+		subtotal: major(subtotal),
+		discount: major(discount),
+		vat,
+		vatTotal: major(vatCents),
+		total: major(subtotal - discount + vatCents)
+	};
+}
+export { calculateTotals };

package/dist/components/Tour/Tour.d.ts

@@ -0,0 +1,32 @@
+import { Placement } from "../_internal/overlay/FloatingCard.js";
+import { ReactNode, RefObject } from "react";
+export interface TourStep {
+  /** Adımın gösterdiği öğe; sayfada yoksa adım atlanır. */
+  targetRef: RefObject<Element | null>;
+  title: ReactNode;
+  content: ReactNode;
+  placement?: Placement;
+}
+export interface TourProps {
+  steps: TourStep[];
+  isOpen: boolean;
+  /** Kapatma düğmesi ya da Escape ile atlanınca `false`; bitince de `false`. */
+  onOpenChange: (open: boolean) => void;
+  /** Denetimli adım (0'dan). */
+  step?: number;
+  /** Denetimsiz başlangıç adımı. Varsayılan 0. */
+  defaultStep?: number;
+  onStepChange?: (step: number) => void;
+  /** Son adımda "Bitir"e basılınca (atlamada çağrılmaz). */
+  onComplete?: () => void;
+  nextLabel?: string;
+  backLabel?: string;
+  finishLabel?: string;
+}
+/**
+ * Adımlı tanıtım: sayfadaki öğeleri sırayla, Coachmark görünüşündeki balonlarla tanıtır ("Adım 2 /
+ * 4", Geri, Sonraki, Bitir). Kipsizdir: sayfa kullanılmaya devam eder. Her adımda hedef görünür
+ * alana kaydırılır ve odak balonun ana düğmesine taşınır; tanıtım kapanınca odak açılmadan önceki
+ * öğeye döner. Kapatma düğmesi ya da Escape tanıtımı atlar. Hedefi sayfada olmayan adım atlanır.
+ */
+export declare function Tour({ steps, isOpen, onOpenChange, step, defaultStep, onStepChange, onComplete, nextLabel, backLabel, finishLabel }: TourProps): import("react").JSX.Element | null;

package/dist/components/Tour/Tour.js

@@ -0,0 +1,131 @@
+"use client";
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { Button } from "../Button/Button.js";
+import floating_module_default from "../_internal/overlay/floating.module.js";
+import { FloatingCard } from "../_internal/overlay/FloatingCard.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+// src/components/Tour/Tour.tsx
+const clamp = (n, max) => Math.min(Math.max(0, Math.trunc(n) || 0), max);
+/** `from`dan `dir` yönünde hedefi sayfada bulunan ilk adım; yoksa -1. */
+function findAvailable(steps, from, dir) {
+	for (let i = from; i >= 0 && i < steps.length; i += dir) if (steps[i]?.targetRef.current?.isConnected) return i;
+	return -1;
+}
+/**
+* Adımlı tanıtım: sayfadaki öğeleri sırayla, Coachmark görünüşündeki balonlarla tanıtır ("Adım 2 /
+* 4", Geri, Sonraki, Bitir). Kipsizdir: sayfa kullanılmaya devam eder. Her adımda hedef görünür
+* alana kaydırılır ve odak balonun ana düğmesine taşınır; tanıtım kapanınca odak açılmadan önceki
+* öğeye döner. Kapatma düğmesi ya da Escape tanıtımı atlar. Hedefi sayfada olmayan adım atlanır.
+*/
+function Tour({ steps, isOpen, onOpenChange, step, defaultStep = 0, onStepChange, onComplete, nextLabel, backLabel, finishLabel }) {
+	const t = useMessages();
+	const f = useFormatter();
+	const last = Math.max(0, steps.length - 1);
+	const [internal, setInternal] = useState(() => clamp(defaultStep, last));
+	const requested = clamp(step ?? internal, last);
+	const [shown, setShown] = useState(null);
+	const primary = useRef(null);
+	const opener = useRef(null);
+	const go = (next) => {
+		if (step === void 0) setInternal(next);
+		onStepChange?.(next);
+	};
+	useLayoutEffect(() => {
+		if (!isOpen) return;
+		const active = document.activeElement;
+		opener.current = active instanceof HTMLElement && active !== document.body ? active : null;
+		return () => {
+			const el = opener.current;
+			opener.current = null;
+			const current = document.activeElement;
+			const lost = !current || current === document.body || !current.isConnected;
+			if (el?.isConnected && lost) el.focus({ preventScroll: true });
+		};
+	}, [isOpen]);
+	useLayoutEffect(() => {
+		if (!isOpen) {
+			setShown(null);
+			return;
+		}
+		let index = findAvailable(steps, requested, 1);
+		if (index === -1) index = findAvailable(steps, requested, -1);
+		if (index === -1) {
+			setShown(null);
+			return;
+		}
+		const target = steps[index]?.targetRef.current;
+		if (target) {
+			const r = target.getBoundingClientRect();
+			if (!(r.top >= 0 && r.bottom <= window.innerHeight && r.left >= 0 && r.right <= window.innerWidth)) target.scrollIntoView({
+				block: "center",
+				inline: "nearest",
+				behavior: "instant"
+			});
+		}
+		setShown(index);
+	}, [
+		isOpen,
+		requested,
+		steps
+	]);
+	useEffect(() => {
+		if (shown === null) return;
+		const frame = requestAnimationFrame(() => primary.current?.focus());
+		return () => cancelAnimationFrame(frame);
+	}, [shown]);
+	if (!isOpen || shown === null) return null;
+	const current = steps[shown];
+	if (!current) return null;
+	const prevIndex = findAvailable(steps, shown - 1, -1);
+	const nextIndex = findAvailable(steps, shown + 1, 1);
+	const isLast = nextIndex === -1;
+	const available = steps.filter((s) => s.targetRef.current?.isConnected).length;
+	const position = steps.slice(0, shown + 1).filter((s) => s.targetRef.current?.isConnected).length;
+	return /* @__PURE__ */ jsx(FloatingCard, {
+		triggerRef: current.targetRef,
+		isOpen: true,
+		onOpenChange: (open) => {
+			if (!open) onOpenChange(false);
+		},
+		isNonModal: true,
+		structure: "region",
+		closeOnBlur: false,
+		role: "dialog",
+		placement: current.placement ?? "bottom",
+		size: "sm",
+		tone: "accent",
+		showClose: true,
+		title: current.title,
+		footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+			available > 1 ? /* @__PURE__ */ jsx("span", {
+				className: floating_module_default.step,
+				children: template(t.stepCount, {
+					current: f.number(position),
+					total: f.number(available)
+				})
+			}) : null,
+			prevIndex !== -1 ? /* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				variant: "secondary",
+				onPress: () => go(prevIndex),
+				children: backLabel ?? t.tourBack
+			}) : null,
+			/* @__PURE__ */ jsx(Button, {
+				ref: primary,
+				size: "sm",
+				variant: "primary",
+				onPress: () => {
+					if (isLast) {
+						onComplete?.();
+						onOpenChange(false);
+					} else go(nextIndex);
+				},
+				children: isLast ? finishLabel ?? t.tourFinish : nextLabel ?? t.tourNext
+			})
+		] }),
+		children: current.content
+	}, shown);
+}
+export { Tour };

package/dist/components/Tour/index.d.ts

@@ -0,0 +1,2 @@
+import { Tour, TourProps, TourStep } from "./Tour.js";
+export { Tour, TourProps, TourStep };

package/dist/components/TransferList/TransferList.css

@@ -0,0 +1,57 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-TransferList-root-1a423 {
+    inline-size: 100%;
+    container-type: inline-size;
+  }
+
+  .sti-TransferList-layout-99f20 {
+    align-items: stretch;
+    gap: var(--sti-space-3);
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+    display: grid;
+  }
+
+  .sti-TransferList-side-e403d {
+    align-content: start;
+    gap: var(--sti-space-2);
+    grid-template-columns: minmax(0, 1fr);
+    min-width: 0;
+    display: grid;
+  }
+
+  .sti-TransferList-list-8cd53 {
+    --sti-listbox-max-h: 16rem;
+    display: contents;
+  }
+
+  .sti-TransferList-search-7a863 {
+    order: 1;
+  }
+
+  .sti-TransferList-list-8cd53 > :not(:first-child) {
+    order: 2;
+  }
+
+  .sti-TransferList-actions-44774 {
+    justify-content: center;
+    gap: var(--sti-space-2);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .sti-TransferList-count-9afab {
+    color: var(--sti-fg-muted);
+    font-weight: var(--sti-font-weight-regular);
+  }
+
+  @container (width < 36rem) {
+    .sti-TransferList-layout-99f20 {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .sti-TransferList-actions-44774 {
+      flex-flow: wrap;
+    }
+  }
+}