@stisocial/ui 0.2.1 → 0.3.0

package/dist/components/Carousel/Carousel.css

@@ -0,0 +1,146 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Carousel-root-844a0 {
+    --sti-carousel-gap: var(--sti-space-4);
+    --sti-carousel-slide: 100%;
+    gap: var(--sti-space-3);
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-Carousel-root-844a0[data-size="lg"] .sti-Carousel-slide-fec90, .sti-Carousel-root-844a0[data-size="md"] .sti-Carousel-slide-fec90, .sti-Carousel-root-844a0[data-size="sm"] .sti-Carousel-slide-fec90 {
+    --sti-carousel-slide: 85%;
+  }
+
+  @container sti-carousel (width >= 36rem) {
+    .sti-Carousel-root-844a0[data-size="lg"] .sti-Carousel-slide-fec90 {
+      --sti-carousel-slide: 80%;
+    }
+
+    .sti-Carousel-root-844a0[data-size="md"] .sti-Carousel-slide-fec90, .sti-Carousel-root-844a0[data-size="sm"] .sti-Carousel-slide-fec90 {
+      --sti-carousel-slide: calc((100% - var(--sti-carousel-gap)) / 2);
+    }
+  }
+
+  @container sti-carousel (width >= 48rem) {
+    .sti-Carousel-root-844a0[data-size="sm"] .sti-Carousel-slide-fec90 {
+      --sti-carousel-slide: calc((100% - var(--sti-carousel-gap) * 2) / 3);
+    }
+  }
+
+  .sti-Carousel-controls-ee931 {
+    justify-content: flex-end;
+    gap: var(--sti-space-2);
+    display: flex;
+  }
+
+  .sti-Carousel-arrow-ef631: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)) {
+    rotate: 180deg;
+  }
+
+  .sti-Carousel-track-b4a24 {
+    gap: var(--sti-carousel-gap);
+    overscroll-behavior-x: contain;
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    outline: none;
+    min-inline-size: 0;
+    display: flex;
+    overflow-x: auto;
+    container: sti-carousel / inline-size;
+  }
+
+  .sti-Carousel-track-b4a24:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+    border-radius: var(--sti-radius-md);
+  }
+
+  .sti-Carousel-track-b4a24::-webkit-scrollbar {
+    display: none;
+  }
+
+  .sti-Carousel-slide-fec90 {
+    flex: 0 0 var(--sti-carousel-slide);
+    scroll-snap-align: start;
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-Carousel-indicators-41525 {
+    justify-content: center;
+    gap: var(--sti-space-1);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-Carousel-indicator-7694b {
+    inline-size: var(--sti-space-6);
+    block-size: var(--sti-space-6);
+    border-radius: var(--sti-radius-pill);
+    cursor: pointer;
+    background: none;
+    border: 0;
+    outline: none;
+    place-items: center;
+    padding: 0;
+    display: inline-grid;
+  }
+
+  @media (pointer: coarse) {
+    .sti-Carousel-indicator-7694b {
+      inline-size: var(--sti-control-h-md);
+      block-size: var(--sti-control-h-md);
+    }
+  }
+
+  .sti-Carousel-indicator-7694b:before {
+    content: "";
+    inline-size: var(--sti-space-2);
+    block-size: var(--sti-space-2);
+    border: var(--sti-border-width) solid var(--sti-border-strong);
+    border-radius: var(--sti-radius-pill);
+    transition: inline-size var(--sti-duration-base) var(--sti-ease-out),
+      background-color var(--sti-duration-fast) var(--sti-ease-snap);
+    background: none;
+  }
+
+  @media (hover: hover) {
+    .sti-Carousel-indicator-7694b[data-hovered]:not([data-current]):before {
+      background: var(--sti-border-strong);
+    }
+  }
+
+  .sti-Carousel-indicator-7694b[data-current]:before {
+    inline-size: var(--sti-space-6);
+    border-color: var(--sti-fill-accent);
+    background: var(--sti-fill-accent);
+  }
+
+  .sti-Carousel-indicator-7694b[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: calc(var(--sti-focus-ring-width) * -1);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-Carousel-track-b4a24 {
+      scroll-behavior: auto;
+    }
+
+    .sti-Carousel-indicator-7694b:before {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-Carousel-indicator-7694b:before {
+      border-color: canvastext;
+    }
+
+    .sti-Carousel-indicator-7694b[data-current]:before {
+      background: highlight;
+      border-color: highlight;
+    }
+  }
+}

package/dist/components/Carousel/Carousel.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+export interface CarouselProps {
+  /** Slaytlar: her çocuk bir slayt. */
+  children: ReactNode;
+  /** Bölgenin adı (zorunlu): "Kampanya görselleri". */
+  label: string;
+  /** Slaytların adları; verilmezse "2 / 5". */
+  slideLabels?: readonly string[];
+  /** Slayt genişliği: `full` kabın tamamı, `lg` %80, `md` %50, `sm` %33 (yandaki görünür). */
+  slideSize?: "full" | "lg" | "md" | "sm";
+  /** Otomatik geçiş aralığı (ms; en az 3000). Hareketi azaltma tercihinde başlamaz. */
+  autoplay?: number;
+  defaultIndex?: number;
+  onIndexChange?: (index: number) => void;
+  /** Slayt göstergeleri; varsayılan açık. */
+  showIndicators?: boolean;
+  className?: string;
+  id?: string;
+}
+/**
+ * Slayt gösterisi (APG Carousel): yatay kaydırma yaslamalı şerit, önceki/sonraki düğmeleri,
+ * slayt göstergeleri; isteğe bağlı otomatik geçiş (duraklatılabilir; üzerine gelince, odakta ve
+ * hareketi azaltma tercihinde durur). Slayt değişimi canlı bölgeden duyurulur.
+ */
+export declare function Carousel({ children, label, slideLabels, slideSize, autoplay, defaultIndex, onIndexChange, showIndicators, className, id }: CarouselProps): import("react").JSX.Element | null;

package/dist/components/Carousel/Carousel.js

@@ -0,0 +1,178 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { ChevronRightIcon } from "../../icons/generated/ChevronRightIcon.js";
+import { ChevronLeftIcon } from "../../icons/generated/ChevronLeftIcon.js";
+import { PauseIcon } from "../../icons/generated/PauseIcon.js";
+import { PlayIcon } from "../../icons/generated/PlayIcon.js";
+import Carousel_module_default from "./Carousel.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "react-aria-components";
+// src/components/Carousel/Carousel.tsx
+/** Yalnız şeridi kaydırır (sayfa dikeyde kaymaz); sağdan sola yazıda da doğru yönde. */
+function scrollToSlide(track, index, behavior) {
+	const el = track.children[index];
+	if (!el) return;
+	const delta = el.getBoundingClientRect().left - track.getBoundingClientRect().left;
+	const offset = getComputedStyle(track).direction === "rtl" ? el.getBoundingClientRect().right - track.getBoundingClientRect().right : delta;
+	track.scrollBy({
+		left: offset,
+		behavior
+	});
+}
+const prefersReducedMotion = () => typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
+/**
+* Slayt gösterisi (APG Carousel): yatay kaydırma yaslamalı şerit, önceki/sonraki düğmeleri,
+* slayt göstergeleri; isteğe bağlı otomatik geçiş (duraklatılabilir; üzerine gelince, odakta ve
+* hareketi azaltma tercihinde durur). Slayt değişimi canlı bölgeden duyurulur.
+*/
+function Carousel({ children, label, slideLabels, slideSize = "full", autoplay, defaultIndex = 0, onIndexChange, showIndicators = true, className, id }) {
+	const t = useMessages();
+	const slides = Children.toArray(children);
+	const count = slides.length;
+	const track = useRef(null);
+	const [index, setIndex] = useState(Math.min(Math.max(defaultIndex, 0), Math.max(count - 1, 0)));
+	const [playing, setPlaying] = useState(autoplay !== void 0);
+	const [reduced, setReduced] = useState(false);
+	const interval = autoplay === void 0 ? void 0 : Math.max(autoplay, 3e3);
+	const rotating = interval !== void 0 && playing && !reduced;
+	const root = useRef(null);
+	const steering = useRef(void 0);
+	useEffect(() => setReduced(prefersReducedMotion()), []);
+	const indexRef = useRef(index);
+	const report = useCallback((next) => {
+		if (indexRef.current === next) return;
+		indexRef.current = next;
+		setIndex(next);
+		onIndexChange?.(next);
+	}, [onIndexChange]);
+	const goTo = useCallback((next) => {
+		if (!track.current?.children[next]) return;
+		window.clearTimeout(steering.current);
+		steering.current = window.setTimeout(() => {
+			steering.current = void 0;
+		}, 700);
+		scrollToSlide(track.current, next, prefersReducedMotion() ? "instant" : "smooth");
+		report(next);
+	}, [report]);
+	useEffect(() => {
+		if (track.current && index > 0) scrollToSlide(track.current, index, "instant");
+	}, []);
+	const onScroll = () => {
+		const el = track.current;
+		if (!el || steering.current !== void 0) return;
+		const start = el.getBoundingClientRect();
+		const rtl = getComputedStyle(el).direction === "rtl";
+		let best = 0;
+		let bestDistance = Number.POSITIVE_INFINITY;
+		Array.from(el.children).forEach((child, i) => {
+			const r = child.getBoundingClientRect();
+			const d = Math.abs(rtl ? r.right - start.right : r.left - start.left);
+			if (d < bestDistance) {
+				best = i;
+				bestDistance = d;
+			}
+		});
+		report(best);
+	};
+	useEffect(() => {
+		if (!rotating || count < 2) return;
+		const timer = setInterval(() => {
+			const el = root.current;
+			if (document.visibilityState === "hidden") return;
+			if (el && (el.matches(":hover") || el.contains(document.activeElement))) return;
+			goTo((indexRef.current + 1) % count);
+		}, interval);
+		return () => clearInterval(timer);
+	}, [
+		rotating,
+		count,
+		interval,
+		goTo
+	]);
+	if (count === 0) return null;
+	const nameOf = (i) => slideLabels?.[i] ?? template(t.carouselSlideOf, {
+		index: i + 1,
+		count
+	});
+	return /* @__PURE__ */ jsxs("section", {
+		id,
+		"aria-label": label,
+		"aria-roledescription": t.carouselRole,
+		className: [Carousel_module_default.root, className].filter(Boolean).join(" "),
+		"data-size": slideSize,
+		ref: root,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: Carousel_module_default.controls,
+				children: [
+					interval !== void 0 && !reduced ? /* @__PURE__ */ jsx(IconButton, {
+						variant: "ghost",
+						size: "sm",
+						label: playing ? t.carouselPause : t.carouselPlay,
+						icon: playing ? /* @__PURE__ */ jsx(PauseIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {}),
+						onPress: () => setPlaying(!playing)
+					}) : null,
+					/* @__PURE__ */ jsx(IconButton, {
+						variant: "secondary",
+						size: "sm",
+						label: t.carouselPrevious,
+						icon: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: Carousel_module_default.arrow }),
+						isDisabled: index === 0,
+						onPress: () => goTo(index - 1)
+					}),
+					/* @__PURE__ */ jsx(IconButton, {
+						variant: "secondary",
+						size: "sm",
+						label: t.carouselNext,
+						icon: /* @__PURE__ */ jsx(ChevronRightIcon, { className: Carousel_module_default.arrow }),
+						isDisabled: index === count - 1,
+						onPress: () => goTo(index + 1)
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: track,
+				className: Carousel_module_default.track,
+				"aria-live": rotating ? "off" : "polite",
+				"aria-label": label,
+				tabIndex: 0,
+				role: "group",
+				onKeyDown: (e) => {
+					const rtl = getComputedStyle(e.currentTarget).direction === "rtl";
+					const forward = rtl ? "ArrowLeft" : "ArrowRight";
+					const back = rtl ? "ArrowRight" : "ArrowLeft";
+					if (e.key === forward && index < count - 1) {
+						e.preventDefault();
+						goTo(index + 1);
+					} else if (e.key === back && index > 0) {
+						e.preventDefault();
+						goTo(index - 1);
+					}
+				},
+				onScroll,
+				children: slides.map((slide, i) => /* @__PURE__ */ jsx("div", {
+					role: "group",
+					"aria-roledescription": t.carouselSlideRole,
+					"aria-label": nameOf(i),
+					className: Carousel_module_default.slide,
+					"data-current": i === index || void 0,
+					children: slide
+				}, i))
+			}),
+			showIndicators && count > 1 ? /* @__PURE__ */ jsx("div", {
+				className: Carousel_module_default.indicators,
+				children: slides.map((_, i) => /* @__PURE__ */ jsx(Button, {
+					className: Carousel_module_default.indicator,
+					"aria-label": template(t.carouselGoTo, { index: i + 1 }),
+					"aria-current": i === index ? "true" : void 0,
+					"data-current": i === index || void 0,
+					onPress: () => goTo(i)
+				}, i))
+			}) : null
+		]
+	});
+}
+export { Carousel };

package/dist/components/Carousel/Carousel.module.js

@@ -0,0 +1,12 @@
+import './Carousel.css';
+// src/components/Carousel/Carousel.module.css
+var Carousel_module_default = {
+	"root": "sti-Carousel-root-844a0",
+	"slide": "sti-Carousel-slide-fec90",
+	"controls": "sti-Carousel-controls-ee931",
+	"arrow": "sti-Carousel-arrow-ef631",
+	"track": "sti-Carousel-track-b4a24",
+	"indicators": "sti-Carousel-indicators-41525",
+	"indicator": "sti-Carousel-indicator-7694b"
+};
+export { Carousel_module_default as default };

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

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

package/dist/components/ChatMessage/ChatMessage.js

@@ -1,10 +1,10 @@
 "use client";
 import { useMessages } from "../../provider/UIProvider.js";
-import { CheckIcon } from "../../icons/generated/CheckIcon.js";
-import { AlertCircleIcon } from "../../icons/generated/AlertCircleIcon.js";
+import { Avatar } from "../Avatar/Avatar.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 import { Button } from "../Button/Button.js";
-import { Avatar } from "../Avatar/Avatar.js";
+import { CheckIcon } from "../../icons/generated/CheckIcon.js";
+import { AlertCircleIcon } from "../../icons/generated/AlertCircleIcon.js";
 import { ClockIcon } from "../../icons/generated/ClockIcon.js";
 import { DateTime } from "../DateTime/DateTime.js";
 import ChatMessage_module_default from "./ChatMessage.module.js";

package/dist/components/Checkbox/Checkbox.js

@@ -12,7 +12,7 @@ import { CheckboxButton, CheckboxField, CheckboxGroupStateContext } from "react-
 * tuşuyla işaretlenir (APG Checkbox). Kutu 3:1 sınırlıdır; işaretli kutu turkuaz dolgu ve onay
 * işaretiyle, kısmi seçim çizgiyle gösterilir: durum yalnız renkle değil biçimle de ayrılır.
 */
-function Checkbox({ children, description, errorMessage, size = "md", className, id, inputRef, validate, ...rest }) {
+function Checkbox$1({ children, description, errorMessage, size = "md", className, id, inputRef, validate, ...rest }) {
 	const inGroup = useContext(CheckboxGroupStateContext) !== null;
 	return /* @__PURE__ */ jsxs(CheckboxField, {
 		...rest,
@@ -38,4 +38,4 @@ function Checkbox({ children, description, errorMessage, size = "md", className,
 		]
 	});
 }
-export { Checkbox };
+export { Checkbox$1 as Checkbox };

package/dist/components/CheckboxGroup/CheckboxGroup.js

@@ -1,6 +1,6 @@
 "use client";
-import { FieldDescription, FieldErrorText, FieldLabel, fieldStyles } from "../Field/Field.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { FieldDescription, FieldErrorText, FieldLabel, fieldStyles } from "../Field/Field.js";
 import CheckboxGroup_module_default from "./CheckboxGroup.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckboxGroup } from "react-aria-components";

package/dist/components/CodeBlock/CodeBlock.css

@@ -0,0 +1,203 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-CodeBlock-root-e536d {
+    --sti-code-block-pad: var(--sti-space-4);
+    --sti-code-block-bg: var(--sti-bg-subtle);
+    --sti-code-block-max-h: none;
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-code-block-bg);
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    margin: 0;
+    overflow: hidden;
+  }
+
+  .sti-CodeBlock-root-e536d[data-max-height="sm"] {
+    --sti-code-block-max-h: 12rem;
+  }
+
+  .sti-CodeBlock-root-e536d[data-max-height="md"] {
+    --sti-code-block-max-h: 20rem;
+  }
+
+  .sti-CodeBlock-root-e536d[data-max-height="lg"] {
+    --sti-code-block-max-h: 32rem;
+  }
+
+  .sti-CodeBlock-head-3191a {
+    align-items: center;
+    gap: var(--sti-space-3);
+    min-block-size: var(--sti-control-h-md);
+    padding-block: var(--sti-space-1);
+    padding-inline: var(--sti-code-block-pad) var(--sti-space-2);
+    border-block-end: var(--sti-border-width) solid var(--sti-border-subtle);
+    background: var(--sti-bg-surface);
+    font-family: var(--sti-font-text);
+    display: flex;
+  }
+
+  .sti-CodeBlock-title-a34d3 {
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-mono);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-medium);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: auto;
+    overflow: hidden;
+  }
+
+  .sti-CodeBlock-language-3b997 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-medium);
+    flex: none;
+    margin-inline-start: auto;
+  }
+
+  .sti-CodeBlock-title-a34d3 + .sti-CodeBlock-language-3b997 {
+    margin-inline-start: 0;
+  }
+
+  .sti-CodeBlock-copy-c0e8b {
+    flex: none;
+  }
+
+  .sti-CodeBlock-language-3b997 + .sti-CodeBlock-copy-c0e8b, .sti-CodeBlock-title-a34d3 + .sti-CodeBlock-copy-c0e8b {
+    margin-inline-start: 0;
+  }
+
+  .sti-CodeBlock-head-3191a > .sti-CodeBlock-copy-c0e8b:only-child {
+    margin-inline-start: auto;
+  }
+
+  .sti-CodeBlock-body-23e8d {
+    position: relative;
+  }
+
+  .sti-CodeBlock-floating-004c0 {
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-code-block-bg);
+    position: absolute;
+    inset-block-start: var(--sti-space-2);
+    inset-inline-end: var(--sti-space-2);
+  }
+
+  .sti-CodeBlock-pre-6f451 {
+    box-sizing: border-box;
+    max-block-size: var(--sti-code-block-max-h);
+    padding-block: var(--sti-code-block-pad);
+    font-family: var(--sti-font-mono);
+    font-size: var(--sti-font-size-sm);
+    tab-size: 2;
+    scrollbar-width: thin;
+    counter-reset: sti-code-line;
+    outline: none;
+    margin: 0;
+    line-height: 1.7;
+    overflow: auto;
+  }
+
+  .sti-CodeBlock-pre-6f451:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: calc(var(--sti-focus-ring-width) * -1);
+  }
+
+  .sti-CodeBlock-code-05822 {
+    inline-size: max-content;
+    min-inline-size: 100%;
+    font: inherit;
+    display: block;
+  }
+
+  .sti-CodeBlock-line-97b7b {
+    box-sizing: border-box;
+    min-block-size: 1.7em;
+    padding-inline: var(--sti-code-block-pad);
+    white-space: pre;
+    display: block;
+  }
+
+  .sti-CodeBlock-body-23e8d:has(.sti-CodeBlock-floating-004c0) .sti-CodeBlock-line-97b7b:first-child {
+    padding-inline-end: calc(var(--sti-control-h-sm) + var(--sti-space-4));
+  }
+
+  .sti-CodeBlock-root-e536d[data-wrap] .sti-CodeBlock-code-05822 {
+    inline-size: auto;
+  }
+
+  .sti-CodeBlock-root-e536d[data-wrap] .sti-CodeBlock-line-97b7b {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  .sti-CodeBlock-root-e536d[data-numbers] .sti-CodeBlock-line-97b7b {
+    counter-increment: sti-code-line;
+  }
+
+  .sti-CodeBlock-root-e536d[data-numbers] .sti-CodeBlock-line-97b7b:before {
+    content: counter(sti-code-line);
+    min-inline-size: 2.5ch;
+    color: var(--sti-fg-muted);
+    text-align: end;
+    -webkit-user-select: none;
+    user-select: none;
+    margin-inline-end: var(--sti-space-4);
+    display: inline-block;
+  }
+
+  .sti-CodeBlock-line-97b7b[data-highlight] {
+    background: var(--sti-bg-accent-subtle);
+    box-shadow: inset var(--sti-border-width-strong) 0 0 var(--sti-fill-accent);
+  }
+
+  .sti-CodeBlock-t_keyword-bb6e9 {
+    color: var(--sti-fg-signal);
+    font-weight: var(--sti-font-weight-medium);
+  }
+
+  .sti-CodeBlock-t_string-5b6f2 {
+    color: var(--sti-fg-success);
+  }
+
+  .sti-CodeBlock-t_number-97a3a, .sti-CodeBlock-t_literal-6c3a0 {
+    color: var(--sti-fg-warning);
+  }
+
+  .sti-CodeBlock-t_comment-16ea8 {
+    color: var(--sti-fg-muted);
+    font-style: italic;
+  }
+
+  .sti-CodeBlock-t_function-902ac {
+    color: var(--sti-fg-link);
+  }
+
+  .sti-CodeBlock-t_property-d0d53, .sti-CodeBlock-t_attr-347c2 {
+    color: var(--sti-fg-info);
+  }
+
+  .sti-CodeBlock-t_tag-62bae {
+    color: var(--sti-fg-danger);
+  }
+
+  .sti-CodeBlock-t_punct-6e9da {
+    color: var(--sti-fg-muted);
+  }
+
+  @media (forced-colors: active) {
+    .sti-CodeBlock-root-e536d {
+      border-color: canvastext;
+    }
+
+    .sti-CodeBlock-head-3191a {
+      border-block-end-color: canvastext;
+    }
+
+    .sti-CodeBlock-line-97b7b[data-highlight] {
+      box-shadow: inset var(--sti-border-width-strong) 0 0 Highlight;
+    }
+  }
+}

package/dist/components/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,35 @@
+import { CodeLanguage } from "../../editor/CodeEditor/codeEdits.js";
+import { ReactNode } from "react";
+export type CodeBlockLanguage = CodeLanguage | "bash";
+export interface CodeBlockProps {
+  /** Kod. Sondaki tek yeni satır atılır. */
+  code: string;
+  /** Renklendirme dili; varsayılan `plain`. */
+  language?: CodeBlockLanguage;
+  /** Başlık şeridindeki dosya adı ya da başlık ("kurulum.sh"). */
+  title?: ReactNode;
+  /** Kod alanının erişilebilir adı; verilmezse başlık (metinse) ya da dil adı. */
+  label?: string;
+  /** Dil etiketini gösterir; varsayılan açık. */
+  showLanguage?: boolean;
+  /** Satır numaraları (seçilen metne girmez). */
+  showLineNumbers?: boolean;
+  /** Vurgulanacak satırlar (1'den başlar). */
+  highlightLines?: readonly number[];
+  /** Kopyalama düğmesi; varsayılan açık. */
+  copyable?: boolean;
+  /** Uzun satırlar yatay kaymaz, alta kırılır. */
+  wrap?: boolean;
+  /** Kod alanının en büyük yüksekliği: `sm` 12, `md` 20, `lg` 32rem; fazlası kendi kayar. */
+  maxHeight?: "sm" | "md" | "lg";
+  /** Kopyalama düğmesinin adı; verilmezse "Kodu kopyala". */
+  copyLabel?: string;
+  className?: string;
+  id?: string;
+}
+/**
+ * Kod bloğu: sözdizimi renklendirilmiş, kopyalanabilir, isteğe bağlı satır numaralı ve vurgulu
+ * satırlı kod. Satırlar blok öğedir: seçilip kopyalanan metin satır numarası içermez. Kod alanı
+ * klavyeyle kaydırılabilsin diye odaklanır.
+ */
+export declare function CodeBlock({ code, language, title, label, showLanguage, showLineNumbers, highlightLines, copyable, wrap, maxHeight, copyLabel, className, id }: CodeBlockProps): import("react").JSX.Element;