@stisocial/ui 0.0.0-stage → 0.2.0

package/dist/components/_internal/overlay/overlay.module.js

@@ -0,0 +1,26 @@
+import './overlay.css';
+// src/components/_internal/overlay/overlay.module.css
+var overlay_module_default = {
+	"anchor": "sti-overlay-anchor-45d8c",
+	"overlay": "sti-overlay-overlay-92b75",
+	"sti-overlay-fade": "sti-overlay-sti-overlay-fade-9b951",
+	"card": "sti-overlay-card-be6b3",
+	"sti-overlay-pop": "sti-overlay-sti-overlay-pop-f6db7",
+	"sti-overlay-from-end": "sti-overlay-sti-overlay-from-end-82bd4",
+	"sti-overlay-from-start": "sti-overlay-sti-overlay-from-start-ccb3d",
+	"sti-overlay-from-bottom": "sti-overlay-sti-overlay-from-bottom-1034d",
+	"sti-overlay-rise": "sti-overlay-sti-overlay-rise-ae6b4",
+	"head": "sti-overlay-head-5e410",
+	"footer": "sti-overlay-footer-0d037",
+	"titles": "sti-overlay-titles-51547",
+	"close": "sti-overlay-close-8c579",
+	"body": "sti-overlay-body-5aa27",
+	"bodyInner": "sti-overlay-bodyInner-c9f28",
+	"dialog": "sti-overlay-dialog-645e1",
+	"handle": "sti-overlay-handle-3e7e0",
+	"grip": "sti-overlay-grip-5976f",
+	"icon": "sti-overlay-icon-1669f",
+	"title": "sti-overlay-title-8a2c3",
+	"description": "sti-overlay-description-ba9bc"
+};
+export { overlay_module_default as default };

package/dist/components/_internal/period/PeriodGrid.js

@@ -0,0 +1,62 @@
+"use client";
+import { ChevronRightIcon } from "../../../icons/generated/ChevronRightIcon.js";
+import { ChevronLeftIcon } from "../../../icons/generated/ChevronLeftIcon.js";
+import calendar_module_default from "../date/calendar.module.js";
+import period_module_default from "./period.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, ListBox, ListBoxItem } from "react-aria-components";
+// src/components/_internal/period/PeriodGrid.tsx
+/**
+* Dönem ızgarası (iç): başlıkta önceki/sonraki sayfa düğmeleri ve sayfa adı (yıl ya da on iki
+* yıllık aralık), altında React Aria ListBox (`layout="grid"`): oklar iki yönde gezer, Home/End
+* baş ve son, harf yazmak arar, Enter seçer.
+*/
+function PeriodGrid({ heading, previousLabel, nextLabel, onPrevious, onNext, canPrevious = true, canNext = true, items, selected, onSelect, columns = 3 }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: calendar_module_default.header,
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				className: calendar_module_default.nav,
+				"aria-label": previousLabel,
+				onPress: onPrevious,
+				isDisabled: !canPrevious,
+				children: /* @__PURE__ */ jsx(ChevronLeftIcon, { "aria-hidden": "true" })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: calendar_module_default.heading,
+				"aria-live": "polite",
+				children: heading
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				className: calendar_module_default.nav,
+				"aria-label": nextLabel,
+				onPress: onNext,
+				isDisabled: !canNext,
+				children: /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": "true" })
+			})
+		]
+	}), /* @__PURE__ */ jsx(ListBox, {
+		"aria-label": heading,
+		layout: "grid",
+		selectionMode: "single",
+		escapeKeyBehavior: "none",
+		selectedKeys: selected ? [selected] : [],
+		onSelectionChange: (keys) => {
+			const [key] = [...keys];
+			if (key) onSelect(String(key));
+		},
+		disabledKeys: items.filter((i) => i.isDisabled).map((i) => i.id),
+		autoFocus: selected && items.some((i) => i.id === selected) ? true : "first",
+		className: period_module_default.grid,
+		"data-columns": columns,
+		children: items.map((item) => /* @__PURE__ */ jsx(ListBoxItem, {
+			id: item.id,
+			textValue: item.fullLabel,
+			"aria-label": item.fullLabel,
+			className: period_module_default.item,
+			"data-current": item.isCurrent || void 0,
+			children: item.label
+		}, item.id))
+	})] });
+}
+export { PeriodGrid };

package/dist/components/_internal/period/PeriodShell.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+/** Dönem seçicilerinin (hafta, ay, çeyrek, yıl) ortak özellikleri. */
+export interface PeriodBaseProps {
+  label: ReactNode;
+  description?: ReactNode;
+  /** Hata metni (`isInvalid` ile ya da zorunlu boş gönderimde gösterilir). */
+  errorMessage?: string;
+  showOptional?: boolean;
+  size?: "sm" | "md" | "lg";
+  placeholder?: string;
+  /** Form alanı adı: dönemin ISO yazımı gönderilir. */
+  name?: string;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  className?: string;
+  id?: string;
+}

package/dist/components/_internal/period/PeriodShell.js

@@ -0,0 +1,135 @@
+"use client";
+import { useLocale, useMessages } from "../../../provider/UIProvider.js";
+import listbox_module_default from "../listbox/listbox.module.js";
+import { useThemeContext } from "../themeContext.js";
+import { AlertCircleIcon } from "../../../icons/generated/AlertCircleIcon.js";
+import { fieldStyles } from "../../Field/Field.js";
+import select_module_default from "../listbox/select.module.js";
+import { CalendarIcon } from "../../../icons/generated/CalendarIcon.js";
+import dateField_module_default from "../date/dateField.module.js";
+import period_module_default from "./period.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { Button, Dialog, DialogTrigger, I18nProvider, Popover } from "react-aria-components";
+// src/components/_internal/period/PeriodShell.tsx
+/**
+* Dönem seçicilerin kabuğu (iç): Field görünüşünde düğme (seçili dönemin adı ve takvim ikonu),
+* açılır katmanda seçici içeriği, gizli form alanı ve zorunlu alan doğrulaması. Düğme etiketle ve
+* değerle adlanır; hata durumunda `aria-invalid` taşır (Form'un hata özeti bulur).
+*/
+function PeriodShell({ label, description, errorMessage, showOptional, size = "md", placeholder, name, isRequired, isDisabled, isInvalid, className, id, value, text, children }) {
+	const locale = useLocale();
+	const t = useMessages();
+	const uid = useId();
+	const labelId = `${uid}-label`;
+	const valueId = `${uid}-value`;
+	const descId = `${uid}-desc`;
+	const errId = `${uid}-err`;
+	const anchor = useRef(null);
+	const trigger = useRef(null);
+	const [open, setOpen] = useState(false);
+	const [missing, setMissing] = useState(false);
+	const context = useThemeContext(anchor, open);
+	const showError = isInvalid || missing && !value;
+	const errorText = isInvalid ? errorMessage : t.errorRequired;
+	useEffect(() => {
+		const el = trigger.current;
+		if (!el) return;
+		if (showError) el.setAttribute("aria-invalid", "true");
+		else el.removeAttribute("aria-invalid");
+	}, [showError]);
+	return /* @__PURE__ */ jsx(I18nProvider, {
+		locale,
+		children: /* @__PURE__ */ jsxs("div", {
+			id,
+			className: [
+				fieldStyles.root,
+				period_module_default.root,
+				className
+			].filter(Boolean).join(" "),
+			"data-size": size,
+			"data-invalid": showError || void 0,
+			"data-disabled": isDisabled || void 0,
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					ref: anchor,
+					className: listbox_module_default.anchor,
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					id: labelId,
+					className: fieldStyles.label,
+					children: [label, showOptional && !isRequired ? /* @__PURE__ */ jsxs("span", {
+						className: fieldStyles.optional,
+						children: [
+							" (",
+							t.optional,
+							")"
+						]
+					}) : null]
+				}),
+				/* @__PURE__ */ jsxs(DialogTrigger, {
+					isOpen: open,
+					onOpenChange: setOpen,
+					children: [/* @__PURE__ */ jsxs(Button, {
+						ref: trigger,
+						isDisabled,
+						"aria-labelledby": `${labelId} ${valueId}`,
+						"aria-describedby": [description ? descId : null, showError ? errId : null].filter(Boolean).join(" ") || void 0,
+						"aria-required": isRequired || void 0,
+						"data-invalid": showError || void 0,
+						className: [fieldStyles.control, select_module_default.trigger].join(" "),
+						children: [/* @__PURE__ */ jsx("span", {
+							id: valueId,
+							className: select_module_default.value,
+							"data-placeholder": text ? void 0 : "",
+							children: text ?? placeholder ?? t.selectPlaceholder
+						}), /* @__PURE__ */ jsx(CalendarIcon, {
+							className: select_module_default.chevron,
+							"aria-hidden": "true"
+						})]
+					}), /* @__PURE__ */ jsx(Popover, {
+						offset: 6,
+						placement: "bottom start",
+						className: dateField_module_default.popover,
+						...context,
+						children: /* @__PURE__ */ jsx(Dialog, {
+							"aria-labelledby": labelId,
+							className: period_module_default.dialog,
+							children: children(() => {
+								setOpen(false);
+								setMissing(false);
+							})
+						})
+					})]
+				}),
+				description ? /* @__PURE__ */ jsx("span", {
+					id: descId,
+					className: fieldStyles.description,
+					children: description
+				}) : null,
+				showError && errorText ? /* @__PURE__ */ jsxs("span", {
+					id: errId,
+					className: fieldStyles.error,
+					children: [/* @__PURE__ */ jsx(AlertCircleIcon, { className: fieldStyles.errorIcon }), /* @__PURE__ */ jsx("span", { children: errorText })]
+				}) : null,
+				/* @__PURE__ */ jsx("input", {
+					className: period_module_default.native,
+					name,
+					value: value ?? "",
+					required: isRequired,
+					disabled: isDisabled,
+					tabIndex: -1,
+					"aria-hidden": "true",
+					onChange: () => {},
+					onInvalid: (e) => {
+						e.preventDefault();
+						setMissing(true);
+						trigger.current?.focus();
+					}
+				})
+			]
+		})
+	});
+}
+export { PeriodShell };

package/dist/components/_internal/period/period.css

@@ -0,0 +1,90 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-period-dialog-9e810 {
+    gap: var(--sti-space-3);
+    padding: var(--sti-space-4);
+    outline: none;
+    display: grid;
+  }
+
+  .sti-period-grid-ddadf {
+    grid-template-columns: repeat(var(--sti-period-columns, 3), minmax(0, 1fr));
+    gap: var(--sti-space-1);
+    inline-size: min(18rem, calc(100vw - var(--sti-space-16)));
+    outline: none;
+    display: grid;
+  }
+
+  .sti-period-grid-ddadf[data-columns="2"] {
+    --sti-period-columns: 2;
+  }
+
+  .sti-period-item-3bbdd {
+    min-block-size: var(--sti-control-h-md);
+    padding-inline: var(--sti-space-2);
+    border-radius: var(--sti-radius-pill);
+    color: var(--sti-fg);
+    font-size: var(--sti-font-size-sm);
+    text-align: center;
+    cursor: pointer;
+    transition: background-color var(--sti-duration-fast) var(--sti-ease-snap);
+    outline: none;
+    place-items: center;
+    display: grid;
+  }
+
+  .sti-period-item-3bbdd[data-current] {
+    color: var(--sti-fg-accent);
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  .sti-period-item-3bbdd[data-hovered]:not([data-selected]) {
+    background: var(--sti-bg-surface-hover);
+  }
+
+  .sti-period-item-3bbdd[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: calc(var(--sti-focus-ring-width) * -1);
+  }
+
+  .sti-period-item-3bbdd[data-selected] {
+    background: var(--sti-fill-accent);
+    color: var(--sti-fg-on-accent);
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  .sti-period-item-3bbdd[data-disabled] {
+    color: var(--sti-fg-muted);
+    opacity: .45;
+    cursor: not-allowed;
+  }
+
+  .sti-period-week-c7998 {
+    background: var(--sti-bg-accent-subtle);
+    color: var(--sti-fg-accent-strong);
+    border-radius: 0;
+  }
+
+  .sti-period-native-d0676 {
+    opacity: 0;
+    pointer-events: none;
+    border: 0;
+    block-size: 1px;
+    inline-size: 1px;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+  }
+
+  .sti-period-root-2db8b {
+    position: relative;
+  }
+
+  @media (forced-colors: active) {
+    .sti-period-item-3bbdd[data-selected] {
+      color: highlighttext;
+      forced-color-adjust: none;
+      background: highlight;
+    }
+  }
+}

package/dist/components/_internal/period/period.module.js

@@ -0,0 +1,11 @@
+import './period.css';
+// src/components/_internal/period/period.module.css
+var period_module_default = {
+	"dialog": "sti-period-dialog-9e810",
+	"grid": "sti-period-grid-ddadf",
+	"item": "sti-period-item-3bbdd",
+	"week": "sti-period-week-c7998",
+	"native": "sti-period-native-d0676",
+	"root": "sti-period-root-2db8b"
+};
+export { period_module_default as default };

package/dist/components/_internal/period/periods.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Dönem yazımları (ISO 8601): hafta "2026-W46", ay "2026-11", çeyrek "2026-Q4", yıl "2026". Saf
+ * işlevler; geçersiz metin `null` olur. İç yardımcıdır; bileşenler dışa açar.
+ */
+export interface IsoWeek {
+  year: number;
+  week: number;
+}
+/** Günün ISO haftası: hafta pazartesi başlar; yılın ilk haftası ilk perşembeyi içerendir. */
+export declare function isoWeekOf(iso: string): IsoWeek | null;
+/** ISO haftanın pazartesi ve pazar günleri (ISO gün). */
+export declare function isoWeekRange({ year, week }: IsoWeek): {
+  start: string;
+  end: string;
+};
+export interface YearQuarter {
+  year: number;
+  quarter: number;
+}
+/** Çeyreğin ilk ve son günü (ISO gün). */
+export declare function quarterRange({ year, quarter }: YearQuarter): {
+  start: string;
+  end: string;
+};

package/dist/components/_internal/period/periods.js

@@ -0,0 +1,81 @@
+// src/components/_internal/period/periods.ts
+const utc = (y, m, d) => new Date(Date.UTC(y, m - 1, d));
+const pad = (n, w = 2) => String(n).padStart(w, "0");
+/** Günün ISO haftası: hafta pazartesi başlar; yılın ilk haftası ilk perşembeyi içerendir. */
+function isoWeekOf(iso) {
+	const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
+	if (!m) return null;
+	const d = utc(Number(m[1]), Number(m[2]), Number(m[3]));
+	if (Number.isNaN(d.getTime())) return null;
+	const day = (d.getUTCDay() + 6) % 7;
+	const thursday = new Date(d);
+	thursday.setUTCDate(d.getUTCDate() - day + 3);
+	const year = thursday.getUTCFullYear();
+	const jan1 = utc(year, 1, 1);
+	return {
+		year,
+		week: 1 + Math.floor((thursday.getTime() - jan1.getTime()) / 864e5 / 7)
+	};
+}
+/** Yılın ISO hafta sayısı (52 ya da 53). */
+function isoWeeksInYear(year) {
+	return isoWeekOf(`${year}-12-28`)?.week ?? 52;
+}
+const formatIsoWeek = ({ year, week }) => `${year}-W${pad(week)}`;
+function parseIsoWeek(value) {
+	const m = /^(\d{4})-W(\d{2})$/.exec(value ?? "");
+	if (!m) return null;
+	const year = Number(m[1]);
+	const week = Number(m[2]);
+	return week >= 1 && week <= isoWeeksInYear(year) ? {
+		year,
+		week
+	} : null;
+}
+/** ISO haftanın pazartesi ve pazar günleri (ISO gün). */
+function isoWeekRange({ year, week }) {
+	const jan4 = utc(year, 1, 4);
+	const monday = new Date(jan4);
+	monday.setUTCDate(jan4.getUTCDate() - (jan4.getUTCDay() + 6) % 7 + (week - 1) * 7);
+	const sunday = new Date(monday);
+	sunday.setUTCDate(monday.getUTCDate() + 6);
+	const iso = (d) => d.toISOString().slice(0, 10);
+	return {
+		start: iso(monday),
+		end: iso(sunday)
+	};
+}
+function parseMonth(value) {
+	const m = /^(\d{4})-(\d{2})$/.exec(value ?? "");
+	if (!m) return null;
+	const month = Number(m[2]);
+	return month >= 1 && month <= 12 ? {
+		year: Number(m[1]),
+		month
+	} : null;
+}
+const formatMonth = ({ year, month }) => `${year}-${pad(month)}`;
+function parseQuarter(value) {
+	const m = /^(\d{4})-Q([1-4])$/.exec(value ?? "");
+	return m ? {
+		year: Number(m[1]),
+		quarter: Number(m[2])
+	} : null;
+}
+const formatQuarter = ({ year, quarter }) => `${year}-Q${quarter}`;
+/** Çeyreğin ilk ve son günü (ISO gün). */
+function quarterRange({ year, quarter }) {
+	const startMonth = (quarter - 1) * 3 + 1;
+	const end = utc(year, startMonth + 3, 0);
+	return {
+		start: `${year}-${pad(startMonth)}-01`,
+		end: end.toISOString().slice(0, 10)
+	};
+}
+function parseYear(value) {
+	return /^\d{4}$/.test(value ?? "") ? Number(value) : null;
+}
+/** "YYYY-MM" ya da "YYYY-Qn" karşılaştırması için sıra sayısı. */
+const monthIndex = (p) => p.year * 12 + (p.month - 1);
+const quarterIndex = (p) => p.year * 4 + (p.quarter - 1);
+export { formatIsoWeek, formatMonth, formatQuarter, isoWeekOf, isoWeekRange, isoWeeksInYear, monthIndex, parseIsoWeek, parseMonth, parseQuarter, parseYear, quarterIndex, quarterRange };

package/dist/components/_internal/picker/PickerPanel.js

@@ -0,0 +1,103 @@
+"use client";
+import { useLocale, useMessages } from "../../../provider/UIProvider.js";
+import { searchContains } from "../../Combobox/searchFold.js";
+import { SearchField as SearchField$1 } from "../../SearchField/SearchField.js";
+import picker_module_default from "./picker.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useRef, useState } from "react";
+import { Header, ListBox, ListBoxItem, ListBoxSection } from "react-aria-components";
+// src/components/_internal/picker/PickerPanel.tsx
+/**
+* Seçici paneli (iç; IconPicker ve EmojiPicker). Üstte arama (Türkçe harf duyarsız; ad ve
+* sözcüklerde), altında başlıklı ızgara liste (React Aria ListBox, `layout="grid"`): oklar iki
+* boyutta gezer, Enter seçer. Aramadan aşağı ok ızgaraya geçer.
+*/
+function PickerPanel({ label, groups, onSelect, selected, searchLabel, emptyText, cell = "md", maxResults = 120, className }) {
+	const locale = useLocale();
+	const t = useMessages();
+	const [query, setQuery] = useState("");
+	const grid = useRef(null);
+	const listId = useId();
+	const shown = useMemo(() => {
+		const q = query.trim();
+		if (!q) {
+			const seen = /* @__PURE__ */ new Set();
+			return groups.map((g) => g.id === "recent" ? g : {
+				...g,
+				items: g.items.filter((i) => {
+					if (seen.has(i.id)) return false;
+					seen.add(i.id);
+					return true;
+				})
+			});
+		}
+		const hits = [];
+		for (const g of groups) for (const item of g.items) {
+			if (hits.length >= maxResults) break;
+			const hay = [item.label, ...item.keywords ?? []].join(" ");
+			if (searchContains(hay, q, locale) && !hits.some((h) => h.id === item.id)) hits.push(item);
+		}
+		return hits.length ? [{
+			id: "results",
+			title: t.pickerResults,
+			items: hits
+		}] : [];
+	}, [
+		groups,
+		query,
+		locale,
+		maxResults,
+		t.pickerResults
+	]);
+	const onSearchKey = (e) => {
+		if (e.key !== "ArrowDown") return;
+		const first = grid.current?.querySelector("[role=\"option\"]");
+		if (first) {
+			e.preventDefault();
+			first.focus();
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: [picker_module_default.panel, className].filter(Boolean).join(" "),
+		"data-cell": cell,
+		children: [/* @__PURE__ */ jsx("div", {
+			onKeyDown: onSearchKey,
+			children: /* @__PURE__ */ jsx(SearchField$1, {
+				label: searchLabel,
+				hideLabel: true,
+				size: "sm",
+				value: query,
+				onChange: setQuery,
+				placeholder: searchLabel,
+				autoFocus: true
+			})
+		}), /* @__PURE__ */ jsx(ListBox, {
+			ref: grid,
+			id: listId,
+			"aria-label": label,
+			layout: "grid",
+			onAction: (key) => onSelect(String(key).replace(/^recent:/, "")),
+			className: picker_module_default.grid,
+			renderEmptyState: () => /* @__PURE__ */ jsx("div", {
+				className: picker_module_default.empty,
+				children: emptyText
+			}),
+			children: shown.map((g) => /* @__PURE__ */ jsxs(ListBoxSection, {
+				id: g.id,
+				className: picker_module_default.section,
+				children: [/* @__PURE__ */ jsx(Header, {
+					className: picker_module_default.header,
+					children: g.title
+				}), g.items.map((item) => /* @__PURE__ */ jsx(ListBoxItem, {
+					id: g.id === "recent" ? `recent:${item.id}` : item.id,
+					textValue: item.label,
+					"aria-label": item.label,
+					className: picker_module_default.cell,
+					"data-current": item.id === selected ? "" : void 0,
+					children: item.render()
+				}, `${g.id}:${item.id}`))]
+			}, g.id))
+		})]
+	});
+}
+export { PickerPanel };

package/dist/components/_internal/picker/picker.css

@@ -0,0 +1,89 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-picker-panel-bf37c {
+    --sti-picker-cell: 2.5rem;
+    gap: var(--sti-space-2);
+    width: min(20rem, calc(100vw - var(--sti-space-8)));
+    max-height: min(24rem, var(--visual-viewport-height, 100vh));
+    grid-template-rows: auto minmax(0, 1fr);
+    display: grid;
+  }
+
+  .sti-picker-panel-bf37c[data-cell="sm"] {
+    --sti-picker-cell: 2.25rem;
+  }
+
+  .sti-picker-grid-9d00f {
+    align-content: start;
+    gap: var(--sti-space-2);
+    overscroll-behavior: contain;
+    outline: none;
+    min-height: 0;
+    display: grid;
+    overflow: auto;
+  }
+
+  .sti-picker-section-408e9 {
+    grid-template-columns: repeat(auto-fill, minmax(var(--sti-picker-cell), 1fr));
+    gap: var(--sti-space-0-5);
+    display: grid;
+  }
+
+  .sti-picker-header-a5c9a {
+    z-index: 1;
+    padding-block: var(--sti-space-1);
+    background: var(--sti-bg-surface);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-xs);
+    grid-column: 1 / -1;
+    position: sticky;
+    top: 0;
+  }
+
+  .sti-picker-cell-e3a18 {
+    aspect-ratio: 1;
+    border-radius: var(--sti-radius-sm);
+    min-width: 0;
+    color: var(--sti-fg);
+    font-size: var(--sti-icon-md);
+    cursor: pointer;
+    outline: none;
+    place-items: center;
+    display: grid;
+  }
+
+  .sti-picker-cell-e3a18[data-focused], .sti-picker-cell-e3a18[data-hovered] {
+    background: var(--sti-bg-surface-hover);
+  }
+
+  .sti-picker-cell-e3a18[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: calc(var(--sti-focus-ring-width) * -1);
+  }
+
+  .sti-picker-cell-e3a18[data-pressed] {
+    background: var(--sti-bg-surface-active);
+  }
+
+  .sti-picker-cell-e3a18[data-current] {
+    background: var(--sti-bg-accent-subtle);
+    color: var(--sti-fg-accent);
+  }
+
+  .sti-picker-empty-88172 {
+    padding: var(--sti-space-4);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    text-align: center;
+  }
+
+  @media (forced-colors: active) {
+    .sti-picker-cell-e3a18[data-focused], .sti-picker-cell-e3a18[data-current] {
+      color: highlighttext;
+      forced-color-adjust: none;
+      background: highlight;
+    }
+  }
+}

package/dist/components/_internal/picker/picker.module.js

@@ -0,0 +1,11 @@
+import './picker.css';
+// src/components/_internal/picker/picker.module.css
+var picker_module_default = {
+	"panel": "sti-picker-panel-bf37c",
+	"grid": "sti-picker-grid-9d00f",
+	"section": "sti-picker-section-408e9",
+	"header": "sti-picker-header-a5c9a",
+	"cell": "sti-picker-cell-e3a18",
+	"empty": "sti-picker-empty-88172"
+};
+export { picker_module_default as default };

package/dist/components/_internal/remote/DependentSelect.d.ts

@@ -0,0 +1,10 @@
+import { ListOption } from "../listbox/options.js";
+import { RemoteComboboxProps } from "./RemoteCombobox.js";
+import { ReactNode } from "react";
+/** Üst değere bağlı seçimlerin (ilçe, mahalle, vergi dairesi) ortak özellikleri. */
+export interface DependentSelectProps extends Omit<RemoteComboboxProps, "label" | "load" | "parent" | "search" | "minQueryLength" | "selectedOption" | "waitingText"> {
+  /** Görünür etiket; verilmezse alanın resmî adı. */
+  label?: ReactNode;
+  /** Seçilen seçeneğin tamamı (ör. posta kodu açıklaması). */
+  onSelectOption?: (option: ListOption | null) => void;
+}