@stisocial/ui 0.0.0-stage → 0.1.0

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;
+}

package/dist/components/_internal/remote/DependentSelect.js

@@ -0,0 +1,35 @@
+"use client";
+import { RemoteCombobox } from "./RemoteCombobox.js";
+import { createElement, useEffect, useRef } from "react";
+// src/components/_internal/remote/DependentSelect.tsx
+/**
+* Üst değer değişince seçimi sıfırlayan bağımlı seçim (iç; dışa açılmaz). Alan, üst değer her
+* değiştiğinde yeniden kurulur: eski ilin ilçesi yeni ilde seçili kalmaz; uygulamaya `null`
+* bildirilir.
+*/
+function DependentSelect({ parent, load, defaultLabel, waitingText, label, onChange, onSelectOption, defaultValue, ...rest }) {
+	const previous = useRef(parent);
+	const initialParent = useRef(parent);
+	useEffect(() => {
+		if (previous.current === parent) return;
+		previous.current = parent;
+		onChange?.(null);
+		onSelectOption?.(null);
+	}, [
+		parent,
+		onChange,
+		onSelectOption
+	]);
+	return /* @__PURE__ */ createElement(RemoteCombobox, {
+		...rest,
+		key: parent ?? "",
+		defaultValue: parent === initialParent.current ? defaultValue : void 0,
+		label: label ?? defaultLabel,
+		load: rest.items ? void 0 : load,
+		parent: parent ?? null,
+		waitingText,
+		onChange,
+		onSelectOption
+	});
+}
+export { DependentSelect };

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

@@ -0,0 +1,28 @@
+import { ListItem, ListOption } from "../listbox/options.js";
+import { ComboboxProps } from "../../Combobox/Combobox.js";
+import { ReactNode } from "react";
+/** Bir üst değere (il, ilçe) bağlı listeyi getirir; istek iptal edilebilir olmalıdır. */
+export type OptionLoader = (parent: string, signal: AbortSignal) => Promise<readonly ListOption[]>;
+/** Sunucuda arar (binlerce kayıtlı listeler: NACE, vergi dairesi). */
+export type OptionSearch = (query: string, signal: AbortSignal) => Promise<readonly ListOption[]>;
+export interface RemoteComboboxProps extends Omit<ComboboxProps, "items" | "filter" | "isLoading" | "emptyText" | "label"> {
+  label: ReactNode;
+  /** Sabit liste (veri uygulamada hazırsa). */
+  items?: readonly ListItem[];
+  /** Üst değere bağlı liste: `parent` değişince yeniden getirilir. */
+  load?: OptionLoader;
+  /** Üst değer; `null` ya da boşken alan kapalıdır ve `waitingText` yazılır (verilmezse üst değer yoktur). */
+  parent?: string | null;
+  /** Üst değer seçilmemişken yardım metni ("Önce il seçin."). */
+  waitingText?: string;
+  /** Sunucuda arama. Verilirse bileşen kendisi süzmez. */
+  search?: OptionSearch;
+  /** Aramanın başladığı en az karakter. */
+  minQueryLength?: number;
+  /** Arama kipinde başlangıçtaki seçili seçenek (adının yazılabilmesi için). */
+  selectedOption?: ListOption;
+  /** Seçilen seçeneğin tamamı (ör. mahallenin posta kodu için). */
+  onSelectOption?: (option: ListOption | null) => void;
+  /** Uygulamanın istek sayısını sınırlaması için arama gecikmesi (ms). */
+  debounce?: number;
+}

package/dist/components/_internal/remote/RemoteCombobox.js

@@ -0,0 +1,129 @@
+"use client";
+import { useMessages } from "../../../provider/UIProvider.js";
+import { template } from "../../../text/text.js";
+import { Combobox } from "../../Combobox/Combobox.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+// src/components/_internal/remote/RemoteCombobox.tsx
+const flat = (items) => items.flatMap((i) => "options" in i ? i.options : [i]);
+/**
+* Uzaktan beslenen Combobox (iç; dışa açılmaz): üst değere bağlı liste (ilçe, mahalle) ya da
+* sunucuda arama (NACE). Yüklenirken gösterge, hata ve "en az N karakter" durumları listede
+* yazılır; eski istek yenisi başlayınca iptal edilir, sonuçlar bileşen ömrünce önbellekte tutulur.
+* Hata sonrası kişi yeniden yazınca istek yinelenir.
+*/
+function RemoteCombobox({ items: staticItems, load, parent, waitingText, search, minQueryLength = 2, selectedOption, onSelectOption, debounce = 250, description, isDisabled, onChange, onInputChange, value, defaultValue, ...rest }) {
+	const t = useMessages();
+	const [loaded, setLoaded] = useState(null);
+	const [status, setStatus] = useState("idle");
+	const [attempt, setAttempt] = useState(0);
+	const [query, setQuery] = useState("");
+	const [picked, setPicked] = useState(selectedOption);
+	const cache = useRef(/* @__PURE__ */ new Map());
+	const loadRef = useRef(load);
+	const searchRef = useRef(search);
+	loadRef.current = load;
+	searchRef.current = search;
+	const hasLoad = load !== void 0;
+	const hasSearch = search !== void 0;
+	const waiting = parent === null || parent === "";
+	useEffect(() => {
+		const fn = loadRef.current;
+		if (!fn || waiting) {
+			setLoaded(null);
+			return;
+		}
+		const key = `p:${parent}`;
+		const hit = cache.current.get(key);
+		if (hit) {
+			setLoaded(hit);
+			setStatus("idle");
+			return;
+		}
+		const ctrl = new AbortController();
+		setStatus("loading");
+		setLoaded(null);
+		fn(parent, ctrl.signal).then((list) => {
+			cache.current.set(key, list);
+			setLoaded(list);
+			setStatus("idle");
+		}, () => {
+			if (!ctrl.signal.aborted) setStatus("error");
+		});
+		return () => ctrl.abort();
+	}, [
+		hasLoad,
+		parent,
+		waiting,
+		attempt
+	]);
+	const short = hasSearch && query.trim().length < minQueryLength;
+	useEffect(() => {
+		const fn = searchRef.current;
+		if (!fn || short) return;
+		const key = `q:${query.trim().toLocaleLowerCase("tr-TR")}`;
+		const hit = cache.current.get(key);
+		if (hit) {
+			setLoaded(hit);
+			setStatus("idle");
+			return;
+		}
+		const ctrl = new AbortController();
+		const timer = setTimeout(() => {
+			setStatus("loading");
+			fn(query.trim(), ctrl.signal).then((list) => {
+				cache.current.set(key, list);
+				setLoaded(list);
+				setStatus("idle");
+			}, () => {
+				if (!ctrl.signal.aborted) setStatus("error");
+			});
+		}, debounce);
+		return () => {
+			clearTimeout(timer);
+			ctrl.abort();
+		};
+	}, [
+		hasSearch,
+		query,
+		short,
+		debounce,
+		attempt
+	]);
+	const items = useMemo(() => {
+		if (staticItems) return staticItems;
+		const list = hasSearch && short ? [] : loaded ?? [];
+		if (hasSearch && picked && !list.some((o) => o.id === picked.id)) return [picked, ...list];
+		return list;
+	}, [
+		staticItems,
+		loaded,
+		hasSearch,
+		short,
+		picked
+	]);
+	const emptyText = status === "error" ? t.remoteError : hasSearch && short ? template(t.remoteMinQuery, { count: minQueryLength }) : void 0;
+	return /* @__PURE__ */ jsx(Combobox, {
+		...rest,
+		value,
+		defaultValue,
+		items,
+		filter: !hasSearch,
+		isLoading: status === "loading",
+		emptyText,
+		isDisabled: isDisabled || waiting,
+		description: waiting ? waitingText ?? description : description,
+		onInputChange: (text) => {
+			if (status === "error") setAttempt((n) => n + 1);
+			if (hasSearch && text !== picked?.label) setQuery(text);
+			onInputChange?.(text);
+		},
+		onChange: (key) => {
+			const option = key ? flat(items).find((o) => o.id === key) : void 0;
+			setPicked(option);
+			onSelectOption?.(option ?? null);
+			onChange?.(key);
+		}
+	});
+}
+export { RemoteCombobox };

package/dist/components/_internal/slider/SliderShell.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+export interface SliderBaseProps {
+  label: ReactNode;
+  description?: ReactNode;
+  minValue?: number;
+  maxValue?: number;
+  /** Adım (oklar). Varsayılan 1. */
+  step?: number;
+  /** Değer biçimi (para, yüzde, birim); ayraçlar dile göre. */
+  formatOptions?: Intl.NumberFormatOptions;
+  /** Çubuğun altında en az ve en çok değeri yazar. */
+  showMinMax?: boolean;
+  /** Etiketin sağındaki değer metnini gizler. */
+  hideValue?: boolean;
+  size?: "sm" | "md" | "lg";
+  name?: string;
+  isDisabled?: boolean;
+  className?: string;
+  id?: string;
+}