@stisocial/ui 0.0.0-stage → 0.1.0

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,38 @@
+import Skeleton_module_default from "./Skeleton.module.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/Skeleton/Skeleton.tsx
+/**
+* Yükleniyor iskeleti: içerik gelene kadar yerini ve ölçüsünü tutar (sayfa kaymaz). Süstür ve
+* ekran okuyucudan gizlidir; yükleme durumunu kapsayıcı bildirir (`aria-busy="true"` ve
+* "Yükleniyor" metni; tanim.md §7). Sunucu bileşenidir.
+*/
+function Skeleton({ shape = "text", lines = 1, textSize = "md", width = "full", size = "md", aspectRatio = "16/9", animated = true, className, id }) {
+	const shared = {
+		id,
+		"aria-hidden": true,
+		className: [Skeleton_module_default.root, className].filter(Boolean).join(" "),
+		"data-shape": shape,
+		"data-animated": animated ? "" : void 0
+	};
+	if (shape === "circle") return /* @__PURE__ */ jsx("div", {
+		...shared,
+		"data-size": size
+	});
+	if (shape === "rect") return /* @__PURE__ */ jsx("div", {
+		...shared,
+		"data-width": width,
+		"data-aspect": aspectRatio
+	});
+	const count = Math.max(1, Math.floor(Number.isFinite(lines) ? lines : 1));
+	return /* @__PURE__ */ jsx("div", {
+		...shared,
+		"data-text-size": textSize,
+		"data-width": width,
+		children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx("span", {
+			className: Skeleton_module_default.line,
+			"data-last": count > 1 && i === count - 1 ? "" : void 0,
+			children: /* @__PURE__ */ jsx("span", { className: Skeleton_module_default.bar })
+		}, i))
+	});
+}
+export { Skeleton };

package/dist/components/Skeleton/Skeleton.module.js

@@ -0,0 +1,9 @@
+import './Skeleton.css';
+// src/components/Skeleton/Skeleton.module.css
+var Skeleton_module_default = {
+	"root": "sti-Skeleton-root-02160",
+	"line": "sti-Skeleton-line-1a25c",
+	"bar": "sti-Skeleton-bar-4e5d7",
+	"sti-skeleton-shimmer": "sti-Skeleton-sti-skeleton-shimmer-42096"
+};
+export { Skeleton_module_default as default };

package/dist/components/SkipLink/SkipLink.css

@@ -0,0 +1,86 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-SkipLink-root-c3f25 {
+    --sti-skip-link-inset: var(--sti-space-3);
+    --sti-skip-link-h: var(--sti-control-h-md);
+    --sti-skip-link-px: var(--sti-space-5);
+    --sti-skip-link-bg: var(--sti-bg-inverse);
+    --sti-skip-link-fg: var(--sti-fg-inverse);
+    --sti-skip-link-radius: var(--sti-radius-pill);
+    --sti-skip-link-shadow: var(--sti-shadow-lg);
+    z-index: var(--sti-z-skip-link);
+    max-width: calc(100% - 2 * var(--sti-skip-link-inset));
+    min-height: var(--sti-skip-link-h);
+    padding-block: var(--sti-space-2);
+    padding-inline: var(--sti-skip-link-px);
+    border: var(--sti-border-width) solid transparent;
+    border-radius: var(--sti-skip-link-radius);
+    background: var(--sti-skip-link-bg);
+    box-shadow: var(--sti-skip-link-shadow);
+    color: var(--sti-skip-link-fg);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+    align-items: center;
+    text-decoration: none;
+    display: inline-flex;
+    position: fixed;
+    inset-block-start: var(--sti-skip-link-inset);
+    inset-inline-start: var(--sti-skip-link-inset);
+  }
+
+  .sti-SkipLink-root-c3f25:not(:focus) {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    width: 1px;
+    height: 1px;
+    min-height: 0;
+    box-shadow: none;
+    border: 0;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+  }
+
+  .sti-SkipLink-root-c3f25:focus {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+    animation: sti-SkipLink-sti-skip-link-in-01561 var(--sti-duration-base) var(--sti-ease-out);
+  }
+
+  .sti-SkipLink-root-c3f25:visited {
+    color: var(--sti-skip-link-fg);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-SkipLink-root-c3f25:focus {
+      animation: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-SkipLink-root-c3f25 {
+      border-color: canvastext;
+    }
+  }
+
+  @media print {
+    .sti-SkipLink-root-c3f25 {
+      display: none;
+    }
+  }
+
+  @keyframes sti-SkipLink-sti-skip-link-in-01561 {
+    from {
+      opacity: 0;
+      transform: translateY(calc(var(--sti-space-2) * -1));
+    }
+
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+}

package/dist/components/SkipLink/SkipLink.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode, Ref } from "react";
+export interface SkipLinkProps {
+  /** Atlanacak bölgenin kimliği (ör. `<main id="icerik">` için "icerik"). */
+  targetId: string;
+  /** Etiket; varsayılan "İçeriğe atla". Başka hedefler için "Gezinmeye atla" gibi. */
+  children?: ReactNode;
+  className?: string;
+  id?: string;
+  ref?: Ref<HTMLAnchorElement>;
+}
+/**
+ * Sayfanın başındaki "İçeriğe atla" bağlantısı (WCAG 2.4.1). Yalnız klavye odağında görünür;
+ * basılınca odağı hedef bölgeye taşır, sonraki Tab hedefin içinden devam eder. Hedef kendiliğinden
+ * odaklanamıyorsa geçici `tabindex="-1"` eklenir, odak ayrılınca kaldırılır. JavaScript yüklenmeden
+ * de çalışır (sayfa içi `#` bağlantısı).
+ */
+export declare function SkipLink({ targetId, children, className, id, ref }: SkipLinkProps): import("react").JSX.Element;

package/dist/components/SkipLink/SkipLink.js

@@ -0,0 +1,34 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import SkipLink_module_default from "./SkipLink.module.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/SkipLink/SkipLink.tsx
+/**
+* Sayfanın başındaki "İçeriğe atla" bağlantısı (WCAG 2.4.1). Yalnız klavye odağında görünür;
+* basılınca odağı hedef bölgeye taşır, sonraki Tab hedefin içinden devam eder. Hedef kendiliğinden
+* odaklanamıyorsa geçici `tabindex="-1"` eklenir, odak ayrılınca kaldırılır. JavaScript yüklenmeden
+* de çalışır (sayfa içi `#` bağlantısı).
+*/
+function SkipLink({ targetId, children, className, id, ref }) {
+	const messages = useMessages();
+	const onClick = (event) => {
+		const target = document.getElementById(targetId);
+		if (!target) return;
+		event.preventDefault();
+		if (!target.hasAttribute("tabindex") && target.tabIndex < 0) {
+			target.setAttribute("tabindex", "-1");
+			target.addEventListener("blur", () => target.removeAttribute("tabindex"), { once: true });
+		}
+		target.focus();
+		target.scrollIntoView({ block: "start" });
+	};
+	return /* @__PURE__ */ jsx("a", {
+		ref,
+		id,
+		className: [SkipLink_module_default.root, className].filter(Boolean).join(" "),
+		href: `#${encodeURIComponent(targetId)}`,
+		onClick,
+		children: children ?? messages.skipToContent
+	});
+}
+export { SkipLink };

package/dist/components/SkipLink/SkipLink.module.js

@@ -0,0 +1,7 @@
+import './SkipLink.css';
+// src/components/SkipLink/SkipLink.module.css
+var SkipLink_module_default = {
+	"root": "sti-SkipLink-root-c3f25",
+	"sti-skip-link-in": "sti-SkipLink-sti-skip-link-in-01561"
+};
+export { SkipLink_module_default as default };

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

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

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,14 @@
+import { SliderBaseProps } from "../_internal/slider/SliderShell.js";
+export interface SliderProps extends SliderBaseProps {
+  value?: number;
+  defaultValue?: number;
+  /** Sürüklerken ya da tuşla her değişimde. */
+  onChange?: (value: number) => void;
+  /** Sürükleme bitince (sunucuya kaydetmek için). */
+  onChangeEnd?: (value: number) => void;
+}
+/**
+ * Kaydırıcı (APG Slider): bir aralıkta tek değer. Oklar adım, PageUp/PageDown büyük adım,
+ * Home/End uçlar; değer etiketin yanında dile göre biçimli yazılır.
+ */
+export declare function Slider({ value, defaultValue, onChange, onChangeEnd, name, isDisabled, id, step, ...rest }: SliderProps): import("react").JSX.Element;

package/dist/components/Slider/Slider.js

@@ -0,0 +1,25 @@
+"use client";
+import { SliderShell } from "../_internal/slider/SliderShell.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/Slider/Slider.tsx
+/**
+* Kaydırıcı (APG Slider): bir aralıkta tek değer. Oklar adım, PageUp/PageDown büyük adım,
+* Home/End uçlar; değer etiketin yanında dile göre biçimli yazılır.
+*/
+function Slider({ value, defaultValue, onChange, onChangeEnd, name, isDisabled, id, step, ...rest }) {
+	return /* @__PURE__ */ jsx(SliderShell, {
+		...rest,
+		thumbLabels: [void 0],
+		ariaProps: {
+			value,
+			defaultValue: defaultValue ?? (value === void 0 ? rest.minValue ?? 0 : void 0),
+			onChange: onChange ? (v) => onChange(Array.isArray(v) ? v[0] ?? 0 : v) : void 0,
+			onChangeEnd: onChangeEnd ? (v) => onChangeEnd(Array.isArray(v) ? v[0] ?? 0 : v) : void 0,
+			name,
+			isDisabled,
+			id,
+			step
+		}
+	});
+}
+export { Slider };

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

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

package/dist/components/Spacer/Spacer.css

@@ -0,0 +1,94 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Spacer-root-29394 {
+    --sti-spacer-size: var(--sti-space-0);
+    flex: none;
+    align-self: stretch;
+    min-block-size: 0;
+    min-inline-size: 0;
+  }
+
+  .sti-Spacer-root-29394[data-axis="vertical"] {
+    inline-size: 0;
+    block-size: var(--sti-spacer-size);
+  }
+
+  .sti-Spacer-root-29394[data-axis="horizontal"] {
+    inline-size: var(--sti-spacer-size);
+    block-size: 0;
+  }
+
+  .sti-Spacer-root-29394[data-grow] {
+    flex: auto;
+  }
+
+  .sti-Spacer-root-29394[data-grow][data-axis="vertical"] {
+    block-size: auto;
+    min-block-size: var(--sti-spacer-size);
+  }
+
+  .sti-Spacer-root-29394[data-grow][data-axis="horizontal"] {
+    inline-size: auto;
+    min-inline-size: var(--sti-spacer-size);
+  }
+
+  .sti-Spacer-root-29394[data-size="0"] {
+    --sti-spacer-size: var(--sti-space-0);
+  }
+
+  .sti-Spacer-root-29394[data-size="0-5"] {
+    --sti-spacer-size: var(--sti-space-0-5);
+  }
+
+  .sti-Spacer-root-29394[data-size="1"] {
+    --sti-spacer-size: var(--sti-space-1);
+  }
+
+  .sti-Spacer-root-29394[data-size="2"] {
+    --sti-spacer-size: var(--sti-space-2);
+  }
+
+  .sti-Spacer-root-29394[data-size="3"] {
+    --sti-spacer-size: var(--sti-space-3);
+  }
+
+  .sti-Spacer-root-29394[data-size="4"] {
+    --sti-spacer-size: var(--sti-space-4);
+  }
+
+  .sti-Spacer-root-29394[data-size="5"] {
+    --sti-spacer-size: var(--sti-space-5);
+  }
+
+  .sti-Spacer-root-29394[data-size="6"] {
+    --sti-spacer-size: var(--sti-space-6);
+  }
+
+  .sti-Spacer-root-29394[data-size="8"] {
+    --sti-spacer-size: var(--sti-space-8);
+  }
+
+  .sti-Spacer-root-29394[data-size="10"] {
+    --sti-spacer-size: var(--sti-space-10);
+  }
+
+  .sti-Spacer-root-29394[data-size="12"] {
+    --sti-spacer-size: var(--sti-space-12);
+  }
+
+  .sti-Spacer-root-29394[data-size="16"] {
+    --sti-spacer-size: var(--sti-space-16);
+  }
+
+  .sti-Spacer-root-29394[data-size="20"] {
+    --sti-spacer-size: var(--sti-space-20);
+  }
+
+  .sti-Spacer-root-29394[data-size="24"] {
+    --sti-spacer-size: var(--sti-space-24);
+  }
+
+  .sti-Spacer-root-29394[data-size="32"] {
+    --sti-spacer-size: var(--sti-space-32);
+  }
+}

package/dist/components/Spacer/Spacer.d.ts

@@ -0,0 +1,24 @@
+import { LayoutRootProps, Space } from "../Stack/layout.js";
+export interface SpacerProps extends Omit<LayoutRootProps, "aria-label" | "aria-labelledby" | "aria-describedby" | "dir" | "lang"> {
+  /**
+   * Sabit boşluk (boşluk ölçeğinin adı). Verilmezse esnek boşluktur: flex dizide kalan yeri
+   * doldurur ve sonraki öğeleri sona iter. `grow` ile birlikte verilirse en az bu kadardır.
+   */
+  size?: Space;
+  /** Sabit boşluğun yönü: `vertical` (varsayılan) yükseklik, `horizontal` genişlik. */
+  axis?: "vertical" | "horizontal";
+  /** Kalan yeri doldurur; `size` verilmemişse varsayılan açıktır. */
+  grow?: boolean;
+  /**
+   * Kök öğe: `div` (varsayılan); satır içi akışta (`Inline as="span"`) `span`; liste olarak
+   * çizilen `Stack`/`Inline` (`as="ul"`/`"ol"`) içinde `li` (liste yalnız `li` çocuk alabilir).
+   * Her durumda süstür (`aria-hidden`).
+   */
+  as?: "div" | "span" | "li";
+}
+/**
+ * Boşluk: flex dizide öğeleri ayırır ya da sona iter (araç çubuğunda sağa yaslanan eylem).
+ * Süstür: ekran okuyucu okumaz. Düzenli aralık için `Stack`/`Inline` `gap`'i tercih edilir.
+ * Sunucu bileşenidir.
+ */
+export declare function Spacer(props: SpacerProps): import("react").JSX.Element;

package/dist/components/Spacer/Spacer.js

@@ -0,0 +1,22 @@
+import { cx, rootAttributes } from "../Stack/layout.js";
+import Spacer_module_default from "./Spacer.module.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/Spacer/Spacer.tsx
+/**
+* Boşluk: flex dizide öğeleri ayırır ya da sona iter (araç çubuğunda sağa yaslanan eylem).
+* Süstür: ekran okuyucu okumaz. Düzenli aralık için `Stack`/`Inline` `gap`'i tercih edilir.
+* Sunucu bileşenidir.
+*/
+function Spacer(props) {
+	const { size, axis = "vertical", grow = size === void 0, as: Tag = "div", className, ref } = props;
+	return /* @__PURE__ */ jsx(Tag, {
+		...rootAttributes(props),
+		ref,
+		className: cx(Spacer_module_default.root, className),
+		"aria-hidden": "true",
+		"data-size": size,
+		"data-axis": axis,
+		"data-grow": grow || void 0
+	});
+}
+export { Spacer };

package/dist/components/Spacer/Spacer.module.js

@@ -0,0 +1,4 @@
+import './Spacer.css';
+// src/components/Spacer/Spacer.module.css
+var Spacer_module_default = { "root": "sti-Spacer-root-29394" };
+export { Spacer_module_default as default };

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

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

package/dist/components/Spinner/Spinner.css

@@ -0,0 +1,59 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Spinner-root-52d75 {
+    --sti-spinner-size: 1em;
+    --sti-spinner-duration: .8s;
+    width: var(--sti-spinner-size);
+    height: var(--sti-spinner-size);
+    vertical-align: -.125em;
+    color: inherit;
+    flex: none;
+    display: inline-block;
+  }
+
+  .sti-Spinner-root-52d75[data-size="sm"] {
+    --sti-spinner-size: var(--sti-icon-sm);
+  }
+
+  .sti-Spinner-root-52d75[data-size="md"] {
+    --sti-spinner-size: var(--sti-icon-md);
+  }
+
+  .sti-Spinner-root-52d75[data-size="lg"] {
+    --sti-spinner-size: var(--sti-icon-lg);
+  }
+
+  .sti-Spinner-svg-5e7cf {
+    width: 100%;
+    height: 100%;
+    animation: sti-Spinner-sti-spinner-rotate-1835a var(--sti-spinner-duration) linear infinite;
+    display: block;
+  }
+
+  .sti-Spinner-track-96c18 {
+    stroke: currentColor;
+    opacity: .25;
+  }
+
+  .sti-Spinner-arc-6dac6 {
+    stroke: currentColor;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-Spinner-root-52d75 {
+      --sti-spinner-duration: 2.4s;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-Spinner-track-96c18 {
+      opacity: .5;
+    }
+  }
+
+  @keyframes sti-Spinner-sti-spinner-rotate-1835a {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+}

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,15 @@
+export interface SpinnerProps {
+  /** Boy: `sm` 16, `md` 20, `lg` 24 piksel; `inherit` (varsayılan) yazı boyutunu izler. */
+  size?: "sm" | "md" | "lg" | "inherit";
+  /**
+   * Ekran okuyucunun okuyacağı ad ("Yükleniyor"). Verilmezse gösterge süstür ve gizlenir: yükleme
+   * durumunu kapsayıcı duyurur (`aria-busy`, düğmenin bekleme durumu).
+   */
+  label?: string;
+  className?: string;
+}
+/**
+ * Belirsiz süreli yükleme göstergesi. Rengi metinden gelir. Hareketi azaltmayı seçen kullanıcıda
+ * durmaz, yavaşlar: durmuş bir gösterge "takıldı" gibi okunur.
+ */
+export declare function Spinner({ size, label, className }: SpinnerProps): import("react").JSX.Element;

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,37 @@
+import Spinner_module_default from "./Spinner.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/Spinner/Spinner.tsx
+/**
+* Belirsiz süreli yükleme göstergesi. Rengi metinden gelir. Hareketi azaltmayı seçen kullanıcıda
+* durmaz, yavaşlar: durmuş bir gösterge "takıldı" gibi okunur.
+*/
+function Spinner({ size = "inherit", label, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: [Spinner_module_default.root, className].filter(Boolean).join(" "),
+		"data-size": size === "inherit" ? void 0 : size,
+		...label ? {
+			role: "progressbar",
+			"aria-label": label
+		} : { "aria-hidden": true },
+		children: /* @__PURE__ */ jsxs("svg", {
+			className: Spinner_module_default.svg,
+			viewBox: "0 0 24 24",
+			fill: "none",
+			focusable: "false",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsx("circle", {
+				className: Spinner_module_default.track,
+				cx: "12",
+				cy: "12",
+				r: "9",
+				strokeWidth: "2.5"
+			}), /* @__PURE__ */ jsx("path", {
+				className: Spinner_module_default.arc,
+				d: "M12 3a9 9 0 0 1 9 9",
+				strokeWidth: "2.5",
+				strokeLinecap: "round"
+			})]
+		})
+	});
+}
+export { Spinner };

package/dist/components/Spinner/Spinner.module.js

@@ -0,0 +1,10 @@
+import './Spinner.css';
+// src/components/Spinner/Spinner.module.css
+var Spinner_module_default = {
+	"root": "sti-Spinner-root-52d75",
+	"svg": "sti-Spinner-svg-5e7cf",
+	"sti-spinner-rotate": "sti-Spinner-sti-spinner-rotate-1835a",
+	"track": "sti-Spinner-track-96c18",
+	"arc": "sti-Spinner-arc-6dac6"
+};
+export { Spinner_module_default as default };

package/dist/components/SplitButton/SplitButton.css

@@ -0,0 +1,56 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-SplitButton-root-e3ff7 {
+    isolation: isolate;
+    align-items: stretch;
+    min-width: 0;
+    max-width: 100%;
+    display: inline-flex;
+  }
+
+  .sti-SplitButton-root-e3ff7[data-size] .sti-SplitButton-main-cd1ff {
+    --sti-button-radius: var(--sti-radius-pill) 0 0 var(--sti-radius-pill);
+    flex: 0 auto;
+    min-width: 0;
+  }
+
+  .sti-SplitButton-root-e3ff7[data-size] .sti-SplitButton-toggle-96a9f {
+    --sti-icon-button-radius: 0 var(--sti-radius-pill) var(--sti-radius-pill) 0;
+    flex: none;
+  }
+
+  .sti-SplitButton-root-e3ff7[data-variant="secondary"] .sti-SplitButton-toggle-96a9f {
+    margin-inline-start: calc(var(--sti-border-width) * -1);
+  }
+
+  .sti-SplitButton-root-e3ff7[data-variant="primary"] .sti-SplitButton-toggle-96a9f {
+    box-shadow: inset var(--sti-border-width) 0 0
+      color-mix(in oklab, var(--sti-fg-on-accent) 35%, transparent);
+  }
+
+  .sti-SplitButton-main-cd1ff:hover, .sti-SplitButton-toggle-96a9f:hover {
+    z-index: 1;
+  }
+
+  .sti-SplitButton-main-cd1ff:focus-visible, .sti-SplitButton-toggle-96a9f:focus-visible, .sti-SplitButton-main-cd1ff[data-focus-visible], .sti-SplitButton-toggle-96a9f[data-focus-visible] {
+    z-index: 2;
+  }
+
+  .sti-SplitButton-root-e3ff7[data-pending][data-size] .sti-SplitButton-toggle-96a9f {
+    cursor: progress;
+    opacity: 1;
+  }
+
+  .sti-SplitButton-root-e3ff7[data-size]: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)) .sti-SplitButton-main-cd1ff {
+    --sti-button-radius: 0 var(--sti-radius-pill) var(--sti-radius-pill) 0;
+  }
+
+  .sti-SplitButton-root-e3ff7[data-size]: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)) .sti-SplitButton-toggle-96a9f {
+    --sti-icon-button-radius: var(--sti-radius-pill) 0 0 var(--sti-radius-pill);
+  }
+
+  .sti-SplitButton-root-e3ff7: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))[data-variant="primary"] .sti-SplitButton-toggle-96a9f {
+    box-shadow: inset calc(var(--sti-border-width) * -1) 0 0
+      color-mix(in oklab, var(--sti-fg-on-accent) 35%, transparent);
+  }
+}

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

@@ -0,0 +1,29 @@
+import { ActionMenuItem } from "../_internal/menu/ActionMenu.js";
+import { ReactNode } from "react";
+export type SplitButtonItem = ActionMenuItem;
+export interface SplitButtonProps {
+  /** Ana eylemin etiketi. */
+  children: ReactNode;
+  /** Ana eylem. */
+  onPress?: () => void;
+  /** Menüdeki ilgili eylemler (ana eylemin seçenekleri: "Taslak olarak kaydet", "Zamanla"). */
+  items: SplitButtonItem[];
+  /** Menü öğesi seçilince (öğenin kendi `onAction`'ından sonra). */
+  onAction?: (key: string) => void;
+  /** Menü düğmesinin adı; verilmezse "Diğer seçenekler". */
+  menuLabel?: string;
+  variant?: "primary" | "secondary";
+  size?: "sm" | "md" | "lg";
+  iconStart?: ReactNode;
+  /** Ana eylem beklemede (menü düğmesi de devre dışı kalır). */
+  isPending?: boolean;
+  isDisabled?: boolean;
+  type?: "button" | "submit";
+  className?: string;
+  id?: string;
+}
+/**
+ * Bölünmüş düğme: ana eylem ve bitişik menü düğmesi. Ana eylem tek basışla yapılır; seçenekleri
+ * menü düğmesi açar (APG Menu Button). İki ayrı sekme durağıdır; menü düğmesinin kendi adı vardır.
+ */
+export declare function SplitButton({ children, onPress, items, onAction, menuLabel, variant, size, iconStart, isPending, isDisabled, type, className, id }: SplitButtonProps): import("react").JSX.Element;

package/dist/components/SplitButton/SplitButton.js

@@ -0,0 +1,48 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { ChevronDownIcon } from "../../icons/generated/ChevronDownIcon.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { Button } from "../Button/Button.js";
+import { ActionMenu } from "../_internal/menu/ActionMenu.js";
+import SplitButton_module_default from "./SplitButton.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/SplitButton/SplitButton.tsx
+/**
+* Bölünmüş düğme: ana eylem ve bitişik menü düğmesi. Ana eylem tek basışla yapılır; seçenekleri
+* menü düğmesi açar (APG Menu Button). İki ayrı sekme durağıdır; menü düğmesinin kendi adı vardır.
+*/
+function SplitButton({ children, onPress, items, onAction, menuLabel, variant = "primary", size = "md", iconStart, isPending, isDisabled, type = "button", className, id }) {
+	const t = useMessages();
+	const label = menuLabel ?? t.moreOptions;
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: [SplitButton_module_default.root, className].filter(Boolean).join(" "),
+		"data-variant": variant,
+		"data-size": size,
+		"data-pending": isPending ? "" : void 0,
+		children: [/* @__PURE__ */ jsx(Button, {
+			className: SplitButton_module_default.main,
+			variant,
+			size,
+			iconStart,
+			onPress,
+			isPending,
+			isDisabled,
+			type,
+			children
+		}), /* @__PURE__ */ jsx(ActionMenu, {
+			label,
+			items,
+			onAction,
+			trigger: /* @__PURE__ */ jsx(IconButton, {
+				className: SplitButton_module_default.toggle,
+				label,
+				icon: /* @__PURE__ */ jsx(ChevronDownIcon, {}),
+				variant,
+				size,
+				isDisabled: isDisabled || isPending
+			})
+		})]
+	});
+}
+export { SplitButton };

package/dist/components/SplitButton/SplitButton.module.js

@@ -0,0 +1,8 @@
+import './SplitButton.css';
+// src/components/SplitButton/SplitButton.module.css
+var SplitButton_module_default = {
+	"root": "sti-SplitButton-root-e3ff7",
+	"main": "sti-SplitButton-main-cd1ff",
+	"toggle": "sti-SplitButton-toggle-96a9f"
+};
+export { SplitButton_module_default as default };