@stisocial/ui 0.1.0 → 0.2.0

package/dist/maps/StoreLocator/StoreLocator.css

@@ -0,0 +1,201 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-StoreLocator-root-6b415 {
+    inline-size: 100%;
+    min-width: 0;
+    font-family: var(--sti-font-text);
+    container-type: inline-size;
+  }
+
+  .sti-StoreLocator-layout-86db6 {
+    gap: var(--sti-space-4);
+    grid-template-columns: minmax(0, 1fr);
+    min-width: 0;
+    display: grid;
+  }
+
+  .sti-StoreLocator-map-186cb {
+    order: 1;
+    min-width: 0;
+  }
+
+  .sti-StoreLocator-panel-a2eb9 {
+    align-content: start;
+    gap: var(--sti-space-3);
+    order: 2;
+    grid-template-columns: minmax(0, 1fr);
+    min-width: 0;
+    display: grid;
+  }
+
+  @container (width >= 46rem) {
+    .sti-StoreLocator-layout-86db6 {
+      grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
+      align-items: start;
+    }
+
+    .sti-StoreLocator-panel-a2eb9 {
+      order: 1;
+    }
+
+    .sti-StoreLocator-map-186cb {
+      order: 2;
+      position: sticky;
+      inset-block-start: var(--sti-space-4);
+    }
+
+    .sti-StoreLocator-list-32c17 {
+      max-block-size: calc(var(--sti-space-32) * 3);
+      overscroll-behavior: contain;
+      padding-inline-end: var(--sti-space-1);
+      overflow-y: auto;
+    }
+  }
+
+  .sti-StoreLocator-tools-71cea {
+    justify-items: start;
+    gap: var(--sti-space-2);
+    display: grid;
+  }
+
+  .sti-StoreLocator-status-4a031 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    margin: 0;
+  }
+
+  .sti-StoreLocator-problem-cec14 {
+    color: var(--sti-fg-danger);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-medium);
+    line-height: var(--sti-line-height-sm);
+    margin: 0;
+  }
+
+  .sti-StoreLocator-list-32c17 {
+    align-content: start;
+    gap: var(--sti-space-2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-StoreLocator-item-8c817 {
+    gap: var(--sti-space-1);
+    min-width: 0;
+    padding: var(--sti-space-3) var(--sti-space-4);
+    border: var(--sti-border-width) solid var(--sti-border);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-surface);
+    transition: border-color var(--sti-duration-fast) var(--sti-ease-snap),
+      background-color var(--sti-duration-fast) var(--sti-ease-snap);
+    display: grid;
+  }
+
+  .sti-StoreLocator-item-8c817[data-selected] {
+    border-color: var(--sti-border-selected);
+    box-shadow: 0 0 0 var(--sti-border-width) var(--sti-border-selected);
+    background: var(--sti-bg-accent-subtle);
+  }
+
+  .sti-StoreLocator-select-d8b70 {
+    justify-content: space-between;
+    align-items: baseline;
+    gap: var(--sti-space-3);
+    min-width: 0;
+    min-height: var(--sti-control-h-md);
+    margin: calc(var(--sti-space-2) * -1) calc(var(--sti-space-2) * -1) 0;
+    padding: var(--sti-space-2);
+    border-radius: var(--sti-radius-md);
+    color: var(--sti-fg);
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    background: none;
+    border: 0;
+    display: flex;
+  }
+
+  @media (hover: hover) {
+    .sti-StoreLocator-select-d8b70[data-hovered] {
+      background: var(--sti-bg-surface-hover);
+    }
+  }
+
+  .sti-StoreLocator-select-d8b70:focus-visible, .sti-StoreLocator-select-d8b70[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-StoreLocator-select-d8b70:focus:not([data-focus-visible]) {
+    outline: none;
+  }
+
+  .sti-StoreLocator-name-896ef {
+    min-width: 0;
+    font-size: var(--sti-font-size-body);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+  }
+
+  .sti-StoreLocator-item-8c817[data-selected] .sti-StoreLocator-name-896ef {
+    font-weight: var(--sti-font-weight-bold);
+  }
+
+  .sti-StoreLocator-km-6edd6 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    font-variant-numeric: tabular-nums;
+    flex: none;
+  }
+
+  .sti-StoreLocator-address-1baac, .sti-StoreLocator-hours-1468c {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-StoreLocator-hours-1468c {
+    align-items: flex-start;
+    gap: var(--sti-space-2);
+    display: flex;
+  }
+
+  .sti-StoreLocator-hoursIcon-2d83d {
+    font-size: var(--sti-icon-sm);
+    flex: none;
+    margin-block-start: var(--sti-space-0-5);
+    display: inline-flex;
+  }
+
+  .sti-StoreLocator-actions-eeaea {
+    align-items: center;
+    gap: var(--sti-space-1) var(--sti-space-4);
+    flex-wrap: wrap;
+    margin-block-start: var(--sti-space-1);
+    display: flex;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-StoreLocator-item-8c817 {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-StoreLocator-item-8c817 {
+      border-color: canvastext;
+    }
+
+    .sti-StoreLocator-item-8c817[data-selected] {
+      box-shadow: 0 0 0 var(--sti-border-width) Highlight;
+      border-color: highlight;
+    }
+  }
+}

package/dist/maps/StoreLocator/StoreLocator.d.ts

@@ -0,0 +1,43 @@
+import { DirectionsProvider } from "../DirectionsLink/DirectionsLink.js";
+import { MapViewProps } from "../MapView/MapView.js";
+export interface Store {
+  /** Kararlı kimlik (liste ve seçim bununla izlenir). */
+  id: string;
+  name: string;
+  /** Açık adres; aramada da kullanılır. */
+  address: string;
+  lat: number;
+  lng: number;
+  /** İl ya da ilçe (aramada kullanılır). */
+  city?: string;
+  /** Türkiye telefon numarası; verilirse arama bağlantısı çizilir. */
+  phone?: string;
+  /** Çalışma saatleri metni ("Hafta içi 09.00–19.00"). */
+  hours?: string;
+}
+export interface StoreLocatorProps {
+  /** Bölgenin adı (zorunlu): "Mağazalarımız". */
+  label: string;
+  stores: readonly Store[];
+  /** Seçili mağaza (denetimli); `null` seçim yok. */
+  selectedId?: string | null;
+  defaultSelectedId?: string | null;
+  onSelectedChange?: (id: string | null) => void;
+  /** Harita izni ve karo kaynağı (`MapView` ile aynı). */
+  mapProps?: Pick<MapViewProps, "isLoaded" | "defaultLoaded" | "onLoadedChange" | "tileUrl" | "attribution">;
+  /** Yol tarifi hizmeti; varsayılan OpenStreetMap. */
+  directionsProvider?: DirectionsProvider;
+  /** "Bana yakın olanları göster" düğmesi; varsayılan açık. */
+  showNearMe?: boolean;
+  /** Harita yüksekliği; varsayılan `md`. */
+  mapSize?: "sm" | "md" | "lg";
+  className?: string;
+  id?: string;
+}
+/**
+ * Mağaza bulucu: arama (Türkçe harf duyarsız), konuma göre sıralama, liste ve harita bir arada.
+ * Listedeki mağazaya basmak haritayı ona götürür; haritadaki işaretçiye basmak listede seçer.
+ * Liste haritanın metin karşılığıdır: harita yüklenmese de bütün işlevler çalışır. Cihaz konumu
+ * yalnız düğmeye basılınca istenir, mağaza uzaklıkları cihazda hesaplanır ve hiçbir yere gönderilmez.
+ */
+export declare function StoreLocator(props: StoreLocatorProps): import("react").JSX.Element;

package/dist/maps/StoreLocator/StoreLocator.js

@@ -0,0 +1,225 @@
+"use client";
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { matchesLoose, template } from "../../text/text.js";
+import { VisuallyHidden } from "../../components/VisuallyHidden/VisuallyHidden.js";
+import { Button as Button$1 } from "../../components/Button/Button.js";
+import { ClockIcon } from "../../icons/generated/ClockIcon.js";
+import { SearchField as SearchField$1 } from "../../components/SearchField/SearchField.js";
+import { EmptyState } from "../../components/EmptyState/EmptyState.js";
+import { CompassIcon } from "../../icons/generated/CompassIcon.js";
+import { MapPinIcon } from "../../icons/generated/MapPinIcon.js";
+import { PhoneLink } from "../../components/PhoneLink/PhoneLink.js";
+import { distanceKm, isLatLng } from "../_internal/geo.js";
+import { DirectionsLink } from "../DirectionsLink/DirectionsLink.js";
+import { useControllable } from "../_internal/useControllable.js";
+import { MapMarker } from "../MapMarker/MapMarker.js";
+import { MapView } from "../MapView/MapView.js";
+import StoreLocator_module_default from "./StoreLocator.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "react-aria-components";
+// src/maps/StoreLocator/StoreLocator.tsx
+const KM_DIGITS = (km) => km < 10 ? 1 : 0;
+/**
+* Mağaza bulucu: arama (Türkçe harf duyarsız), konuma göre sıralama, liste ve harita bir arada.
+* Listedeki mağazaya basmak haritayı ona götürür; haritadaki işaretçiye basmak listede seçer.
+* Liste haritanın metin karşılığıdır: harita yüklenmese de bütün işlevler çalışır. Cihaz konumu
+* yalnız düğmeye basılınca istenir, mağaza uzaklıkları cihazda hesaplanır ve hiçbir yere gönderilmez.
+*/
+function StoreLocator(props) {
+	const { label, stores, mapProps, directionsProvider, showNearMe = true, mapSize = "md", className, id } = props;
+	const messages = useMessages();
+	const format = useFormatter();
+	const [selectedId, setSelectedId] = useControllable(props.selectedId, props.defaultSelectedId ?? null, props.onSelectedChange);
+	const [query, setQuery] = useState("");
+	const [here, setHere] = useState(null);
+	const [locating, setLocating] = useState(false);
+	const [problem, setProblem] = useState(null);
+	const [center, setCenter] = useState(void 0);
+	const [zoom, setZoom] = useState(void 0);
+	const items = useRef(/* @__PURE__ */ new Map());
+	const valid = useMemo(() => stores.filter((s) => isLatLng(s)), [stores]);
+	const rows = useMemo(() => {
+		const found = valid.filter((s) => matchesLoose(`${s.name} ${s.address} ${s.city ?? ""}`, query)).map((store) => ({
+			store,
+			km: here ? distanceKm(here, store) : null
+		}));
+		return here ? found.sort((a, b) => (a.km ?? 0) - (b.km ?? 0)) : found;
+	}, [
+		valid,
+		query,
+		here
+	]);
+	const points = useMemo(() => rows.map((r) => ({
+		lat: r.store.lat,
+		lng: r.store.lng
+	})), [rows]);
+	useEffect(() => {
+		if (!selectedId) return;
+		const li = items.current.get(selectedId);
+		const list = li?.parentElement;
+		if (!li || !list) return;
+		const top = li.offsetTop - list.offsetTop;
+		if (top < list.scrollTop) list.scrollTop = top;
+		else if (top + li.offsetHeight > list.scrollTop + list.clientHeight) list.scrollTop = top + li.offsetHeight - list.clientHeight;
+	}, [selectedId]);
+	const select = (store) => {
+		setSelectedId(store?.id ?? null);
+		if (store) {
+			setCenter({
+				lat: store.lat,
+				lng: store.lng
+			});
+			setZoom((z) => Math.max(z ?? 0, 14));
+		}
+	};
+	const locate = () => {
+		if (!navigator.geolocation) {
+			setProblem(messages.locationUnavailable);
+			return;
+		}
+		setLocating(true);
+		setProblem(null);
+		navigator.geolocation.getCurrentPosition((pos) => {
+			setLocating(false);
+			setHere({
+				lat: pos.coords.latitude,
+				lng: pos.coords.longitude
+			});
+		}, (err) => {
+			setLocating(false);
+			setProblem(err.code === 1 ? messages.locationDenied : messages.locationUnavailable);
+		}, {
+			enableHighAccuracy: false,
+			timeout: 15e3,
+			maximumAge: 6e4
+		});
+	};
+	const count = template(messages.storeCount, { count: rows.length });
+	const distance = (km) => template(messages.storeDistance, { distance: `${format.number(km, { maximumFractionDigits: KM_DIGITS(km) })} km` });
+	return /* @__PURE__ */ jsx("section", {
+		id,
+		className: [StoreLocator_module_default.root, className].filter(Boolean).join(" "),
+		"aria-label": label,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: StoreLocator_module_default.layout,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: StoreLocator_module_default.panel,
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: StoreLocator_module_default.tools,
+						children: [/* @__PURE__ */ jsx(SearchField$1, {
+							label: messages.storeSearch,
+							value: query,
+							onChange: setQuery,
+							onClear: () => setQuery("")
+						}), showNearMe ? /* @__PURE__ */ jsx(Button$1, {
+							size: "sm",
+							variant: "secondary",
+							iconStart: /* @__PURE__ */ jsx(CompassIcon, {}),
+							isPending: locating,
+							onPress: locate,
+							children: messages.storeNearMe
+						}) : null]
+					}),
+					/* @__PURE__ */ jsxs("p", {
+						className: StoreLocator_module_default.status,
+						role: "status",
+						children: [count, here ? ` ${messages.storeSortedByDistance}` : ""]
+					}),
+					problem ? /* @__PURE__ */ jsx("p", {
+						className: StoreLocator_module_default.problem,
+						children: problem
+					}) : null,
+					rows.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
+						size: "sm",
+						icon: /* @__PURE__ */ jsx(MapPinIcon, {}),
+						title: messages.storeNone,
+						titleLevel: 3,
+						description: messages.storeNoneHint
+					}) : /* @__PURE__ */ jsx("ul", {
+						className: StoreLocator_module_default.list,
+						"aria-label": messages.storeList,
+						children: rows.map(({ store, km }) => {
+							const selected = store.id === selectedId;
+							return /* @__PURE__ */ jsxs("li", {
+								ref: (node) => {
+									if (node) items.current.set(store.id, node);
+									else items.current.delete(store.id);
+								},
+								className: StoreLocator_module_default.item,
+								"data-selected": selected ? "" : void 0,
+								children: [
+									/* @__PURE__ */ jsxs(Button, {
+										className: StoreLocator_module_default.select,
+										"aria-pressed": selected,
+										"aria-label": template(messages.storeShowOnMap, { name: store.name }),
+										onPress: () => select(selected ? null : store),
+										children: [/* @__PURE__ */ jsx("span", {
+											className: StoreLocator_module_default.name,
+											children: store.name
+										}), km !== null ? /* @__PURE__ */ jsx("span", {
+											className: StoreLocator_module_default.km,
+											children: distance(km)
+										}) : null]
+									}),
+									/* @__PURE__ */ jsx("p", {
+										className: StoreLocator_module_default.address,
+										children: store.address
+									}),
+									store.hours ? /* @__PURE__ */ jsxs("p", {
+										className: StoreLocator_module_default.hours,
+										children: [/* @__PURE__ */ jsx("span", {
+											className: StoreLocator_module_default.hoursIcon,
+											"aria-hidden": "true",
+											children: /* @__PURE__ */ jsx(ClockIcon, {})
+										}), store.hours]
+									}) : null,
+									/* @__PURE__ */ jsxs("div", {
+										className: StoreLocator_module_default.actions,
+										children: [/* @__PURE__ */ jsxs(DirectionsLink, {
+											destination: {
+												lat: store.lat,
+												lng: store.lng
+											},
+											provider: directionsProvider,
+											size: "sm",
+											children: [messages.storeDirections, /* @__PURE__ */ jsxs(VisuallyHidden, { children: [" ", store.name] })]
+										}), store.phone ? /* @__PURE__ */ jsx(PhoneLink, {
+											value: store.phone,
+											showIcon: true
+										}) : null]
+									})
+								]
+							}, store.id);
+						})
+					})
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				className: StoreLocator_module_default.map,
+				children: /* @__PURE__ */ jsx(MapView, {
+					label,
+					size: mapSize,
+					center,
+					zoom,
+					onCenterChange: setCenter,
+					onZoomChange: setZoom,
+					fit: points,
+					showMarkerList: false,
+					...mapProps,
+					children: rows.map(({ store }) => /* @__PURE__ */ jsx(MapMarker, {
+						lat: store.lat,
+						lng: store.lng,
+						label: store.name,
+						description: store.address,
+						isSelected: store.id === selectedId,
+						onPress: () => select(store.id === selectedId ? null : store),
+						onClose: () => setSelectedId(null),
+						children: store.hours
+					}, store.id))
+				})
+			})]
+		})
+	});
+}
+export { StoreLocator };

package/dist/maps/StoreLocator/StoreLocator.module.js

@@ -0,0 +1,21 @@
+import './StoreLocator.css';
+// src/maps/StoreLocator/StoreLocator.module.css
+var StoreLocator_module_default = {
+	"root": "sti-StoreLocator-root-6b415",
+	"layout": "sti-StoreLocator-layout-86db6",
+	"map": "sti-StoreLocator-map-186cb",
+	"panel": "sti-StoreLocator-panel-a2eb9",
+	"list": "sti-StoreLocator-list-32c17",
+	"tools": "sti-StoreLocator-tools-71cea",
+	"status": "sti-StoreLocator-status-4a031",
+	"problem": "sti-StoreLocator-problem-cec14",
+	"item": "sti-StoreLocator-item-8c817",
+	"select": "sti-StoreLocator-select-d8b70",
+	"name": "sti-StoreLocator-name-896ef",
+	"km": "sti-StoreLocator-km-6edd6",
+	"address": "sti-StoreLocator-address-1baac",
+	"hours": "sti-StoreLocator-hours-1468c",
+	"hoursIcon": "sti-StoreLocator-hoursIcon-2d83d",
+	"actions": "sti-StoreLocator-actions-eeaea"
+};
+export { StoreLocator_module_default as default };

package/dist/maps/StoreLocator/index.d.ts

@@ -0,0 +1,2 @@
+import { Store, StoreLocator, StoreLocatorProps } from "./StoreLocator.js";
+export { Store, StoreLocator, StoreLocatorProps };