@stisocial/ui 0.0.0-stage → 0.1.0

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+export type TextSize = "xs" | "sm" | "md" | "body" | "lg" | "lead" | "prose";
+export type TextTone = "default" | "muted" | "signal" | "accent" | "success" | "warning" | "danger" | "info";
+export interface TextProps {
+  /** Öğe; varsayılan paragraf. */
+  as?: "p" | "span" | "div" | "strong" | "em" | "small" | "label" | "figcaption" | "blockquote";
+  /** Uygulama boyutları (xs–lg) sabit; `lead` ve `prose` site metinleri, ekranla büyür. */
+  size?: TextSize;
+  /** Renk; durum renkleri metin olarak okunur tondadır (WCAG AA). */
+  tone?: TextTone;
+  weight?: "regular" | "medium" | "semibold";
+  /** Rakamlar eşit genişlikte (tutar, saat, sayaç, tablo dışı sayılar). */
+  numeric?: boolean;
+  /** Taşan metin üç noktayla kesilir; sayı verilirse o kadar satırda. Tam metin `title` ile verilmeli. */
+  truncate?: boolean | 2 | 3 | 4;
+  align?: "start" | "center" | "end";
+  id?: string;
+  /** Yalnız `as="label"` için. */
+  htmlFor?: string;
+  title?: string;
+  className?: string;
+  children: ReactNode;
+}
+/** Metin: boyut, ton, kalınlık, rakam hizası ve kesme tek yerden. */
+export declare function Text({ as: Tag, size, tone, weight, numeric, truncate, align, id, htmlFor, title, className, children }: TextProps): import("react").JSX.Element;

package/dist/components/Text/Text.js

@@ -0,0 +1,20 @@
+import Text_module_default from "./Text.module.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/Text/Text.tsx
+/** Metin: boyut, ton, kalınlık, rakam hizası ve kesme tek yerden. */
+function Text({ as: Tag = "p", size = "md", tone = "default", weight, numeric, truncate, align, id, htmlFor, title, className, children }) {
+	return /* @__PURE__ */ jsx(Tag, {
+		id,
+		title,
+		...Tag === "label" && htmlFor ? { htmlFor } : {},
+		className: [Text_module_default.root, className].filter(Boolean).join(" "),
+		"data-size": size,
+		"data-tone": tone === "default" ? void 0 : tone,
+		"data-weight": weight,
+		"data-numeric": numeric ? "" : void 0,
+		"data-truncate": truncate === true ? "1" : truncate || void 0,
+		"data-align": align,
+		children
+	});
+}
+export { Text };

package/dist/components/Text/Text.module.js

@@ -0,0 +1,4 @@
+import './Text.css';
+// src/components/Text/Text.module.css
+var Text_module_default = { "root": "sti-Text-root-6750c" };
+export { Text_module_default as default };

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

@@ -0,0 +1,2 @@
+import { Text, TextProps, TextSize, TextTone } from "./Text.js";
+export { Text, TextProps, TextSize, TextTone };

package/dist/components/TextArea/TextArea.css

@@ -0,0 +1,34 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-TextArea-root-96214[data-size] .sti-TextArea-control-ca0f7 {
+    min-height: auto;
+    padding-block: var(--sti-space-3);
+    line-height: var(--sti-line-height-md);
+    resize: vertical;
+  }
+
+  .sti-TextArea-root-96214[data-autogrow] .sti-TextArea-control-ca0f7 {
+    resize: none;
+  }
+
+  .sti-TextArea-root-96214[data-size="sm"] .sti-TextArea-control-ca0f7 {
+    padding-block: var(--sti-space-2);
+  }
+
+  .sti-TextArea-meta-c8f8c {
+    justify-content: space-between;
+    align-items: baseline;
+    gap: var(--sti-space-1) var(--sti-space-4);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-TextArea-description-b2188 {
+    flex: 12rem;
+    min-width: 0;
+  }
+
+  .sti-TextArea-description-b2188:empty {
+    display: none;
+  }
+}

package/dist/components/TextArea/TextArea.d.ts

@@ -0,0 +1,47 @@
+import { ErrorMessage } from "../Field/Field.js";
+import { ReactNode, Ref } from "react";
+export interface TextAreaProps {
+  label: ReactNode;
+  /** Etiket görsel olarak gizlenir, alanın adı olarak yine okunur (yorum alanı). */
+  hideLabel?: boolean;
+  description?: ReactNode;
+  errorMessage?: ErrorMessage;
+  showOptional?: boolean;
+  size?: "sm" | "md" | "lg";
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  onBlur?: () => void;
+  name?: string;
+  placeholder?: string;
+  /** Başlangıç (ve en az) satır sayısı. */
+  minRows?: number;
+  /**
+   * Kendiliğinden büyüme: içerik arttıkça alan bu satır sayısına kadar uzar, sonra kaydırılır.
+   * Verilmezse alan `minRows` yüksekliğinde kalır ve kullanıcı dikeyde boyutlandırabilir.
+   */
+  maxRows?: number;
+  /**
+   * Yumuşak karakter sınırı: yazılabilir (yapıştırılan metin kesilmez), aşılınca alan hatalı
+   * olur ve gönderilemez; sayaç gösterilir.
+   */
+  maxLength?: number;
+  /** En az uzunluk (doğrulamada). */
+  minLength?: number;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  isInvalid?: boolean;
+  validate?: (value: string) => string | string[] | true | null | undefined;
+  autoFocus?: boolean;
+  spellCheck?: boolean;
+  className?: string;
+  id?: string;
+  inputRef?: Ref<HTMLTextAreaElement>;
+}
+/**
+ * Çok satırlı metin alanı: TextField ile aynı etiket, yardım ve hata düzeni. İsteğe bağlı olarak
+ * içerikle büyür ve karakter sınırını sayaçla gösterir. Sınır yumuşaktır: yapıştırılan uzun metin
+ * sessizce kesilmez, kişi neyin fazla olduğunu görür.
+ */
+export declare function TextArea({ label, hideLabel, description, errorMessage, showOptional, size, value, defaultValue, onChange, placeholder, minRows, maxRows, maxLength, minLength, validate, spellCheck, className, inputRef, ...rest }: TextAreaProps): import("react").JSX.Element;

package/dist/components/TextArea/TextArea.js

@@ -0,0 +1,100 @@
+"use client";
+import { useLocale, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { FieldDescription, FieldErrorText, FieldLabel, fieldStyles } from "../Field/Field.js";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { CharacterCounter, characterCount } from "../CharacterCounter/CharacterCounter.js";
+import TextArea_module_default from "./TextArea.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { TextArea, TextField } from "react-aria-components";
+// src/components/TextArea/TextArea.tsx
+const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+/**
+* Çok satırlı metin alanı: TextField ile aynı etiket, yardım ve hata düzeni. İsteğe bağlı olarak
+* içerikle büyür ve karakter sınırını sayaçla gösterir. Sınır yumuşaktır: yapıştırılan uzun metin
+* sessizce kesilmez, kişi neyin fazla olduğunu görür.
+*/
+function TextArea$1({ label, hideLabel = false, description, errorMessage, showOptional, size = "md", value, defaultValue, onChange, placeholder, minRows = 3, maxRows, maxLength, minLength, validate, spellCheck, className, inputRef, ...rest }) {
+	const t = useMessages();
+	const locale = useLocale();
+	const [inner, setInner] = useState(defaultValue ?? "");
+	const text = value ?? inner;
+	const count = characterCount(text, locale);
+	const area = useRef(null);
+	const setRef = useCallback((el) => {
+		area.current = el;
+		if (typeof inputRef === "function") inputRef(el);
+		else if (inputRef) inputRef.current = el;
+	}, [inputRef]);
+	useIsoLayoutEffect(() => {
+		const el = area.current;
+		if (!el || !maxRows || text === void 0) return;
+		el.style.removeProperty("height");
+		const cs = getComputedStyle(el);
+		const line = Number.parseFloat(cs.lineHeight);
+		const padding = Number.parseFloat(cs.paddingTop) + Number.parseFloat(cs.paddingBottom);
+		const border = Number.parseFloat(cs.borderTopWidth) + Number.parseFloat(cs.borderBottomWidth);
+		const min = minRows * line + padding + border;
+		const max = maxRows * line + padding + border;
+		const needed = el.scrollHeight + border;
+		el.style.setProperty("height", `${Math.min(Math.max(needed, min), max)}px`);
+		el.style.setProperty("overflow-y", needed > max ? "auto" : "hidden");
+	}, [
+		text,
+		maxRows,
+		minRows
+	]);
+	const combined = (v) => {
+		if (maxLength !== void 0 && characterCount(v, locale) > maxLength) return template(t.errorTooLong, { max: maxLength });
+		return validate?.(v) ?? null;
+	};
+	return /* @__PURE__ */ jsxs(TextField, {
+		...rest,
+		value: text,
+		onChange: (v) => {
+			if (value === void 0) setInner(v);
+			onChange?.(v);
+		},
+		minLength,
+		validate: combined,
+		className: [
+			fieldStyles.root,
+			TextArea_module_default.root,
+			className
+		].filter(Boolean).join(" "),
+		"data-size": size,
+		"data-autogrow": maxRows ? "" : void 0,
+		children: [
+			hideLabel ? /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(FieldLabel, {
+				showOptional: showOptional && !rest.isRequired,
+				children: label
+			}) }) : /* @__PURE__ */ jsx(FieldLabel, {
+				showOptional: showOptional && !rest.isRequired,
+				children: label
+			}),
+			/* @__PURE__ */ jsx(TextArea, {
+				ref: setRef,
+				className: [fieldStyles.control, TextArea_module_default.control].join(" "),
+				rows: minRows,
+				placeholder,
+				spellCheck
+			}),
+			description || maxLength !== void 0 ? /* @__PURE__ */ jsx(FieldDescription, { children: /* @__PURE__ */ jsxs("span", {
+				className: TextArea_module_default.meta,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: TextArea_module_default.description,
+					children: description
+				}), maxLength !== void 0 ? /* @__PURE__ */ jsx(CharacterCounter, {
+					count,
+					max: maxLength
+				}) : null]
+			}) }) : null,
+			/* @__PURE__ */ jsx(FieldErrorText, {
+				errorMessage,
+				minLength
+			})
+		]
+	});
+}
+export { TextArea$1 as TextArea };

package/dist/components/TextArea/TextArea.module.js

@@ -0,0 +1,9 @@
+import './TextArea.css';
+// src/components/TextArea/TextArea.module.css
+var TextArea_module_default = {
+	"root": "sti-TextArea-root-96214",
+	"control": "sti-TextArea-control-ca0f7",
+	"meta": "sti-TextArea-meta-c8f8c",
+	"description": "sti-TextArea-description-b2188"
+};
+export { TextArea_module_default as default };

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

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

package/dist/components/TextField/TextField.d.ts

@@ -0,0 +1,48 @@
+import { ErrorMessage } from "../Field/Field.js";
+import { ReactNode, Ref } from "react";
+export type TextFieldType = "text" | "email" | "url" | "tel" | "search";
+export interface TextFieldProps {
+  /** Görünür etiket (zorunlu: yer tutucu etiket değildir). */
+  label: ReactNode;
+  /** Alanın altındaki yardım metni. */
+  description?: ReactNode;
+  /** Hata metni; verilmezse doğrulama ayrıntısından resmî metin üretilir. */
+  errorMessage?: ErrorMessage;
+  /** Zorunlu değilse etiketin yanına "(isteğe bağlı)" yazar. */
+  showOptional?: boolean;
+  size?: "sm" | "md" | "lg";
+  type?: TextFieldType;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  onBlur?: () => void;
+  name?: string;
+  /** Tarayıcının otomatik doldurma ipucu (ör. "email", "name", "one-time-code"). */
+  autoComplete?: string;
+  inputMode?: "text" | "email" | "url" | "tel" | "numeric" | "decimal" | "search" | "none";
+  /** Yalnız örnek biçim için (ör. "ornek@firma.com"); etiketin yerine geçmez. */
+  placeholder?: string;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  /** Dışarıdan hatalı işaretleme (ör. sunucu hatası); metni `errorMessage` verir. */
+  isInvalid?: boolean;
+  /** Uygulamanın kendi doğrulaması: hata metni ya da geçerliyse `null`/`undefined`. */
+  validate?: (value: string) => string | string[] | true | null | undefined;
+  minLength?: number;
+  maxLength?: number;
+  pattern?: string;
+  autoFocus?: boolean;
+  /** Yazım denetimi ve otomatik büyük harf (kod, e-posta, kullanıcı adı alanlarında kapatılır). */
+  spellCheck?: boolean;
+  autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters";
+  className?: string;
+  id?: string;
+  inputRef?: Ref<HTMLInputElement>;
+}
+/**
+ * Tek satırlık metin alanı: etiket, kontrol, yardım ve hata tek bileşende ve birbirine bağlı.
+ * Hata, kişi yazarken değil alandan çıkınca ya da form gönderilince gösterilir (React Aria
+ * yerel doğrulama davranışı).
+ */
+export declare function TextField({ label, description, errorMessage, showOptional, size, type, inputMode, placeholder, autoComplete, spellCheck, autoCapitalize, minLength, maxLength, pattern, className, inputRef, ...rest }: TextFieldProps): import("react").JSX.Element;

package/dist/components/TextField/TextField.js

@@ -0,0 +1,44 @@
+"use client";
+import { FieldDescription, FieldErrorText, FieldLabel, fieldStyles } from "../Field/Field.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Input, TextField } from "react-aria-components";
+// src/components/TextField/TextField.tsx
+/**
+* Tek satırlık metin alanı: etiket, kontrol, yardım ve hata tek bileşende ve birbirine bağlı.
+* Hata, kişi yazarken değil alandan çıkınca ya da form gönderilince gösterilir (React Aria
+* yerel doğrulama davranışı).
+*/
+function TextField$1({ label, description, errorMessage, showOptional, size = "md", type = "text", inputMode, placeholder, autoComplete, spellCheck, autoCapitalize, minLength, maxLength, pattern, className, inputRef, ...rest }) {
+	const machine = type === "email" || type === "url" || type === "tel";
+	return /* @__PURE__ */ jsxs(TextField, {
+		...rest,
+		type,
+		minLength,
+		maxLength,
+		pattern,
+		autoComplete,
+		className: [fieldStyles.root, className].filter(Boolean).join(" "),
+		"data-size": size,
+		children: [
+			/* @__PURE__ */ jsx(FieldLabel, {
+				showOptional: showOptional && !rest.isRequired,
+				children: label
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				ref: inputRef,
+				className: fieldStyles.control,
+				placeholder,
+				inputMode,
+				spellCheck: spellCheck ?? (machine ? false : void 0),
+				autoCapitalize: autoCapitalize ?? (machine ? "off" : void 0)
+			}),
+			description ? /* @__PURE__ */ jsx(FieldDescription, { children: description }) : null,
+			/* @__PURE__ */ jsx(FieldErrorText, {
+				errorMessage,
+				type,
+				minLength
+			})
+		]
+	});
+}
+export { TextField$1 as TextField };

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

@@ -0,0 +1,2 @@
+import { TextField, TextFieldProps, TextFieldType } from "./TextField.js";
+export { TextField, TextFieldProps, TextFieldType };

package/dist/components/ThemeScript/ThemeScript.d.ts

@@ -0,0 +1,11 @@
+import { ThemeOptions } from "./theme.js";
+export interface ThemeScriptProps extends ThemeOptions {
+  /** İsteğin CSP nonce değeri; nonce'suz CSP'de `themeScriptHash()` özeti `script-src`'ye eklenir. */
+  nonce?: string;
+}
+/**
+ * Tema yanıp sönmeden: `<head>` içine konan küçük betik, kayıtlı tema tercihini sayfa boyanmadan
+ * önce `<html data-theme>`'e yazar (koyu tercih eden kişi açık sayfa görmez). `<html>` öğesine
+ * `suppressHydrationWarning` verilir: özniteliği React değil betik yazar. Sunucu bileşenidir.
+ */
+export declare function ThemeScript({ nonce, ...options }: ThemeScriptProps): import("react").JSX.Element;

package/dist/components/ThemeScript/ThemeScript.js

@@ -0,0 +1,15 @@
+import { themeScript } from "./theme.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/ThemeScript/ThemeScript.tsx
+/**
+* Tema yanıp sönmeden: `<head>` içine konan küçük betik, kayıtlı tema tercihini sayfa boyanmadan
+* önce `<html data-theme>`'e yazar (koyu tercih eden kişi açık sayfa görmez). `<html>` öğesine
+* `suppressHydrationWarning` verilir: özniteliği React değil betik yazar. Sunucu bileşenidir.
+*/
+function ThemeScript({ nonce, ...options }) {
+	return /* @__PURE__ */ jsx("script", {
+		nonce,
+		dangerouslySetInnerHTML: { __html: themeScript(options) }
+	});
+}
+export { ThemeScript };

package/dist/components/ThemeScript/theme.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Tema tercihi: `<html data-theme>` ("dark", "light", "system"). "system" değerini tasarım değerleri
+ * kendisi çözer (işletim sisteminin açık/koyu tercihi); betik yalnız kayıtlı tercihi yazar.
+ * stisocial varsayılanı koyudur.
+ */
+export declare const THEMES: readonly ["dark", "light", "system"];
+export type Theme = (typeof THEMES)[number];
+export declare const DEFAULT_THEME_STORAGE_KEY = "sti-theme";
+export declare const THEME_CHANGE_EVENT = "sti-themechange";
+export interface ThemeOptions {
+  /** Tercihin yerel depolama anahtarı; varsayılan "sti-theme". */
+  storageKey?: string;
+  /** Kayıt yoksa ya da geçersizse; varsayılan "dark" (stisocial varsayılanı). */
+  defaultTheme?: Theme;
+}
+export declare const isTheme: (v: unknown) => v is Theme;
+/**
+ * `<head>` içinde, gövdeden önce çalışan küçük betik: kayıtlı tercihi okur, izinli değerlerden
+ * biriyse `<html data-theme>`'e yazar, değilse varsayılanı yazar. Depolama kapalıysa (gizli pencere)
+ * varsayılan kullanılır. Dışarıdan değer yorumlanmaz: yalnız izinli üç değerden biri yazılır.
+ */
+export declare function themeScript({ storageKey, defaultTheme }?: ThemeOptions): string;
+/**
+ * Betiğin CSP özeti (`'sha256-…'`): nonce kullanmayan uygulama `script-src`'ye ekler. Web Crypto
+ * ile hesaplanır (Node 20+, tarayıcı, uç çalışma ortamları).
+ */
+export declare function themeScriptHash(options?: ThemeOptions): Promise<string>;
+/** Sayfadaki geçerli tema (betiğin ya da `setTheme`'in yazdığı). */
+export declare function currentTheme(defaultTheme?: Theme): Theme;
+/**
+ * Temayı değiştirir: `<html data-theme>`'e yazar, bu cihazda saklar ve sayfadaki dinleyicilere
+ * bildirir. Geçersiz değer yok sayılır.
+ */
+export declare function setTheme(theme: Theme, { storageKey }?: ThemeOptions): void;

package/dist/components/ThemeScript/theme.js

@@ -0,0 +1,57 @@
+// src/components/ThemeScript/theme.ts
+/**
+* Tema tercihi: `<html data-theme>` ("dark", "light", "system"). "system" değerini tasarım değerleri
+* kendisi çözer (işletim sisteminin açık/koyu tercihi); betik yalnız kayıtlı tercihi yazar.
+* stisocial varsayılanı koyudur.
+*/
+const THEMES = [
+	"dark",
+	"light",
+	"system"
+];
+const DEFAULT_THEME_STORAGE_KEY = "sti-theme";
+const THEME_CHANGE_EVENT = "sti-themechange";
+const isTheme = (v) => typeof v === "string" && THEMES.includes(v);
+/**
+* Betiğe gömülen JSON: `<` kaçışlanır, böylece anahtar içindeki "<\/script>" betiği kapatamaz.
+*/
+const embed = (v) => JSON.stringify(v).replace(/</g, "\\u003c");
+/**
+* `<head>` içinde, gövdeden önce çalışan küçük betik: kayıtlı tercihi okur, izinli değerlerden
+* biriyse `<html data-theme>`'e yazar, değilse varsayılanı yazar. Depolama kapalıysa (gizli pencere)
+* varsayılan kullanılır. Dışarıdan değer yorumlanmaz: yalnız izinli üç değerden biri yazılır.
+*/
+function themeScript({ storageKey = DEFAULT_THEME_STORAGE_KEY, defaultTheme = "dark" } = {}) {
+	const fallback = isTheme(defaultTheme) ? defaultTheme : "dark";
+	return `(function(){var t=${embed(fallback)};try{var s=localStorage.getItem(${embed(storageKey)});if(${embed(THEMES)}.indexOf(s)>=0)t=s}catch(e){}document.documentElement.setAttribute("data-theme",t)})();`;
+}
+/**
+* Betiğin CSP özeti (`'sha256-…'`): nonce kullanmayan uygulama `script-src`'ye ekler. Web Crypto
+* ile hesaplanır (Node 20+, tarayıcı, uç çalışma ortamları).
+*/
+async function themeScriptHash(options) {
+	const bytes = new TextEncoder().encode(themeScript(options));
+	const digest = new Uint8Array(await crypto.subtle.digest("SHA-256", bytes));
+	let binary = "";
+	for (const b of digest) binary += String.fromCharCode(b);
+	return `'sha256-${btoa(binary)}'`;
+}
+/** Sayfadaki geçerli tema (betiğin ya da `setTheme`'in yazdığı). */
+function currentTheme(defaultTheme = "dark") {
+	if (typeof document === "undefined") return defaultTheme;
+	const v = document.documentElement.getAttribute("data-theme");
+	return isTheme(v) ? v : defaultTheme;
+}
+/**
+* Temayı değiştirir: `<html data-theme>`'e yazar, bu cihazda saklar ve sayfadaki dinleyicilere
+* bildirir. Geçersiz değer yok sayılır.
+*/
+function setTheme(theme, { storageKey = DEFAULT_THEME_STORAGE_KEY } = {}) {
+	if (!isTheme(theme) || typeof document === "undefined") return;
+	document.documentElement.setAttribute("data-theme", theme);
+	try {
+		window.localStorage.setItem(storageKey, theme);
+	} catch {}
+	window.dispatchEvent(new CustomEvent(THEME_CHANGE_EVENT, { detail: theme }));
+}
+export { DEFAULT_THEME_STORAGE_KEY, THEMES, THEME_CHANGE_EVENT, currentTheme, isTheme, setTheme, themeScript, themeScriptHash };

package/dist/components/ThemeScript/useTheme.d.ts

@@ -0,0 +1,10 @@
+import { Theme, ThemeOptions } from "./theme.js";
+/**
+ * Tema tercihi kancası: geçerli tema ve değiştirici. Başka sekmede değişen tercih de izlenir
+ * (`storage` olayı); sayfa ona göre güncellenir. Sunucuda ve ilk çizimde varsayılan döner
+ * (hydration uyumu), sonra gerçek değer.
+ */
+export declare function useTheme({ storageKey, defaultTheme }?: ThemeOptions): {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};

package/dist/components/ThemeScript/useTheme.js

@@ -0,0 +1,30 @@
+"use client";
+import { DEFAULT_THEME_STORAGE_KEY, THEME_CHANGE_EVENT, currentTheme, isTheme, setTheme } from "./theme.js";
+import { useCallback, useSyncExternalStore } from "react";
+// src/components/ThemeScript/useTheme.ts
+/**
+* Tema tercihi kancası: geçerli tema ve değiştirici. Başka sekmede değişen tercih de izlenir
+* (`storage` olayı); sayfa ona göre güncellenir. Sunucuda ve ilk çizimde varsayılan döner
+* (hydration uyumu), sonra gerçek değer.
+*/
+function useTheme({ storageKey = DEFAULT_THEME_STORAGE_KEY, defaultTheme = "dark" } = {}) {
+	const subscribe = useCallback((notify) => {
+		const onStorage = (e) => {
+			if (e.key !== storageKey) return;
+			const next = isTheme(e.newValue) ? e.newValue : defaultTheme;
+			document.documentElement.setAttribute("data-theme", next);
+			notify();
+		};
+		window.addEventListener(THEME_CHANGE_EVENT, notify);
+		window.addEventListener("storage", onStorage);
+		return () => {
+			window.removeEventListener(THEME_CHANGE_EVENT, notify);
+			window.removeEventListener("storage", onStorage);
+		};
+	}, [storageKey, defaultTheme]);
+	return {
+		theme: useSyncExternalStore(subscribe, () => currentTheme(defaultTheme), () => defaultTheme),
+		setTheme: useCallback((next) => setTheme(next, { storageKey }), [storageKey])
+	};
+}
+export { useTheme };

package/dist/components/ThemeSwitch/ThemeSwitch.d.ts

@@ -0,0 +1,20 @@
+import { ThemeOptions } from "../ThemeScript/theme.js";
+export interface ThemeSwitchProps extends ThemeOptions {
+  /**
+   * `segmented` (varsayılan; ayar sayfası) üç seçenek yan yana; `menu` (üst çubuk) ikon düğmesi
+   * ve açılır menü.
+   */
+  variant?: "segmented" | "menu";
+  /** Segmentli türde ikonların yanında ad. Varsayılan `false` (yalnız ikon, ad okunur). */
+  showLabels?: boolean;
+  size?: "sm" | "md" | "lg";
+  /** Denetimin adı; verilmezse "Tema". */
+  label?: string;
+  className?: string;
+}
+/**
+ * Tema seçimi: açık, koyu ya da sistem tercihi. Seçim `ThemeScript` ile aynı anahtarda saklanır ve
+ * sayfa yeniden yüklenmeden uygulanır; başka sekmedeki değişiklik de izlenir. Sunucuda ve ilk
+ * çizimde varsayılan tema gösterilir, ardından kayıtlı tercih.
+ */
+export declare function ThemeSwitch({ variant, showLabels, size, label, className, storageKey, defaultTheme }: ThemeSwitchProps): import("react").JSX.Element;

package/dist/components/ThemeSwitch/ThemeSwitch.js

@@ -0,0 +1,82 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { MenuItem } from "../Menu/Menu.js";
+import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
+import { MonitorIcon } from "../../icons/generated/MonitorIcon.js";
+import { MoonIcon } from "../../icons/generated/MoonIcon.js";
+import { SunIcon } from "../../icons/generated/SunIcon.js";
+import { SegmentedControl, SegmentedControlItem } from "../SegmentedControl/SegmentedControl.js";
+import { isTheme } from "../ThemeScript/theme.js";
+import { useTheme } from "../ThemeScript/useTheme.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/ThemeSwitch/ThemeSwitch.tsx
+const ICONS = {
+	light: /* @__PURE__ */ jsx(SunIcon, {}),
+	dark: /* @__PURE__ */ jsx(MoonIcon, {}),
+	system: /* @__PURE__ */ jsx(MonitorIcon, {})
+};
+/**
+* Tema seçimi: açık, koyu ya da sistem tercihi. Seçim `ThemeScript` ile aynı anahtarda saklanır ve
+* sayfa yeniden yüklenmeden uygulanır; başka sekmedeki değişiklik de izlenir. Sunucuda ve ilk
+* çizimde varsayılan tema gösterilir, ardından kayıtlı tercih.
+*/
+function ThemeSwitch({ variant = "segmented", showLabels = false, size = "md", label, className, storageKey, defaultTheme }) {
+	const t = useMessages();
+	const { theme, setTheme } = useTheme({
+		storageKey,
+		defaultTheme
+	});
+	const name = label ?? t.themeLabel;
+	const names = {
+		light: t.themeLight,
+		dark: t.themeDark,
+		system: t.themeSystem
+	};
+	const order = [
+		"light",
+		"dark",
+		"system"
+	];
+	if (variant === "menu") return /* @__PURE__ */ jsx(DropdownMenu, {
+		trigger: /* @__PURE__ */ jsx(IconButton, {
+			label: `${name}: ${names[theme]}`,
+			icon: ICONS[theme],
+			variant: "ghost",
+			size,
+			className
+		}),
+		placement: "bottom end",
+		selectionMode: "single",
+		disallowEmptySelection: true,
+		selectedKeys: [theme],
+		onSelectionChange: (keys) => {
+			const next = [...keys][0];
+			if (isTheme(next)) setTheme(next);
+		},
+		children: order.map((k) => /* @__PURE__ */ jsx(MenuItem, {
+			id: k,
+			icon: ICONS[k],
+			children: names[k]
+		}, k))
+	});
+	return /* @__PURE__ */ jsx(SegmentedControl, {
+		label: name,
+		value: theme,
+		onChange: (v) => {
+			if (isTheme(v)) setTheme(v);
+		},
+		size,
+		className,
+		children: order.map((k) => showLabels ? /* @__PURE__ */ jsx(SegmentedControlItem, {
+			value: k,
+			icon: ICONS[k],
+			children: names[k]
+		}, k) : /* @__PURE__ */ jsx(SegmentedControlItem, {
+			value: k,
+			icon: ICONS[k],
+			label: names[k]
+		}, k))
+	});
+}
+export { ThemeSwitch };

package/dist/components/TimeField/TimeField.d.ts

@@ -0,0 +1,33 @@
+import { ErrorMessage } from "../Field/Field.js";
+import { ReactNode } from "react";
+export interface TimeFieldProps {
+  label: ReactNode;
+  description?: ReactNode;
+  errorMessage?: ErrorMessage;
+  showOptional?: boolean;
+  size?: "sm" | "md" | "lg";
+  /** Saat (ISO, "14:30" ya da "14:30:15"); boşsa `null`. */
+  value?: string | null;
+  defaultValue?: string | null;
+  onChange?: (value: string | null) => void;
+  minValue?: string;
+  maxValue?: string;
+  /** Ayrıntı: `minute` (varsayılan) ya da `second`. */
+  granularity?: "hour" | "minute" | "second";
+  /** Saat düzeni; varsayılan dile göre (Türkçe 24 saat). */
+  hourCycle?: 12 | 24;
+  name?: string;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  isInvalid?: boolean;
+  validate?: (value: string | null) => string | string[] | true | null | undefined;
+  autoFocus?: boolean;
+  className?: string;
+  id?: string;
+}
+/**
+ * Parçalı saat alanı: saat ve dakika (isteğe bağlı saniye) ayrı parçalar; yazılarak ya da oklarla
+ * değiştirilir. Türkçede 24 saat düzenidir. Değer ISO saatidir ("14:30").
+ */
+export declare function TimeField({ label, description, errorMessage, showOptional, size, value, defaultValue, onChange, minValue, maxValue, granularity, validate, className, ...rest }: TimeFieldProps): import("react").JSX.Element;