@stisocial/ui 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,2 @@
+import { SplitButton, SplitButtonItem, SplitButtonProps } from "./SplitButton.js";
+export { SplitButton, SplitButtonItem, SplitButtonProps };

package/dist/components/SplitView/SplitView.css

@@ -0,0 +1,275 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-SplitView-root-5cb4e {
+    --sti-split-size: 50%;
+    --sti-split-separator: var(--sti-space-3);
+    --sti-split-line: var(--sti-border-subtle);
+    grid-template-columns: minmax(0, var(--sti-split-size)) var(--sti-split-separator) minmax(0,
+        1fr);
+    grid-template-rows: minmax(0, 1fr);
+    min-width: 0;
+    height: 100%;
+    min-height: 0;
+    display: grid;
+  }
+
+  .sti-SplitView-root-5cb4e[data-orientation="vertical"] {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, var(--sti-split-size)) var(--sti-split-separator) minmax(0, 1fr);
+  }
+
+  .sti-SplitView-root-5cb4e[data-default-size="5"] {
+    --sti-split-size: 5%;
+  }
+
+  .sti-SplitView-root-5cb4e[data-default-size="10"] {
+    --sti-split-size: 10%;
+  }
+
+  .sti-SplitView-root-5cb4e[data-default-size="15"] {
+    --sti-split-size: 15%;
+  }
+
+  .sti-SplitView-root-5cb4e[data-default-size="20"] {
+    --sti-split-size: 20%;
+  }
+
+  .sti-SplitView-root-5cb4e[data-default-size="25"] {
+    --sti-split-size: 25%;
+  }
+
+  .sti-SplitView-root-5cb4e[data-default-size="30"] {
+    --sti-split-size: 30%;
+  }
+
+  .sti-SplitView-root-5cb4e[data-default-size="35"] {
+    --sti-split-size: 35%;
+  }
+
+  .sti-SplitView-root-5cb4e[data-default-size="40"] {
+    --sti-split-size: 40%;
+  }
+
+  .sti-SplitView-root-5cb4e[data-default-size="45"] {
+    --sti-split-size: 45%;
+  }
+
+  .sti-SplitView-root-5cb4e[data-default-size="50"] {
+    --sti-split-size: 50%;
+  }
+
+  .sti-SplitView-root-5cb4e[data-default-size="55"] {
+    --sti-split-size: 55%;
+  }
+
+  .sti-SplitView-root-5cb4e[data-default-size="60"] {
+    --sti-split-size: 60%;
+  }
+
+  .sti-SplitView-root-5cb4e[data-default-size="65"] {
+    --sti-split-size: 65%;
+  }
+
+  .sti-SplitView-root-5cb4e[data-default-size="70"] {
+    --sti-split-size: 70%;
+  }
+
+  .sti-SplitView-root-5cb4e[data-default-size="75"] {
+    --sti-split-size: 75%;
+  }
+
+  .sti-SplitView-root-5cb4e[data-default-size="80"] {
+    --sti-split-size: 80%;
+  }
+
+  .sti-SplitView-root-5cb4e[data-default-size="85"] {
+    --sti-split-size: 85%;
+  }
+
+  .sti-SplitView-root-5cb4e[data-default-size="90"] {
+    --sti-split-size: 90%;
+  }
+
+  .sti-SplitView-root-5cb4e[data-default-size="95"] {
+    --sti-split-size: 95%;
+  }
+
+  .sti-SplitView-start-f8063, .sti-SplitView-end-187d9 {
+    min-width: 0;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  .sti-SplitView-root-5cb4e[data-collapsed] .sti-SplitView-start-f8063 {
+    visibility: hidden;
+  }
+
+  .sti-SplitView-separator-4dbbc {
+    cursor: col-resize;
+    touch-action: none;
+    -webkit-user-select: none;
+    user-select: none;
+    place-items: center;
+    display: grid;
+    position: relative;
+  }
+
+  .sti-SplitView-root-5cb4e[data-orientation="vertical"] .sti-SplitView-separator-4dbbc {
+    cursor: row-resize;
+  }
+
+  .sti-SplitView-separator-4dbbc:before {
+    width: var(--sti-border-width);
+    background: var(--sti-split-line);
+    content: "";
+    transition: background-color var(--sti-duration-fast) var(--sti-ease-snap);
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 50%;
+  }
+
+  .sti-SplitView-root-5cb4e[data-orientation="vertical"] .sti-SplitView-separator-4dbbc:before {
+    width: auto;
+    height: var(--sti-border-width);
+    inset-block: 50% auto;
+    inset-inline: 0;
+  }
+
+  .sti-SplitView-handle-0371f {
+    width: 4px;
+    height: var(--sti-space-8);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-border-strong);
+    opacity: 0;
+    transition: opacity var(--sti-duration-fast) var(--sti-ease-snap);
+    position: relative;
+  }
+
+  .sti-SplitView-root-5cb4e[data-orientation="vertical"] .sti-SplitView-handle-0371f {
+    width: var(--sti-space-8);
+    height: 4px;
+  }
+
+  @media (hover: hover) {
+    .sti-SplitView-separator-4dbbc:hover {
+      --sti-split-line: var(--sti-border-strong);
+    }
+
+    .sti-SplitView-separator-4dbbc:hover .sti-SplitView-handle-0371f {
+      opacity: 1;
+    }
+  }
+
+  .sti-SplitView-root-5cb4e[data-dragging] .sti-SplitView-separator-4dbbc, .sti-SplitView-separator-4dbbc:focus-visible {
+    --sti-split-line: var(--sti-focus-ring);
+  }
+
+  .sti-SplitView-root-5cb4e[data-dragging] .sti-SplitView-handle-0371f, .sti-SplitView-separator-4dbbc:focus-visible .sti-SplitView-handle-0371f {
+    background: var(--sti-focus-ring);
+    opacity: 1;
+  }
+
+  .sti-SplitView-separator-4dbbc:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: calc(var(--sti-focus-ring-width) * -1);
+    border-radius: var(--sti-radius-xs);
+  }
+
+  .sti-SplitView-separator-4dbbc:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  .sti-SplitView-root-5cb4e[data-dragging] {
+    cursor: col-resize;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .sti-SplitView-root-5cb4e[data-dragging][data-orientation="vertical"] {
+    cursor: row-resize;
+  }
+
+  @media (pointer: coarse) {
+    .sti-SplitView-root-5cb4e {
+      --sti-split-separator: var(--sti-control-h-md);
+    }
+
+    .sti-SplitView-handle-0371f {
+      opacity: 1;
+    }
+  }
+
+  @media (width <= 40rem) {
+    .sti-SplitView-root-5cb4e[data-stack-below="sm"] {
+      grid-template-rows: auto auto;
+      grid-template-columns: minmax(0, 1fr);
+      height: auto;
+    }
+  }
+
+  @media (width <= 48rem) {
+    .sti-SplitView-root-5cb4e[data-stack-below="md"] {
+      grid-template-rows: auto auto;
+      grid-template-columns: minmax(0, 1fr);
+      height: auto;
+    }
+  }
+
+  @media (width <= 64rem) {
+    .sti-SplitView-root-5cb4e[data-stack-below="lg"] {
+      grid-template-rows: auto auto;
+      grid-template-columns: minmax(0, 1fr);
+      height: auto;
+    }
+  }
+
+  @media (width <= 40rem) {
+    .sti-SplitView-root-5cb4e[data-stack-below="sm"] .sti-SplitView-separator-4dbbc {
+      display: none;
+    }
+
+    .sti-SplitView-root-5cb4e[data-stack-below="sm"] .sti-SplitView-end-187d9 {
+      border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    }
+  }
+
+  @media (width <= 48rem) {
+    .sti-SplitView-root-5cb4e[data-stack-below="md"] .sti-SplitView-separator-4dbbc {
+      display: none;
+    }
+
+    .sti-SplitView-root-5cb4e[data-stack-below="md"] .sti-SplitView-end-187d9 {
+      border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    }
+  }
+
+  @media (width <= 64rem) {
+    .sti-SplitView-root-5cb4e[data-stack-below="lg"] .sti-SplitView-separator-4dbbc {
+      display: none;
+    }
+
+    .sti-SplitView-root-5cb4e[data-stack-below="lg"] .sti-SplitView-end-187d9 {
+      border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-SplitView-separator-4dbbc:before, .sti-SplitView-handle-0371f {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-SplitView-separator-4dbbc:before {
+      background: canvastext;
+    }
+
+    .sti-SplitView-separator-4dbbc:focus-visible {
+      outline-color: highlight;
+    }
+
+    .sti-SplitView-handle-0371f {
+      background: canvastext;
+    }
+  }
+}

package/dist/components/SplitView/SplitView.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from "react";
+export interface SplitViewProps {
+  /** Birincil panel (yan çubuk, liste): boyutu ayarlanan paneldir. */
+  start: ReactNode;
+  /** İkincil panel (içerik): kalan alanı kaplar. */
+  end: ReactNode;
+  /** `horizontal`: yan yana (dikey ayraç); `vertical`: üst üste (yatay ayraç). */
+  orientation?: "horizontal" | "vertical";
+  /** Birincil panelin başlangıç boyu (kabın yüzdesi). Sunucuda 5'in katına yuvarlanır. */
+  defaultSize?: number;
+  /** Denetimli boy (yüzde). */
+  size?: number;
+  onSizeChange?: (size: number) => void;
+  /** En küçük ve en büyük boy (yüzde). */
+  minSize?: number;
+  maxSize?: number;
+  /** Ok tuşu adımı (yüzde); Shift ile on katı. */
+  step?: number;
+  /**
+   * Daraltılabilir: Enter birincil paneli `collapsedSize`'a indirir, yeniden Enter eski boyuna
+   * döndürür (APG Window Splitter).
+   */
+  collapsible?: boolean;
+  collapsedSize?: number;
+  /** Ayracın ekran okuyucu adı; verilmezse "Paneli yeniden boyutlandır". */
+  separatorLabel?: string;
+  /** Birincil panelin adı (değer metninde: "Kenar çubuğu, yüzde 30"). */
+  startLabel?: string;
+  /**
+   * Bu genişliğin altında paneller üst üste dizilir ve ayraç gizlenir (yalnız yatay görünümde).
+   * `never`: her zaman yan yana.
+   */
+  stackBelow?: "sm" | "md" | "lg" | "never";
+  /** Kullanıcının seçtiği boy tarayıcıda bu anahtarla saklanır ve sonraki ziyarette geri gelir. */
+  autoSaveId?: string;
+  className?: string;
+  id?: string;
+}
+/**
+ * Yeniden boyutlandırılan iki panel. Ayraç WAI-ARIA "Window Splitter" kalıbındadır: odaklanabilir
+ * ayırıcı (`role="separator"`), oklar boyu değiştirir, Home/End en küçük/en büyük, Enter daraltır.
+ * Fareyle ve dokunarak sürüklenir; çift tıklama başlangıç boyuna döndürür. Boy CSS değişkeniyle
+ * (CSSOM) yazılır: satır içi stil yoktur.
+ */
+export declare function SplitView({ start, end, orientation, defaultSize, size: controlled, onSizeChange, minSize, maxSize, step, collapsible, collapsedSize, separatorLabel, startLabel, stackBelow, autoSaveId, className, id }: SplitViewProps): import("react").JSX.Element;

package/dist/components/SplitView/SplitView.js

@@ -0,0 +1,153 @@
+"use client";
+import { useLocale, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import SplitView_module_default from "./SplitView.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+// src/components/SplitView/SplitView.tsx
+const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+const round = (v) => Math.round(v * 10) / 10;
+/**
+* Yeniden boyutlandırılan iki panel. Ayraç WAI-ARIA "Window Splitter" kalıbındadır: odaklanabilir
+* ayırıcı (`role="separator"`), oklar boyu değiştirir, Home/End en küçük/en büyük, Enter daraltır.
+* Fareyle ve dokunarak sürüklenir; çift tıklama başlangıç boyuna döndürür. Boy CSS değişkeniyle
+* (CSSOM) yazılır: satır içi stil yoktur.
+*/
+function SplitView({ start, end, orientation = "horizontal", defaultSize = 50, size: controlled, onSizeChange, minSize = 10, maxSize = 90, step = 5, collapsible = false, collapsedSize = 0, separatorLabel, startLabel, stackBelow = "md", autoSaveId, className, id }) {
+	const t = useMessages();
+	const locale = useLocale();
+	const rootRef = useRef(null);
+	const startId = useId();
+	const lower = collapsible ? Math.min(collapsedSize, minSize) : minSize;
+	const initial = clamp(defaultSize, minSize, maxSize);
+	const [inner, setInner] = useState(initial);
+	const value = clamp(controlled ?? inner, lower, maxSize);
+	const restore = useRef(initial);
+	const [dragging, setDragging] = useState(false);
+	const draggingRef = useRef(false);
+	const set = useCallback((next) => {
+		const v = round(clamp(next, lower, maxSize));
+		if (controlled === void 0) setInner(v);
+		onSizeChange?.(v);
+		if (autoSaveId) try {
+			localStorage.setItem(`sti-split:${autoSaveId}`, String(v));
+		} catch {}
+	}, [
+		controlled,
+		lower,
+		maxSize,
+		onSizeChange,
+		autoSaveId
+	]);
+	useEffect(() => {
+		if (!autoSaveId || controlled !== void 0) return;
+		try {
+			const saved = Number(localStorage.getItem(`sti-split:${autoSaveId}`));
+			if (Number.isFinite(saved) && saved > 0) setInner(clamp(saved, lower, maxSize));
+		} catch {}
+	}, [
+		autoSaveId,
+		controlled,
+		lower,
+		maxSize
+	]);
+	useIsoLayoutEffect(() => {
+		rootRef.current?.style.setProperty("--sti-split-size", `${value}%`);
+	}, [value]);
+	const horizontal = orientation === "horizontal";
+	const isRtl = () => rootRef.current !== null && getComputedStyle(rootRef.current).direction === "rtl";
+	const onKeyDown = (e) => {
+		const big = e.shiftKey ? step * 10 : step;
+		const rtl = isRtl();
+		const inc = horizontal ? rtl ? "ArrowLeft" : "ArrowRight" : "ArrowDown";
+		const dec = horizontal ? rtl ? "ArrowRight" : "ArrowLeft" : "ArrowUp";
+		let next = null;
+		if (e.key === inc) next = value + big;
+		else if (e.key === dec) next = value - big;
+		else if (e.key === "Home") next = lower;
+		else if (e.key === "End") next = maxSize;
+		else if (e.key === "Enter" && collapsible) {
+			if (value > lower) {
+				restore.current = value;
+				next = lower;
+			} else next = restore.current > lower ? restore.current : initial;
+		}
+		if (next !== null) {
+			e.preventDefault();
+			set(next);
+		}
+	};
+	const onPointerDown = (e) => {
+		if (e.button !== 0) return;
+		e.preventDefault();
+		try {
+			e.currentTarget.setPointerCapture(e.pointerId);
+		} catch {}
+		e.currentTarget.focus();
+		draggingRef.current = true;
+		setDragging(true);
+	};
+	const onPointerMove = (e) => {
+		if (!draggingRef.current || !rootRef.current) return;
+		const box = rootRef.current.getBoundingClientRect();
+		const rtl = isRtl();
+		const pos = horizontal ? (rtl ? box.right - e.clientX : e.clientX - box.left) / box.width : (e.clientY - box.top) / box.height;
+		set(pos * 100);
+	};
+	const onPointerUp = (e) => {
+		if (e.currentTarget.hasPointerCapture(e.pointerId)) e.currentTarget.releasePointerCapture(e.pointerId);
+		draggingRef.current = false;
+		setDragging(false);
+	};
+	const label = separatorLabel ?? t.resizePanel;
+	const percent = new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format(value);
+	const valueText = template(startLabel ? t.splitValueNamed : t.splitValue, {
+		name: startLabel ?? "",
+		value: percent
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
+		id,
+		className: [SplitView_module_default.root, className].filter(Boolean).join(" "),
+		"data-orientation": orientation,
+		"data-stack-below": horizontal ? stackBelow : "never",
+		"data-default-size": Math.round(initial / 5) * 5,
+		"data-dragging": dragging ? "" : void 0,
+		"data-collapsed": collapsible && value <= lower ? "" : void 0,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				id: startId,
+				className: SplitView_module_default.start,
+				children: start
+			}),
+			/* @__PURE__ */ jsx("div", {
+				role: "separator",
+				tabIndex: 0,
+				"aria-label": label,
+				"aria-controls": startId,
+				"aria-orientation": horizontal ? "vertical" : "horizontal",
+				"aria-valuenow": Math.round(value),
+				"aria-valuemin": Math.round(lower),
+				"aria-valuemax": Math.round(maxSize),
+				"aria-valuetext": valueText,
+				className: SplitView_module_default.separator,
+				onKeyDown,
+				onPointerDown,
+				onPointerMove,
+				onPointerUp,
+				onPointerCancel: onPointerUp,
+				onDoubleClick: () => set(initial),
+				children: /* @__PURE__ */ jsx("span", {
+					className: SplitView_module_default.handle,
+					"aria-hidden": "true"
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: SplitView_module_default.end,
+				children: end
+			})
+		]
+	});
+}
+export { SplitView };

package/dist/components/SplitView/SplitView.module.js

@@ -0,0 +1,10 @@
+import './SplitView.css';
+// src/components/SplitView/SplitView.module.css
+var SplitView_module_default = {
+	"root": "sti-SplitView-root-5cb4e",
+	"start": "sti-SplitView-start-f8063",
+	"end": "sti-SplitView-end-187d9",
+	"separator": "sti-SplitView-separator-4dbbc",
+	"handle": "sti-SplitView-handle-0371f"
+};
+export { SplitView_module_default as default };

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

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

package/dist/components/Stack/Stack.css

@@ -0,0 +1,124 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Stack-root-2bb0f {
+    --sti-stack-gap: var(--sti-space-4);
+    --sti-stack-divider: var(--sti-border-subtle);
+    gap: var(--sti-stack-gap);
+    flex-direction: column;
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+  }
+
+  .sti-Stack-root-2bb0f[data-gap="0"] {
+    --sti-stack-gap: var(--sti-space-0);
+  }
+
+  .sti-Stack-root-2bb0f[data-gap="0-5"] {
+    --sti-stack-gap: var(--sti-space-0-5);
+  }
+
+  .sti-Stack-root-2bb0f[data-gap="1"] {
+    --sti-stack-gap: var(--sti-space-1);
+  }
+
+  .sti-Stack-root-2bb0f[data-gap="2"] {
+    --sti-stack-gap: var(--sti-space-2);
+  }
+
+  .sti-Stack-root-2bb0f[data-gap="3"] {
+    --sti-stack-gap: var(--sti-space-3);
+  }
+
+  .sti-Stack-root-2bb0f[data-gap="4"] {
+    --sti-stack-gap: var(--sti-space-4);
+  }
+
+  .sti-Stack-root-2bb0f[data-gap="5"] {
+    --sti-stack-gap: var(--sti-space-5);
+  }
+
+  .sti-Stack-root-2bb0f[data-gap="6"] {
+    --sti-stack-gap: var(--sti-space-6);
+  }
+
+  .sti-Stack-root-2bb0f[data-gap="8"] {
+    --sti-stack-gap: var(--sti-space-8);
+  }
+
+  .sti-Stack-root-2bb0f[data-gap="10"] {
+    --sti-stack-gap: var(--sti-space-10);
+  }
+
+  .sti-Stack-root-2bb0f[data-gap="12"] {
+    --sti-stack-gap: var(--sti-space-12);
+  }
+
+  .sti-Stack-root-2bb0f[data-gap="16"] {
+    --sti-stack-gap: var(--sti-space-16);
+  }
+
+  .sti-Stack-root-2bb0f[data-gap="20"] {
+    --sti-stack-gap: var(--sti-space-20);
+  }
+
+  .sti-Stack-root-2bb0f[data-gap="24"] {
+    --sti-stack-gap: var(--sti-space-24);
+  }
+
+  .sti-Stack-root-2bb0f[data-gap="32"] {
+    --sti-stack-gap: var(--sti-space-32);
+  }
+
+  .sti-Stack-root-2bb0f[data-align="stretch"] {
+    align-items: stretch;
+  }
+
+  .sti-Stack-root-2bb0f[data-align="start"] {
+    align-items: flex-start;
+  }
+
+  .sti-Stack-root-2bb0f[data-align="center"] {
+    align-items: center;
+  }
+
+  .sti-Stack-root-2bb0f[data-align="end"] {
+    align-items: flex-end;
+  }
+
+  .sti-Stack-root-2bb0f[data-justify="start"] {
+    justify-content: flex-start;
+  }
+
+  .sti-Stack-root-2bb0f[data-justify="center"] {
+    justify-content: center;
+  }
+
+  .sti-Stack-root-2bb0f[data-justify="end"] {
+    justify-content: flex-end;
+  }
+
+  .sti-Stack-root-2bb0f[data-justify="between"] {
+    justify-content: space-between;
+  }
+
+  .sti-Stack-divider-462dc {
+    block-size: 0;
+    margin-inline: 0;
+    margin-block: calc(var(--sti-stack-gap) / -2);
+    border: 0;
+    border-block-start: var(--sti-border-width) solid var(--sti-stack-divider);
+    flex: none;
+    align-self: stretch;
+    padding: 0;
+    list-style: none;
+  }
+
+  @media (forced-colors: active) {
+    .sti-Stack-divider-462dc {
+      border-block-start-color: graytext;
+    }
+  }
+}

package/dist/components/Stack/Stack.d.ts

@@ -0,0 +1,25 @@
+import { LayoutRootProps, Space } from "./layout.js";
+import { ReactNode } from "react";
+export type StackElement = "div" | "section" | "article" | "aside" | "nav" | "header" | "footer" | "main" | "ul" | "ol";
+export interface StackProps extends LayoutRootProps {
+  /** Öğeler arası dikey aralık (boşluk ölçeğinin adı). Varsayılan `4` (16 piksel). */
+  gap?: Space;
+  /** Öğelerin yatay hizası; `stretch` (varsayılan) öğeyi tam genişliğe yayar. */
+  align?: "stretch" | "start" | "center" | "end";
+  /** Yığının kendi yüksekliği içeriğinden büyükse öğelerin dikey dağılımı. */
+  justify?: "start" | "center" | "end" | "between";
+  /**
+   * Öğelerin arasına ince ayraç çizgisi (`border-subtle`) konur; çizgi aralığın tam ortasındadır.
+   * Öğeler arası uzaklık değişmez: `gap` + 1 piksel çizgi (ör. `gap="4"` ile 17 piksel).
+   * Çizgi süstür (ekran okuyucu okumaz); boş (`null`, `false`) öğeler için çizgi çizilmez.
+   */
+  divider?: boolean;
+  /** Kök öğe. `ul`/`ol` seçilirse çocuklar `li` olmalıdır; liste işaretleri kaldırılır, liste anlamı korunur. */
+  as?: StackElement;
+  children?: ReactNode;
+}
+/**
+ * Dikey yığın: öğeleri tasarım değerindeki aralıkla alt alta dizer. Sunucu bileşenidir.
+ * Kenar boşluğu (margin) yerine aralık kullanılır; öğeler birbirinin boşluğunu bilmez.
+ */
+export declare function Stack(props: StackProps): import("react").JSX.Element;

package/dist/components/Stack/Stack.js

@@ -0,0 +1,36 @@
+import { cx, rootAttributes } from "./layout.js";
+import Stack_module_default from "./Stack.module.js";
+import { jsx } from "react/jsx-runtime";
+import { Children, isValidElement } from "react";
+// src/components/Stack/Stack.tsx
+/**
+* Dikey yığın: öğeleri tasarım değerindeki aralıkla alt alta dizer. Sunucu bileşenidir.
+* Kenar boşluğu (margin) yerine aralık kullanılır; öğeler birbirinin boşluğunu bilmez.
+*/
+function Stack(props) {
+	const { gap = "4", align = "stretch", justify = "start", divider = false, as: Tag = "div", className, ref, children } = props;
+	const isList = Tag === "ul" || Tag === "ol";
+	let content = children;
+	if (divider) {
+		const Separator = isList ? "li" : "div";
+		content = Children.toArray(children).flatMap((child, index) => {
+			const key = isValidElement(child) && child.key != null ? child.key : index;
+			return index === 0 ? [child] : [/* @__PURE__ */ jsx(Separator, {
+				className: Stack_module_default.divider,
+				"aria-hidden": "true"
+			}, `ayrac-${key}`), child];
+		});
+	}
+	return /* @__PURE__ */ jsx(Tag, {
+		...rootAttributes(props),
+		ref,
+		className: cx(Stack_module_default.root, className),
+		role: isList ? "list" : void 0,
+		"data-gap": gap,
+		"data-align": align,
+		"data-justify": justify,
+		"data-divider": divider || void 0,
+		children: content
+	});
+}
+export { Stack };

package/dist/components/Stack/Stack.module.js

@@ -0,0 +1,7 @@
+import './Stack.css';
+// src/components/Stack/Stack.module.css
+var Stack_module_default = {
+	"root": "sti-Stack-root-2bb0f",
+	"divider": "sti-Stack-divider-462dc"
+};
+export { Stack_module_default as default };

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

@@ -0,0 +1,3 @@
+import { LayoutBreakpoint, LayoutRootProps, SPACES, Space } from "./layout.js";
+import { Stack, StackElement, StackProps } from "./Stack.js";
+export { type LayoutBreakpoint, type LayoutRootProps, SPACES, type Space, Stack, StackElement, StackProps };