@krizaka/ui 3.3.0 → 3.4.0

package/dist/list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/list/list.tsx"],"sourcesContent":["// Client (the selection, the windowing of long lists). A list of records read top to bottom: a leading visual, a\n// title and a line, trailing details and actions — dense or comfortable, selectable with a checkbox per row, windowed\n// past a few hundred rows, with its loading, empty and error states. A real `<ul>`: each row a `<li>`, its main action\n// a link or a button that fills the row, its secondary actions beside it (never nested in the main one).\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { Checkbox } from \"../checkbox\";\nimport { ChevronGlyph } from \"../glyphs\";\nimport { useControllable } from \"../media\";\n\nexport const list = tv({\n  slots: {\n    root: \"w-full overflow-hidden rounded-xl border border-border-default bg-surface-1\",\n    scroller: \"overflow-y-auto focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    ul: \"m-0 list-none divide-y divide-border-subtle p-0\",\n    item: \"relative flex items-center gap-3 px-4 transition-colors data-[state=selected]:bg-accent-soft has-[[data-main]:hover]:bg-surface-2/60\",\n    main:\n      \"flex min-w-0 flex-1 items-center gap-3 self-stretch text-left text-fg outline-hidden \" +\n      \"focus-visible:after:absolute focus-visible:after:inset-0.5 focus-visible:after:rounded-lg focus-visible:after:ring-2 focus-visible:after:ring-ring\",\n    leading: \"flex shrink-0 items-center justify-center text-fg-secondary\",\n    text: \"flex min-w-0 flex-1 flex-col\",\n    title: \"truncate text-sm font-semibold text-fg\",\n    description: \"line-clamp-2 text-xs text-fg-secondary\",\n    meta: \"flex shrink-0 flex-col items-end gap-1 text-xs tabular-nums text-fg-secondary\",\n    actions: \"relative z-10 flex shrink-0 items-center gap-1\",\n    chevron: \"h-4 w-4 shrink-0 text-fg-muted\",\n    message: \"px-4 py-10 text-center text-sm text-fg-secondary\",\n    skeleton: \"animate-pulse rounded bg-surface-3 motion-reduce:animate-none\",\n    footer: \"border-t border-border-default px-4 py-3\",\n  },\n  variants: {\n    density: {\n      comfortable: { item: \"min-h-16 py-2.5\" },\n      compact: { item: \"min-h-11 py-1.5\", description: \"line-clamp-1\" },\n    },\n  },\n  defaultVariants: { density: \"comfortable\" },\n});\n\nexport type ListLabels = {\n  /** The checkbox of a row: `(title) => \"Select \" + title`. */\n  selectRow: (title: string) => string;\n  /** Read while the rows load (“Loading”). */\n  loading: string;\n  /** The default empty state (“Nothing to show”). */\n  empty: string;\n};\n\nexport const listLabels: ListLabels = { selectRow: (title) => `Select ${title}`, loading: \"Loading\", empty: \"Nothing to show\" };\n\nexport type ListRow = {\n  /** The row's main line — passed translated. */\n  title: string;\n  /** A second line (a detail, a status in words). */\n  description?: React.ReactNode;\n  /** Before the text: an `Avatar`, an icon, a thumbnail. */\n  leading?: React.ReactNode;\n  /** After the text: a time, an amount, a `Badge`. */\n  meta?: React.ReactNode;\n  /** Secondary actions beside the row (icon buttons, a menu) — outside the main action. */\n  actions?: React.ReactNode;\n  /** The row opens this address (its main action is a link). */\n  href?: string;\n  /** The row's main action (a button), when it is not a link. */\n  onSelect?: () => void;\n};\n\nexport type ListProps<T> = {\n  /** The records, in order. */\n  items: readonly T[];\n  /** A stable id per record: the React key and the selection's value. */\n  getId: (item: T) => string;\n  /** What a record shows: its title, line, visuals, details, actions and where it leads. */\n  row: (item: T) => ListRow;\n  /** The list's accessible name (“Jobs”). */\n  \"aria-label\": string;\n  /** comfortable (default: 64 px rows with a line) · compact (44 px: dense admin lists). */\n  density?: \"comfortable\" | \"compact\";\n  /** A checkbox per row. */\n  selectable?: boolean;\n  /** The ids selected (controlled). */\n  selected?: readonly string[];\n  /** The ids selected at first, uncontrolled. */\n  defaultSelected?: readonly string[];\n  /** Called with the new selection. */\n  onSelectedChange?: (selected: string[]) => void;\n  /** Shows a chevron on the rows that lead somewhere. */\n  chevrons?: boolean;\n  /** Loading: `loadingRows` skeleton rows and `aria-busy`. */\n  loading?: boolean;\n  /** How many skeleton rows. Default 5. */\n  loadingRows?: number;\n  /** A failure in place of the rows (an `Alert` with a retry); announced. */\n  error?: React.ReactNode;\n  /** Shown when there is no record (an `EmptyState`). */\n  empty?: React.ReactNode;\n  /** Renders only the rows in view: fixed `rowHeight`, a scrolling region of `height` px. */\n  virtualize?: { rowHeight: number; height: number; overscan?: number };\n  /** Under the list: a `Pagination`, a “Load more” button, a total. */\n  footer?: React.ReactNode;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<ListLabels>;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** A list of records: dense or comfortable, selectable, actions beside each row, windowed when long, with its states. */\nexport function List<T>({\n  items,\n  getId,\n  row,\n  \"aria-label\": label,\n  density,\n  selectable,\n  selected: selectedProp,\n  defaultSelected = [],\n  onSelectedChange,\n  chevrons,\n  loading,\n  loadingRows = 5,\n  error,\n  empty,\n  virtualize,\n  footer,\n  labels: given,\n  className,\n}: ListProps<T>) {\n  const labels = { ...listLabels, ...given };\n  const s = list({ density });\n  const [selected, setSelected] = useControllable<readonly string[]>(selectedProp, defaultSelected, onSelectedChange as (next: readonly string[]) => void);\n  const [scrollTop, setScrollTop] = React.useState(0);\n  const chosen = new Set(selected);\n  const toggle = (id: string) => setSelected(chosen.has(id) ? selected.filter((x) => x !== id) : [...selected, id]);\n\n  let shown = items;\n  let before = 0;\n  let after = 0;\n  if (virtualize && !loading) {\n    const overscan = virtualize.overscan ?? 6;\n    const start = Math.max(0, Math.floor(scrollTop / virtualize.rowHeight) - overscan);\n    const end = Math.min(items.length, Math.ceil((scrollTop + virtualize.height) / virtualize.rowHeight) + overscan);\n    shown = items.slice(start, end);\n    before = start * virtualize.rowHeight;\n    after = (items.length - end) * virtualize.rowHeight;\n  }\n\n  let body: React.ReactNode;\n  if (loading) {\n    body = Array.from({ length: loadingRows }, (_, i) => (\n      <li key={`loading-${i}`} aria-hidden className={s.item()}>\n        <div className={s.skeleton({ className: \"h-9 w-9 rounded-full\" })} />\n        <div className=\"flex flex-1 flex-col gap-2\">\n          <div className={s.skeleton({ className: \"h-3.5 w-2/5\" })} />\n          <div className={s.skeleton({ className: \"h-3 w-3/5\" })} />\n        </div>\n      </li>\n    ));\n  } else if (error) {\n    body = (\n      <li className={s.message()}>\n        <div role=\"alert\">{error}</div>\n      </li>\n    );\n  } else if (items.length === 0) {\n    body = <li className={s.message()}>{empty ?? labels.empty}</li>;\n  } else {\n    body = shown.map((item) => {\n      const id = getId(item);\n      const r = row(item);\n      const isChosen = chosen.has(id);\n      const content = (\n        <>\n          {r.leading ? <span className={s.leading()}>{r.leading}</span> : null}\n          <span className={s.text()}>\n            <span className={s.title()}>{r.title}</span>\n            {r.description ? <span className={s.description()}>{r.description}</span> : null}\n          </span>\n          {r.meta ? <span className={s.meta()}>{r.meta}</span> : null}\n          {chevrons && (r.href || r.onSelect) ? <ChevronGlyph direction=\"right\" className={s.chevron()} /> : null}\n        </>\n      );\n      return (\n        <li key={id} data-state={isChosen ? \"selected\" : undefined} className={s.item()} style={virtualize ? { height: virtualize.rowHeight } : undefined}>\n          {selectable ? <Checkbox checked={isChosen} onCheckedChange={() => toggle(id)} aria-label={labels.selectRow(r.title)} className=\"relative z-10\" /> : null}\n          {r.href ? (\n            <a href={r.href} data-main=\"\" className={s.main()}>\n              {content}\n            </a>\n          ) : r.onSelect ? (\n            <button type=\"button\" data-main=\"\" onClick={r.onSelect} className={s.main()}>\n              {content}\n            </button>\n          ) : (\n            <div className={s.main()}>{content}</div>\n          )}\n          {r.actions ? <div className={s.actions()}>{r.actions}</div> : null}\n        </li>\n      );\n    });\n  }\n\n  const ul = (\n    <ul aria-label={label} aria-busy={loading || undefined} className={s.ul()}>\n      {before > 0 ? <li aria-hidden style={{ height: before }} /> : null}\n      {body}\n      {after > 0 ? <li aria-hidden style={{ height: after }} /> : null}\n    </ul>\n  );\n  return (\n    <div className={s.root({ className })}>\n      {loading ? <span className=\"sr-only\" role=\"status\">{labels.loading}</span> : null}\n      {virtualize ? (\n        <div tabIndex={0} role=\"region\" aria-label={label} className={s.scroller()} style={{ height: virtualize.height }} onScroll={(e) => setScrollTop(e.currentTarget.scrollTop)}>\n          {ul}\n        </div>\n      ) : (\n        ul\n      )}\n      {footer ? <div className={s.footer()}>{footer}</div> : null}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/map.d.ts

@@ -0,0 +1,463 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+import * as maplibre_gl from 'maplibre-gl';
+import { brands } from '@krizaka/tokens/native';
+import { Flavor } from '@protomaps/basemaps';
+
+/** The basemap extracts: OpenStreetMap data built by Protomaps (ODbL). `world` up to zoom 6, `quebec` (Montréal–Québec) up to 14. */
+declare const MAP_TILES: {
+    readonly world: "https://krizaka-assets.b-cdn.net/maps/v1/tiles/world-20261012.pmtiles";
+    readonly quebec: "https://krizaka-assets.b-cdn.net/maps/v1/tiles/quebec-20261012.pmtiles";
+};
+/** The glyphs of the labels (Noto Sans, SIL OFL): `{fontstack}` and `{range}` filled by MapLibre. */
+declare const MAP_GLYPHS = "https://krizaka-assets.b-cdn.net/maps/v1/fonts/{fontstack}/{range}.pbf";
+/** The words every map shows, as the licences ask: OpenStreetMap's contributors (ODbL) and Protomaps. */
+declare const MAP_ATTRIBUTION: {
+    readonly osm: "© OpenStreetMap contributors";
+    readonly osmUrl: "https://www.openstreetmap.org/copyright";
+    readonly protomaps: "Protomaps";
+    readonly protomapsUrl: "https://protomaps.com";
+};
+/**
+ * Where the maps read the tiles and the glyphs, when not from the CDN itself: a same-origin path that proxies it
+ * (`https://www.krizaka.com/maps/v1`, a rewrite of the site) — no cross-origin request at all. Absolute URL, no trailing slash.
+ */
+declare function setMapAssetsBase(url: string | null): void;
+/** The tiles and glyphs the maps read now: the CDN's, or under the base set by `setMapAssetsBase`. */
+declare function mapAssets(): {
+    tiles: {
+        world: string;
+        quebec: string;
+    };
+    glyphs: string;
+};
+
+/** A position: longitude, latitude (GeoJSON's order, MapLibre's `LngLat`). */
+type LngLat = readonly [lng: number, lat: number];
+/** The great-circle distance between two positions, in metres (haversine). */
+declare function distanceMeters(a: LngLat, b: LngLat): number;
+/** A circle of `radius` metres around `center` as a GeoJSON polygon (`steps` points): a delivery zone, a search radius. */
+declare function circlePolygon(center: LngLat, radius: number, steps?: number): GeoJSON.Feature<GeoJSON.Polygon>;
+/** The Web Mercator pixel of a position at a zoom (256-px tiles): what a static map draws without an engine. */
+declare function project([lng, lat]: LngLat, zoom: number): [number, number];
+/** A distance written the locale's way: metres under 1 km, kilometres (one decimal under 10) above. */
+declare function formatDistance(meters: number, locale: string): string;
+
+/** A product of the family: its accent paints the map. */
+type MapBrand = keyof typeof brands;
+/** A colour mixed into another (`#rrggbb` only): `t` = 0 gives `a`, 1 gives `b`. */
+declare function mix(a: string, b: string, t: number): string;
+/** The colours of the map in a scheme (and a brand): what the style, the markers and the static map share. */
+declare function mapPalette(scheme: "dark" | "light", brand?: MapBrand): {
+    land: string;
+    background: string;
+    water: string;
+    park: string;
+    road: string;
+    roadMajor: string;
+    casing: string;
+    building: string;
+    boundary: string;
+    label: string;
+    labelStrong: string;
+    halo: string;
+    accent: string;
+    onAccent: string;
+};
+/** The basemap flavour of a palette: every role of Protomaps' layers filled from the tokens. */
+declare function mapFlavor(scheme: "dark" | "light", brand?: MapBrand): Flavor;
+/** A region of the basemap: its PMTiles file and the zoom up to which it has tiles. */
+type MapRegion = {
+    url: string;
+    maxzoom: number;
+};
+type MapStyleOptions = {
+    /** `dark` or `light`: the scheme of the page or the app. */
+    scheme: "dark" | "light";
+    /** The product whose accent the map carries (its markers, its water's tint). Default `krizaka`. */
+    brand?: MapBrand;
+    /** The language of the labels (`fr`, `en`): the place names in it where OpenStreetMap has them. Default `en`. */
+    lang?: string;
+    /** The low zooms of the whole world. Default: our world extract (zoom 0–6). */
+    world?: MapRegion | null;
+    /** The detailed region drawn from zoom 7. Default: Montréal–Québec (up to 14, overzoomed beyond). */
+    region?: MapRegion | null;
+    /** The glyphs' URL template. Default: our Noto Sans on the CDN. */
+    glyphs?: string;
+};
+/** The zoom where the detailed region takes over from the world. */
+declare const REGION_FROM_ZOOM = 6.5;
+/**
+ * The MapLibre style of a Krizaka map (a `StyleSpecification`): the world's low zooms, then the detailed region,
+ * painted from the tokens. The `pmtiles://` sources need the PMTiles protocol (the web `Map` registers it; MapLibre
+ * Native reads it as it is).
+ */
+declare function mapStyle({ scheme, brand, lang, world, region, glyphs }: MapStyleOptions): {
+    version: 8;
+    glyphs: string;
+    sources: Record<string, unknown>;
+    layers: {
+        [k: string]: unknown;
+        id: string;
+        minzoom?: number;
+        maxzoom?: number;
+    }[];
+};
+
+type MapLibre = typeof maplibre_gl;
+type MapInstance = maplibre_gl.Map;
+declare const map: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            canvas?: tailwind_variants.ClassValue;
+            fallback?: tailwind_variants.ClassValue;
+            controls?: tailwind_variants.ClassValue;
+            attribution?: tailwind_variants.ClassValue;
+            places?: tailwind_variants.ClassValue;
+            markerLabel?: tailwind_variants.ClassValue;
+            control?: tailwind_variants.ClassValue;
+            marker?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            canvas?: tailwind_variants.ClassValue;
+            fallback?: tailwind_variants.ClassValue;
+            controls?: tailwind_variants.ClassValue;
+            attribution?: tailwind_variants.ClassValue;
+            places?: tailwind_variants.ClassValue;
+            markerLabel?: tailwind_variants.ClassValue;
+            control?: tailwind_variants.ClassValue;
+            marker?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    canvas: string;
+    fallback: string;
+    controls: string;
+    control: string;
+    attribution: string;
+    places: string;
+    marker: string;
+    markerLabel: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            canvas?: tailwind_variants.ClassValue;
+            fallback?: tailwind_variants.ClassValue;
+            controls?: tailwind_variants.ClassValue;
+            attribution?: tailwind_variants.ClassValue;
+            places?: tailwind_variants.ClassValue;
+            markerLabel?: tailwind_variants.ClassValue;
+            control?: tailwind_variants.ClassValue;
+            marker?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    canvas: string;
+    fallback: string;
+    controls: string;
+    control: string;
+    attribution: string;
+    places: string;
+    marker: string;
+    markerLabel: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    canvas: string;
+    fallback: string;
+    controls: string;
+    control: string;
+    attribution: string;
+    places: string;
+    marker: string;
+    markerLabel: string;
+}>>;
+type Registry = {
+    add: (id: string, text: string) => void;
+    remove: (id: string) => void;
+};
+type Ctx = {
+    map: MapInstance | null;
+    lib: MapLibre | null;
+    ready: boolean;
+    reduce: boolean;
+    places: Registry;
+};
+/** The map a child is drawn on (`Marker`, `RadiusCircle`, `Cluster`…): the MapLibre instance once it is ready. */
+declare function useMap(): Ctx;
+/**
+ * Where MapLibre's worker comes from. A bundler (Next.js, Vite) renames MapLibre's module and leaves its worker behind:
+ * by default the worker of the very version the app installed is imported from jsDelivr (free, open source, no key)
+ * through a module worker of the page's own origin. An app with a strict CSP serves it itself —
+ * `configureMaps({ workerUrl: "/maplibre-gl-worker.mjs" })` (with `maplibre-gl-shared.mjs` beside it), once, before a map.
+ * `assetsBase` reads the tiles and glyphs through a same-origin proxy of the CDN (`setMapAssetsBase`).
+ */
+declare function configureMaps(options: {
+    workerUrl?: string;
+    assetsBase?: string;
+}): void;
+type MapLabels = {
+    /** The zoom-in button ("Zoom in"). */
+    zoomIn: string;
+    /** The zoom-out button ("Zoom out"). */
+    zoomOut: string;
+    /** Before the list of places read in place of the map ("Places on the map"). */
+    places: string;
+};
+declare const mapLabels: MapLabels;
+type MapProps = {
+    /** The map's accessible name ("Pick-up points near you"), passed translated. */
+    label: string;
+    /** Where the map looks at first: longitude, latitude. */
+    center: LngLat;
+    /** The zoom at first (0 the world, 12 a city, 16 a street). Default 12. */
+    zoom?: number;
+    /** The camera follows `center` and `zoom` when they change (flies, or jumps under reduced motion). */
+    controlled?: boolean;
+    /** The scheme. Default: the page's (`html.light`), followed. */
+    scheme?: "dark" | "light";
+    /** The product whose accent the map carries. Default `krizaka`. */
+    brand?: MapBrand;
+    /** The language of the labels (`fr`, `en`). Default `en`. */
+    lang?: string;
+    /** The detailed region (PMTiles) drawn from zoom 6.5. Default: our Montréal–Québec extract (to zoom 14). */
+    region?: MapRegion | null;
+    /** The world's low zooms (PMTiles). Default: our world extract (to zoom 6). */
+    world?: MapRegion | null;
+    /** The zoom buttons (default) — the keyboard also zooms with + and − on the focused map. */
+    controls?: boolean;
+    /** Moves with the hand (default); `false` makes a still picture of a place. */
+    interactive?: boolean;
+    /** Shown in place of the map while its engine loads, and for good without WebGL: a `StaticMap`, a picture. */
+    fallback?: React.ReactNode;
+    /** Called when the camera rests: its centre and zoom. */
+    onMoveEnd?: (view: {
+        center: LngLat;
+        zoom: number;
+    }) => void;
+    /** Called with the position pressed on the map (not on a marker). */
+    onPress?: (position: LngLat) => void;
+    /** Markers, circles, clusters, the user's position — and anything drawn over the map. */
+    children?: React.ReactNode;
+    /** The words, passed translated; English by default. */
+    labels?: Partial<MapLabels>;
+    /** Classes merged on the root (its height: `h-80`, `aspect-video`). */
+    className?: string;
+};
+/** A map: MapLibre over our Protomaps tiles, styled from the tokens, with its places as a list for screen readers. */
+declare function Map({ label, center, zoom, controlled, scheme: schemeProp, brand, lang, region, world, controls, interactive, fallback, onMoveEnd, onPress, children, labels: given, className, }: MapProps): React.JSX.Element;
+type MarkerProps = {
+    /** Where it stands. */
+    position: LngLat;
+    /** Its words: the place's name, read in the list of places and as the button's name ("Café Olimpico, 350 m"). */
+    label: string;
+    /** Pressing it (details in a panel, a sheet): the marker becomes a button. */
+    onPress?: () => void;
+    /** The chosen one: larger, its label shown above it. */
+    selected?: boolean;
+    /** Its size in pixels. Default 18. */
+    size?: number;
+    /** What it draws instead of the accent dot (an avatar, an icon). */
+    children?: React.ReactNode;
+};
+/** A place on the map: an accent dot (or your content) that is a button when it does something. */
+declare function Marker({ position, label, onPress, selected, size, children }: MarkerProps): React.ReactPortal | null;
+type UserPositionProps = {
+    /** Where the person is. */
+    position: LngLat;
+    /** Its words ("You are here"), read in the list of places. */
+    label: string;
+    /** The accuracy in metres: a soft disc around the dot. */
+    accuracy?: number;
+};
+/** The person's position: a dot that pulses (still under reduced motion), its accuracy as a soft disc. */
+declare function UserPosition({ position, label, accuracy }: UserPositionProps): React.JSX.Element | null;
+type RadiusCircleProps = {
+    /** Its centre. */
+    center: LngLat;
+    /** Its radius in metres. */
+    radius: number;
+    /** `accent` (a zone that matters: a delivery area, a search radius) or `soft` (an accuracy). */
+    tone?: "accent" | "soft";
+};
+/** A circle on the ground: a delivery zone, a search radius — filled with the accent, its edge drawn. */
+declare function RadiusCircle({ center, radius, tone }: RadiusCircleProps): null;
+type ClusterPoint = {
+    id: string;
+    position: LngLat;
+    label: string;
+};
+type ClusterProps = {
+    /** The points: many of them (creators, pick-up points, events). */
+    points: readonly ClusterPoint[];
+    /** Pressing a single point. A group zooms in to open itself. */
+    onPointPress?: (point: ClusterPoint) => void;
+    /** The radius, in pixels, within which points group. Default 48. */
+    radius?: number;
+};
+/** Many points grouped while they are close: a disc with the count, opened by zooming in; each point is listed for screen readers. */
+declare function Cluster({ points, onPointPress, radius }: ClusterProps): null;
+
+declare const locationPicker: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            status?: tailwind_variants.ClassValue;
+            frame?: tailwind_variants.ClassValue;
+            pin?: tailwind_variants.ClassValue;
+            bar?: tailwind_variants.ClassValue;
+            chip?: tailwind_variants.ClassValue;
+            near?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            status?: tailwind_variants.ClassValue;
+            frame?: tailwind_variants.ClassValue;
+            pin?: tailwind_variants.ClassValue;
+            bar?: tailwind_variants.ClassValue;
+            chip?: tailwind_variants.ClassValue;
+            near?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    frame: string;
+    pin: string;
+    bar: string;
+    chip: string;
+    near: string;
+    status: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            status?: tailwind_variants.ClassValue;
+            frame?: tailwind_variants.ClassValue;
+            pin?: tailwind_variants.ClassValue;
+            bar?: tailwind_variants.ClassValue;
+            chip?: tailwind_variants.ClassValue;
+            near?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    frame: string;
+    pin: string;
+    bar: string;
+    chip: string;
+    near: string;
+    status: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    frame: string;
+    pin: string;
+    bar: string;
+    chip: string;
+    near: string;
+    status: string;
+}>>;
+type LocationPickerLabels = {
+    /** The button that centres the map on the person ("Near me"). */
+    nearMe: string;
+    /** While the position is asked ("Finding you…"). */
+    locating: string;
+    /** The person refused ("Location is off for this site. Move the map instead."). */
+    denied: string;
+    /** No position (no GPS, a timeout) ("We could not find you. Move the map instead."). */
+    unavailable: string;
+    /** The person's place in the list of places ("You are here"). */
+    you: string;
+    /** The distance chip, from a written distance ("1.2 km from you"). */
+    distance: (distance: string) => string;
+};
+declare const locationPickerLabels: LocationPickerLabels;
+type LocationPickerProps = Pick<MapProps, "scheme" | "brand" | "lang" | "region" | "world" | "fallback" | "className"> & {
+    /** The picker's accessible name ("Meeting point"), passed translated. */
+    label: string;
+    /** The chosen position (controlled): the centre of the map. */
+    value: LngLat;
+    /** Called when the map rests on a new position. */
+    onValueChange: (value: LngLat) => void;
+    /** The BCP 47 locale of the distance. */
+    locale: string;
+    /** The zoom at first. Default 14. */
+    zoom?: number;
+    /** A radius in metres drawn around the chosen position (a delivery zone, a search radius). */
+    radius?: number;
+    /** Where the person is, when the app already knows it (the distance chip shows at once). */
+    origin?: LngLat | null;
+    /** The words, passed translated; English by default. */
+    labels?: Partial<LocationPickerLabels>;
+};
+/** A position picked by moving the map under a pin; its distance from the person; "near me" on request. */
+declare function LocationPicker({ label, value, onValueChange, locale, zoom, radius, origin: originProp, labels: given, className, ...map }: LocationPickerProps): React.JSX.Element;
+
+declare const staticMap: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            attribution?: tailwind_variants.ClassValue;
+            svg?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            attribution?: tailwind_variants.ClassValue;
+            svg?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    svg: string;
+    attribution: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            attribution?: tailwind_variants.ClassValue;
+            svg?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    svg: string;
+    attribution: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    svg: string;
+    attribution: string;
+}>>;
+type StaticMapPlace = {
+    position: LngLat;
+    label: string;
+};
+type StaticMapProps = {
+    /** What the picture shows, in words ("Three pick-up points in the Plateau"), passed translated: its accessible name. */
+    label: string;
+    /** The centre of the picture. */
+    center: LngLat;
+    /** The zoom of the picture. Default 12. */
+    zoom?: number;
+    /** The places drawn on it (an accent dot each), listed in its name. */
+    places?: readonly StaticMapPlace[];
+    /** A snapshot of the real map of the area (same centre and zoom), drawn under the places; the attribution then shows. */
+    image?: string;
+    /** Classes merged on the root (its size). */
+    className?: string;
+};
+/** A still map: the places on the map's paper (or on a snapshot), named in words. */
+declare function StaticMap({ label, center, zoom, places, image, className }: StaticMapProps): React.JSX.Element;
+
+export { Cluster, type ClusterPoint, type ClusterProps, type LngLat, LocationPicker, type LocationPickerLabels, type LocationPickerProps, MAP_ATTRIBUTION, MAP_GLYPHS, MAP_TILES, Map, type MapBrand, type MapLabels, type MapProps, type MapRegion, type MapStyleOptions, Marker, type MarkerProps, REGION_FROM_ZOOM, RadiusCircle, type RadiusCircleProps, StaticMap, type StaticMapPlace, type StaticMapProps, UserPosition, type UserPositionProps, circlePolygon, configureMaps, distanceMeters, formatDistance, locationPicker, locationPickerLabels, map, mapAssets, mapFlavor, mapLabels, mapPalette, mapStyle, mix, project, setMapAssetsBase, staticMap, useMap };