@stisocial/ui 0.1.0 → 0.2.1

package/dist/maps/MapView/MapView.css

@@ -0,0 +1,268 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-MapView-root-2c464 {
+    --sti-map-h: calc(var(--sti-space-32) * 3);
+    --sti-map-radius: var(--sti-radius-xl);
+    --sti-map-bg: var(--sti-bg-subtle);
+    --sti-map-border: var(--sti-border);
+    box-sizing: border-box;
+    border: var(--sti-border-width) solid var(--sti-map-border);
+    border-radius: var(--sti-map-radius);
+    background: var(--sti-map-bg);
+    inline-size: 100%;
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    isolation: isolate;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .sti-MapView-root-2c464[data-size="sm"] {
+    --sti-map-h: calc(var(--sti-space-32) * 2);
+  }
+
+  .sti-MapView-root-2c464[data-size="lg"] {
+    --sti-map-h: calc(var(--sti-space-32) * 4);
+  }
+
+  .sti-MapView-viewport-32f46 {
+    box-sizing: border-box;
+    block-size: var(--sti-map-h);
+    background: var(--sti-map-bg);
+    cursor: grab;
+    touch-action: none;
+    -webkit-user-select: none;
+    user-select: none;
+    direction: ltr;
+    outline: none;
+    max-block-size: 80dvh;
+    position: relative;
+    overflow: hidden;
+    container-type: inline-size;
+  }
+
+  .sti-MapView-root-2c464[data-dragging] .sti-MapView-viewport-32f46 {
+    cursor: grabbing;
+  }
+
+  .sti-MapView-viewport-32f46:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: calc(var(--sti-focus-ring-width) * -1);
+  }
+
+  .sti-MapView-tiles-41d91 {
+    grid-template-columns: repeat(var(--sti-map-cols, 1), var(--sti-map-tile, 0));
+    inline-size: max-content;
+    translate: var(--sti-map-tiles-x, 0) var(--sti-map-tiles-y, 0);
+    pointer-events: none;
+    display: grid;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+  }
+
+  .sti-MapView-tile-09977 {
+    inline-size: var(--sti-map-tile, 0);
+    block-size: var(--sti-map-tile, 0);
+    background: var(--sti-bg-surface-hover);
+    -webkit-user-drag: none;
+    max-inline-size: none;
+    display: block;
+  }
+
+  .sti-MapView-markers-dba92 {
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
+  }
+
+  .sti-MapView-crosshair-5acc9 {
+    inline-size: var(--sti-space-6);
+    block-size: var(--sti-space-6);
+    border: var(--sti-border-width-strong) solid var(--sti-fg);
+    border-radius: var(--sti-radius-pill);
+    box-shadow: 0 0 0 var(--sti-border-width-strong) var(--sti-bg-surface);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--sti-duration-fast) var(--sti-ease-out);
+    background: none;
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    translate: -50% -50%;
+  }
+
+  .sti-MapView-viewport-32f46[data-crosshair="always"] .sti-MapView-crosshair-5acc9, .sti-MapView-viewport-32f46[data-crosshair="focus"]:focus-visible .sti-MapView-crosshair-5acc9 {
+    opacity: 1;
+  }
+
+  .sti-MapView-controls-f0b39 {
+    z-index: var(--sti-z-raised);
+    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-sm);
+    display: grid;
+    position: absolute;
+    inset-block-start: var(--sti-space-2);
+    inset-inline-end: var(--sti-space-2);
+    overflow: hidden;
+  }
+
+  .sti-MapView-attribution-87cce {
+    z-index: var(--sti-z-raised);
+    max-inline-size: calc(100% - var(--sti-space-4));
+    padding: var(--sti-space-0-5) var(--sti-space-2);
+    border-radius: var(--sti-radius-md);
+    background: var(--sti-bg-surface);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+    position: absolute;
+    inset-block-end: var(--sti-space-2);
+    inset-inline-end: var(--sti-space-2);
+  }
+
+  .sti-MapView-failed-982bd {
+    inset-block-start: 50%;
+    inset-inline: var(--sti-space-4);
+    z-index: var(--sti-z-raised);
+    justify-items: center;
+    gap: var(--sti-space-3);
+    padding: var(--sti-space-4);
+    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-md);
+    text-align: center;
+    display: grid;
+    position: absolute;
+    translate: 0 -50%;
+  }
+
+  .sti-MapView-failedText-a25f1 {
+    color: var(--sti-fg);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    margin: 0;
+  }
+
+  .sti-MapView-live-ccdfb {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+    block-size: 1px;
+    inline-size: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  .sti-MapView-consent-892ea {
+    box-sizing: border-box;
+    min-block-size: var(--sti-map-h);
+    padding: var(--sti-space-4);
+    background-color: var(--sti-map-bg);
+    background-image: linear-gradient(var(--sti-border-subtle) 1px, transparent 1px),
+      linear-gradient(90deg, var(--sti-border-subtle) 1px, transparent 1px);
+    background-size: var(--sti-space-8) var(--sti-space-8);
+    background-position: center;
+    place-items: center;
+    display: grid;
+  }
+
+  .sti-MapView-consentCard-8e1c2 {
+    justify-items: center;
+    gap: var(--sti-space-3);
+    box-sizing: border-box;
+    inline-size: 100%;
+    max-inline-size: calc(var(--sti-space-16) * 6);
+    padding: var(--sti-space-6) var(--sti-space-5);
+    border: var(--sti-border-width) solid var(--sti-border);
+    border-radius: var(--sti-radius-xl);
+    background: var(--sti-bg-surface);
+    box-shadow: var(--sti-shadow-md);
+    text-align: center;
+    display: grid;
+  }
+
+  .sti-MapView-consentIcon-44a5c {
+    inline-size: var(--sti-space-12);
+    block-size: var(--sti-space-12);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-accent-subtle);
+    color: var(--sti-fg-accent);
+    font-size: var(--sti-icon-lg);
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .sti-MapView-consentTitle-1514e {
+    color: var(--sti-fg);
+    font-size: var(--sti-font-size-lg);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-lg);
+    text-wrap: balance;
+    margin: 0;
+  }
+
+  .sti-MapView-consentText-1b1db {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    text-wrap: pretty;
+    margin: 0;
+  }
+
+  .sti-MapView-consentActions-e6536 {
+    justify-content: center;
+    align-items: center;
+    gap: var(--sti-space-2) var(--sti-space-4);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-MapView-list-86b6c {
+    gap: var(--sti-space-3);
+    inline-size: 100%;
+    margin: var(--sti-space-2) 0 0;
+    padding: var(--sti-space-4) 0 0;
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    list-style: none;
+    display: grid;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-MapView-crosshair-5acc9 {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-MapView-root-2c464 {
+      border-color: canvastext;
+    }
+
+    .sti-MapView-controls-f0b39, .sti-MapView-attribution-87cce, .sti-MapView-failed-982bd, .sti-MapView-consentCard-8e1c2 {
+      color: canvastext;
+      background: canvas;
+      border-color: canvastext;
+    }
+
+    .sti-MapView-crosshair-5acc9 {
+      box-shadow: none;
+      border-color: canvastext;
+    }
+
+    .sti-MapView-consent-892ea {
+      background-image: none;
+    }
+
+    .sti-MapView-viewport-32f46:focus-visible {
+      outline-color: highlight;
+    }
+  }
+}

package/dist/maps/MapView/MapView.d.ts

@@ -0,0 +1,71 @@
+import { LatLng } from "../_internal/geo.js";
+import { ReactNode, Ref } from "react";
+export type MapViewSize = "sm" | "md" | "lg";
+/** Varsayılan karo kaynağı: OpenStreetMap standart katmanı. */
+export declare const OSM_TILE_URL = "https://tile.openstreetmap.org/{z}/{x}/{y}.png";
+export interface MapViewProps {
+  /** Haritanın adı (zorunlu): "Mağaza konumları", "Ofis adresi". */
+  label: string;
+  /** Görünümün merkezi (denetimli). */
+  center?: LatLng;
+  defaultCenter?: LatLng;
+  onCenterChange?: (center: LatLng) => void;
+  /** Yakınlaştırma düzeyi (tam sayı); denetimli. */
+  zoom?: number;
+  defaultZoom?: number;
+  onZoomChange?: (zoom: number) => void;
+  minZoom?: number;
+  maxZoom?: number;
+  /**
+   * Harita yüklendi mi (denetimli). Varsayılan `false`: izin verilmeden üçüncü tarafa hiçbir istek
+   * gitmez; kişi "Haritayı yükle" düğmesine basınca yüklenir. Uygulama izni saklamak istiyorsa
+   * `isLoaded` ile yükler (ör. çerez tercihine göre).
+   */
+  isLoaded?: boolean;
+  defaultLoaded?: boolean;
+  onLoadedChange?: (loaded: boolean) => void;
+  /** Bu noktaların hepsini görünüme sığdırır; liste değişince görünüm yeniden sığdırılır. */
+  fit?: readonly LatLng[];
+  /**
+   * Karo adresi: `{z}`, `{x}`, `{y}` yer tutucuları; yalnız `https://` ya da `/` ile başlayan
+   * adresler kabul edilir. Varsayılan OpenStreetMap; başka kaynakta `attribution` verilmelidir.
+   */
+  tileUrl?: string;
+  /** Kaynak bildirimi; varsayılan OpenStreetMap katkıda bulunanları. */
+  attribution?: ReactNode;
+  /**
+   * Haritada bir noktayı seçme: tıklama ya da dokunma o noktayı, harita odaktayken Enter merkezdeki
+   * noktayı bildirir.
+   */
+  onPick?: (position: LatLng) => void;
+  /** Merkez işareti: yalnız odakta (`focus`) ya da her zaman (`always`). */
+  crosshair?: "focus" | "always";
+  /** Yükseklik: `sm` 256, `md` 384, `lg` 512 piksel. */
+  size?: MapViewSize;
+  /**
+   * Harita yüklenmeden önce konumların metin listesi gösterilir (varsayılan). Aynı konumlar zaten
+   * sayfada listeleniyorsa (ör. mağaza bulucu) `false` verilir.
+   */
+  showMarkerList?: boolean;
+  /** `MapMarker` öğeleri. */
+  children?: ReactNode;
+  className?: string;
+  id?: string;
+  ref?: Ref<HTMLDivElement>;
+}
+/**
+ * Karo adresi kuralı: `https://`, kök göreli (`/`) ya da `data:image/` (çevrimdışı örnek; görsel
+ * adresi betik çalıştırmaz) ile başlar; `{z}`, `{x}`, `{y}` yer tutucularının üçü de bulunur.
+ * Kural dışı adres varsayılana (OpenStreetMap) döner: `http://` ve `javascript:` asla istenmez.
+ */
+export declare function safeTileUrl(url: string | undefined): string;
+export declare function tileSrc(url: string, z: number, x: number, y: number): string;
+/**
+ * Harita: karo tabanlı, kendi çizimiyle (üçüncü taraf betik yok). Gizlilik kipi: harita izin
+ * verilene kadar yüklenmez; o zamana kadar konumlar metin listesi olarak gösterilir. Klavye: ok
+ * tuşları kaydırır (Shift hızlı), `+` / `-` yakınlaştırır, Home ilk görünüme döner; fare: sürükleme,
+ * çift tıklama, Ctrl/⌘ + tekerlek.
+ */
+export declare function MapView(props: MapViewProps): import("react").JSX.Element;
+/** OpenStreetMap'te aynı yeri açan adres (yalnız kişi bağlantıya basınca istek gider). */
+export declare function openStreetMapUrl(center: LatLng, zoom: number): string;