@stisocial/ui 0.0.0-stage → 0.2.0

package/dist/components/Sticky/Sticky.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode, Ref } from "react";
+export type StickyOffset = "none" | "sm" | "md" | "lg" | "topbar";
+export interface StickyProps {
+  /** Hangi kenara yapışır. */
+  edge?: "top" | "bottom";
+  /**
+   * Kenardan uzaklık: 0, `space-2`, `space-4`, `space-6` ya da üst çubuk yüksekliği
+   * (`--sti-height-topbar`; sayfanın yapışkan üst çubuğunun hemen altına yapışır).
+   */
+  offset?: StickyOffset;
+  /** Zemin: altından kayan içerik görünmesin diye varsayılan sayfa zeminidir. */
+  surface?: "canvas" | "surface" | "none";
+  /** Takıldığında gölge (altından içerik kaydığını gösterir). */
+  shadow?: boolean;
+  /** Takılma durumu değişince çağrılır. */
+  onStuckChange?: (stuck: boolean) => void;
+  /** Kök öğe. */
+  as?: "div" | "header" | "nav" | "aside";
+  /** `nav` ya da `aside` kullanıldığında yer işaretinin adı. */
+  "aria-label"?: string;
+  children?: ReactNode;
+  className?: string;
+  id?: string;
+  ref?: Ref<HTMLElement>;
+}
+/**
+ * Kaydırılınca kenara yapışan sarmalayıcı (`position: sticky`). Takıldığında `data-stuck`
+ * özniteliği ve gölge alır. Kenara değme `IntersectionObserver` ile ölçülür; kaydırma dinleyicisi
+ * yalnız öğe kenara değerken bağlıdır ve yalnız kabın kaydırma konumunu okur.
+ */
+export declare function Sticky({ edge, offset, surface, shadow, onStuckChange, as: Tag, children, className, id, ref, ...aria }: StickyProps): import("react").JSX.Element;

package/dist/components/Sticky/Sticky.js

@@ -0,0 +1,90 @@
+"use client";
+import { useMergedRef } from "../ScrollArea/useScrollable.js";
+import Sticky_module_default from "./Sticky.module.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+// src/components/Sticky/Sticky.tsx
+/** Yapışkan konumun göreli olduğu en yakın kaydırma kabı; yoksa belge. */
+function scrollRoot(el) {
+	for (let node = el.parentElement; node && node !== document.body; node = node.parentElement) {
+		const { overflowX, overflowY } = getComputedStyle(node);
+		if (/(auto|scroll|hidden|overlay)/.test(`${overflowX} ${overflowY}`)) return node;
+	}
+	return document;
+}
+/** Alt piksel yuvarlamasıyla oluşan farklar kaydırma sayılmaz. */
+const TOLERANCE = 1;
+/**
+* İçerik yapışma kenarının altından kaymış mı? Üstte: kap baştan kaydırılmıştır; altta: kabın
+* sonuna gelinmemiştir. Kenara değen öğe ancak bu durumda yerinden oynatılmıştır (takılıdır);
+* aksi hâlde akıştaki doğal yerindedir (ör. kaydırılmamış kabın ilk çocuğu).
+*/
+function contentPassed(root, edge) {
+	const s = root instanceof Document ? root.scrollingElement ?? root.documentElement : root;
+	return edge === "top" ? s.scrollTop > TOLERANCE : s.scrollHeight - s.clientHeight - s.scrollTop > TOLERANCE;
+}
+/**
+* Kaydırılınca kenara yapışan sarmalayıcı (`position: sticky`). Takıldığında `data-stuck`
+* özniteliği ve gölge alır. Kenara değme `IntersectionObserver` ile ölçülür; kaydırma dinleyicisi
+* yalnız öğe kenara değerken bağlıdır ve yalnız kabın kaydırma konumunu okur.
+*/
+function Sticky({ edge = "top", offset = "none", surface = "canvas", shadow = true, onStuckChange, as: Tag = "div", children, className, id, ref, ...aria }) {
+	const inner = useRef(null);
+	const setRef = useMergedRef(inner, ref);
+	const [stuck, setStuck] = useState(false);
+	const stuckRef = useRef(false);
+	const onChange = useRef(onStuckChange);
+	onChange.current = onStuckChange;
+	useEffect(() => {
+		const el = inner.current;
+		if (!el) return;
+		const cs = getComputedStyle(el);
+		const inset = Number.parseFloat(edge === "top" ? cs.top : cs.bottom) || 0;
+		const root = scrollRoot(el);
+		let touching = false;
+		const apply = () => {
+			const next = touching && contentPassed(root, edge);
+			if (stuckRef.current === next) return;
+			stuckRef.current = next;
+			setStuck(next);
+			onChange.current?.(next);
+		};
+		const margin = `-${inset + 1}px`;
+		const observer = new IntersectionObserver((entries) => {
+			const entry = entries[entries.length - 1];
+			const rb = entry?.rootBounds;
+			if (!entry || !rb) return;
+			const r = entry.boundingClientRect;
+			const atEdge = edge === "top" ? r.top < rb.top : r.bottom > rb.bottom;
+			const next = entry.isIntersecting && entry.intersectionRatio < 1 && atEdge;
+			if (next !== touching) {
+				touching = next;
+				if (next) root.addEventListener("scroll", apply, { passive: true });
+				else root.removeEventListener("scroll", apply);
+			}
+			apply();
+		}, {
+			root,
+			rootMargin: edge === "top" ? `${margin} 0px 0px 0px` : `0px 0px ${margin} 0px`,
+			threshold: [0, 1]
+		});
+		observer.observe(el);
+		return () => {
+			observer.disconnect();
+			root.removeEventListener("scroll", apply);
+		};
+	}, [edge, offset]);
+	return /* @__PURE__ */ jsx(Tag, {
+		ref: setRef,
+		id,
+		className: [Sticky_module_default.root, className].filter(Boolean).join(" "),
+		"data-edge": edge,
+		"data-offset": offset,
+		"data-surface": surface,
+		"data-shadow": shadow ? "" : void 0,
+		"data-stuck": stuck ? "" : void 0,
+		...aria,
+		children
+	});
+}
+export { Sticky };

package/dist/components/Sticky/Sticky.module.js

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

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

@@ -0,0 +1,2 @@
+import { Sticky, StickyOffset, StickyProps } from "./Sticky.js";
+export { Sticky, StickyOffset, StickyProps };

package/dist/components/SuccessState/SuccessState.css

@@ -0,0 +1,7 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-SuccessState-root-fdf50 {
+    inline-size: 100%;
+    min-inline-size: 0;
+  }
+}

package/dist/components/SuccessState/SuccessState.d.ts

@@ -0,0 +1,17 @@
+import { EmptyStateProps } from "../EmptyState/EmptyState.js";
+import { ReactNode } from "react";
+export interface SuccessStateProps extends Omit<EmptyStateProps, "tone"> {
+  /** Ne tamamlandı ("Başvurunuz alındı"). */
+  title: ReactNode;
+  /**
+   * İşlemin ardından gelen durum: başlık ve açıklama ekran okuyucuya duyurulur (sırası gelince).
+   * Varsayılan açık; sayfayla birlikte gelen kalıcı durumda kapatılır.
+   */
+  live?: boolean;
+}
+/**
+ * Başarı durumu: çok adımlı bir işin (başvuru, ödeme, kayıt) sonunda ne olduğunu ve sırada ne
+ * olduğunu söyleyen tam bölüm: başarı tonlu onay ikonu, başlık, açıklama ve sonraki adım
+ * eylemleri. Kısa onay için `Alert` ya da bildirim kullanılır.
+ */
+export declare function SuccessState({ live, icon, className, ...rest }: SuccessStateProps): import("react").JSX.Element;

package/dist/components/SuccessState/SuccessState.js

@@ -0,0 +1,27 @@
+"use client";
+import { CheckCircleIcon } from "../../icons/generated/CheckCircleIcon.js";
+import { useAnnouncement } from "../Alert/useAnnouncement.js";
+import { EmptyState } from "../EmptyState/EmptyState.js";
+import SuccessState_module_default from "./SuccessState.module.js";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+// src/components/SuccessState/SuccessState.tsx
+/**
+* Başarı durumu: çok adımlı bir işin (başvuru, ödeme, kayıt) sonunda ne olduğunu ve sırada ne
+* olduğunu söyleyen tam bölüm: başarı tonlu onay ikonu, başlık, açıklama ve sonraki adım
+* eylemleri. Kısa onay için `Alert` ya da bildirim kullanılır.
+*/
+function SuccessState({ live = true, icon, className, ...rest }) {
+	const root = useRef(null);
+	useAnnouncement(live, "polite", () => root.current, (el) => [el.querySelector("h1,h2,h3,h4,h5,h6")?.textContent, el.querySelector("p")?.textContent].filter(Boolean).join(". "));
+	return /* @__PURE__ */ jsx("div", {
+		ref: root,
+		className: [SuccessState_module_default.root, className].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ jsx(EmptyState, {
+			...rest,
+			tone: "success",
+			icon: icon ?? /* @__PURE__ */ jsx(CheckCircleIcon, {})
+		})
+	});
+}
+export { SuccessState };

package/dist/components/SuccessState/SuccessState.module.js

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

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

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

package/dist/components/Surface/Surface.css

@@ -0,0 +1,146 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Surface-root-6e3bb {
+    --sti-surface-bg: var(--sti-bg-surface);
+    --sti-surface-fg: var(--sti-fg);
+    --sti-surface-border: transparent;
+    --sti-surface-radius: 0;
+    --sti-surface-shadow: none;
+    --sti-surface-padding: var(--sti-space-0);
+    box-sizing: border-box;
+    min-inline-size: 0;
+    padding: var(--sti-surface-padding);
+    border: var(--sti-border-width) solid var(--sti-surface-border);
+    border-radius: var(--sti-surface-radius);
+    background: var(--sti-surface-bg);
+    box-shadow: var(--sti-surface-shadow);
+    color: var(--sti-surface-fg);
+  }
+
+  .sti-Surface-root-6e3bb[data-border="none"] {
+    border-width: 0;
+  }
+
+  .sti-Surface-root-6e3bb[data-background="canvas"] {
+    --sti-surface-bg: var(--sti-bg-canvas);
+  }
+
+  .sti-Surface-root-6e3bb[data-background="subtle"] {
+    --sti-surface-bg: var(--sti-bg-subtle);
+  }
+
+  .sti-Surface-root-6e3bb[data-background="surface"] {
+    --sti-surface-bg: var(--sti-bg-surface);
+  }
+
+  .sti-Surface-root-6e3bb[data-border="subtle"] {
+    --sti-surface-border: var(--sti-border-subtle);
+  }
+
+  .sti-Surface-root-6e3bb[data-border="default"] {
+    --sti-surface-border: var(--sti-border);
+  }
+
+  .sti-Surface-root-6e3bb[data-border="strong"] {
+    --sti-surface-border: var(--sti-border-strong);
+  }
+
+  .sti-Surface-root-6e3bb[data-radius="sm"] {
+    --sti-surface-radius: var(--sti-radius-sm);
+  }
+
+  .sti-Surface-root-6e3bb[data-radius="md"] {
+    --sti-surface-radius: var(--sti-radius-md);
+  }
+
+  .sti-Surface-root-6e3bb[data-radius="lg"] {
+    --sti-surface-radius: var(--sti-radius-lg);
+  }
+
+  .sti-Surface-root-6e3bb[data-radius="xl"] {
+    --sti-surface-radius: var(--sti-radius-xl);
+  }
+
+  .sti-Surface-root-6e3bb[data-shadow="sm"] {
+    --sti-surface-shadow: var(--sti-shadow-sm);
+  }
+
+  .sti-Surface-root-6e3bb[data-shadow="md"] {
+    --sti-surface-shadow: var(--sti-shadow-md);
+  }
+
+  .sti-Surface-root-6e3bb[data-shadow="lg"] {
+    --sti-surface-shadow: var(--sti-shadow-lg);
+  }
+
+  .sti-Surface-root-6e3bb[data-padding="0"] {
+    --sti-surface-padding: var(--sti-space-0);
+  }
+
+  .sti-Surface-root-6e3bb[data-padding="0-5"] {
+    --sti-surface-padding: var(--sti-space-0-5);
+  }
+
+  .sti-Surface-root-6e3bb[data-padding="1"] {
+    --sti-surface-padding: var(--sti-space-1);
+  }
+
+  .sti-Surface-root-6e3bb[data-padding="2"] {
+    --sti-surface-padding: var(--sti-space-2);
+  }
+
+  .sti-Surface-root-6e3bb[data-padding="3"] {
+    --sti-surface-padding: var(--sti-space-3);
+  }
+
+  .sti-Surface-root-6e3bb[data-padding="4"] {
+    --sti-surface-padding: var(--sti-space-4);
+  }
+
+  .sti-Surface-root-6e3bb[data-padding="5"] {
+    --sti-surface-padding: var(--sti-space-5);
+  }
+
+  .sti-Surface-root-6e3bb[data-padding="6"] {
+    --sti-surface-padding: var(--sti-space-6);
+  }
+
+  .sti-Surface-root-6e3bb[data-padding="8"] {
+    --sti-surface-padding: var(--sti-space-8);
+  }
+
+  .sti-Surface-root-6e3bb[data-padding="10"] {
+    --sti-surface-padding: var(--sti-space-10);
+  }
+
+  .sti-Surface-root-6e3bb[data-padding="12"] {
+    --sti-surface-padding: var(--sti-space-12);
+  }
+
+  .sti-Surface-root-6e3bb[data-padding="16"] {
+    --sti-surface-padding: var(--sti-space-16);
+  }
+
+  .sti-Surface-root-6e3bb[data-padding="20"] {
+    --sti-surface-padding: var(--sti-space-20);
+  }
+
+  .sti-Surface-root-6e3bb[data-padding="24"] {
+    --sti-surface-padding: var(--sti-space-24);
+  }
+
+  .sti-Surface-root-6e3bb[data-padding="32"] {
+    --sti-surface-padding: var(--sti-space-32);
+  }
+
+  @media (forced-colors: active) {
+    .sti-Surface-root-6e3bb:not([data-border="none"]) {
+      border-color: canvastext;
+    }
+
+    .sti-Surface-root-6e3bb[data-border="none"]:is(:not([data-shadow="none"]), [data-background="inverse"]) {
+      outline: var(--sti-border-width) solid CanvasText;
+      outline-offset: calc(var(--sti-border-width) * -1);
+    }
+  }
+}

package/dist/components/Surface/Surface.d.ts

@@ -0,0 +1,34 @@
+import { LayoutRootProps, Space } from "../Stack/layout.js";
+import { ReactNode } from "react";
+export type SurfaceBackground = "canvas" | "subtle" | "surface" | "inverse";
+export type SurfaceElement = "div" | "section" | "article" | "aside" | "header" | "footer" | "main" | "nav";
+export interface SurfaceProps extends LayoutRootProps {
+  /**
+   * Zemin katmanı:
+   * - `canvas`: sayfa zemini; `subtle`: bir ton farklı bant; `surface`: kart zemini (varsayılan);
+   * - `inverse`: ters zemin; alt ağaç karşı temada çizilir (koyu sayfada açık, açık sayfada koyu
+   *   bant). İçerideki her bileşen o temanın izinli renk çiftleriyle okunur.
+   */
+  background?: SurfaceBackground;
+  /** Kenar: `none` (varsayılan), `subtle` süs çizgisi, `default`, `strong`. */
+  border?: "none" | "subtle" | "default" | "strong";
+  /** Köşe: `none` (varsayılan), `sm`, `md` (alan), `lg` (kart), `xl` (`--sti-radius-*`). */
+  radius?: "none" | "sm" | "md" | "lg" | "xl";
+  /** Gölge (katman üstü): `none` (varsayılan), `sm`, `md`, `lg`. */
+  shadow?: "none" | "sm" | "md" | "lg";
+  /** İç boşluk (boşluk ölçeğinin adı). Varsayılan `0`. */
+  padding?: Space;
+  /**
+   * İç tema: alt ağaç sayfanın temasından bağımsız olarak açık ya da koyu çizilir
+   * (`data-theme`). Ör. koyu sayfada açık bir vitrin bandı.
+   */
+  theme?: "light" | "dark";
+  /** Kök öğe. */
+  as?: SurfaceElement;
+  children?: ReactNode;
+}
+/**
+ * Zemin katmanı: içeriğe sayfa, bant ya da kart zemini verir; kenar, köşe, gölge ve iç tema
+ * seçilir. Yazı rengi zeminle birlikte ayarlanır. Sunucu bileşenidir.
+ */
+export declare function Surface(props: SurfaceProps): import("react").JSX.Element;

package/dist/components/Surface/Surface.js

@@ -0,0 +1,25 @@
+import { cx, rootAttributes } from "../Stack/layout.js";
+import Surface_module_default from "./Surface.module.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/Surface/Surface.tsx
+/**
+* Zemin katmanı: içeriğe sayfa, bant ya da kart zemini verir; kenar, köşe, gölge ve iç tema
+* seçilir. Yazı rengi zeminle birlikte ayarlanır. Sunucu bileşenidir.
+*/
+function Surface(props) {
+	const { background = "surface", border = "none", radius = "none", shadow = "none", padding = "0", theme, as: Tag = "div", className, ref, children } = props;
+	return /* @__PURE__ */ jsx(Tag, {
+		...rootAttributes(props),
+		ref,
+		className: cx(Surface_module_default.root, className),
+		"data-theme": theme,
+		"data-sti-surface": "",
+		"data-background": background,
+		"data-border": border,
+		"data-radius": radius,
+		"data-shadow": shadow,
+		"data-padding": padding,
+		children
+	});
+}
+export { Surface };

package/dist/components/Surface/Surface.module.js

@@ -0,0 +1,4 @@
+import './Surface.css';
+// src/components/Surface/Surface.module.css
+var Surface_module_default = { "root": "sti-Surface-root-6e3bb" };
+export { Surface_module_default as default };

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

@@ -0,0 +1,2 @@
+import { Surface, SurfaceBackground, SurfaceElement, SurfaceProps } from "./Surface.js";
+export { Surface, SurfaceBackground, SurfaceElement, SurfaceProps };

package/dist/components/Switch/Switch.css

@@ -0,0 +1,188 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Switch-root-62117 {
+    --sti-switch-w: 2.25rem;
+    --sti-switch-h: 1.25rem;
+    --sti-switch-inset: 2px;
+    --sti-switch-gap: var(--sti-space-3);
+    --sti-switch-font-size: var(--sti-font-size-md);
+    --sti-switch-line-height: var(--sti-line-height-md);
+    --sti-switch-knob: calc(var(--sti-switch-h) -
+      2 *
+      var(--sti-switch-inset) -
+      2 *
+      var(--sti-border-width));
+    --sti-switch-travel: calc(var(--sti-switch-w) - var(--sti-switch-h));
+    grid-template-columns: var(--sti-switch-w) minmax(0, 1fr);
+    column-gap: var(--sti-switch-gap);
+    row-gap: var(--sti-space-1);
+    align-items: start;
+    min-width: 0;
+    display: grid;
+  }
+
+  .sti-Switch-root-62117[data-size="sm"] {
+    --sti-switch-w: 1.75rem;
+    --sti-switch-h: 1rem;
+    --sti-switch-gap: var(--sti-space-2);
+    --sti-switch-font-size: var(--sti-font-size-sm);
+    --sti-switch-line-height: var(--sti-line-height-sm);
+  }
+
+  .sti-Switch-root-62117[data-size="lg"] {
+    --sti-switch-w: 2.75rem;
+    --sti-switch-h: 1.5rem;
+    --sti-switch-font-size: var(--sti-font-size-body);
+    --sti-switch-line-height: var(--sti-line-height-body);
+  }
+
+  .sti-Switch-root-62117[data-label-position="start"] {
+    grid-template-columns: minmax(0, 1fr) var(--sti-switch-w);
+  }
+
+  .sti-Switch-root-62117[data-label-position="start"] .sti-Switch-track-c45c8 {
+    grid-area: 1 / 2;
+  }
+
+  .sti-Switch-root-62117[data-label-position="start"] .sti-Switch-label-090bd {
+    grid-area: 1 / 1;
+  }
+
+  .sti-Switch-root-62117[data-label-position="end"] > :not(.sti-Switch-control-85957) {
+    grid-column: 2;
+  }
+
+  .sti-Switch-root-62117[data-label-position="start"] > :not(.sti-Switch-control-85957) {
+    grid-column: 1;
+  }
+
+  .sti-Switch-control-85957 {
+    cursor: pointer;
+    display: contents;
+  }
+
+  .sti-Switch-control-85957[data-disabled] {
+    cursor: not-allowed;
+  }
+
+  .sti-Switch-track-c45c8 {
+    width: var(--sti-switch-w);
+    height: var(--sti-switch-h);
+    padding-inline: var(--sti-switch-inset);
+    border: var(--sti-border-width) solid var(--sti-border-control);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-surface-active);
+    transition: background-color var(--sti-duration-fast) var(--sti-ease-snap),
+      border-color var(--sti-duration-fast) var(--sti-ease-snap);
+    align-items: center;
+    margin-block-start: calc((var(--sti-switch-line-height) - var(--sti-switch-h)) / 2);
+    display: inline-flex;
+    position: relative;
+  }
+
+  @media (pointer: coarse) {
+    .sti-Switch-track-c45c8:after {
+      inset-block: calc((var(--sti-control-h-md) - var(--sti-switch-h)) / -2);
+      inset-inline: calc((var(--sti-control-h-md) - var(--sti-switch-w)) / -2);
+      content: "";
+      position: absolute;
+    }
+  }
+
+  .sti-Switch-knob-8f65a {
+    width: var(--sti-switch-knob);
+    height: var(--sti-switch-knob);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-fg-muted);
+    box-shadow: var(--sti-shadow-sm);
+    transition: transform var(--sti-duration-base) var(--sti-ease-out),
+      background-color var(--sti-duration-fast) var(--sti-ease-snap),
+      width var(--sti-duration-fast) var(--sti-ease-snap);
+  }
+
+  .sti-Switch-label-090bd {
+    color: var(--sti-fg);
+    font-size: var(--sti-switch-font-size);
+    line-height: var(--sti-switch-line-height);
+    overflow-wrap: anywhere;
+  }
+
+  @media (hover: hover) {
+    .sti-Switch-control-85957[data-hovered]:not([data-disabled], [data-readonly]) .sti-Switch-track-c45c8 {
+      border-color: var(--sti-border-strong);
+    }
+  }
+
+  .sti-Switch-control-85957[data-selected] .sti-Switch-track-c45c8 {
+    border-color: var(--sti-fg-accent);
+    background: var(--sti-fill-accent);
+  }
+
+  @media (hover: hover) {
+    .sti-Switch-control-85957[data-selected][data-hovered]:not([data-disabled], [data-readonly]) .sti-Switch-track-c45c8 {
+      background: var(--sti-fill-accent-hover);
+    }
+  }
+
+  .sti-Switch-control-85957[data-selected] .sti-Switch-knob-8f65a {
+    background: var(--sti-fg-on-accent);
+    transform: translateX(var(--sti-switch-travel));
+  }
+
+  .sti-Switch-control-85957[data-selected]: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-Switch-knob-8f65a {
+    transform: translateX(calc(var(--sti-switch-travel) * -1));
+  }
+
+  .sti-Switch-control-85957[data-pressed]:not([data-disabled], [data-readonly]) .sti-Switch-knob-8f65a {
+    width: calc(var(--sti-switch-knob) + 4px);
+  }
+
+  .sti-Switch-control-85957[data-pressed][data-selected]:not([data-disabled], [data-readonly]) .sti-Switch-knob-8f65a {
+    transform: translateX(calc(var(--sti-switch-travel) - 4px));
+  }
+
+  .sti-Switch-control-85957[data-focus-visible] .sti-Switch-track-c45c8 {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-Switch-control-85957[data-disabled] .sti-Switch-track-c45c8, .sti-Switch-control-85957[data-disabled] .sti-Switch-label-090bd {
+    opacity: var(--sti-opacity-disabled);
+  }
+
+  .sti-Switch-control-85957[data-readonly] .sti-Switch-track-c45c8 {
+    border-style: dashed;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-Switch-track-c45c8, .sti-Switch-knob-8f65a {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-Switch-track-c45c8 {
+      forced-color-adjust: none;
+      background: buttonface;
+      border-color: buttontext;
+    }
+
+    .sti-Switch-knob-8f65a {
+      box-shadow: none;
+      background: buttontext;
+    }
+
+    .sti-Switch-control-85957[data-selected] .sti-Switch-track-c45c8 {
+      background: highlight;
+      border-color: highlight;
+    }
+
+    .sti-Switch-control-85957[data-selected] .sti-Switch-knob-8f65a {
+      background: highlighttext;
+    }
+
+    .sti-Switch-control-85957[data-disabled] .sti-Switch-track-c45c8 {
+      border-color: graytext;
+    }
+  }
+}

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode, Ref } from "react";
+interface SwitchBaseProps {
+  /** Etiketin altında açıklama. */
+  description?: ReactNode;
+  size?: "sm" | "md" | "lg";
+  /** Etiketin anahtara göre konumu: sonda (varsayılan, ayar listeleri) ya da başta. */
+  labelPosition?: "end" | "start";
+  isSelected?: boolean;
+  defaultSelected?: boolean;
+  onChange?: (isSelected: boolean) => void;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  /** Form gönderiminde açıksa gönderilir (değer varsayılan "on"). */
+  name?: string;
+  value?: string;
+  autoFocus?: boolean;
+  className?: string;
+  id?: string;
+  inputRef?: Ref<HTMLInputElement>;
+  /** Açıklama başka öğedeyse onun kimliği (SettingsRow). */
+  "aria-describedby"?: string;
+}
+interface SwitchWithLabel {
+  /** Görünür etiket (ayarın adı: "Bildirimleri al"). */
+  children: ReactNode;
+  "aria-labelledby"?: undefined;
+}
+interface SwitchLabelledBy {
+  children?: undefined;
+  /**
+   * Görünür ad anahtarın dışındaysa (SettingsRow satırının adı) o öğenin kimliği; ad yinelenmez.
+   */
+  "aria-labelledby": string;
+}
+export type SwitchProps = SwitchBaseProps & (SwitchWithLabel | SwitchLabelledBy);
+/**
+ * Anahtar: hemen etkisini gösteren açık/kapalı ayarı (APG Switch; `role="switch"`). Boşluk
+ * değiştirir. Açıkken iz turkuaz dolar ve topuz sona kayar; durum yalnız renkle değil topuzun
+ * konumuyla da okunur. Gönderimle etkisi olacak seçimde onay kutusu kullanılır.
+ */
+export declare function Switch({ children, description, size, labelPosition, className, id, inputRef, ...rest }: SwitchProps): import("react").JSX.Element;
+export {};

package/dist/components/Switch/Switch.js

@@ -0,0 +1,33 @@
+"use client";
+import { FieldDescription } from "../Field/Field.js";
+import Switch_module_default from "./Switch.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SwitchButton, SwitchField } from "react-aria-components";
+// src/components/Switch/Switch.tsx
+/**
+* Anahtar: hemen etkisini gösteren açık/kapalı ayarı (APG Switch; `role="switch"`). Boşluk
+* değiştirir. Açıkken iz turkuaz dolar ve topuz sona kayar; durum yalnız renkle değil topuzun
+* konumuyla da okunur. Gönderimle etkisi olacak seçimde onay kutusu kullanılır.
+*/
+function Switch({ children, description, size = "md", labelPosition = "end", className, id, inputRef, ...rest }) {
+	return /* @__PURE__ */ jsxs(SwitchField, {
+		...rest,
+		id,
+		inputRef,
+		className: [Switch_module_default.root, className].filter(Boolean).join(" "),
+		"data-size": size,
+		"data-label-position": labelPosition,
+		children: [/* @__PURE__ */ jsxs(SwitchButton, {
+			className: Switch_module_default.control,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: Switch_module_default.track,
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx("span", { className: Switch_module_default.knob })
+			}), children !== void 0 ? /* @__PURE__ */ jsx("span", {
+				className: Switch_module_default.label,
+				children
+			}) : null]
+		}), description ? /* @__PURE__ */ jsx(FieldDescription, { children: description }) : null]
+	});
+}
+export { Switch };