@stisocial/ui 0.0.0-stage → 0.1.0

package/dist/components/Grid/Grid.d.ts

@@ -0,0 +1,52 @@
+import { LayoutBreakpoint, LayoutRootProps, Space } from "../Stack/layout.js";
+import { ReactNode } from "react";
+export type GridColumnCount = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+/**
+ * Kapsayıcı genişliğine göre sütun sayısı (küçükten büyüğe; verilmeyen kırılım bir öncekini
+ * izler). `base` 40rem altı, `sm` 40rem, `md` 48rem, `lg` 64rem ve üstü kapsayıcı genişliğidir.
+ */
+export type GridResponsiveColumns = {
+  base?: GridColumnCount;
+} & Partial<Record<LayoutBreakpoint, GridColumnCount>>;
+/** Otomatik doldurmada öğenin en küçük genişliği: `xs` 192, `sm` 256, `md` 320, `lg` 384 piksel. */
+export type GridMinItemWidth = "xs" | "sm" | "md" | "lg";
+export type GridElement = "div" | "ul" | "ol" | "section";
+interface GridBaseProps extends LayoutRootProps {
+  /** Öğeler arası aralık (iki yönde). Varsayılan `4` (16 piksel). */
+  gap?: Space;
+  /** Satırlar arası aralık; verilmezse `gap` ile aynıdır. */
+  rowGap?: Space;
+  /** Öğelerin hücre içindeki dikey hizası; `stretch` (varsayılan) satırdaki öğeleri eş boy yapar. */
+  alignItems?: "stretch" | "start" | "center" | "end";
+  /** Izgaranın öğesi. `ul`/`ol` seçilirse çocuklar `li` olmalıdır. */
+  as?: GridElement;
+  children?: ReactNode;
+}
+export type GridProps = GridBaseProps & ({
+  /**
+   * Sütun sayısı. Tek sayı verilirse dar kapsayıcıda kendiliğinden azalır (ör. 3 → 1/2/3/3);
+   * nesne verilirse her kırılımdaki sayı açıkça belirlenir.
+   */
+  columns: GridColumnCount | GridResponsiveColumns;
+  minItemWidth?: never;
+} | {
+  columns?: never;
+  /** Sütun sayısı yerine öğenin en küçük genişliği: sığdığı kadar sütun açılır. Varsayılan `sm`. */
+  minItemWidth?: GridMinItemWidth;
+});
+type Resolved = {
+  base: GridColumnCount;
+} & Partial<Record<LayoutBreakpoint, GridColumnCount>>;
+/**
+ * Tek sayıdan kırılım tablosu: geniş kapsayıcıda istenen sayı, daraldıkça öğe başına yer
+ * korunacak biçimde azalan sayı. Ör. 2 → 1/2/2/2, 3 → 1/2/3/3, 4 → 2/2/4/4, 6 → 2/2/3/6,
+ * 12 → 3/4/6/12 (`base`/`sm`/`md`/`lg`).
+ */
+export declare function resolveGridColumns(columns: GridColumnCount | GridResponsiveColumns): Resolved;
+/**
+ * Izgara: sütun sayısıyla ya da öğenin en küçük genişliğiyle düzen. Duyarlılık ekrana değil,
+ * ızgaranın bulunduğu alana göredir (kapsayıcı sorgusu): yan panelde de, tam sayfada da doğru
+ * sayıda sütun açılır. Sunucu bileşenidir.
+ */
+export declare function Grid(props: GridProps): import("react").JSX.Element;
+export {};

package/dist/components/Grid/Grid.js

@@ -0,0 +1,60 @@
+import { cx, rootAttributes } from "../Stack/layout.js";
+import Grid_module_default from "./Grid.module.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/Grid/Grid.tsx
+const clamp = (n) => Math.min(12, Math.max(1, Math.ceil(n)));
+/**
+* Tek sayıdan kırılım tablosu: geniş kapsayıcıda istenen sayı, daraldıkça öğe başına yer
+* korunacak biçimde azalan sayı. Ör. 2 → 1/2/2/2, 3 → 1/2/3/3, 4 → 2/2/4/4, 6 → 2/2/3/6,
+* 12 → 3/4/6/12 (`base`/`sm`/`md`/`lg`).
+*/
+function resolveGridColumns(columns) {
+	if (typeof columns === "number") {
+		const n = columns;
+		return {
+			base: clamp(n >= 8 ? 3 : n >= 4 ? 2 : 1),
+			sm: clamp(n <= 4 ? Math.min(n, 2) : n / 3),
+			md: clamp(n <= 5 ? n : n / 2),
+			lg: clamp(n)
+		};
+	}
+	return {
+		...columns,
+		base: columns.base ?? 1
+	};
+}
+/**
+* Izgara: sütun sayısıyla ya da öğenin en küçük genişliğiyle düzen. Duyarlılık ekrana değil,
+* ızgaranın bulunduğu alana göredir (kapsayıcı sorgusu): yan panelde de, tam sayfada da doğru
+* sayıda sütun açılır. Sunucu bileşenidir.
+*/
+function Grid(props) {
+	const { gap = "4", rowGap, alignItems = "stretch", as: Tag = "div", className, ref, children } = props;
+	const attributes = rootAttributes(props);
+	const isList = Tag === "ul" || Tag === "ol";
+	const cols = props.columns === void 0 ? void 0 : resolveGridColumns(props.columns);
+	const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, ...outer } = attributes;
+	return /* @__PURE__ */ jsx("div", {
+		...outer,
+		ref,
+		className: cx(Grid_module_default.root, className),
+		children: /* @__PURE__ */ jsx(Tag, {
+			className: Grid_module_default.grid,
+			role: isList ? "list" : Tag === "div" && (ariaLabel || ariaLabelledby) ? "group" : void 0,
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledby,
+			"aria-describedby": ariaDescribedby,
+			"data-gap": gap,
+			"data-row-gap": rowGap,
+			"data-align-items": alignItems,
+			"data-mode": cols ? "columns" : "auto",
+			"data-min-item-width": cols ? void 0 : props.minItemWidth ?? "sm",
+			"data-columns": cols?.base,
+			"data-columns-sm": cols?.sm,
+			"data-columns-md": cols?.md,
+			"data-columns-lg": cols?.lg,
+			children
+		})
+	});
+}
+export { Grid, resolveGridColumns };

package/dist/components/Grid/Grid.module.js

@@ -0,0 +1,7 @@
+import './Grid.css';
+// src/components/Grid/Grid.module.css
+var Grid_module_default = {
+	"root": "sti-Grid-root-1e51b",
+	"grid": "sti-Grid-grid-fe98c"
+};
+export { Grid_module_default as default };

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

@@ -0,0 +1,2 @@
+import { Grid, GridColumnCount, GridElement, GridMinItemWidth, GridProps, GridResponsiveColumns, resolveGridColumns } from "./Grid.js";
+export { Grid, GridColumnCount, GridElement, GridMinItemWidth, GridProps, GridResponsiveColumns, resolveGridColumns };

package/dist/components/Heading/Heading.css

@@ -0,0 +1,104 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Heading-root-036c6 {
+    color: var(--sti-fg);
+    font-family: var(--sti-font-display);
+    font-weight: var(--sti-font-weight-bold);
+    word-spacing: var(--sti-word-spacing-display);
+    text-wrap: balance;
+    font-size: var(--sti-heading-size);
+    line-height: var(--sti-heading-leading);
+    letter-spacing: var(--sti-heading-tracking);
+    margin: 0;
+  }
+
+  .sti-Heading-root-036c6:is([data-size="sm"], [data-size="md"]) {
+    font-family: var(--sti-font-text);
+    font-weight: var(--sti-font-weight-semibold);
+    word-spacing: normal;
+  }
+
+  .sti-Heading-root-036c6[data-size="sm"] {
+    --sti-heading-size: var(--sti-font-size-sm);
+    --sti-heading-leading: var(--sti-line-height-sm);
+    --sti-heading-tracking: var(--sti-tracking-sm);
+  }
+
+  .sti-Heading-root-036c6[data-size="md"] {
+    --sti-heading-size: var(--sti-font-size-md);
+    --sti-heading-leading: var(--sti-line-height-md);
+    --sti-heading-tracking: var(--sti-tracking-md);
+  }
+
+  .sti-Heading-root-036c6[data-size="lg"] {
+    --sti-heading-size: var(--sti-font-size-lg);
+    --sti-heading-leading: var(--sti-line-height-lg);
+    --sti-heading-tracking: var(--sti-tracking-lg);
+  }
+
+  .sti-Heading-root-036c6[data-size="xl"] {
+    --sti-heading-size: var(--sti-font-size-xl);
+    --sti-heading-leading: var(--sti-line-height-xl);
+    --sti-heading-tracking: var(--sti-tracking-xl);
+  }
+
+  .sti-Heading-root-036c6[data-size="2xl"] {
+    --sti-heading-size: var(--sti-font-size-2xl);
+    --sti-heading-leading: var(--sti-line-height-2xl);
+    --sti-heading-tracking: var(--sti-tracking-2xl);
+  }
+
+  .sti-Heading-root-036c6[data-size="3xl"] {
+    --sti-heading-size: var(--sti-font-size-3xl);
+    --sti-heading-leading: var(--sti-line-height-3xl);
+    --sti-heading-tracking: var(--sti-tracking-3xl);
+  }
+
+  .sti-Heading-root-036c6[data-size="4xl"] {
+    --sti-heading-size: var(--sti-font-size-4xl);
+    --sti-heading-leading: var(--sti-line-height-4xl);
+    --sti-heading-tracking: var(--sti-tracking-4xl);
+  }
+
+  .sti-Heading-root-036c6[data-size="heading-lg"] {
+    --sti-heading-size: var(--sti-font-size-heading-lg);
+    --sti-heading-leading: var(--sti-line-height-heading-lg);
+    --sti-heading-tracking: var(--sti-tracking-heading-lg);
+  }
+
+  .sti-Heading-root-036c6[data-size="heading-xl"] {
+    --sti-heading-size: var(--sti-font-size-heading-xl);
+    --sti-heading-leading: var(--sti-line-height-heading-xl);
+    --sti-heading-tracking: var(--sti-tracking-heading-xl);
+  }
+
+  .sti-Heading-root-036c6[data-size="display-lg"] {
+    --sti-heading-size: var(--sti-font-size-display-lg);
+    --sti-heading-leading: var(--sti-line-height-display-lg);
+    --sti-heading-tracking: var(--sti-tracking-display-lg);
+  }
+
+  .sti-Heading-root-036c6[data-size="display-xl"] {
+    --sti-heading-size: var(--sti-font-size-display-xl);
+    --sti-heading-leading: var(--sti-line-height-display-xl);
+    --sti-heading-tracking: var(--sti-tracking-display-xl);
+  }
+
+  .sti-Heading-root-036c6[data-size="display-2xl"] {
+    --sti-heading-size: var(--sti-font-size-display-2xl);
+    --sti-heading-leading: var(--sti-line-height-display-2xl);
+    --sti-heading-tracking: var(--sti-tracking-display-2xl);
+  }
+
+  .sti-Heading-root-036c6[data-tone="muted"] {
+    color: var(--sti-fg-muted);
+  }
+
+  .sti-Heading-root-036c6[data-align="center"] {
+    text-align: center;
+  }
+
+  .sti-Heading-root-036c6[data-align="end"] {
+    text-align: end;
+  }
+}

package/dist/components/Heading/Heading.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+/** Uygulama ölçeği (sabit) ve site ölçeği (ekranla büyüyen) boyutları. */
+export type HeadingSize = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "heading-lg" | "heading-xl" | "display-lg" | "display-xl" | "display-2xl";
+export interface HeadingProps {
+  /** Belge yapısındaki düzey (h1–h6). Görünüş boyuttan gelir; düzey atlanmamalıdır. */
+  level: HeadingLevel;
+  /** Görünen boyut; verilmezse düzeye göre (1 → 3xl, 2 → 2xl, 3 → xl, 4 → lg, 5 → md, 6 → sm). */
+  size?: HeadingSize;
+  tone?: "default" | "muted";
+  align?: "start" | "center" | "end";
+  id?: string;
+  className?: string;
+  children: ReactNode;
+}
+/**
+ * Başlık. 20 piksel ve üstünde Clash Display (sıkı satır, negatif harf aralığı, geniş kelime
+ * boşluğu), altında General Sans yarı kalın: Clash'in harf aralığı ayarı yoktur, küçükte okunmaz.
+ */
+export declare function Heading({ level, size, tone, align, id, className, children }: HeadingProps): import("react").JSX.Element;

package/dist/components/Heading/Heading.js

@@ -0,0 +1,28 @@
+import Heading_module_default from "./Heading.module.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/Heading/Heading.tsx
+const DEFAULT_SIZE = {
+	1: "3xl",
+	2: "2xl",
+	3: "xl",
+	4: "lg",
+	5: "md",
+	6: "sm"
+};
+/**
+* Başlık. 20 piksel ve üstünde Clash Display (sıkı satır, negatif harf aralığı, geniş kelime
+* boşluğu), altında General Sans yarı kalın: Clash'in harf aralığı ayarı yoktur, küçükte okunmaz.
+*/
+function Heading({ level, size, tone = "default", align, id, className, children }) {
+	const Tag = `h${level}`;
+	const s = size ?? DEFAULT_SIZE[level];
+	return /* @__PURE__ */ jsx(Tag, {
+		id,
+		className: [Heading_module_default.root, className].filter(Boolean).join(" "),
+		"data-size": s,
+		"data-tone": tone === "default" ? void 0 : tone,
+		"data-align": align,
+		children
+	});
+}
+export { Heading };

package/dist/components/Heading/Heading.module.js

@@ -0,0 +1,4 @@
+import './Heading.css';
+// src/components/Heading/Heading.module.css
+var Heading_module_default = { "root": "sti-Heading-root-036c6" };
+export { Heading_module_default as default };

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

@@ -0,0 +1,2 @@
+import { Heading, HeadingLevel, HeadingProps, HeadingSize } from "./Heading.js";
+export { Heading, HeadingLevel, HeadingProps, HeadingSize };

package/dist/components/Highlight/Highlight.d.ts

@@ -0,0 +1,27 @@
+import { Locale } from "../../provider/locale.js";
+import { MarkTone } from "../Mark/Mark.js";
+import { HighlightMatching, HighlightOptions, HighlightRange, highlightRanges, highlightTerms } from "./highlightRanges.js";
+export interface HighlightProps {
+  /** Vurgulanacak düz metin (HTML değil; içerik her zaman metin olarak yazılır). */
+  text: string;
+  /**
+   * Aranan: metin verilirse her kelime ayrı bir terimdir ("ankara istanbul" iki terim), dizi
+   * verilirse her öğe bir terimdir (boşluk içeren ifade: `["vergi kimlik"]`). Boşsa vurgu yoktur.
+   */
+  query: string | readonly string[];
+  /** Eşleşme kuralı: `loose` (varsayılan; "istanbul" → "İstanbul") ya da `strict` ("ı" ≠ "i"). */
+  matching?: HighlightMatching;
+  /** Büyük/küçük harf dönüşümünün dili; varsayılan Türkçe ("I" → "ı", "İ" → "i"). */
+  locale?: Locale;
+  /** Vurgunun rengi (`Mark`). */
+  tone?: MarkTone;
+  className?: string;
+  id?: string;
+}
+/**
+ * Verilen metinde aranan terimlerin geçtiği yerleri `Mark` ile vurgular (arama sonuçları, filtreli
+ * listeler). Sunucu bileşenidir; eşleşme düzenli ifade kullanmaz, terimdeki özel karakterler düz
+ * metindir. Metin NFC biçimine getirilir (görünüşü aynıdır), aksanlı harf hiçbir zaman bölünmez.
+ */
+export declare function Highlight({ text, query, matching, locale, tone, className, id }: HighlightProps): import("react").JSX.Element;
+export { type HighlightMatching, type HighlightOptions, type HighlightRange, highlightRanges, highlightTerms };

package/dist/components/Highlight/Highlight.js

@@ -0,0 +1,34 @@
+import { Mark } from "../Mark/Mark.js";
+import { highlightRanges, highlightTerms } from "./highlightRanges.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/Highlight/Highlight.tsx
+/**
+* Verilen metinde aranan terimlerin geçtiği yerleri `Mark` ile vurgular (arama sonuçları, filtreli
+* listeler). Sunucu bileşenidir; eşleşme düzenli ifade kullanmaz, terimdeki özel karakterler düz
+* metindir. Metin NFC biçimine getirilir (görünüşü aynıdır), aksanlı harf hiçbir zaman bölünmez.
+*/
+function Highlight({ text, query, matching = "loose", locale = "tr-TR", tone, className, id }) {
+	const value = text.normalize("NFC");
+	const ranges = highlightRanges(value, query, {
+		matching,
+		locale
+	});
+	const parts = [];
+	let at = 0;
+	for (const r of ranges) {
+		if (r.start > at) parts.push(value.slice(at, r.start));
+		parts.push(/* @__PURE__ */ jsx(Mark, {
+			tone,
+			children: value.slice(r.start, r.end)
+		}, r.start));
+		at = r.end;
+	}
+	if (at < value.length) parts.push(value.slice(at));
+	return /* @__PURE__ */ jsx("span", {
+		id,
+		className,
+		"data-matches": ranges.length,
+		children: parts
+	});
+}
+export { Highlight, highlightRanges, highlightTerms };

package/dist/components/Highlight/highlightRanges.d.ts

@@ -0,0 +1,26 @@
+import { Locale } from "../../provider/locale.js";
+/**
+ * Eşleşme kuralı:
+ * - `loose`: gevşek (büyük/küçük harf ve aksan duyarsız, "ı" = "i", "ş" = "s"); "istanbul"
+ *   araması "İstanbul"u, "sifre" araması "Şifre"yi bulur. Arama sonuçları için varsayılan.
+ * - `strict`: büyük/küçük harf duyarsız, harf duyarlı (Türkçe kuralıyla: "ı" ≠ "i", "ş" ≠ "s");
+ *   "ışık" araması "IŞIK"ı bulur, "isik"i bulmaz.
+ */
+export type HighlightMatching = "loose" | "strict";
+/** Vurgulanacak aralık: `text.slice(start, end)` (UTF-16 konumları). */
+export interface HighlightRange {
+  start: number;
+  end: number;
+}
+export interface HighlightOptions {
+  matching?: HighlightMatching;
+  locale?: Locale;
+}
+/** Arama sorgusunu terimlere ayırır: dizi verilirse her öğe, metin verilirse her kelime bir terim. */
+export declare function highlightTerms(query: string | readonly string[]): string[];
+/**
+ * Metindeki eşleşme aralıkları: sıralı, çakışanlar ve bitişikler birleştirilmiş. Metin NFC
+ * biçiminde verilmelidir (`Highlight` bunu kendisi yapar); bir harfin ardından gelen birleşik
+ * işaretler (aksan) aralığa dahil edilir, harf ile aksanı hiçbir zaman bölünmez.
+ */
+export declare function highlightRanges(text: string, query: string | readonly string[], { matching, locale }?: HighlightOptions): HighlightRange[];

package/dist/components/Highlight/highlightRanges.js

@@ -0,0 +1,55 @@
+import { searchKey, toLower } from "../../text/text.js";
+// src/components/Highlight/highlightRanges.ts
+const COMBINING = /\p{M}/u;
+/** Arama sorgusunu terimlere ayırır: dizi verilirse her öğe, metin verilirse her kelime bir terim. */
+function highlightTerms(query) {
+	const raw = typeof query === "string" ? query.split(/\s+/) : query.map((q) => q.trim());
+	return [...new Set(raw.filter((t) => t.length > 0))];
+}
+/**
+* Metindeki eşleşme aralıkları: sıralı, çakışanlar ve bitişikler birleştirilmiş. Metin NFC
+* biçiminde verilmelidir (`Highlight` bunu kendisi yapar); bir harfin ardından gelen birleşik
+* işaretler (aksan) aralığa dahil edilir, harf ile aksanı hiçbir zaman bölünmez.
+*/
+function highlightRanges(text, query, { matching = "loose", locale = "tr-TR" } = {}) {
+	const terms = highlightTerms(query);
+	if (terms.length === 0 || text.length === 0) return [];
+	const fold = (cp) => matching === "loose" ? searchKey(cp, locale) : toLower(cp, locale);
+	const keyOf = (s) => Array.from(s.normalize("NFC"), fold).join("");
+	let key = "";
+	const starts = [];
+	const ends = [];
+	let at = 0;
+	for (const cp of text) {
+		const k = fold(cp);
+		for (let j = 0; j < k.length; j++) {
+			starts.push(at);
+			ends.push(at + cp.length);
+		}
+		key += k;
+		at += cp.length;
+	}
+	const found = [];
+	for (const term of terms) {
+		const needle = keyOf(term);
+		if (needle.length === 0) continue;
+		for (let i = key.indexOf(needle); i !== -1; i = key.indexOf(needle, i + 1)) {
+			const start = starts[i] ?? 0;
+			let end = ends[i + needle.length - 1] ?? text.length;
+			while (end < text.length && COMBINING.test(String.fromCodePoint(text.codePointAt(end) ?? 0))) end += (text.codePointAt(end) ?? 0) > 65535 ? 2 : 1;
+			found.push({
+				start,
+				end
+			});
+		}
+	}
+	found.sort((a, b) => a.start - b.start || b.end - a.end);
+	const merged = [];
+	for (const r of found) {
+		const last = merged[merged.length - 1];
+		if (last && r.start <= last.end) last.end = Math.max(last.end, r.end);
+		else merged.push({ ...r });
+	}
+	return merged;
+}
+export { highlightRanges, highlightTerms };

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

@@ -0,0 +1,3 @@
+import { HighlightMatching, HighlightOptions, HighlightRange, highlightRanges, highlightTerms } from "./highlightRanges.js";
+import { Highlight, HighlightProps } from "./Highlight.js";
+export { Highlight, type HighlightMatching, type HighlightOptions, HighlightProps, type HighlightRange, highlightRanges, highlightTerms };

package/dist/components/HoverCard/HoverCard.css

@@ -0,0 +1,6 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-HoverCard-trigger-45953 {
+    display: inline;
+  }
+}

package/dist/components/HoverCard/HoverCard.d.ts

@@ -0,0 +1,27 @@
+import { Placement } from "../_internal/overlay/FloatingCard.js";
+import { ReactNode } from "react";
+export interface HoverCardProps {
+  /**
+   * Kartı açan öğe: genellikle bir bağlantı (kişi, proje, kayıt). Odaklanabilir olmalıdır; kartın
+   * içeriği bu öğenin gittiği sayfada da bulunmalıdır (kart yalnız önizlemedir).
+   */
+  children: ReactNode;
+  /** Kartın içeriği (önizleme). */
+  content: ReactNode;
+  /** Kartın adı (ekran okuyucu için): "Ayşe Kaya profil önizlemesi". */
+  label: string;
+  placement?: Placement;
+  size?: "sm" | "md" | "lg";
+  /** Açılma gecikmesi (ms). Varsayılan 600. */
+  openDelay?: number;
+  /** Kapanma gecikmesi (ms): işaretçi karta geçebilsin diye. Varsayılan 300. */
+  closeDelay?: number;
+  className?: string;
+}
+/**
+ * Önizleme kartı: bağlantının üzerine gelince ya da klavye odağında, kısa bir gecikmeyle kişi ya da
+ * kayıt önizlemesi açılır. Kipsizdir: odak yerinde kalır, sayfa kullanılmaya devam eder. İşaretçi
+ * karta geçince açık kalır; Escape ve odağın ayrılması kapatır. Dokunmatikte açılmaz (bağlantı doğrudan
+ * gider): içerik yalnız önizlemedir.
+ */
+export declare function HoverCard({ children, content, label, placement, size, openDelay, closeDelay, className }: HoverCardProps): import("react").JSX.Element;

package/dist/components/HoverCard/HoverCard.js

@@ -0,0 +1,64 @@
+"use client";
+import { FloatingCard } from "../_internal/overlay/FloatingCard.js";
+import HoverCard_module_default from "./HoverCard.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+// src/components/HoverCard/HoverCard.tsx
+/**
+* Önizleme kartı: bağlantının üzerine gelince ya da klavye odağında, kısa bir gecikmeyle kişi ya da
+* kayıt önizlemesi açılır. Kipsizdir: odak yerinde kalır, sayfa kullanılmaya devam eder. İşaretçi
+* karta geçince açık kalır; Escape ve odağın ayrılması kapatır. Dokunmatikte açılmaz (bağlantı doğrudan
+* gider): içerik yalnız önizlemedir.
+*/
+function HoverCard({ children, content, label, placement = "bottom start", size = "md", openDelay = 600, closeDelay = 300, className }) {
+	const trigger = useRef(null);
+	const [open, setOpen] = useState(false);
+	const timer = useRef(void 0);
+	const schedule = (next, wait) => {
+		clearTimeout(timer.current);
+		timer.current = setTimeout(() => setOpen(next), wait);
+	};
+	const show = () => schedule(true, openDelay);
+	const hide = () => schedule(false, closeDelay);
+	const keep = () => clearTimeout(timer.current);
+	useEffect(() => () => clearTimeout(timer.current), []);
+	useEffect(() => {
+		if (!open) return;
+		const onKey = (e) => {
+			if (e.key === "Escape") {
+				clearTimeout(timer.current);
+				setOpen(false);
+			}
+		};
+		document.addEventListener("keydown", onKey);
+		return () => document.removeEventListener("keydown", onKey);
+	}, [open]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		ref: trigger,
+		className: HoverCard_module_default.trigger,
+		onPointerEnter: (e) => {
+			if (e.pointerType !== "touch") show();
+		},
+		onPointerLeave: (e) => {
+			if (e.pointerType !== "touch") hide();
+		},
+		onFocus: show,
+		onBlur: hide,
+		children
+	}), /* @__PURE__ */ jsx(FloatingCard, {
+		"aria-label": label,
+		triggerRef: trigger,
+		isOpen: open,
+		onOpenChange: setOpen,
+		isNonModal: true,
+		structure: "region",
+		role: "group",
+		placement,
+		size,
+		className,
+		onPointerEnter: keep,
+		onPointerLeave: hide,
+		children: content
+	})] });
+}
+export { HoverCard };

package/dist/components/HoverCard/HoverCard.module.js

@@ -0,0 +1,4 @@
+import './HoverCard.css';
+// src/components/HoverCard/HoverCard.module.css
+var HoverCard_module_default = { "trigger": "sti-HoverCard-trigger-45953" };
+export { HoverCard_module_default as default };

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

@@ -0,0 +1,2 @@
+import { HoverCard, HoverCardProps } from "./HoverCard.js";
+export { HoverCard, HoverCardProps };

package/dist/components/IbanField/IbanField.css

@@ -0,0 +1,6 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-IbanField-root-122c0 {
+    min-inline-size: min(100%, 22rem);
+  }
+}

package/dist/components/IbanField/IbanField.d.ts

@@ -0,0 +1,20 @@
+import { Bank } from "../BankSelect/banks.js";
+import { MaskedFieldProps } from "../MaskedField/MaskedField.js";
+import { ReactNode } from "react";
+export interface IbanFieldProps extends Omit<MaskedFieldProps, "mask" | "label" | "uppercase" | "submit" | "minFilled" | "onChange" | "value" | "defaultValue"> {
+  /** Görünür etiket; verilmezse "IBAN". */
+  label?: ReactNode;
+  /** IBAN; "TR" önekli ya da öneksiz, boşluklu ya da boşluksuz. */
+  value?: string;
+  defaultValue?: string;
+  /** Boşluksuz IBAN ("TR33…"; boşsa "") ve tanınan banka. */
+  onChange?: (iban: string, bank: Bank | undefined) => void;
+  /** Banka kodundan banka adını gösterir. Varsayılan açık. */
+  showBank?: boolean;
+}
+/**
+ * Türkiye IBAN alanı: "TR" öneki sabittir, haneler dörderli gruplanır; yapıştırılan IBAN (önekli,
+ * boşluklu, küçük harfli) düzelir. Banka kodundan banka adı yardım metninin üstünde yazılır. Uzunluk
+ * ve ISO 13616 sağlaması alandan çıkınca denetlenir. Form boşluksuz IBAN'ı alır ("TR33…").
+ */
+export declare function IbanField({ label, value, defaultValue, onChange, showBank, description, validate, name, autoComplete, className, ...rest }: IbanFieldProps): import("react").JSX.Element;

package/dist/components/IbanField/IbanField.js

@@ -0,0 +1,52 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { extractRaw, parseMask } from "../MaskedField/mask.js";
+import { MaskedField } from "../MaskedField/MaskedField.js";
+import { bankByCode } from "../BankSelect/banks.js";
+import { BuildingIcon } from "../../icons/generated/BuildingIcon.js";
+import { isValidIban } from "../../validate/turkey.js";
+import { withDetected } from "../_internal/idField/Detected.js";
+import IbanField_module_default from "./IbanField.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/components/IbanField/IbanField.tsx
+const MASK = "TR## #### #### #### #### #### ##";
+const SLOTS = parseMask(MASK);
+/** IBAN metninden "TR"den sonraki 24 hane (boşluk, küçük harf ve "TR" öneki temizlenir). */
+const rawOf = (value) => extractRaw(value.toLocaleUpperCase("en-US"), SLOTS);
+/** Ham hanelerden banka: kontrol hanelerinden sonraki beş hane EFT kodudur. */
+const bankOf = (raw) => raw.length >= 7 ? bankByCode(raw.slice(2, 7)) : void 0;
+/**
+* Türkiye IBAN alanı: "TR" öneki sabittir, haneler dörderli gruplanır; yapıştırılan IBAN (önekli,
+* boşluklu, küçük harfli) düzelir. Banka kodundan banka adı yardım metninin üstünde yazılır. Uzunluk
+* ve ISO 13616 sağlaması alandan çıkınca denetlenir. Form boşluksuz IBAN'ı alır ("TR33…").
+*/
+function IbanField({ label, value, defaultValue, onChange, showBank = true, description, validate, name, autoComplete = "off", className, ...rest }) {
+	const t = useMessages();
+	const [inner, setInner] = useState(() => rawOf(defaultValue ?? ""));
+	const raw = value === void 0 ? inner : rawOf(value);
+	const bank = showBank ? bankOf(raw) : void 0;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MaskedField, {
+		...rest,
+		mask: MASK,
+		className: [IbanField_module_default.root, className].filter(Boolean).join(" "),
+		label: label ?? t.ibanLabel,
+		value: raw,
+		onChange: (next) => {
+			if (value === void 0) setInner(next);
+			onChange?.(next ? `TR${next}` : "", bankOf(next));
+		},
+		autoComplete,
+		description: withDetected(bank?.label, /* @__PURE__ */ jsx(BuildingIcon, {}), description),
+		validate: (formatted) => {
+			const r = rawOf(formatted);
+			if (r && !isValidIban(`TR${r}`)) return t.errorIban;
+			return validate?.(formatted);
+		}
+	}), name ? /* @__PURE__ */ jsx("input", {
+		type: "hidden",
+		name,
+		value: raw ? `TR${raw}` : ""
+	}) : null] });
+}
+export { IbanField };

package/dist/components/IbanField/IbanField.module.js

@@ -0,0 +1,4 @@
+import './IbanField.css';
+// src/components/IbanField/IbanField.module.css
+var IbanField_module_default = { "root": "sti-IbanField-root-122c0" };
+export { IbanField_module_default as default };

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

@@ -0,0 +1,2 @@
+import { IbanField, IbanFieldProps } from "./IbanField.js";
+export { IbanField, IbanFieldProps };