@stisocial/ui 0.0.0-stage → 0.1.0

package/dist/components/ToggleGroup/ToggleGroup.css

@@ -0,0 +1,98 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ToggleGroup-keys-cf167 {
+    display: contents;
+  }
+
+  .sti-ToggleGroup-root-874c6 {
+    --sti-toggle-group-h: var(--sti-control-h-md);
+    --sti-toggle-group-pad: var(--sti-space-0-5);
+    --sti-toggle-group-gap: var(--sti-space-0-5);
+    --sti-toggle-group-bw: var(--sti-border-width);
+    --sti-toggle-group-border: var(--sti-border-strong);
+    --sti-toggle-group-radius: var(--sti-radius-pill);
+    --sti-toggle-group-item-h: calc(var(--sti-toggle-group-h) -
+      2 *
+      var(--sti-toggle-group-pad) -
+      2 *
+      var(--sti-toggle-group-bw));
+    --sti-toggle-group-item-px: var(--sti-space-4);
+    --sti-toggle-group-item-radius: var(--sti-radius-pill);
+    align-items: center;
+    gap: var(--sti-toggle-group-gap);
+    box-sizing: border-box;
+    min-width: 0;
+    max-width: 100%;
+    padding: var(--sti-toggle-group-pad);
+    border: var(--sti-toggle-group-bw) solid var(--sti-toggle-group-border);
+    border-radius: var(--sti-toggle-group-radius);
+    vertical-align: middle;
+    flex-wrap: nowrap;
+    display: inline-flex;
+  }
+
+  .sti-ToggleGroup-root-874c6[data-size="sm"] {
+    --sti-toggle-group-h: var(--sti-control-h-sm);
+    --sti-toggle-group-item-px: var(--sti-space-3);
+  }
+
+  .sti-ToggleGroup-root-874c6[data-size="lg"] {
+    --sti-toggle-group-h: var(--sti-control-h-lg);
+    --sti-toggle-group-item-px: var(--sti-space-5);
+  }
+
+  @media (pointer: coarse) {
+    .sti-ToggleGroup-root-874c6 {
+      --sti-toggle-group-item-h: max(calc(var(--sti-toggle-group-h) -
+          2 *
+          var(--sti-toggle-group-pad) -
+          2 *
+          var(--sti-toggle-group-bw)),
+        var(--sti-control-h-md));
+    }
+  }
+
+  .sti-ToggleGroup-root-874c6[data-variant="ghost"] {
+    --sti-toggle-group-pad: 0px;
+    --sti-toggle-group-bw: 0px;
+    --sti-toggle-group-gap: var(--sti-space-1);
+    flex-wrap: wrap;
+  }
+
+  .sti-ToggleGroup-root-874c6[data-orientation="vertical"] {
+    --sti-toggle-group-radius: var(--sti-radius-md);
+    --sti-toggle-group-item-radius: calc(var(--sti-radius-md) -
+      var(--sti-toggle-group-pad) -
+      var(--sti-toggle-group-bw));
+    flex-flow: column;
+    align-items: stretch;
+  }
+
+  .sti-ToggleGroup-root-874c6[data-full-width] {
+    contain: inline-size;
+    width: 100%;
+    display: flex;
+  }
+
+  .sti-ToggleGroup-root-874c6[data-full-width][data-orientation="horizontal"] > [data-in-group] {
+    flex: 1 1 0;
+  }
+
+  .sti-ToggleGroup-root-874c6[data-disabled] {
+    opacity: var(--sti-opacity-disabled);
+  }
+
+  .sti-ToggleGroup-root-874c6[data-disabled] > [data-in-group] {
+    opacity: 1;
+  }
+
+  @media (forced-colors: active) {
+    .sti-ToggleGroup-root-874c6[data-variant="outlined"] {
+      border-color: buttontext;
+    }
+
+    .sti-ToggleGroup-root-874c6[data-disabled] {
+      border-color: graytext;
+    }
+  }
+}

package/dist/components/ToggleGroup/ToggleGroup.d.ts

@@ -0,0 +1,78 @@
+import { ToggleButtonSize } from "../ToggleButton/ToggleButton.js";
+import { ReactNode } from "react";
+export type ToggleGroupVariant = "outlined" | "ghost";
+type ToggleGroupName = {
+  /** Grubun erişilebilir adı (`aria-label`): "Metin biçimi", "Hizalama". */
+  label: string;
+  "aria-labelledby"?: undefined;
+} | {
+  label?: undefined;
+  /** Görünür bir başlık grubu adlandırıyorsa o başlığın kimliği. */
+  "aria-labelledby": string;
+};
+type ToggleGroupSelection = {
+  /** Tek seçim (varsayılan): öğeler `radio`, grup `radiogroup` olarak okunur. */
+  selectionMode?: "single";
+  /** Kontrollü seçili değer; seçim yoksa `null`. */
+  value?: string | null;
+  defaultValue?: string | null;
+  onChange?: (value: string | null) => void;
+} | {
+  /** Çoklu seçim: öğeler `aria-pressed` düğmeler, grup `toolbar` olarak okunur. */
+  selectionMode: "multiple";
+  value?: string[];
+  defaultValue?: string[];
+  onChange?: (value: string[]) => void;
+};
+export type ToggleGroupProps = ToggleGroupName & ToggleGroupSelection & {
+  /**
+   * Seçimin boşaltılması engellensin mi. Varsayılan: tek seçimde `true` (radio grubunda seçili
+   * öğe yeniden basılınca kalkmaz), çoklu seçimde `false`.
+   */
+  disallowEmptySelection?: boolean;
+  /**
+   * Görünüş:
+   * - `outlined` (varsayılan): öğeler çizgili hap bir kabın içinde;
+   * - `ghost`: kapsız, öğeler aralıklı (araç çubuğu); sığmazsa satıra iner.
+   */
+  variant?: ToggleGroupVariant;
+  /** Boy: grubun yüksekliği `--sti-control-h-sm/md/lg`; dokunmatikte öğeler en az 44 piksel. */
+  size?: ToggleButtonSize;
+  orientation?: "horizontal" | "vertical";
+  /** Kapsayıcının tüm genişliği; yatayda öğeler eşit pay alır, uzun etiketler kısalır. */
+  fullWidth?: boolean;
+  isDisabled?: boolean;
+  /** `ToggleGroupItem` öğeleri. */
+  children: ReactNode;
+  className?: string;
+  id?: string;
+  "aria-describedby"?: string;
+};
+/**
+ * Birbiriyle ilişkili basılı/basılı değil düğmeler: tek seçim (hizalama) ya da çoklu seçim (kalın,
+ * italik). Ok tuşlarıyla gezinilir; grupta yalnız bir öğe sekme sırasındadır (WAI-ARIA APG
+ * "Radio Group" / "Toolbar").
+ */
+export declare function ToggleGroup(props: ToggleGroupProps): import("react").JSX.Element;
+type ToggleGroupItemContent = {
+  /** Görünür etiket; erişilebilir addır. */
+  children: ReactNode;
+  /** Etiketten önceki süs ikonu. */
+  icon?: ReactNode;
+  label?: undefined;
+} | {
+  children?: undefined;
+  icon: ReactNode;
+  /** Yalnız ikonlu öğede erişilebilir ad (zorunlu). */
+  label: string;
+};
+export type ToggleGroupItemProps = ToggleGroupItemContent & {
+  /** Öğenin gruptaki değeri (benzersiz). */
+  value: string;
+  isDisabled?: boolean;
+  className?: string;
+  "aria-describedby"?: string;
+};
+/** ToggleGroup öğesi; yalnız ToggleGroup içinde kullanılır. */
+export declare function ToggleGroupItem({ value, ...rest }: ToggleGroupItemProps): import("react").JSX.Element;
+export {};

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -0,0 +1,87 @@
+"use client";
+import { useControllable, useRoving } from "./roving.js";
+import { ToggleButtonView } from "../ToggleButton/ToggleButton.js";
+import ToggleGroup_module_default from "./ToggleGroup.module.js";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo } from "react";
+import { ToggleButtonGroup } from "react-aria-components";
+// src/components/ToggleGroup/ToggleGroup.tsx
+const ToggleGroupContext = createContext(null);
+const toList = (props, which) => {
+	const v = props[which];
+	if (v === void 0) return void 0;
+	if (v === null) return [];
+	return typeof v === "string" ? [v] : v;
+};
+/**
+* Birbiriyle ilişkili basılı/basılı değil düğmeler: tek seçim (hizalama) ya da çoklu seçim (kalın,
+* italik). Ok tuşlarıyla gezinilir; grupta yalnız bir öğe sekme sırasındadır (WAI-ARIA APG
+* "Radio Group" / "Toolbar").
+*/
+function ToggleGroup(props) {
+	const { label, selectionMode = "single", disallowEmptySelection = selectionMode === "single", variant = "outlined", size = "md", orientation = "horizontal", fullWidth, isDisabled, children, className, id } = props;
+	const multiple = props.selectionMode === "multiple";
+	const notify = props.onChange;
+	const [values, setValues] = useControllable(toList(props, "value"), toList(props, "defaultValue") ?? [], useCallback((next) => notify?.(multiple ? next : next[0] ?? null), [notify, multiple]));
+	const selected = useMemo(() => new Set(values), [values]);
+	const select = useCallback((value) => {
+		if (!(selected.size === 1 && selected.has(value))) setValues([value]);
+	}, [selected, setValues]);
+	const roving = useRoving({
+		mode: selectionMode,
+		orientation,
+		selected,
+		select
+	});
+	const context = useMemo(() => ({
+		size,
+		roving
+	}), [size, roving]);
+	const domId = { id };
+	return /* @__PURE__ */ jsx("div", {
+		ref: roving.wrapperRef,
+		className: ToggleGroup_module_default.keys,
+		onKeyDownCapture: roving.onKeyDownCapture,
+		onFocus: roving.onFocus,
+		children: /* @__PURE__ */ jsx(ToggleButtonGroup, {
+			...domId,
+			"aria-label": label,
+			"aria-labelledby": props["aria-labelledby"],
+			"aria-describedby": props["aria-describedby"],
+			className: [ToggleGroup_module_default.root, className].filter(Boolean).join(" "),
+			"data-variant": variant,
+			"data-size": size,
+			"data-full-width": fullWidth ? "" : void 0,
+			selectionMode,
+			disallowEmptySelection,
+			selectedKeys: selected,
+			onSelectionChange: (keys) => {
+				const next = [...keys].map(String);
+				if (next.length !== selected.size || next.some((k) => !selected.has(k))) setValues(next);
+			},
+			orientation,
+			isDisabled,
+			children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
+				value: context,
+				children
+			})
+		})
+	});
+}
+/** ToggleGroup öğesi; yalnız ToggleGroup içinde kullanılır. */
+function ToggleGroupItem({ value, ...rest }) {
+	const ctx = useContext(ToggleGroupContext);
+	if (!ctx) throw new Error("ToggleGroupItem yalnız ToggleGroup içinde kullanılır.");
+	const { size, roving } = ctx;
+	return /* @__PURE__ */ jsx(ToggleButtonView, {
+		...rest,
+		variant: "ghost",
+		size,
+		group: {
+			value,
+			excludeFromTabOrder: roving.tabStop !== null && roving.tabStop !== value,
+			onFocus: roving.onItemFocus
+		}
+	});
+}
+export { ToggleGroup, ToggleGroupItem };

package/dist/components/ToggleGroup/ToggleGroup.module.js

@@ -0,0 +1,7 @@
+import './ToggleGroup.css';
+// src/components/ToggleGroup/ToggleGroup.module.css
+var ToggleGroup_module_default = {
+	"keys": "sti-ToggleGroup-keys-cf167",
+	"root": "sti-ToggleGroup-root-874c6"
+};
+export { ToggleGroup_module_default as default };

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

@@ -0,0 +1,2 @@
+import { ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, ToggleGroupVariant } from "./ToggleGroup.js";
+export { ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleGroupVariant };

package/dist/components/ToggleGroup/roving.js

@@ -0,0 +1,94 @@
+"use client";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+// src/components/ToggleGroup/roving.ts
+const ITEM = "button[data-value]";
+function enabledItems(root) {
+	if (!root) return [];
+	return Array.from(root.querySelectorAll(ITEM)).filter((b) => !b.disabled);
+}
+function isItem(el) {
+	return el instanceof HTMLButtonElement && el.matches(ITEM);
+}
+function useRoving({ mode, orientation, selected, select }) {
+	const wrapperRef = useRef(null);
+	const [active, setActive] = useState(null);
+	const [tabStop, setTabStop] = useState(() => {
+		const first = selected.values().next();
+		return first.done ? null : first.value;
+	});
+	useLayoutEffect(() => {
+		const values = enabledItems(wrapperRef.current).map((b) => b.dataset.value);
+		const chosen = values.find((v) => selected.has(v));
+		const recent = active !== null && values.includes(active) ? active : void 0;
+		const next = (mode === "single" ? chosen ?? recent : recent ?? chosen) ?? values[0] ?? null;
+		setTabStop((prev) => prev === next ? prev : next);
+	});
+	return {
+		wrapperRef,
+		tabStop,
+		onKeyDownCapture: useCallback((e) => {
+			const target = e.target;
+			if (!isItem(target)) return;
+			if (e.key === "Tab") {
+				e.stopPropagation();
+				return;
+			}
+			if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+			const items = enabledItems(wrapperRef.current);
+			const i = items.indexOf(target);
+			if (i < 0) return;
+			const forward = getComputedStyle(target).direction === "rtl" ? -1 : 1;
+			const radio = mode === "single";
+			const horizontal = orientation === "horizontal";
+			let next = null;
+			switch (e.key) {
+				case "ArrowRight":
+					if (radio || horizontal) next = i + forward;
+					break;
+				case "ArrowLeft":
+					if (radio || horizontal) next = i - forward;
+					break;
+				case "ArrowDown":
+					if (radio || !horizontal) next = i + 1;
+					break;
+				case "ArrowUp":
+					if (radio || !horizontal) next = i - 1;
+					break;
+				case "Home":
+					next = 0;
+					break;
+				case "End": next = items.length - 1;
+			}
+			if (next === null) return;
+			e.preventDefault();
+			e.stopPropagation();
+			const el = items[(next + items.length) % items.length];
+			el.focus();
+			if (radio) select(el.dataset.value);
+		}, [
+			mode,
+			orientation,
+			select
+		]),
+		onFocus: useCallback((e) => {
+			const target = e.target;
+			if (!isItem(target)) return;
+			const current = target.ownerDocument.activeElement;
+			if (current !== target && isItem(current) && wrapperRef.current?.contains(current)) target.focus();
+		}, []),
+		onItemFocus: useCallback((e) => {
+			const value = e.currentTarget.dataset.value;
+			if (value !== void 0) setActive(value);
+		}, [])
+	};
+}
+/** Kontrollü ya da kontrolsüz değer (React Aria'nın türü dışa açılmadan). */
+function useControllable(value, defaultValue, onChange) {
+	const [inner, setInner] = useState(defaultValue);
+	const controlled = value !== void 0;
+	return [controlled ? value : inner, useCallback((v) => {
+		if (!controlled) setInner(v);
+		onChange?.(v);
+	}, [controlled, onChange])];
+}
+export { useControllable, useRoving };

package/dist/components/Toolbar/Toolbar.css

@@ -0,0 +1,70 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Toolbar-root-52b67 {
+    align-items: center;
+    gap: var(--sti-space-1);
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    font-family: var(--sti-font-text);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-Toolbar-root-52b67[data-overflow="scroll"] {
+    scrollbar-width: thin;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+  }
+
+  .sti-Toolbar-root-52b67[data-overflow="scroll"] > * {
+    flex: none;
+  }
+
+  .sti-Toolbar-root-52b67[data-variant="surface"] {
+    padding: var(--sti-space-1);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-surface);
+  }
+
+  .sti-Toolbar-root-52b67[data-orientation="vertical"] {
+    flex-flow: column;
+    align-items: stretch;
+    inline-size: max-content;
+  }
+
+  .sti-Toolbar-group-1fe5f {
+    align-items: center;
+    gap: var(--sti-space-1);
+    flex: none;
+    display: flex;
+  }
+
+  .sti-Toolbar-root-52b67[data-orientation="vertical"] .sti-Toolbar-group-1fe5f {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .sti-Toolbar-separator-ea62d {
+    inline-size: var(--sti-border-width);
+    margin-block: var(--sti-space-1);
+    margin-inline: var(--sti-space-1);
+    background: var(--sti-border-subtle);
+    border: 0;
+    flex: none;
+    align-self: stretch;
+  }
+
+  .sti-Toolbar-root-52b67[data-orientation="vertical"] .sti-Toolbar-separator-ea62d {
+    inline-size: auto;
+    block-size: var(--sti-border-width);
+    margin-block: var(--sti-space-1);
+    margin-inline: var(--sti-space-1);
+  }
+
+  @media (forced-colors: active) {
+    .sti-Toolbar-separator-ea62d {
+      background: canvastext;
+    }
+  }
+}

package/dist/components/Toolbar/Toolbar.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from "react";
+export interface ToolbarProps {
+  /** Araç çubuğunun adı (zorunlu): "Metin biçimi", "Tablo işlemleri". */
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+  orientation?: "horizontal" | "vertical";
+  /** Taşan öğeler alt satıra geçer (varsayılan) ya da yatay kaydırılır. */
+  overflow?: "wrap" | "scroll";
+  /** Çerçeveli yüzey (düzenleyici üstü) ya da çerçevesiz. */
+  variant?: "surface" | "plain";
+  children: ReactNode;
+  className?: string;
+}
+/**
+ * ARIA araç çubuğu (APG Toolbar): tüm denetimler tek sekme durağıdır; ok tuşları denetimler
+ * arasında gezer, Home/End ilk ve son denetime gider. İçine Button, IconButton, ToggleButton,
+ * ToggleGroup, Select gibi bileşenler konur; `ToolbarGroup` ilgili denetimleri adlı gruba toplar,
+ * `ToolbarSeparator` gruplar arasına çizgi çeker.
+ */
+export declare function Toolbar({ orientation, overflow, variant, children, className, ...aria }: ToolbarProps): import("react").JSX.Element;
+export interface ToolbarGroupProps {
+  /** Grubun adı ("Hizalama"); ekran okuyucu gruba girerken okur. */
+  "aria-label"?: string;
+  children: ReactNode;
+  className?: string;
+}
+export declare function ToolbarGroup({ children, className, ...aria }: ToolbarGroupProps): import("react").JSX.Element;
+/** Gruplar arasında ince çizgi; araç çubuğunun yönüne diktir. */
+export declare function ToolbarSeparator(): import("react").JSX.Element;

package/dist/components/Toolbar/Toolbar.js

@@ -0,0 +1,61 @@
+"use client";
+import Toolbar_module_default from "./Toolbar.module.js";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useRef } from "react";
+import { Group, Separator, Toolbar } from "react-aria-components";
+// src/components/Toolbar/Toolbar.tsx
+const OrientationContext = createContext("horizontal");
+const FOCUSABLE = "button:not(:disabled), a[href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex=\"-2\"])";
+/** Home/End: React Aria araç çubuğu yalnız okları işler; APG'nin uç tuşlarını burada ekleriz. */
+function onEdgeKey(e) {
+	if (e.key !== "Home" && e.key !== "End" || e.altKey || e.ctrlKey || e.metaKey) return;
+	if (e.target.closest("input, textarea, [contenteditable]:not([contenteditable='false'])")) return;
+	const items = Array.from(this.querySelectorAll(FOCUSABLE)).filter((el) => el.getAttribute("aria-disabled") !== "true" && el.getClientRects().length > 0);
+	const next = e.key === "Home" ? items[0] : items.at(-1);
+	if (!next) return;
+	e.preventDefault();
+	next.focus();
+}
+/**
+* ARIA araç çubuğu (APG Toolbar): tüm denetimler tek sekme durağıdır; ok tuşları denetimler
+* arasında gezer, Home/End ilk ve son denetime gider. İçine Button, IconButton, ToggleButton,
+* ToggleGroup, Select gibi bileşenler konur; `ToolbarGroup` ilgili denetimleri adlı gruba toplar,
+* `ToolbarSeparator` gruplar arasına çizgi çeker.
+*/
+function Toolbar$1({ orientation = "horizontal", overflow = "wrap", variant = "plain", children, className, ...aria }) {
+	const ref = useRef(null);
+	useEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		el.addEventListener("keydown", onEdgeKey);
+		return () => el.removeEventListener("keydown", onEdgeKey);
+	}, []);
+	return /* @__PURE__ */ jsx(Toolbar, {
+		...aria,
+		ref,
+		orientation,
+		className: [Toolbar_module_default.root, className].filter(Boolean).join(" "),
+		"data-overflow": overflow,
+		"data-variant": variant,
+		children: /* @__PURE__ */ jsx(OrientationContext.Provider, {
+			value: orientation,
+			children
+		})
+	});
+}
+function ToolbarGroup({ children, className, ...aria }) {
+	return /* @__PURE__ */ jsx(Group, {
+		...aria,
+		className: [Toolbar_module_default.group, className].filter(Boolean).join(" "),
+		children
+	});
+}
+/** Gruplar arasında ince çizgi; araç çubuğunun yönüne diktir. */
+function ToolbarSeparator() {
+	const orientation = useContext(OrientationContext);
+	return /* @__PURE__ */ jsx(Separator, {
+		orientation: orientation === "horizontal" ? "vertical" : "horizontal",
+		className: Toolbar_module_default.separator
+	});
+}
+export { Toolbar$1 as Toolbar, ToolbarGroup, ToolbarSeparator };

package/dist/components/Toolbar/Toolbar.module.js

@@ -0,0 +1,8 @@
+import './Toolbar.css';
+// src/components/Toolbar/Toolbar.module.css
+var Toolbar_module_default = {
+	"root": "sti-Toolbar-root-52b67",
+	"group": "sti-Toolbar-group-1fe5f",
+	"separator": "sti-Toolbar-separator-ea62d"
+};
+export { Toolbar_module_default as default };

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

@@ -0,0 +1,2 @@
+import { Toolbar, ToolbarGroup, ToolbarGroupProps, ToolbarProps, ToolbarSeparator } from "./Toolbar.js";
+export { Toolbar, ToolbarGroup, ToolbarGroupProps, ToolbarProps, ToolbarSeparator };

package/dist/components/Tooltip/Tooltip.css

@@ -0,0 +1,70 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Tooltip-anchor-1cf4e {
+    display: none;
+  }
+
+  .sti-Tooltip-wrap-4c53e {
+    display: contents;
+  }
+
+  .sti-Tooltip-tooltip-a7b5a {
+    box-sizing: border-box;
+    max-inline-size: min(18rem, calc(100vw - var(--sti-space-8)));
+    padding: var(--sti-space-1) var(--sti-space-2);
+    border-radius: var(--sti-radius-md);
+    background: var(--sti-bg-inverse);
+    box-shadow: var(--sti-shadow-md);
+    color: var(--sti-fg-inverse);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-medium);
+    line-height: var(--sti-line-height-xs);
+    overflow-wrap: anywhere;
+  }
+
+  .sti-Tooltip-tooltip-a7b5a[data-entering] {
+    animation: sti-Tooltip-sti-tooltip-in-10070 var(--sti-duration-fast) var(--sti-ease-out);
+  }
+
+  .sti-Tooltip-tooltip-a7b5a[data-exiting] {
+    animation: sti-Tooltip-sti-tooltip-in-10070 var(--sti-duration-fast) var(--sti-ease-in) reverse;
+  }
+
+  .sti-Tooltip-arrow-e51a9 svg {
+    block-size: 8px;
+    inline-size: 8px;
+    fill: var(--sti-bg-inverse);
+    display: block;
+  }
+
+  .sti-Tooltip-arrow-e51a9[data-placement="bottom"] svg {
+    rotate: 180deg;
+  }
+
+  .sti-Tooltip-arrow-e51a9[data-placement="left"] svg {
+    rotate: -90deg;
+  }
+
+  .sti-Tooltip-arrow-e51a9[data-placement="right"] svg {
+    rotate: 90deg;
+  }
+
+  @keyframes sti-Tooltip-sti-tooltip-in-10070 {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-Tooltip-tooltip-a7b5a[data-entering], .sti-Tooltip-tooltip-a7b5a[data-exiting] {
+      animation: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-Tooltip-tooltip-a7b5a {
+      border: var(--sti-border-width) solid CanvasText;
+    }
+  }
+}

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,19 @@
+import { ReactElement, ReactNode } from "react";
+export interface TooltipProps {
+  /** İpucu metni: kısa, düz metin (bağlantı ya da düğme içermez). */
+  content: ReactNode;
+  /** İpucunu taşıyan odaklanabilir öğe (React Aria tabanlı: Button, IconButton, Link). */
+  children: ReactElement;
+  placement?: "top" | "bottom" | "start" | "end";
+  /** Üzerine gelince açılma gecikmesi (ms). Varsayılan 500; klavye odağında hemen açılır. */
+  delay?: number;
+  closeDelay?: number;
+  isDisabled?: boolean;
+}
+/**
+ * İpucu (APG Tooltip): üzerine gelince ya da klavye odağında kısa açıklama; öğenin açıklaması olarak
+ * okunur. Escape kapatır. Dokunmatikte uzun dokunma açar (öğenin eylemi çalışmaz), ekrana yeniden
+ * dokunma ya da 4 saniye kapatır. Öğenin adının yerine geçmez: ikon düğmesinin adı ayrıca
+ * verilir. Önemli ya da etkileşimli bilgi için ContextualHelp kullanılır.
+ */
+export declare function Tooltip({ content, children, placement, delay, closeDelay, isDisabled }: TooltipProps): import("react").JSX.Element;