@stisocial/ui 0.1.0 → 0.2.0

package/dist/media/AudioWaveform/peaks.js

@@ -0,0 +1,54 @@
+import { isThirdParty } from "../_internal/url.js";
+// src/media/AudioWaveform/peaks.ts
+/**
+* Dalga biçimi hesapları (saf; sunucuda ve istemcide aynı sonuç). `peaks` 0–1 arasındaki genlik
+* değerleridir.
+*/
+/**
+* Örnek dizisini `count` sütuna indirger: her sütun, kendi aralığındaki en büyük mutlak genliktir.
+* Sonuç en büyük değere göre 0–1'e ölçeklenir (sessiz kayıtta tümü 0).
+*/
+function computePeaks(samples, count) {
+	const columns = Math.max(1, Math.floor(count));
+	const peaks = new Array(columns).fill(0);
+	const length = samples.length;
+	if (length === 0) return peaks;
+	let max = 0;
+	for (let c = 0; c < columns; c++) {
+		const from = Math.floor(c * length / columns);
+		const to = Math.max(from + 1, Math.floor((c + 1) * length / columns));
+		let peak = 0;
+		for (let i = from; i < to && i < length; i++) {
+			const v = Math.abs(samples[i] ?? 0);
+			if (v > peak) peak = v;
+		}
+		peaks[c] = peak;
+		if (peak > max) max = peak;
+	}
+	return max > 0 ? peaks.map((p) => p / max) : peaks;
+}
+/**
+* Ses dosyasından dalga biçimi çıkarır (tarayıcıda; `fetch` ve `decodeAudioData`). Gizlilik: üçüncü
+* taraf adrese istek yapılmaz; uygulama izin aldıktan sonra `allowThirdParty` verir. Çok kanallı sesin
+* kanalları ortalanır.
+*/
+async function loadWaveformPeaks(src, count, options = {}) {
+	const origin = typeof location === "undefined" ? void 0 : location.origin;
+	if (!options.allowThirdParty && isThirdParty(src, origin)) throw new Error("Üçüncü taraf adresten dalga biçimi izinsiz yüklenmez.");
+	const response = await fetch(src, { signal: options.signal });
+	if (!response.ok) throw new Error(`Ses yüklenemedi (${response.status}).`);
+	const data = await response.arrayBuffer();
+	const context = new AudioContext();
+	try {
+		const buffer = await context.decodeAudioData(data);
+		const mixed = new Float32Array(buffer.length);
+		for (let ch = 0; ch < buffer.numberOfChannels; ch++) {
+			const channel = buffer.getChannelData(ch);
+			for (let i = 0; i < channel.length; i++) mixed[i] = (mixed[i] ?? 0) + (channel[i] ?? 0) / buffer.numberOfChannels;
+		}
+		return computePeaks(mixed, count);
+	} finally {
+		context.close();
+	}
+}
+export { computePeaks, loadWaveformPeaks };

package/dist/media/MediaCard/MediaCard.css

@@ -0,0 +1,229 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-MediaCard-root-a931b {
+    --sti-media-card-radius: var(--sti-radius-lg);
+    --sti-media-card-ratio: 16 / 9;
+    --sti-media-card-list-thumb: 9rem;
+    box-sizing: border-box;
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-media-card-radius);
+    background: var(--sti-bg-surface);
+    inline-size: 100%;
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    transition: border-color var(--sti-duration-fast) var(--sti-ease-snap),
+      box-shadow var(--sti-duration-fast) var(--sti-ease-snap);
+    flex-direction: column;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .sti-MediaCard-root-a931b[data-ratio="4/3"] {
+    --sti-media-card-ratio: 4 / 3;
+  }
+
+  .sti-MediaCard-root-a931b[data-ratio="1/1"] {
+    --sti-media-card-ratio: 1 / 1;
+  }
+
+  .sti-MediaCard-media-8c592 {
+    aspect-ratio: var(--sti-media-card-ratio);
+    background: var(--sti-bg-subtle);
+    flex: none;
+    display: block;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .sti-MediaCard-image-48c77 {
+    object-fit: cover;
+    block-size: 100%;
+    inline-size: 100%;
+    display: block;
+  }
+
+  .sti-MediaCard-placeholder-a4cce {
+    justify-content: center;
+    align-items: center;
+    gap: var(--sti-space-2);
+    block-size: 100%;
+    inline-size: 100%;
+    color: var(--sti-fg-muted);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .sti-MediaCard-kindLabel-7a2b1 {
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-medium);
+    line-height: var(--sti-line-height-xs);
+  }
+
+  .sti-MediaCard-duration-39b33 {
+    padding: var(--sti-space-0-5) var(--sti-space-2);
+    border-radius: var(--sti-radius-sm);
+    background: var(--sti-bg-inverse);
+    color: var(--sti-fg-inverse);
+    font-family: var(--sti-font-numeric);
+    font-size: var(--sti-font-size-xs);
+    font-variant-numeric: tabular-nums;
+    line-height: var(--sti-line-height-xs);
+    position: absolute;
+    inset-block-end: var(--sti-space-2);
+    inset-inline-end: var(--sti-space-2);
+  }
+
+  .sti-MediaCard-spoken-8cd25 {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+    block-size: 1px;
+    inline-size: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  .sti-MediaCard-select-b78f4 {
+    z-index: var(--sti-z-raised);
+    padding: var(--sti-space-1);
+    border-radius: var(--sti-radius-sm);
+    background: var(--sti-bg-surface);
+    box-shadow: var(--sti-shadow-sm);
+    display: inline-flex;
+    position: absolute;
+    inset-block-start: var(--sti-space-2);
+    inset-inline-start: var(--sti-space-2);
+  }
+
+  .sti-MediaCard-body-445ad {
+    gap: var(--sti-space-1);
+    min-inline-size: 0;
+    padding: var(--sti-space-3) var(--sti-space-4) var(--sti-space-4);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .sti-MediaCard-title-73891 {
+    font-size: var(--sti-font-size-body);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-body);
+    overflow-wrap: anywhere;
+    text-overflow: ellipsis;
+    margin: 0;
+    overflow: hidden;
+  }
+
+  .sti-MediaCard-link-e5a45 {
+    color: inherit;
+    outline: none;
+    text-decoration: none;
+  }
+
+  .sti-MediaCard-link-e5a45:after {
+    border-radius: inherit;
+    content: "";
+    position: absolute;
+    inset: 0;
+  }
+
+  .sti-MediaCard-link-e5a45[data-focus-visible]:after {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: calc(var(--sti-focus-ring-width) * -1);
+  }
+
+  .sti-MediaCard-meta-15d8e {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-MediaCard-actions-6be8e {
+    z-index: var(--sti-z-raised);
+    align-items: center;
+    gap: var(--sti-space-1);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-surface);
+    box-shadow: var(--sti-shadow-sm);
+    display: flex;
+    position: absolute;
+    inset-block-start: var(--sti-space-2);
+    inset-inline-end: var(--sti-space-2);
+  }
+
+  .sti-MediaCard-root-a931b[data-layout="list"] {
+    grid-template-columns: var(--sti-media-card-list-thumb) minmax(0, 1fr) auto;
+    align-items: center;
+    display: grid;
+  }
+
+  .sti-MediaCard-root-a931b[data-layout="list"] .sti-MediaCard-media-8c592 {
+    aspect-ratio: auto;
+    min-block-size: calc(var(--sti-media-card-list-thumb) * 9 / 16);
+    align-self: stretch;
+  }
+
+  .sti-MediaCard-root-a931b[data-layout="list"] .sti-MediaCard-actions-6be8e {
+    box-shadow: none;
+    background: none;
+    margin-inline-end: var(--sti-space-3);
+    position: static;
+  }
+
+  @media (width <= 30rem) {
+    .sti-MediaCard-root-a931b[data-layout="list"] {
+      --sti-media-card-list-thumb: 6rem;
+    }
+  }
+
+  .sti-MediaCard-root-a931b[data-clickable]:not([data-disabled]) {
+    cursor: pointer;
+  }
+
+  @media (hover: hover) {
+    .sti-MediaCard-root-a931b[data-clickable]:not([data-disabled]):hover {
+      border-color: var(--sti-border-strong);
+      box-shadow: var(--sti-shadow-sm);
+    }
+  }
+
+  .sti-MediaCard-root-a931b[data-selected] {
+    border-color: var(--sti-border-selected);
+    box-shadow: 0 0 0 1px var(--sti-border-selected);
+  }
+
+  .sti-MediaCard-root-a931b[data-disabled] {
+    opacity: var(--sti-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-MediaCard-root-a931b {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-MediaCard-root-a931b {
+      border-color: canvastext;
+    }
+
+    .sti-MediaCard-root-a931b[data-selected] {
+      outline: var(--sti-border-width-strong) solid Highlight;
+      outline-offset: calc(var(--sti-border-width-strong) * -1);
+    }
+
+    .sti-MediaCard-duration-39b33, .sti-MediaCard-select-b78f4, .sti-MediaCard-actions-6be8e {
+      border: var(--sti-border-width) solid CanvasText;
+    }
+
+    .sti-MediaCard-link-e5a45[data-focus-visible]:after {
+      outline-color: highlight;
+    }
+  }
+}

package/dist/media/MediaCard/MediaCard.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from "react";
+export type MediaKind = "image" | "video" | "audio" | "document" | "file";
+export interface MediaCardProps {
+  /** Medyanın türü: önizlemesi yoksa türün simgesi çizilir ve tür etiketi gösterilir. */
+  kind: MediaKind;
+  /** Dosya ya da içerik adı (zorunlu): kartın ve bağlantının adıdır. */
+  title: string;
+  /** Önizleme görselinin adresi (uygulamanın kendi depolaması); verilmezse tür simgesi çizilir. */
+  thumbnail?: string;
+  /** Ad altındaki ayrıntılar: ["PNG", "2,4 MB", "12 Kas 2026"]. " · " ile birleştirilir. */
+  meta?: readonly string[];
+  /** Video ve ses süresi (saniye). */
+  duration?: number;
+  /** Verilirse başlık bu adrese giden bağlantı olur; bütün kart tıklanabilir. */
+  href?: string;
+  /** Seçilebilir kart: onay kutusu çizilir. Varsayılan `onSelectionChange` verilmesine bağlıdır. */
+  isSelectable?: boolean;
+  isSelected?: boolean;
+  defaultSelected?: boolean;
+  onSelectionChange?: (isSelected: boolean) => void;
+  /** Sağ üstte eylemler (menü düğmesi gibi). */
+  actions?: ReactNode;
+  /** Önizleme oranı; varsayılan 16/9. */
+  aspectRatio?: "16/9" | "4/3" | "1/1";
+  /** `grid` (varsayılan): önizleme üstte; `list`: önizleme solda, satır düzeni. */
+  layout?: "grid" | "list";
+  /** Başlığın belge düzeyi; görünüşü değişmez. */
+  headingLevel?: 2 | 3 | 4 | 5 | 6;
+  isDisabled?: boolean;
+  className?: string;
+  id?: string;
+}
+/**
+ * Medya kartı: önizleme (ya da tür simgesi), süre, ad, ayrıntılar, isteğe bağlı seçim kutusu ve
+ * eylemler. `href` verilince başlık bağlantı olur ve bütün kart tıklanabilir (tek sekme durağı);
+ * seçim kutusu ve eylemler bağlantının üstünde kendi odağını alır.
+ */
+export declare function MediaCard({ kind, title, thumbnail, meta, duration, href, isSelectable, isSelected, defaultSelected, onSelectionChange, actions, aspectRatio, layout, headingLevel, isDisabled, className, id }: MediaCardProps): import("react").JSX.Element;

package/dist/media/MediaCard/MediaCard.js

@@ -0,0 +1,120 @@
+"use client";
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { FileTextIcon } from "../../icons/generated/FileTextIcon.js";
+import { Checkbox } from "../../components/Checkbox/Checkbox.js";
+import { FileIcon } from "../../icons/generated/FileIcon.js";
+import { ImageIcon } from "../../icons/generated/ImageIcon.js";
+import { VideoIcon } from "../../icons/generated/VideoIcon.js";
+import { MusicIcon } from "../_internal/icons.js";
+import { formatClock } from "../_internal/clock.js";
+import MediaCard_module_default from "./MediaCard.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Link } from "react-aria-components";
+// src/media/MediaCard/MediaCard.tsx
+const ICONS = {
+	image: ImageIcon,
+	video: VideoIcon,
+	audio: MusicIcon,
+	document: FileTextIcon,
+	file: FileIcon
+};
+const KIND_LABELS = {
+	image: "mediaTypeImage",
+	video: "mediaTypeVideo",
+	audio: "mediaTypeAudio",
+	document: "mediaTypeDocument",
+	file: "mediaTypeFile"
+};
+/**
+* Medya kartı: önizleme (ya da tür simgesi), süre, ad, ayrıntılar, isteğe bağlı seçim kutusu ve
+* eylemler. `href` verilince başlık bağlantı olur ve bütün kart tıklanabilir (tek sekme durağı);
+* seçim kutusu ve eylemler bağlantının üstünde kendi odağını alır.
+*/
+function MediaCard({ kind, title, thumbnail, meta, duration, href, isSelectable, isSelected, defaultSelected, onSelectionChange, actions, aspectRatio = "16/9", layout = "grid", headingLevel = 3, isDisabled, className, id }) {
+	const t = useMessages();
+	const f = useFormatter();
+	const Icon = ICONS[kind];
+	const Heading = `h${headingLevel}`;
+	const selectable = isSelectable ?? onSelectionChange !== void 0;
+	const [internal, setInternal] = useState(defaultSelected ?? false);
+	const selected = isSelected ?? internal;
+	const hasDuration = duration !== void 0 && Number.isFinite(duration) && duration >= 0;
+	const kindLabel = t[KIND_LABELS[kind]];
+	const titleNode = href ? /* @__PURE__ */ jsx(Link, {
+		className: MediaCard_module_default.link,
+		href,
+		isDisabled,
+		children: title
+	}) : title;
+	return /* @__PURE__ */ jsxs("article", {
+		id,
+		className: [MediaCard_module_default.root, className].filter(Boolean).join(" "),
+		"data-kind": kind,
+		"data-layout": layout,
+		"data-ratio": aspectRatio,
+		"data-selected": selected ? "" : void 0,
+		"data-disabled": isDisabled ? "" : void 0,
+		"data-clickable": href ? "" : void 0,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: MediaCard_module_default.media,
+				children: [
+					thumbnail ? /* @__PURE__ */ jsx("img", {
+						className: MediaCard_module_default.image,
+						src: thumbnail,
+						alt: "",
+						loading: "lazy",
+						decoding: "async"
+					}) : /* @__PURE__ */ jsxs("span", {
+						className: MediaCard_module_default.placeholder,
+						"aria-hidden": "true",
+						children: [/* @__PURE__ */ jsx(Icon, { size: "lg" }), /* @__PURE__ */ jsx("span", {
+							className: MediaCard_module_default.kindLabel,
+							children: kindLabel
+						})]
+					}),
+					hasDuration ? /* @__PURE__ */ jsxs("span", {
+						className: MediaCard_module_default.duration,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: MediaCard_module_default.spoken,
+							children: template(t.mediaDuration, { duration: f.duration(Math.round(duration), { style: "long" }) })
+						}), /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							children: formatClock(duration)
+						})]
+					}) : null,
+					selectable ? /* @__PURE__ */ jsx("span", {
+						className: MediaCard_module_default.select,
+						children: /* @__PURE__ */ jsx(Checkbox, {
+							size: "md",
+							"aria-label": template(t.mediaSelectItem, { title }),
+							isSelected: selected,
+							onChange: (next) => {
+								setInternal(next);
+								onSelectionChange?.(next);
+							},
+							isDisabled
+						})
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: MediaCard_module_default.body,
+				children: [/* @__PURE__ */ jsx(Heading, {
+					className: MediaCard_module_default.title,
+					children: titleNode
+				}), meta && meta.length > 0 ? /* @__PURE__ */ jsx("p", {
+					className: MediaCard_module_default.meta,
+					children: meta.join(" · ")
+				}) : null]
+			}),
+			actions ? /* @__PURE__ */ jsx("div", {
+				className: MediaCard_module_default.actions,
+				children: actions
+			}) : null
+		]
+	});
+}
+export { MediaCard };

package/dist/media/MediaCard/MediaCard.module.js

@@ -0,0 +1,18 @@
+import './MediaCard.css';
+// src/media/MediaCard/MediaCard.module.css
+var MediaCard_module_default = {
+	"root": "sti-MediaCard-root-a931b",
+	"media": "sti-MediaCard-media-8c592",
+	"image": "sti-MediaCard-image-48c77",
+	"placeholder": "sti-MediaCard-placeholder-a4cce",
+	"kindLabel": "sti-MediaCard-kindLabel-7a2b1",
+	"duration": "sti-MediaCard-duration-39b33",
+	"spoken": "sti-MediaCard-spoken-8cd25",
+	"select": "sti-MediaCard-select-b78f4",
+	"body": "sti-MediaCard-body-445ad",
+	"title": "sti-MediaCard-title-73891",
+	"link": "sti-MediaCard-link-e5a45",
+	"meta": "sti-MediaCard-meta-15d8e",
+	"actions": "sti-MediaCard-actions-6be8e"
+};
+export { MediaCard_module_default as default };

package/dist/media/MediaCard/index.d.ts

@@ -0,0 +1,2 @@
+import { MediaCard, MediaCardProps, MediaKind } from "./MediaCard.js";
+export { MediaCard, MediaCardProps, MediaKind };

package/dist/media/VideoPlayer/VideoPlayer.css

@@ -0,0 +1,125 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-VideoPlayer-root-db1d5 {
+    --sti-video-radius: var(--sti-radius-lg);
+    --sti-video-ratio: 16 / 9;
+    --sti-video-stage-bg: var(--sti-bg-subtle);
+    box-sizing: border-box;
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-video-radius);
+    background: var(--sti-bg-surface);
+    inline-size: 100%;
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    flex-direction: column;
+    display: flex;
+    overflow: hidden;
+  }
+
+  .sti-VideoPlayer-root-db1d5[data-ratio="4/3"] {
+    --sti-video-ratio: 4 / 3;
+  }
+
+  .sti-VideoPlayer-root-db1d5[data-ratio="1/1"] {
+    --sti-video-ratio: 1 / 1;
+  }
+
+  .sti-VideoPlayer-root-db1d5[data-ratio="9/16"] {
+    --sti-video-ratio: 9 / 16;
+  }
+
+  .sti-VideoPlayer-root-db1d5[data-ratio="21/9"] {
+    --sti-video-ratio: 21 / 9;
+  }
+
+  .sti-VideoPlayer-stage-f9ce3 {
+    aspect-ratio: var(--sti-video-ratio);
+    background: var(--sti-video-stage-bg);
+    outline: none;
+    inline-size: 100%;
+    min-inline-size: 0;
+    display: block;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .sti-VideoPlayer-stage-f9ce3:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: calc(var(--sti-focus-ring-width) * -1);
+  }
+
+  .sti-VideoPlayer-video-c6573 {
+    object-fit: contain;
+    cursor: pointer;
+    block-size: 100%;
+    inline-size: 100%;
+    display: block;
+  }
+
+  .sti-VideoPlayer-gate-b3ac3 {
+    position: absolute;
+    inset: 0;
+    overflow: auto;
+  }
+
+  .sti-VideoPlayer-center-facf1 {
+    pointer-events: none;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    position: absolute;
+    inset: 0;
+  }
+
+  .sti-VideoPlayer-center-facf1 > * {
+    pointer-events: auto;
+  }
+
+  .sti-VideoPlayer-busy-1395e {
+    padding: var(--sti-space-3);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-surface);
+    box-shadow: var(--sti-shadow-md);
+    color: var(--sti-fg-accent);
+    pointer-events: none;
+    display: inline-flex;
+  }
+
+  .sti-VideoPlayer-error-f6d04 {
+    inset-block-end: var(--sti-space-3);
+    inset-inline: var(--sti-space-3);
+    padding: var(--sti-space-2) var(--sti-space-4);
+    border: var(--sti-border-width) solid var(--sti-border-danger);
+    border-radius: var(--sti-radius-md);
+    background: var(--sti-bg-danger-subtle);
+    color: var(--sti-fg-danger-strong);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    text-align: center;
+    position: absolute;
+  }
+
+  .sti-VideoPlayer-root-db1d5[data-fullscreen] {
+    --sti-video-radius: 0;
+    background: var(--sti-bg-canvas);
+    border: 0;
+    block-size: 100%;
+  }
+
+  .sti-VideoPlayer-root-db1d5[data-fullscreen] .sti-VideoPlayer-stage-f9ce3 {
+    aspect-ratio: auto;
+    flex: auto;
+    min-block-size: 0;
+  }
+
+  @media (forced-colors: active) {
+    .sti-VideoPlayer-root-db1d5, .sti-VideoPlayer-error-f6d04 {
+      border-color: canvastext;
+    }
+
+    .sti-VideoPlayer-stage-f9ce3:focus-visible {
+      outline-color: highlight;
+    }
+  }
+}

package/dist/media/VideoPlayer/VideoPlayer.d.ts

@@ -0,0 +1,54 @@
+export interface VideoCaptionTrack {
+  /** Altyazı dosyasının adresi (WebVTT). */
+  src: string;
+  /** Menüde ve durum metninde görünen ad ("Türkçe"). */
+  label: string;
+  /** Dil kodu ("tr"). */
+  language: string;
+  /** Açılışta açık gelir. */
+  isDefault?: boolean;
+}
+export interface VideoSource {
+  src: string;
+  /** MIME türü ("video/mp4"); tarayıcının uygun kaynağı seçmesine yardım eder. */
+  type?: string;
+}
+export type VideoAspectRatio = "16/9" | "4/3" | "1/1" | "9/16" | "21/9";
+export interface VideoPlayerProps {
+  /** Video adresi ya da (biçim yedekli) kaynak listesi. */
+  src: string | VideoSource[];
+  /** Videonun adı (zorunlu): oynatıcının erişilebilir adı olur. */
+  title: string;
+  /** Kapak görseli; üçüncü taraf kaynakta izin verilmeden istenmez. */
+  poster?: string;
+  captions?: VideoCaptionTrack[];
+  /** Sahnenin oranı; varsayılan 16/9. */
+  aspectRatio?: VideoAspectRatio;
+  /** Denetim çubuğunun boyu. */
+  size?: "sm" | "md";
+  loop?: boolean;
+  /** Ön yükleme; varsayılan `metadata`. Üçüncü taraf kaynakta izin sonrasına kadar yük yoktur. */
+  preload?: "none" | "metadata" | "auto";
+  /**
+   * Gizlilik modu: `auto` (varsayılan) sayfanın kendi kaynağı dışındaki adreste izin ister;
+   * `granted` izin önceden verilmiştir (ör. çerez tercihi).
+   */
+  consent?: "auto" | "granted";
+  /** Kullanıcı üçüncü taraf içeriğe izin verince. */
+  onConsent?: () => void;
+  /** Üçüncü taraf altyazı ve video için çerez gönderimi ayarı. */
+  crossOrigin?: "anonymous" | "use-credentials";
+  onPlay?: () => void;
+  onPause?: () => void;
+  onEnded?: () => void;
+  className?: string;
+  id?: string;
+}
+/**
+ * Video oynatıcı: tarayıcının `video` öğesi, kendi denetim çubuğu (oynat, konum, ses, hız, altyazı,
+ * tam ekran). Denetimler videonun üzerinde değil altındadır; karşıtlık videonun içeriğine bağlı değildir.
+ * Klavye (sahne odaktayken): Boşluk ve K oynat/duraklat, ← → 5 sn, J L 10 sn, ↑ ↓ ses, M sessiz,
+ * F tam ekran, C altyazı, 0–9 konum yüzdesi, Home/End baş ve son, `<` `>` hız. Üçüncü taraf adreste
+ * kullanıcı izin verene kadar hiçbir istek yapılmaz.
+ */
+export declare function VideoPlayer({ src, title, poster, captions, aspectRatio, size, loop, preload, consent, onConsent, crossOrigin, onPlay, onPause, onEnded, className, id }: VideoPlayerProps): import("react").JSX.Element;