@stisocial/ui 0.0.0-stage → 0.1.0

package/dist/components/PhoneField/PhoneField.js

@@ -0,0 +1,325 @@
+"use client";
+import { useLocale, useMessages } from "../../provider/UIProvider.js";
+import { ChevronDownIcon } from "../../icons/generated/ChevronDownIcon.js";
+import listbox_module_default from "../_internal/listbox/listbox.module.js";
+import { renderOptions } from "../_internal/listbox/options.js";
+import { useThemeContext } from "../_internal/themeContext.js";
+import { FieldDescription, FieldErrorText, FieldLabel, fieldStyles } from "../Field/Field.js";
+import { caretAfterRaw, extractRaw, formatMasked, parseMask, rawCountBefore } from "../MaskedField/mask.js";
+import { DIAL_CODES, PHONE_COUNTRIES, countryName, sortCountries } from "../_internal/countries/countries.js";
+import { normalizeTrPhone } from "../../validate/turkey.js";
+import PhoneField_module_default from "./PhoneField.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Button, Group, I18nProvider, Input, ListBox, Popover, Select, TextField } from "react-aria-components";
+// src/components/PhoneField/PhoneField.tsx
+/** E.164: "+" ve en çok 15 hane. */
+const MAX_DIGITS = 15;
+const TR_SLOTS = parseMask("(###) ### ## ##");
+/** Ülkenin ulusal numara maskesi: Türkiye gruplu, diğerleri yalnız rakam. */
+function slotsFor(country) {
+	if (country === "TR") return TR_SLOTS;
+	return parseMask("#".repeat(MAX_DIGITS - (DIAL_CODES[country]?.length ?? 1)));
+}
+/**
+* Yurt içi arama öneki olan baştaki 0 numaraya dahil değildir ("0532…" → "532…"). İtalya'da
+* (ve İtalya numaralandırmasını kullanan San Marino ile Vatikan'da) 0 numaranın parçasıdır.
+*/
+const keepsLeadingZero = (country) => country === "IT" || country === "SM" || country === "VA";
+/** Metinden ülkenin ulusal numarası. */
+const national = (text, country) => extractRaw(keepsLeadingZero(country) ? text : text.replace(/^(\D*)0/, "$1"), slotsFor(country), false);
+/** "+49 …" ya da "0049 …" yazımının rakamları (ülke kodu dahil); uluslararası değilse `null`. */
+function internationalDigits(text) {
+	const t = text.trim();
+	if (!/^(\+|00)/.test(t)) return null;
+	const digits = t.replace(/\D/g, "");
+	return t.startsWith("00") ? digits.slice(2) : digits;
+}
+/**
+* Uluslararası yazımı ülkeye ve ulusal numaraya ayırır. En uzun eşleşen kod seçilir, eşit kodda
+* listede önce gelen ülke. Kod listede yoksa `null`.
+*/
+function splitInternational(text, countries) {
+	const digits = internationalDigits(text);
+	if (digits === null) return null;
+	let best = null;
+	for (const c of countries) {
+		const dial = DIAL_CODES[c];
+		if (dial && digits.startsWith(dial) && (!best || dial.length > (DIAL_CODES[best]?.length ?? 0))) best = c;
+	}
+	if (!best) return null;
+	return {
+		country: best,
+		rest: digits.slice((DIAL_CODES[best] ?? "").length)
+	};
+}
+/**
+* Kişi "+" ile başlayıp ülke kodunu yazıyor ve kod henüz kesin değil mi ("+3" 30, 31, 32… olabilir;
+* "+35" 351–359): bu durumda yazılan metin olduğu gibi gösterilir.
+*/
+function isPendingDial(text, countries) {
+	const digits = internationalDigits(text);
+	if (digits === null) return false;
+	if (digits === "") return true;
+	return countries.some((c) => {
+		const dial = DIAL_CODES[c] ?? "";
+		return dial.startsWith(digits) && dial.length > digits.length;
+	});
+}
+/** Ülke ve ulusal numaradan E.164 ("+905321234567"); numara boşsa "". */
+const toE164 = (country, nationalNumber) => nationalNumber ? `+${DIAL_CODES[country] ?? ""}${nationalNumber}` : "";
+/** Numara geçerli mi: Türkiye'de alan kodu ve uzunluk; diğer ülkelerde 4 haneden uzun. */
+function isValidPhone(country, nationalNumber) {
+	if (country === "TR") return normalizeTrPhone(`+90${nationalNumber}`) !== null;
+	return nationalNumber.length >= 4 && /^\d+$/.test(nationalNumber);
+}
+/**
+* Telefon numarası alanı: ülke kodu alanın başında seçilir, numara ülkenin biçiminde yazılır
+* (Türkiye: "(532) 123 45 67"), baştaki 0 atılır, "+49 …" ya da "0049 …" yapıştırılınca ülke
+* kendiliğinden değişir. Form numarayı uluslararası biçimde (E.164, "+905321234567") alır.
+*/
+function PhoneField({ label, description, errorMessage, showOptional, size = "md", value, defaultValue, onChange, country: countryProp, defaultCountry = "TR", onCountryChange, countries = PHONE_COUNTRIES, name, countryName: countryFieldName, autoComplete = "tel", placeholder, validate, className, inputRef, ...rest }) {
+	const locale = useLocale();
+	const t = useMessages();
+	const uid = useId();
+	const labelId = `${uid}-label`;
+	const affixId = `${uid}-affix`;
+	const pickerId = `${uid}-picker`;
+	const allowed = useMemo(() => countries.filter((c) => DIAL_CODES[c]), [countries]);
+	const picker = allowed.length > 1;
+	const parse = (text, fallback) => {
+		const intl = splitInternational(text, allowed);
+		if (intl) return {
+			country: intl.country,
+			raw: national(intl.rest, intl.country)
+		};
+		return {
+			country: fallback,
+			raw: national(text, fallback)
+		};
+	};
+	const [inner, setInner] = useState(() => parse(defaultValue ?? "", defaultCountry));
+	const derived = value === void 0 ? inner : parse(value, countryProp ?? inner.country);
+	const country = countryProp ?? derived.country;
+	const raw = derived.raw;
+	const slots = slotsFor(country);
+	const formatted = formatMasked(raw, slots);
+	const dial = DIAL_CODES[country] ?? "";
+	const e164 = toE164(country, raw);
+	const input = useRef(null);
+	const group = useRef(null);
+	const anchor = useRef(null);
+	const caret = useRef(null);
+	const [, rerender] = useState(0);
+	const [pending, setPending] = useState(null);
+	const [open, setOpen] = useState(false);
+	const context = useThemeContext(anchor, open);
+	const [focusWithin, setFocusWithin] = useState(false);
+	const setRef = useCallback((el) => {
+		input.current = el;
+		if (typeof inputRef === "function") inputRef(el);
+		else if (inputRef) inputRef.current = el;
+	}, [inputRef]);
+	useLayoutEffect(() => {
+		const el = input.current;
+		if (caret.current === null || !el || document.activeElement !== el) return;
+		const pos = caretAfterRaw(caret.current, slots, el.value);
+		el.setSelectionRange(pos, pos);
+		caret.current = null;
+	});
+	const commit = (nextCountry, nextRaw) => {
+		if (value === void 0) setInner({
+			country: nextCountry,
+			raw: nextRaw
+		});
+		if (nextCountry !== country) onCountryChange?.(nextCountry);
+		onChange?.(toE164(nextCountry, nextRaw), nextCountry, nextRaw);
+	};
+	const change = (text) => {
+		if (isPendingDial(text, allowed)) {
+			setPending(text);
+			return;
+		}
+		setPending(null);
+		const intl = splitInternational(text, allowed);
+		if (intl) {
+			const nextRaw = national(intl.rest, intl.country);
+			caret.current = Array.from(nextRaw).length;
+			rerender((n) => n + 1);
+			commit(countryProp ?? intl.country, nextRaw);
+			return;
+		}
+		const selection = input.current?.selectionStart ?? text.length;
+		let nextRaw = extractRaw(text, slots, false);
+		let rawCaret = rawCountBefore(text, selection, slots);
+		if (nextRaw.startsWith("0") && !keepsLeadingZero(country)) {
+			nextRaw = nextRaw.slice(1);
+			rawCaret = Math.max(0, rawCaret - 1);
+		}
+		if (nextRaw === raw && text.length < formatted.length && rawCaret > 0) {
+			const chars = Array.from(raw);
+			chars.splice(rawCaret - 1, 1);
+			nextRaw = chars.join("");
+			rawCaret -= 1;
+		}
+		caret.current = rawCaret;
+		rerender((n) => n + 1);
+		commit(country, nextRaw);
+	};
+	const chooseCountry = (next) => {
+		if (next === country) return;
+		const nextRaw = extractRaw(raw, slotsFor(next), false);
+		setPending(null);
+		if (value === void 0) setInner({
+			country: next,
+			raw: nextRaw
+		});
+		onCountryChange?.(next);
+		onChange?.(toE164(next, nextRaw), next, nextRaw);
+	};
+	const items = useMemo(() => {
+		const option = (c) => ({
+			id: c,
+			label: countryName(c, locale),
+			description: `+${DIAL_CODES[c]}`
+		});
+		const first = allowed.includes(defaultCountry) ? [defaultCountry] : [];
+		const others = sortCountries(allowed.filter((c) => c !== defaultCountry), locale);
+		if (first.length === 0) return others.map(option);
+		return [{
+			id: "priority",
+			title: t.countryPriority,
+			options: first.map(option)
+		}, {
+			id: "all",
+			title: t.countryAll,
+			options: others.map(option)
+		}];
+	}, [
+		allowed,
+		defaultCountry,
+		locale,
+		t
+	]);
+	const focusInput = (e) => {
+		const target = e.target;
+		if (target === input.current || target.closest("button, a, input")) return;
+		e.preventDefault();
+		input.current?.focus();
+	};
+	return /* @__PURE__ */ jsxs(I18nProvider, {
+		locale,
+		children: [
+			/* @__PURE__ */ jsxs(TextField, {
+				...rest,
+				type: "tel",
+				value: pending ?? formatted,
+				onChange: change,
+				onBlur: () => setPending(null),
+				autoComplete,
+				validate: () => {
+					if (raw && !isValidPhone(country, raw)) return t.errorPhone;
+					return validate?.(e164);
+				},
+				className: [fieldStyles.root, className].filter(Boolean).join(" "),
+				"data-size": size,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						ref: anchor,
+						className: listbox_module_default.anchor,
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ jsx(FieldLabel, {
+						id: labelId,
+						showOptional: showOptional && !rest.isRequired,
+						children: label ?? t.phoneLabel
+					}),
+					/* @__PURE__ */ jsxs(Group, {
+						ref: group,
+						className: [fieldStyles.control, PhoneField_module_default.group].join(" "),
+						isReadOnly: rest.isReadOnly,
+						"data-focused": focusWithin || void 0,
+						onMouseDown: focusInput,
+						onFocus: () => setFocusWithin(true),
+						onBlur: (e) => {
+							if (!e.currentTarget.contains(e.relatedTarget)) setFocusWithin(false);
+						},
+						children: [picker ? /* @__PURE__ */ jsxs(Select, {
+							"aria-label": t.phoneCountry,
+							selectedKey: country,
+							onSelectionChange: (k) => {
+								if (k != null) chooseCountry(String(k));
+							},
+							isDisabled: rest.isDisabled || rest.isReadOnly,
+							onOpenChange: setOpen,
+							className: PhoneField_module_default.picker,
+							children: [/* @__PURE__ */ jsxs(Button, {
+								id: pickerId,
+								"aria-labelledby": `${pickerId}-name ${pickerId}-value`,
+								className: PhoneField_module_default.trigger,
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										id: `${pickerId}-name`,
+										className: PhoneField_module_default.hidden,
+										children: t.phoneCountry
+									}),
+									/* @__PURE__ */ jsxs("span", {
+										id: `${pickerId}-value`,
+										className: PhoneField_module_default.value,
+										children: [
+											/* @__PURE__ */ jsx("span", {
+												className: PhoneField_module_default.country,
+												children: country
+											}),
+											" +",
+											dial
+										]
+									}),
+									/* @__PURE__ */ jsx(ChevronDownIcon, {
+										className: PhoneField_module_default.chevron,
+										"aria-hidden": "true"
+									})
+								]
+							}), /* @__PURE__ */ jsx(Popover, {
+								offset: 6,
+								triggerRef: group,
+								placement: "bottom start",
+								className: [listbox_module_default.popover, PhoneField_module_default.popover].join(" "),
+								...context,
+								children: /* @__PURE__ */ jsx(ListBox, {
+									className: listbox_module_default.list,
+									children: renderOptions(items)
+								})
+							})]
+						}) : /* @__PURE__ */ jsxs("span", {
+							id: affixId,
+							className: PhoneField_module_default.affix,
+							"aria-hidden": "true",
+							children: ["+", dial]
+						}), /* @__PURE__ */ jsx(Input, {
+							ref: setRef,
+							className: PhoneField_module_default.input,
+							"aria-labelledby": picker ? `${labelId} ${pickerId}` : `${labelId} ${affixId}`,
+							placeholder: placeholder ?? (country === "TR" ? "(5__) ___ __ __" : void 0),
+							inputMode: "tel",
+							spellCheck: false
+						})]
+					}),
+					description ? /* @__PURE__ */ jsx(FieldDescription, { children: description }) : null,
+					/* @__PURE__ */ jsx(FieldErrorText, { errorMessage })
+				]
+			}),
+			name ? /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: e164
+			}) : null,
+			countryFieldName ? /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name: countryFieldName,
+				value: country
+			}) : null
+		]
+	});
+}
+export { PhoneField, isValidPhone, splitInternational, toE164 };

package/dist/components/PhoneField/PhoneField.module.js

@@ -0,0 +1,15 @@
+import './PhoneField.css';
+// src/components/PhoneField/PhoneField.module.css
+var PhoneField_module_default = {
+	"group": "sti-PhoneField-group-7e2bc",
+	"input": "sti-PhoneField-input-0657f",
+	"affix": "sti-PhoneField-affix-b1041",
+	"picker": "sti-PhoneField-picker-fc915",
+	"trigger": "sti-PhoneField-trigger-8058a",
+	"value": "sti-PhoneField-value-f4945",
+	"hidden": "sti-PhoneField-hidden-b22d8",
+	"country": "sti-PhoneField-country-e64b4",
+	"chevron": "sti-PhoneField-chevron-6ecd6",
+	"popover": "sti-PhoneField-popover-9e2d5"
+};
+export { PhoneField_module_default as default };

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

@@ -0,0 +1,2 @@
+import { PhoneField, PhoneFieldProps, isValidPhone, splitInternational, toE164 } from "./PhoneField.js";
+export { PhoneField, PhoneFieldProps, isValidPhone, splitInternational, toE164 };

package/dist/components/PhoneLink/PhoneLink.css

@@ -0,0 +1,86 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-PhoneLink-root-4471f, .sti-PhoneLink-text-17abf {
+    --sti-phone-link-gap: var(--sti-space-1);
+    font-family: var(--sti-font-numeric);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .sti-PhoneLink-root-4471f:not([data-label]) {
+    white-space: nowrap;
+  }
+
+  .sti-PhoneLink-text-17abf {
+    overflow-wrap: anywhere;
+  }
+
+  .sti-PhoneLink-root-4471f {
+    --sti-phone-link-fg: var(--sti-fg-link);
+    --sti-phone-link-fg-hover: var(--sti-fg-link-hover);
+    --sti-phone-link-touch: var(--sti-control-h-md);
+    border-radius: var(--sti-radius-xs);
+    color: var(--sti-phone-link-fg);
+    text-underline-offset: var(--sti-link-underline-offset);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: color var(--sti-duration-fast) var(--sti-ease-snap),
+      text-decoration-color var(--sti-duration-fast) var(--sti-ease-snap);
+    text-decoration-line: underline;
+    text-decoration-thickness: from-font;
+    position: relative;
+  }
+
+  @media (hover: hover) {
+    .sti-PhoneLink-root-4471f[data-hovered] {
+      color: var(--sti-phone-link-fg-hover);
+    }
+  }
+
+  .sti-PhoneLink-root-4471f[data-pressed] {
+    color: var(--sti-phone-link-fg-hover);
+  }
+
+  .sti-PhoneLink-root-4471f:focus-visible, .sti-PhoneLink-root-4471f[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-PhoneLink-root-4471f:focus:not([data-focus-visible]) {
+    outline: none;
+  }
+
+  @media (pointer: coarse) {
+    .sti-PhoneLink-root-4471f:after {
+      block-size: max(100%, var(--sti-phone-link-touch));
+      content: "";
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline: 0;
+      translate: 0 -50%;
+    }
+
+    .sti-PhoneLink-root-4471f[data-inline]:after {
+      block-size: max(100%, 1lh);
+    }
+  }
+
+  .sti-PhoneLink-icon-fae5e {
+    margin-inline-end: var(--sti-phone-link-gap);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-PhoneLink-root-4471f {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-PhoneLink-root-4471f {
+      color: linktext;
+    }
+
+    .sti-PhoneLink-root-4471f[data-focus-visible] {
+      outline-color: highlight;
+    }
+  }
+}

package/dist/components/PhoneLink/PhoneLink.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+export interface PhoneLinkProps {
+  /**
+   * Türkiye telefon numarası, kaydedildiği gibi ("05321234567", "+90 532 123 45 67"…). Geçerliyse
+   * `tel:` bağlantısı E.164 biçimiyle kurulur; geçersizse bağlantı kurulmaz, değer düz metin olarak
+   * olduğu gibi yazılır. Boşsa hiçbir şey çizilmez.
+   */
+  value: string;
+  /** Uluslararası yazım: "+90 532 123 45 67"; varsayılan ulusal "0532 123 45 67". */
+  international?: boolean;
+  /** Numaranın önünde telefon ikonu (süs; anlamı numara taşır). */
+  showIcon?: boolean;
+  /**
+   * Numaranın yerine görünecek metin ("Müşteri hizmetlerini arayın"). Erişilebilir ad bu metindir;
+   * numara görünmez, bu yüzden metin aranacak yeri açıkça söylemelidir.
+   */
+  children?: ReactNode;
+  /**
+   * Bağlantı yazı içinde, başka satırlardaki bağlantılarla alt alta duruyor (paragraf). Dokunmatikte
+   * basma alanı 44 piksele genişlemez, satır yüksekliğinde kalır: komşu satırdaki bağlantının
+   * alanıyla üst üste binmez (WCAG 2.5.8 metin içi bağlantı istisnası). Varsayılan: tek başına
+   * bağlantı, 44 piksel.
+   */
+  inline?: boolean;
+  className?: string;
+  id?: string;
+}
+/**
+ * Telefon bağlantısı: dokunulunca arama başlatır (`tel:+905321234567`), numarayı okunur biçimde
+ * yazar ("0532 123 45 67"). Dokunmatik ekranda basma alanı en az 44 pikseldir (görünmez genişleme;
+ * satır yüksekliği değişmez).
+ */
+export declare function PhoneLink({ value, international, showIcon, children, inline, className, id }: PhoneLinkProps): import("react").JSX.Element | null;

package/dist/components/PhoneLink/PhoneLink.js

@@ -0,0 +1,37 @@
+"use client";
+import { formatTrPhone, normalizeTrPhone } from "../../validate/turkey.js";
+import { PhoneIcon } from "../../icons/generated/PhoneIcon.js";
+import PhoneLink_module_default from "./PhoneLink.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Link } from "react-aria-components";
+// src/components/PhoneLink/PhoneLink.tsx
+/**
+* Telefon bağlantısı: dokunulunca arama başlatır (`tel:+905321234567`), numarayı okunur biçimde
+* yazar ("0532 123 45 67"). Dokunmatik ekranda basma alanı en az 44 pikseldir (görünmez genişleme;
+* satır yüksekliği değişmez).
+*/
+function PhoneLink({ value, international = false, showIcon = false, children, inline = false, className, id }) {
+	const raw = value.trim();
+	if (!raw) return null;
+	const e164 = normalizeTrPhone(raw);
+	const icon = showIcon ? /* @__PURE__ */ jsx("span", {
+		className: PhoneLink_module_default.icon,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx(PhoneIcon, {})
+	}) : null;
+	if (!e164) return /* @__PURE__ */ jsxs("span", {
+		id,
+		className: [PhoneLink_module_default.text, className].filter(Boolean).join(" "),
+		"data-invalid": "",
+		children: [icon, raw]
+	});
+	return /* @__PURE__ */ jsxs(Link, {
+		id,
+		className: [PhoneLink_module_default.root, className].filter(Boolean).join(" "),
+		href: `tel:${e164}`,
+		"data-label": children === void 0 ? void 0 : "",
+		"data-inline": inline ? "" : void 0,
+		children: [icon, children ?? formatTrPhone(e164, { international })]
+	});
+}
+export { PhoneLink };

package/dist/components/PhoneLink/PhoneLink.module.js

@@ -0,0 +1,8 @@
+import './PhoneLink.css';
+// src/components/PhoneLink/PhoneLink.module.css
+var PhoneLink_module_default = {
+	"root": "sti-PhoneLink-root-4471f",
+	"text": "sti-PhoneLink-text-17abf",
+	"icon": "sti-PhoneLink-icon-fae5e"
+};
+export { PhoneLink_module_default as default };

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

@@ -0,0 +1,2 @@
+import { PhoneLink, PhoneLinkProps } from "./PhoneLink.js";
+export { PhoneLink, type PhoneLinkProps };

package/dist/components/PlateField/PlateField.d.ts

@@ -0,0 +1,19 @@
+import { TextFieldProps } from "../TextField/TextField.js";
+import { ReactNode } from "react";
+export interface PlateFieldProps extends Omit<TextFieldProps, "type" | "label" | "value" | "defaultValue" | "onChange" | "inputMode" | "maxLength"> {
+  /** Görünür etiket; verilmezse "Araç plakası". */
+  label?: ReactNode;
+  /** Plaka; boşluklu ya da boşluksuz, küçük harfli olabilir. */
+  value?: string;
+  defaultValue?: string;
+  /** Boşluksuz ("34ABC123") ve okunur ("34 ABC 123") plaka. */
+  onChange?: (compact: string, formatted: string) => void;
+  /** Formun aldığı değer: boşluksuz (varsayılan) ya da okunur. */
+  submit?: "compact" | "formatted";
+}
+/**
+ * Araç plakası: yazarken "34 ABC 123" biçimine girer (il kodu, harfler ve rakamlar arasında
+ * boşluk), harfler büyütülür, sıraya uymayan karakter alınmaz. İl kodu (01–81) ve harf/rakam
+ * sayısı alandan çıkınca denetlenir.
+ */
+export declare function PlateField({ label, value, defaultValue, onChange, submit, name, validate, placeholder, autoComplete, inputRef, ...rest }: PlateFieldProps): import("react").JSX.Element;

package/dist/components/PlateField/PlateField.js

@@ -0,0 +1,69 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { TextField } from "../TextField/TextField.js";
+import { caretAfter, compactPlate, formatPlate, isValidPlate, parsePlate } from "./plate.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+// src/components/PlateField/PlateField.tsx
+/**
+* Araç plakası: yazarken "34 ABC 123" biçimine girer (il kodu, harfler ve rakamlar arasında
+* boşluk), harfler büyütülür, sıraya uymayan karakter alınmaz. İl kodu (01–81) ve harf/rakam
+* sayısı alandan çıkınca denetlenir.
+*/
+function PlateField({ label, value, defaultValue, onChange, submit = "compact", name, validate, placeholder = "34 ABC 123", autoComplete = "off", inputRef, ...rest }) {
+	const t = useMessages();
+	const [inner, setInner] = useState(() => compactPlate(parsePlate(defaultValue ?? "")));
+	const compact = value === void 0 ? inner : compactPlate(parsePlate(value));
+	const formatted = formatPlate(parsePlate(compact));
+	const input = useRef(null);
+	const caret = useRef(null);
+	const [, rerender] = useState(0);
+	const setRef = useCallback((el) => {
+		input.current = el;
+		if (typeof inputRef === "function") inputRef(el);
+		else if (inputRef) inputRef.current = el;
+	}, [inputRef]);
+	useLayoutEffect(() => {
+		const el = input.current;
+		if (caret.current === null || !el || document.activeElement !== el) return;
+		const pos = caretAfter(caret.current, el.value);
+		el.setSelectionRange(pos, pos);
+		caret.current = null;
+	});
+	const change = (text) => {
+		const selection = input.current?.selectionStart ?? text.length;
+		let next = compactPlate(parsePlate(text));
+		let before = compactPlate(parsePlate(text.slice(0, selection))).length;
+		if (next === compact && text.length < formatted.length && before > 0) {
+			next = parsePlateCompact(next.slice(0, before - 1) + next.slice(before));
+			before -= 1;
+		}
+		caret.current = before;
+		rerender((n) => n + 1);
+		if (value === void 0) setInner(next);
+		onChange?.(next, formatPlate(parsePlate(next)));
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TextField, {
+		...rest,
+		type: "text",
+		label: label ?? t.plateLabel,
+		value: formatted,
+		onChange: change,
+		inputRef: setRef,
+		placeholder,
+		autoComplete,
+		autoCapitalize: "characters",
+		spellCheck: false,
+		validate: (v) => {
+			if (v.trim() && !isValidPlate(v)) return t.errorPlate;
+			return validate?.(v);
+		}
+	}), name ? /* @__PURE__ */ jsx("input", {
+		type: "hidden",
+		name,
+		value: submit === "formatted" ? formatted : compact
+	}) : null] });
+}
+/** Parçalardan biri silinince kalan metin yeniden sıraya sokulur ("34A123" → "34A123"). */
+const parsePlateCompact = (text) => compactPlate(parsePlate(text));
+export { PlateField };

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

@@ -0,0 +1,3 @@
+import { PlateField, PlateFieldProps } from "./PlateField.js";
+import { formatPlate, isValidPlate, parsePlate } from "./plate.js";
+export { PlateField, PlateFieldProps, formatPlate, isValidPlate, parsePlate };

package/dist/components/PlateField/plate.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Türkiye araç plakası: il kodu (01–81), 1–3 harf ve 2–5 rakam. Geçerli diziler (Karayolları
+ * Trafik Yönetmeliği): "99 X 9999", "99 X 99999", "99 XX 999", "99 XX 9999", "99 XXX 99",
+ * "99 XXX 999".
+ */
+export interface PlateParts {
+  province: string;
+  letters: string;
+  digits: string;
+}
+/**
+ * Yazılan metni plaka parçalarına ayırır. Harfler büyütülür ("i" ve "ı" "I" olur); Türkçeye
+ * özgü harfler (Ç, Ğ, Ö, Ş, Ü) plakada bulunmadığı için alınmaz; sıraya uymayan karakter atılır.
+ * Ön eke göre kararlıdır: metnin başının parçaları, metnin parçalarının başıdır (imleç hesabı).
+ */
+export declare function parsePlate(text: string): PlateParts;
+/** Okunur plaka ("34 ABC 123"); yazılmamış parçalar ve sondaki boşluk yazılmaz. */
+export declare const formatPlate: (p: PlateParts) => string;
+/** Plaka geçerli mi: il kodu 01–81 ve harf/rakam sayısı yönetmelikteki dizilerden biri. */
+export declare function isValidPlate(value: string): boolean;