@stisocial/ui 0.1.0 → 0.2.1

package/dist/maps/MapMarker/MapMarker.css

@@ -0,0 +1,318 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-MapMarker-root-8f528 {
+    --sti-map-marker-size: var(--sti-space-8);
+    --sti-map-marker-bg: var(--sti-fill-accent);
+    --sti-map-marker-fg: var(--sti-fg-on-accent);
+    --sti-map-marker-ring: var(--sti-bg-surface);
+    --sti-map-marker-scale: 1;
+    z-index: var(--sti-map-z, 0);
+    translate: var(--sti-map-x, 0) var(--sti-map-y, 0);
+    pointer-events: auto;
+    width: 0;
+    height: 0;
+    font-family: var(--sti-font-text);
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+  }
+
+  .sti-MapMarker-root-8f528[data-size="sm"] {
+    --sti-map-marker-size: var(--sti-space-6);
+  }
+
+  .sti-MapMarker-root-8f528[data-size="lg"] {
+    --sti-map-marker-size: var(--sti-space-10);
+  }
+
+  @media (pointer: coarse) {
+    .sti-MapMarker-root-8f528[data-size="sm"], .sti-MapMarker-root-8f528[data-size="md"] {
+      --sti-map-marker-size: var(--sti-control-h-md);
+    }
+  }
+
+  .sti-MapMarker-root-8f528[data-tone="neutral"] {
+    --sti-map-marker-bg: var(--sti-fill-neutral);
+    --sti-map-marker-fg: var(--sti-fg-on-neutral);
+  }
+
+  .sti-MapMarker-root-8f528[data-tone="success"] {
+    --sti-map-marker-bg: var(--sti-fill-success);
+    --sti-map-marker-fg: var(--sti-fg-on-success);
+  }
+
+  .sti-MapMarker-root-8f528[data-tone="warning"] {
+    --sti-map-marker-bg: var(--sti-fill-warning);
+    --sti-map-marker-fg: var(--sti-fg-on-warning);
+  }
+
+  .sti-MapMarker-root-8f528[data-tone="danger"] {
+    --sti-map-marker-bg: var(--sti-fill-danger);
+    --sti-map-marker-fg: var(--sti-fg-on-danger);
+  }
+
+  .sti-MapMarker-root-8f528[data-tone="info"] {
+    --sti-map-marker-bg: var(--sti-fill-info);
+    --sti-map-marker-fg: var(--sti-fg-on-info);
+  }
+
+  .sti-MapMarker-root-8f528[data-selected] {
+    --sti-map-marker-scale: 1.18;
+  }
+
+  .sti-MapMarker-pin-a5aea {
+    width: var(--sti-map-marker-size);
+    height: var(--sti-map-marker-size);
+    border: var(--sti-border-width-strong) solid var(--sti-map-marker-ring);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-map-marker-bg);
+    box-shadow: var(--sti-shadow-sm);
+    color: var(--sti-map-marker-fg);
+    font-size: calc(var(--sti-map-marker-size) / 2);
+    font-weight: var(--sti-font-weight-bold);
+    font-variant-numeric: tabular-nums;
+    transform: scale(var(--sti-map-marker-scale));
+    transform-origin: 50% calc(100% + var(--sti-map-marker-size) / 6);
+    cursor: default;
+    -webkit-tap-highlight-color: transparent;
+    transition: transform var(--sti-duration-fast) var(--sti-ease-snap),
+      box-shadow var(--sti-duration-fast) var(--sti-ease-snap);
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    line-height: 1;
+    display: inline-flex;
+    position: absolute;
+    inset-block-end: calc(var(--sti-map-marker-size) / 6);
+    inset-inline-start: calc(var(--sti-map-marker-size) / -2);
+  }
+
+  button.sti-MapMarker-pin-a5aea {
+    cursor: pointer;
+  }
+
+  .sti-MapMarker-pin-a5aea:after {
+    content: "";
+    width: calc(var(--sti-map-marker-size) / 3);
+    height: calc(var(--sti-map-marker-size) / 3);
+    border-inline-end: var(--sti-border-width-strong) solid var(--sti-map-marker-ring);
+    border-block-end: var(--sti-border-width-strong) solid var(--sti-map-marker-ring);
+    background: var(--sti-map-marker-bg);
+    z-index: -1;
+    position: absolute;
+    inset-block-start: calc(100% - var(--sti-map-marker-size) / 5);
+    inset-inline-start: 50%;
+    translate: -50%;
+    rotate: 45deg;
+  }
+
+  .sti-MapMarker-pin-a5aea:before {
+    content: "";
+    inset: calc(var(--sti-space-1) * -1);
+    position: absolute;
+  }
+
+  .sti-MapMarker-root-8f528[data-selected] .sti-MapMarker-pin-a5aea {
+    box-shadow: 0 0 0 var(--sti-border-width-strong) var(--sti-border-selected),
+      var(--sti-shadow-md);
+  }
+
+  @media (hover: hover) {
+    .sti-MapMarker-pin-a5aea[data-hovered]:not([data-disabled]) {
+      --sti-map-marker-scale: 1.12;
+    }
+  }
+
+  .sti-MapMarker-pin-a5aea[data-pressed]:not([data-disabled]) {
+    --sti-map-marker-scale: .96;
+  }
+
+  .sti-MapMarker-pin-a5aea:focus-visible, .sti-MapMarker-pin-a5aea[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-MapMarker-pin-a5aea:focus:not([data-focus-visible]) {
+    outline: none;
+  }
+
+  .sti-MapMarker-pin-a5aea[data-disabled] {
+    opacity: var(--sti-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .sti-MapMarker-glyph-f45b4 {
+    font-size: calc(var(--sti-map-marker-size) / 2);
+    display: inline-flex;
+  }
+
+  .sti-MapMarker-badge-a07b9 {
+    min-width: 0;
+  }
+
+  .sti-MapMarker-popup-9beb4 {
+    gap: var(--sti-space-1);
+    box-sizing: border-box;
+    inline-size: max-content;
+    max-inline-size: min(calc(var(--sti-space-16) * 4), calc(100cqw - var(--sti-space-8)));
+    padding: var(--sti-space-3);
+    border: var(--sti-border-width) solid var(--sti-border);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-surface);
+    box-shadow: var(--sti-shadow-lg);
+    color: var(--sti-fg);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    text-align: start;
+    display: grid;
+    position: absolute;
+    inset-block-end: calc(var(--sti-map-marker-size) * 1.35 + var(--sti-space-2));
+    inset-inline-start: 0;
+    translate: -50%;
+  }
+
+  .sti-MapMarker-root-8f528[data-placement="below"] .sti-MapMarker-popup-9beb4 {
+    inset-block-start: calc(var(--sti-space-2) * 1);
+    inset-block-end: auto;
+  }
+
+  .sti-MapMarker-popupHeader-3dddd {
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: var(--sti-space-2);
+    min-width: 0;
+    display: flex;
+  }
+
+  .sti-MapMarker-popupTitle-ec992 {
+    min-width: 0;
+    font-weight: var(--sti-font-weight-semibold);
+    overflow-wrap: anywhere;
+  }
+
+  .sti-MapMarker-popupDescription-a9395 {
+    color: var(--sti-fg-muted);
+    overflow-wrap: anywhere;
+  }
+
+  .sti-MapMarker-popupBody-dcf30 {
+    overflow-wrap: anywhere;
+    min-width: 0;
+  }
+
+  .sti-MapMarker-close-cd711 {
+    width: var(--sti-space-6);
+    height: var(--sti-space-6);
+    margin: calc(var(--sti-space-1) * -1);
+    border-radius: var(--sti-radius-pill);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-icon-sm);
+    cursor: pointer;
+    background: none;
+    border: 0;
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    display: inline-flex;
+  }
+
+  @media (pointer: coarse) {
+    .sti-MapMarker-close-cd711 {
+      width: var(--sti-control-h-md);
+      height: var(--sti-control-h-md);
+      margin: calc((var(--sti-space-6) - var(--sti-control-h-md)) / 2);
+    }
+  }
+
+  @media (hover: hover) {
+    .sti-MapMarker-close-cd711[data-hovered] {
+      background: var(--sti-bg-surface-hover);
+      color: var(--sti-fg);
+    }
+  }
+
+  .sti-MapMarker-close-cd711:focus-visible, .sti-MapMarker-close-cd711[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-MapMarker-close-cd711:focus:not([data-focus-visible]) {
+    outline: none;
+  }
+
+  .sti-MapMarker-item-1ee43 {
+    align-items: flex-start;
+    gap: var(--sti-space-3);
+    min-width: 0;
+    list-style: none;
+    display: flex;
+  }
+
+  .sti-MapMarker-itemIcon-f12bc {
+    color: var(--sti-fg-accent);
+    font-size: var(--sti-icon-md);
+    flex: none;
+    margin-block-start: var(--sti-space-0-5);
+    display: inline-flex;
+  }
+
+  .sti-MapMarker-itemText-335a2 {
+    gap: var(--sti-space-0-5);
+    text-align: start;
+    min-width: 0;
+    display: grid;
+  }
+
+  .sti-MapMarker-itemLabel-bbd99 {
+    color: var(--sti-fg);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+  }
+
+  .sti-MapMarker-itemDescription-718bb {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-MapMarker-pin-a5aea {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-MapMarker-pin-a5aea {
+      color: buttontext;
+      forced-color-adjust: none;
+      background: buttonface;
+      border-color: buttontext;
+    }
+
+    .sti-MapMarker-pin-a5aea:after {
+      background: buttonface;
+      border-color: buttontext;
+    }
+
+    .sti-MapMarker-root-8f528[data-selected] .sti-MapMarker-pin-a5aea, .sti-MapMarker-root-8f528[data-selected] .sti-MapMarker-pin-a5aea:after {
+      color: highlighttext;
+      background: highlight;
+    }
+
+    .sti-MapMarker-popup-9beb4 {
+      color: canvastext;
+      background: canvas;
+      border-color: canvastext;
+    }
+
+    .sti-MapMarker-pin-a5aea[data-disabled] {
+      color: graytext;
+      opacity: 1;
+      border-color: graytext;
+    }
+  }
+}

package/dist/maps/MapMarker/MapMarker.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode, Ref } from "react";
+export type MapMarkerTone = "neutral" | "accent" | "success" | "warning" | "danger" | "info";
+export type MapMarkerSize = "sm" | "md" | "lg";
+export interface MapMarkerProps {
+  lat: number;
+  lng: number;
+  /** Konumun adı (zorunlu): düğmenin erişilebilir adı, açılan kartın başlığı ve metin listesi. */
+  label: string;
+  /** Kısa açıklama (adres, çalışma saati): açılan kartta ve harita yüklenmeden önceki listede. */
+  description?: ReactNode;
+  /** Açılan karta eklenen içerik (bağlantı, eylem). */
+  children?: ReactNode;
+  /** İğnenin içindeki kısa metin ("3", "A"); verilmezse konum ikonu. Anlamı `label` taşır. */
+  badge?: string;
+  /** Anlam rengi; varsayılan `accent`. Renk tek başına anlam taşımaz: ad ve metin her zaman vardır. */
+  tone?: MapMarkerTone;
+  /** İğne boyu: `sm` 24, `md` 32, `lg` 40 piksel (dokunmatikte en az 44). */
+  size?: MapMarkerSize;
+  /** Seçili: iğne büyür, halkalanır, öne çıkar; açıklama ya da içerik varsa kart açılır. */
+  isSelected?: boolean;
+  /** Basılınca (seçmek ya da kartı açıp kapamak için). Verilmezse iğne etkileşimsizdir. */
+  onPress?: () => void;
+  /** Kart açıkken kapatma düğmesine ya da Escape'e basılınca. */
+  onClose?: () => void;
+  isDisabled?: boolean;
+  className?: string;
+  id?: string;
+  ref?: Ref<HTMLDivElement>;
+}
+/**
+ * Harita işaretçisi: `MapView` içinde bir konuma iğne koyar. Harita yüklenmeden önce adı ve
+ * açıklamasıyla bir liste öğesi olarak çizilir (haritanın metin karşılığı). Görünümün dışındaki
+ * işaretçi (seçili değilse) çizilmez ve odak almaz.
+ */
+export declare function MapMarker({ lat, lng, label, description, children, badge, tone, size, isSelected, onPress, onClose, isDisabled, className, id, ref }: MapMarkerProps): import("react").JSX.Element | null;

package/dist/maps/MapMarker/MapMarker.js

@@ -0,0 +1,142 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { CloseIcon } from "../../icons/generated/CloseIcon.js";
+import { MapPinIcon } from "../../icons/generated/MapPinIcon.js";
+import { isLatLng } from "../_internal/geo.js";
+import { useMapContext } from "../_internal/mapContext.js";
+import MapMarker_module_default from "./MapMarker.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useLayoutEffect, useRef } from "react";
+import { Button } from "react-aria-components";
+// src/maps/MapMarker/MapMarker.tsx
+/** Görünümün dışında bu kadar piksel uzaklıktaki işaretçiler hâlâ çizilir (kenarda kesilmesin). */
+const MARGIN = 48;
+/** Kartın üstte açılması için iğnenin üstünde gereken boşluk (piksel). */
+const POPUP_ROOM = 170;
+const join = (...names) => names.filter(Boolean).join(" ");
+/**
+* Harita işaretçisi: `MapView` içinde bir konuma iğne koyar. Harita yüklenmeden önce adı ve
+* açıklamasıyla bir liste öğesi olarak çizilir (haritanın metin karşılığı). Görünümün dışındaki
+* işaretçi (seçili değilse) çizilmez ve odak almaz.
+*/
+function MapMarker({ lat, lng, label, description, children, badge, tone = "accent", size = "md", isSelected = false, onPress, onClose, isDisabled, className, id, ref }) {
+	const messages = useMessages();
+	const ctx = useMapContext();
+	const popupId = useId();
+	const wrapper = useRef(null);
+	const valid = isLatLng({
+		lat,
+		lng
+	});
+	const pt = ctx?.mode === "map" && valid ? ctx.toPixel({
+		lat,
+		lng
+	}) : null;
+	const inside = ctx?.mode === "map" && pt !== null && pt.x > -48 && pt.y > -48 && pt.x < ctx.width + MARGIN && pt.y < ctx.height + MARGIN;
+	const x = pt?.x;
+	const y = pt?.y;
+	useLayoutEffect(() => {
+		const el = wrapper.current;
+		if (!el || x === void 0 || y === void 0) return;
+		el.style.setProperty("--sti-map-x", `${Math.round(x * 10) / 10}px`);
+		el.style.setProperty("--sti-map-y", `${Math.round(y * 10) / 10}px`);
+		el.style.setProperty("--sti-map-z", String(Math.round(y) + (isSelected ? 1e5 : 0)));
+	});
+	if (!valid) return null;
+	if (ctx?.mode !== "map") return /* @__PURE__ */ jsxs("li", {
+		id,
+		className: join(MapMarker_module_default.item, className),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: MapMarker_module_default.itemIcon,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(MapPinIcon, {})
+		}), /* @__PURE__ */ jsxs("span", {
+			className: MapMarker_module_default.itemText,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: MapMarker_module_default.itemLabel,
+				children: label
+			}), description ? /* @__PURE__ */ jsx("span", {
+				className: MapMarker_module_default.itemDescription,
+				children: description
+			}) : null]
+		})]
+	});
+	if (!inside && !isSelected) return null;
+	const name = badge ? `${badge}, ${label}` : label;
+	const expandable = Boolean(description || children);
+	const hasPopup = isSelected && expandable;
+	const pin = badge ? /* @__PURE__ */ jsx("span", {
+		className: MapMarker_module_default.badge,
+		"aria-hidden": "true",
+		children: badge
+	}) : /* @__PURE__ */ jsx("span", {
+		className: MapMarker_module_default.glyph,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx(MapPinIcon, {})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		ref: (node) => {
+			wrapper.current = node;
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		},
+		className: join(MapMarker_module_default.root, className),
+		"data-tone": tone,
+		"data-size": size,
+		"data-selected": isSelected ? "" : void 0,
+		"data-placement": hasPopup && y !== void 0 && y < POPUP_ROOM ? "below" : void 0,
+		onPointerDown: (e) => e.stopPropagation(),
+		onDoubleClick: (e) => e.stopPropagation(),
+		onKeyDown: (e) => {
+			e.stopPropagation();
+			if (e.key === "Escape" && hasPopup && onClose) {
+				e.preventDefault();
+				onClose();
+			}
+		},
+		children: [onPress ? /* @__PURE__ */ jsx(Button, {
+			className: MapMarker_module_default.pin,
+			"aria-label": name,
+			"aria-expanded": expandable ? isSelected : void 0,
+			"aria-pressed": expandable ? void 0 : isSelected,
+			"aria-controls": hasPopup ? popupId : void 0,
+			isDisabled,
+			onPress,
+			children: pin
+		}) : /* @__PURE__ */ jsx("span", {
+			className: MapMarker_module_default.pin,
+			role: "img",
+			"aria-label": name,
+			children: pin
+		}), hasPopup ? /* @__PURE__ */ jsxs("div", {
+			id: popupId,
+			className: MapMarker_module_default.popup,
+			role: "group",
+			"aria-label": label,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: MapMarker_module_default.popupHeader,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: MapMarker_module_default.popupTitle,
+						children: label
+					}), onClose ? /* @__PURE__ */ jsx(Button, {
+						className: MapMarker_module_default.close,
+						"aria-label": messages.close,
+						onPress: onClose,
+						children: /* @__PURE__ */ jsx(CloseIcon, {})
+					}) : null]
+				}),
+				description ? /* @__PURE__ */ jsx("div", {
+					className: MapMarker_module_default.popupDescription,
+					children: description
+				}) : null,
+				children ? /* @__PURE__ */ jsx("div", {
+					className: MapMarker_module_default.popupBody,
+					children
+				}) : null
+			]
+		}) : null]
+	});
+}
+export { MapMarker };

package/dist/maps/MapMarker/MapMarker.module.js

@@ -0,0 +1,20 @@
+import './MapMarker.css';
+// src/maps/MapMarker/MapMarker.module.css
+var MapMarker_module_default = {
+	"root": "sti-MapMarker-root-8f528",
+	"pin": "sti-MapMarker-pin-a5aea",
+	"glyph": "sti-MapMarker-glyph-f45b4",
+	"badge": "sti-MapMarker-badge-a07b9",
+	"popup": "sti-MapMarker-popup-9beb4",
+	"popupHeader": "sti-MapMarker-popupHeader-3dddd",
+	"popupTitle": "sti-MapMarker-popupTitle-ec992",
+	"popupDescription": "sti-MapMarker-popupDescription-a9395",
+	"popupBody": "sti-MapMarker-popupBody-dcf30",
+	"close": "sti-MapMarker-close-cd711",
+	"item": "sti-MapMarker-item-1ee43",
+	"itemIcon": "sti-MapMarker-itemIcon-f12bc",
+	"itemText": "sti-MapMarker-itemText-335a2",
+	"itemLabel": "sti-MapMarker-itemLabel-bbd99",
+	"itemDescription": "sti-MapMarker-itemDescription-718bb"
+};
+export { MapMarker_module_default as default };

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

@@ -0,0 +1,2 @@
+import { MapMarker, MapMarkerProps, MapMarkerSize, MapMarkerTone } from "./MapMarker.js";
+export { MapMarker, MapMarkerProps, MapMarkerSize, MapMarkerTone };