@oprt/react 0.0.0-stage → 0.1.0

package/dist/JobStatus/JobStatus.js

@@ -0,0 +1,118 @@
+"use client";
+
+// src/JobStatus/JobStatus.tsx
+import { forwardRef, useEffect, useState } from "react";
+import { useActionFocus } from "../_internal/useActionFocus.js";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import { ActionStatusLine } from "../ActionStatus/ActionStatus.js";
+import { Progress } from "../Progress/Progress.js";
+import { Button } from "../Button/Button.js";
+import { devValidate } from "../_internal/devValidate.js";
+import { JobStatusManifest } from "./JobStatus.manifest.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var jobStyles = cva(
+  "flex min-w-0 flex-col gap-2u border border-oprt-border p-2u font-sans text-oprt-base normal-case text-oprt-text outline-hidden focus-visible:shadow-oprt-focus"
+);
+var JobStatus = forwardRef((allProps, ref) => {
+  const {
+    jobId,
+    label,
+    state,
+    message,
+    progress,
+    requestPending = null,
+    requestError,
+    onCancelRequest,
+    onRetryRequest,
+    disabled = false,
+    className,
+    onFocusCapture,
+    onBlurCapture,
+    ...props
+  } = allProps;
+  const focus = useActionFocus(ref, { onFocusCapture, onBlurCapture });
+  if (process.env.NODE_ENV !== "production") {
+    devValidate("JobStatus", JobStatusManifest.JobStatus.props, allProps);
+  }
+  const validProgress = !progress || Number.isSafeInteger(progress.completed) && progress.completed >= 0 && (progress.total === null || Number.isSafeInteger(progress.total) && progress.total >= 0 && progress.completed <= progress.total);
+  const canCancel = !!onCancelRequest && (state === "queued" || state === "running");
+  const canRetry = !!onRetryRequest && ["failed", "partial", "canceled"].includes(state);
+  const blocked = disabled || requestPending !== null;
+  const pendingText = requestPending ? `${requestPending === "cancel" ? "Cancellation" : "Retry"} request pending. Awaiting an application update.` : "";
+  const [spokenText, setSpokenText] = useState(pendingText);
+  useEffect(() => {
+    let second = 0;
+    const first = requestAnimationFrame(() => {
+      second = requestAnimationFrame(() => setSpokenText(pendingText));
+    });
+    return () => {
+      cancelAnimationFrame(first);
+      cancelAnimationFrame(second);
+    };
+  }, [pendingText]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      ...focus,
+      role: "region",
+      "aria-label": label,
+      tabIndex: -1,
+      className: clsx(jobStyles(), className),
+      children: [
+        /* @__PURE__ */ jsx(ActionStatusLine, { state, label, message, children: state === "cancel-requested" && /* @__PURE__ */ jsx("p", { className: "m-0 min-w-0 oprt-wrap-anywhere", children: "Cancellation was requested. Work may still finish." }) }),
+        /* @__PURE__ */ jsxs("p", { className: "m-0 min-w-0 oprt-wrap-anywhere font-mono", children: [
+          "Job: ",
+          jobId
+        ] }),
+        !validProgress && /* @__PURE__ */ jsx("p", { className: "m-0 min-w-0 oprt-wrap-anywhere text-oprt-error", children: "Invalid progress. Supply nonnegative integer counts with completed no greater than total." }),
+        progress && validProgress && /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1u", children: [
+          /* @__PURE__ */ jsx("p", { className: "m-0 min-w-0 oprt-wrap-anywhere font-mono tabular-nums", children: progress.total === 0 ? "0 items" : progress.total === null ? `${progress.completed} items processed; total unknown` : `${progress.completed} of ${progress.total} items processed` }),
+          progress.total !== 0 && /* @__PURE__ */ jsx(
+            Progress,
+            {
+              label: `${label} progress`,
+              ...progress.total === null ? {} : { value: progress.completed, max: progress.total }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("p", { "aria-live": "polite", "aria-atomic": "true", className: "sr-only m-0", children: spokenText }),
+        requestPending && /* @__PURE__ */ jsx("p", { "aria-hidden": "true", className: "m-0 min-w-0 oprt-wrap-anywhere", children: pendingText }),
+        requestError && /* @__PURE__ */ jsx("p", { className: "m-0 min-w-0 oprt-wrap-anywhere text-oprt-error", role: "alert", children: requestError }),
+        (canCancel || canRetry) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1u", children: [
+          canCancel && /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: "max-w-full",
+              size: "sm",
+              variant: "tertiary",
+              disabled: blocked,
+              onClick: () => {
+                if (!blocked && canCancel) onCancelRequest?.(jobId);
+              },
+              children: "Request cancellation"
+            }
+          ),
+          canRetry && /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: "max-w-full",
+              size: "sm",
+              variant: "secondary",
+              disabled: blocked,
+              onClick: () => {
+                if (!blocked && canRetry) onRetryRequest?.(jobId);
+              },
+              children: "Request retry"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+JobStatus.displayName = "JobStatus";
+export {
+  JobStatus
+};

package/dist/JobStatus/JobStatus.manifest.js

@@ -0,0 +1,53 @@
+// src/JobStatus/JobStatus.manifest.ts
+var JobStatusManifest = {
+  JobStatus: {
+    description: "Application-supplied job state and validated item progress with explicit cancellation/retry requests. Requests never establish a job outcome. A pending request is announced through a live region that is always present; native attributes reach the job region; long text wraps.",
+    props: {
+      jobId: { type: "string", required: true },
+      label: { type: "string", required: true },
+      state: {
+        type: "enum",
+        values: [
+          "queued",
+          "running",
+          "cancel-requested",
+          "canceled",
+          "complete",
+          "partial",
+          "failed"
+        ],
+        required: true
+      },
+      message: { type: "string" },
+      progress: {
+        type: "node",
+        description: "{ completed: number; total: number | null }. Nonnegative safe integers; completed cannot exceed a known total. Null total is indeterminate; zero shows zero items without a percentage."
+      },
+      requestPending: {
+        type: "enum",
+        values: ["cancel", "retry"],
+        description: "Pending request kind, or null. Prevents duplicate requests without changing the supplied state."
+      },
+      requestError: {
+        type: "string",
+        description: "Request-delivery feedback supplied independently of the job outcome."
+      },
+      onCancelRequest: {
+        type: "function",
+        description: "(jobId) => void. Offered only while queued or running. Does not establish cancellation."
+      },
+      onRetryRequest: {
+        type: "function",
+        description: "(jobId) => void. Offered only for failed, partial, or canceled jobs. The application chooses eligible work and request identity."
+      },
+      disabled: { type: "boolean", default: false },
+      className: { type: "string" }
+    },
+    composable_with: ["ActionStatus", "Progress", "Button", "BulkResults"],
+    never_inside: ["Button"],
+    example: '<JobStatus jobId="import-1" label="Import equipment" state="cancel-requested" progress={{completed:2,total:5}} />'
+  }
+};
+export {
+  JobStatusManifest
+};

package/dist/JobStatus/index.js

@@ -0,0 +1,7 @@
+// src/JobStatus/index.ts
+import { JobStatus } from "./JobStatus.js";
+import { JobStatusManifest } from "./JobStatus.manifest.js";
+export {
+  JobStatus,
+  JobStatusManifest
+};

package/dist/LayerControl/LayerControl.js

@@ -0,0 +1,199 @@
+"use client";
+
+// src/LayerControl/LayerControl.tsx
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import { Button } from "../Button/Button.js";
+import { Checkbox } from "../Checkbox/Checkbox.js";
+import { Slider } from "../Slider/Slider.js";
+import { Field } from "../Field/Field.js";
+import { joinIds, usePartIds } from "../_internal/fieldIds.js";
+import { useRestoreFocusOnRemoval } from "../_internal/useRestoreFocusOnRemoval.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var controlStyles = cva(
+  "flex min-w-0 flex-col gap-2u font-sans text-oprt-base text-oprt-text outline-hidden focus-visible:shadow-oprt-focus"
+);
+var rowStyles = cva(
+  "flex min-w-0 flex-col gap-2u border border-oprt-border p-2u outline-hidden focus-visible:shadow-oprt-focus"
+);
+var LayerControl = forwardRef(
+  ({
+    label = "Map layers",
+    layers,
+    onLayersChange,
+    disabled = false,
+    className,
+    id,
+    onFocusCapture,
+    onBlurCapture,
+    "aria-labelledby": labelledBy,
+    ...props
+  }, ref) => {
+    const root = useRef(null);
+    const labelRef = useRef(null);
+    const ids = usePartIds(["label"], {
+      id,
+      readRendered: () => labelRef.current?.id.replace(/-label$/, "")
+    });
+    const rows = useRef(/* @__PURE__ */ new Map());
+    useImperativeHandle(ref, () => root.current, []);
+    const invalidIds = layers.some(
+      (item, index) => !item.id.trim() || layers.findIndex((other) => other.id === item.id) !== index
+    );
+    const blocked = disabled || !onLayersChange || invalidIds;
+    const unavailable = (index) => blocked || layers[index]?.disabled === true;
+    const canMove = (index, direction) => !unavailable(index) && index + direction >= 0 && index + direction < layers.length && !unavailable(index + direction);
+    const emit = (next) => {
+      if (!blocked) onLayersChange?.(Object.freeze(next.map((item) => Object.freeze({ ...item }))));
+    };
+    const change = (index, patch) => {
+      if (!unavailable(index))
+        emit(layers.map((item, position) => position === index ? { ...item, ...patch } : item));
+    };
+    const move = (index, direction) => {
+      if (!canMove(index, direction)) return;
+      const next = [...layers];
+      [next[index], next[index + direction]] = [next[index + direction], next[index]];
+      emit(next);
+    };
+    const restoreFocus = useRestoreFocusOnRemoval(
+      root,
+      {
+        track: (element) => {
+          const index = layers.findIndex((item) => rows.current.get(item.id)?.contains(element));
+          return index < 0 ? null : { id: layers[index].id, index };
+        },
+        findTarget: ({ id: layerId, index }) => rows.current.get(layerId) ?? rows.current.get(layers[Math.min(index, layers.length - 1)]?.id ?? "") ?? root.current
+      }
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...props,
+        id,
+        ref: root,
+        role: "group",
+        tabIndex: -1,
+        "aria-labelledby": joinIds(ids.label, labelledBy),
+        className: clsx(controlStyles(), className),
+        onFocusCapture: (event) => {
+          onFocusCapture?.(event);
+          restoreFocus.onFocusCapture(event);
+        },
+        onBlurCapture: (event) => {
+          onBlurCapture?.(event);
+          restoreFocus.onBlurCapture(event);
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "h3",
+            {
+              ref: labelRef,
+              id: ids.label,
+              className: "m-0 min-w-0 font-medium uppercase tracking-oprt-sm oprt-wrap-anywhere",
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "m-0 text-oprt-text-dim", children: "Top of this list is drawn on top of the map." }),
+          invalidIds && /* @__PURE__ */ jsx("p", { className: "m-0 text-oprt-error", children: "Layer IDs must be unique and nonempty. Editing is unavailable until corrected." }),
+          layers.length === 0 ? /* @__PURE__ */ jsx("p", { className: "m-0", children: "No layers supplied." }) : /* @__PURE__ */ jsx("ol", { "aria-label": label, className: "m-0 flex min-w-0 list-none flex-col gap-2u p-0", children: layers.map((item, index) => {
+            const validOpacity = Number.isFinite(item.opacity) && item.opacity >= 0 && item.opacity <= 1;
+            return /* @__PURE__ */ jsxs(
+              "li",
+              {
+                ref: (node) => {
+                  if (node) rows.current.set(item.id, node);
+                  else rows.current.delete(item.id);
+                },
+                tabIndex: -1,
+                className: rowStyles(),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-1u", children: [
+                    /* @__PURE__ */ jsx(
+                      Checkbox,
+                      {
+                        id: `${ids.base}-visibility-${index}`,
+                        "aria-label": `Show ${item.label}`,
+                        checked: item.visible,
+                        disabled: unavailable(index),
+                        onCheckedChange: (checked) => {
+                          if (typeof checked === "boolean") change(index, { visible: checked });
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "label",
+                      {
+                        htmlFor: `${ids.base}-visibility-${index}`,
+                        className: "m-0 min-w-0 font-medium uppercase tracking-oprt-sm oprt-wrap-anywhere",
+                        children: item.label
+                      }
+                    )
+                  ] }),
+                  item.description && /* @__PURE__ */ jsx("p", { className: "m-0 text-oprt-text-dim oprt-wrap-anywhere", children: item.description }),
+                  validOpacity ? /* @__PURE__ */ jsxs(
+                    Field,
+                    {
+                      label: `${item.label} opacity percent`,
+                      className: "min-w-0 oprt-wrap-anywhere [&>label]:uppercase [&>label]:tracking-oprt-sm",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Slider,
+                          {
+                            min: 0,
+                            max: 100,
+                            step: 1,
+                            value: item.opacity * 100,
+                            disabled: unavailable(index),
+                            onValueChange: (value) => {
+                              if (Number.isFinite(value) && value >= 0 && value <= 100)
+                                change(index, { opacity: value / 100 });
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs("p", { className: "m-0 font-mono tabular-nums", children: [
+                          Math.round(item.opacity * 100),
+                          "%"
+                        ] })
+                      ]
+                    }
+                  ) : /* @__PURE__ */ jsx("p", { className: "m-0 text-oprt-text-dim", children: "Opacity unavailable" }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap gap-1u", children: [
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "sm",
+                        variant: "tertiary",
+                        "aria-label": `Move ${item.label} up`,
+                        disabled: !canMove(index, -1),
+                        onClick: () => move(index, -1),
+                        children: "Move up"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "sm",
+                        variant: "tertiary",
+                        "aria-label": `Move ${item.label} down`,
+                        disabled: !canMove(index, 1),
+                        onClick: () => move(index, 1),
+                        children: "Move down"
+                      }
+                    )
+                  ] })
+                ]
+              },
+              invalidIds ? index : item.id
+            );
+          }) })
+        ]
+      }
+    );
+  }
+);
+LayerControl.displayName = "LayerControl";
+export {
+  LayerControl
+};

package/dist/LayerControl/LayerControl.manifest.js

@@ -0,0 +1,34 @@
+// src/LayerControl/LayerControl.manifest.ts
+var LayerControlManifest = {
+  LayerControl: {
+    description: "Controlled top-first map layers with visibility, opacity and keyboard-operable ordering.",
+    props: {
+      label: { type: "string", default: "Map layers" },
+      layers: {
+        type: "array",
+        required: true,
+        description: "Readonly LayerControlItem[]. IDs must be unique and nonempty. First item is drawn on top. Nonfinite/out-of-range opacity stays unavailable; zero is transparent.",
+        items: {
+          id: "string",
+          label: "string",
+          visible: "boolean",
+          opacity: "number (0..1)",
+          description: "string (optional)",
+          disabled: "boolean (optional)"
+        }
+      },
+      onLayersChange: {
+        type: "function",
+        description: "(layers: readonly LayerControlItem[]) => void. Receives a new frozen array of copied frozen items. Requests do not change supplied values. Omit for read-only controls. Disabled rows cannot mutate or be crossed."
+      },
+      disabled: { type: "boolean", default: false },
+      className: { type: "string" }
+    },
+    composable_with: ["MapControls", "MapLegend", "Slider", "Checkbox", "Field"],
+    never_inside: ["Button"],
+    example: "<LayerControl layers={layers} onLayersChange={setLayers} />"
+  }
+};
+export {
+  LayerControlManifest
+};

package/dist/LayerControl/index.js

@@ -0,0 +1,7 @@
+// src/LayerControl/index.ts
+import { LayerControl } from "./LayerControl.js";
+import { LayerControlManifest } from "./LayerControl.manifest.js";
+export {
+  LayerControl,
+  LayerControlManifest
+};

package/dist/Link/Link.js

@@ -0,0 +1,83 @@
+"use client";
+
+// src/Link/Link.tsx
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import {
+  Children,
+  forwardRef,
+  isValidElement
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var linkStyles = cva(
+  "min-h-oprt-sm min-w-oprt-sm border border-transparent py-[calc((var(--oprt-height-sm)-2px-var(--oprt-line-base))/2)] box-decoration-clone font-sans text-oprt-base font-medium text-oprt-accent underline underline-offset-2 oprt-wrap-anywhere [&_svg]:inline-block hover:text-oprt-accent-hover aria-disabled:text-[color:inherit] aria-disabled:hover:text-[color:inherit] aria-disabled:no-underline aria-disabled:cursor-default focus-visible:outline-hidden focus-visible:border-oprt-border-focus focus-visible:shadow-oprt-focus forced-colors:focus-visible:outline-solid forced-colors:focus-visible:outline-2 forced-colors:focus-visible:outline-[CanvasText]",
+  {
+    variants: {
+      // An icon-only link is a 24px box of its own, with the icon centered in it.
+      iconOnly: { true: "inline-flex items-center justify-center", false: "" }
+    },
+    defaultVariants: { iconOnly: false }
+  }
+);
+function isIconOnly(children) {
+  const parts = Children.toArray(children).filter(
+    (part) => !(typeof part === "string" && part.trim() === "")
+  );
+  const [only] = parts;
+  if (parts.length !== 1 || !isValidElement(only)) return false;
+  const hidden = only.props["aria-hidden"];
+  return only.type === "svg" || hidden === true || hidden === "true" || typeof only.type !== "string" && only.props.children == null;
+}
+var SAFE_SCHEMES = /* @__PURE__ */ new Set(["http", "https", "mailto", "tel"]);
+var DOWNLOAD_SCHEMES = /* @__PURE__ */ new Set(["blob", "data"]);
+function schemeOf(destination) {
+  let start = 0;
+  let end = destination.length;
+  while (start < end && destination.charCodeAt(start) <= 32) start += 1;
+  while (end > start && destination.charCodeAt(end - 1) <= 32) end -= 1;
+  const url = destination.slice(start, end).replace(/[\t\n\r]/g, "");
+  const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(url);
+  return scheme ? scheme[1].toLowerCase() : null;
+}
+function isSafeHref(destination, download) {
+  const scheme = schemeOf(destination);
+  return scheme === null || SAFE_SCHEMES.has(scheme) || download && DOWNLOAD_SCHEMES.has(scheme);
+}
+var reported = /* @__PURE__ */ new Set();
+function reportUnsafeHref(destination) {
+  if (process.env.NODE_ENV === "production" || reported.has(destination)) return;
+  reported.add(destination);
+  console.error(
+    JSON.stringify(
+      {
+        component: "Link",
+        error: "UNSAFE_HREF",
+        prop: "href",
+        received: destination.slice(0, 80),
+        suggestion: "Link renders only http, https, mailto, tel, relative and hash destinations (and blob: or data: with download). Any other scheme renders as plain text, not a link and not a Tab stop. Use a Button for an action."
+      },
+      null,
+      2
+    )
+  );
+}
+var Link = forwardRef(
+  ({ className, href, children, ...props }, ref) => {
+    const safe = typeof href !== "string" || isSafeHref(href, props.download !== void 0 && props.download !== false);
+    if (!safe) reportUnsafeHref(href);
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        ref,
+        className: clsx(linkStyles({ iconOnly: isIconOnly(children) }), className),
+        ...safe ? { href } : { "aria-disabled": true },
+        ...props,
+        children
+      }
+    );
+  }
+);
+Link.displayName = "Link";
+export {
+  Link
+};

package/dist/Link/Link.manifest.js

@@ -0,0 +1,37 @@
+// src/Link/Link.manifest.ts
+var LinkManifest = {
+  Link: {
+    description: "Native anchor navigation with an evident link treatment and token-based keyboard focus. It is inline, so a link in a sentence wraps with the sentence; as a flex or grid item it is a 24px target. Only http, https, mailto, tel, relative and hash destinations are rendered.",
+    props: {
+      href: {
+        type: "string",
+        required: true,
+        description: "Native anchor destination; no click interception or router dependency. Only http, https, mailto, tel, relative and hash destinations are rendered; any other scheme (javascript:, vbscript:, data:, blob:, file:) renders as plain text, not a link and not a Tab stop. A blob: or data: destination is rendered when download is set; offer only files your page generates from content you trust, and give a file built from untrusted content to a Button that starts the download instead of a persistent link."
+      },
+      children: {
+        type: "node",
+        description: "Accessible link name. Authored names and prose preserve their case; provide aria-label for icon-only links."
+      },
+      target: {
+        type: "string",
+        description: "Native browsing context, such as _blank. Explain new-window behavior in the accessible name."
+      },
+      rel: {
+        type: "string",
+        description: "Native relationship attributes; use noopener noreferrer for external new-window links."
+      },
+      download: {
+        type: "union",
+        types: ["string", "boolean"],
+        description: "Native download attribute, subject to browser behavior."
+      },
+      className: { type: "string" }
+    },
+    composable_with: ["DescriptionList", "EntityPreview", "Popover", "Inspector", "Card"],
+    never_inside: ["Button", "Link"],
+    example: '<Link href="/equipment/pump-07">Pump 07</Link>'
+  }
+};
+export {
+  LinkManifest
+};

package/dist/Link/index.js

@@ -0,0 +1,7 @@
+// src/Link/index.ts
+import { Link } from "./Link.js";
+import { LinkManifest } from "./Link.manifest.js";
+export {
+  Link,
+  LinkManifest
+};

package/dist/MapControls/MapControls.js

@@ -0,0 +1,122 @@
+"use client";
+
+// src/MapControls/MapControls.tsx
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { useNumberFormatter } from "react-aria";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import { Button } from "../Button/Button.js";
+import { joinIds, usePartIds } from "../_internal/fieldIds.js";
+import { useRestoreFocusOnRemoval } from "../_internal/useRestoreFocusOnRemoval.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var controlStyles = cva(
+  "flex min-w-0 flex-col gap-2u font-sans text-oprt-base text-oprt-text outline-hidden focus-visible:shadow-oprt-focus"
+);
+var READOUT = { maximumFractionDigits: 2 };
+var shownBearing = (bearing) => Math.round(bearing * 100) / 100 % 360 + 0;
+var actions = [
+  { id: "zoom-in", label: "Zoom in" },
+  { id: "zoom-out", label: "Zoom out" },
+  { id: "pan-north", label: "Pan north" },
+  { id: "pan-east", label: "Pan east" },
+  { id: "pan-south", label: "Pan south" },
+  { id: "pan-west", label: "Pan west" },
+  { id: "reset-north", label: "Reset north" },
+  { id: "fit", label: "Fit map" }
+];
+var MapControls = forwardRef(
+  ({
+    label = "Map controls",
+    zoom = null,
+    bearing = null,
+    minZoom = 2,
+    maxZoom = 20,
+    onAction,
+    disabled = false,
+    className,
+    id,
+    "aria-labelledby": labelledBy,
+    onFocusCapture,
+    onBlurCapture,
+    ...props
+  }, ref) => {
+    const root = useRef(null);
+    useImperativeHandle(ref, () => root.current, []);
+    const labelRef = useRef(null);
+    const ids = usePartIds(["label"], {
+      id,
+      readRendered: () => labelRef.current?.id.replace(/-label$/, "")
+    });
+    const readout = useNumberFormatter(READOUT);
+    const buttons = useRef(/* @__PURE__ */ new Map());
+    const limitsValid = Number.isFinite(minZoom) && Number.isFinite(maxZoom) && minZoom <= maxZoom;
+    const validZoom = typeof zoom === "number" && Number.isFinite(zoom) && limitsValid && zoom >= minZoom && zoom <= maxZoom;
+    const validBearing = typeof bearing === "number" && Number.isFinite(bearing) && bearing >= 0 && bearing < 360;
+    const unavailable = (action) => disabled || !onAction || action === "zoom-in" && (!validZoom || zoom >= maxZoom) || action === "zoom-out" && (!validZoom || zoom <= minZoom) || action === "reset-north" && !validBearing;
+    const restoreFocus = useRestoreFocusOnRemoval(root, {
+      track: (element) => [...buttons.current].find(([, button]) => button === element)?.[0] ?? null,
+      findTarget: (action) => {
+        const opposite = action === "zoom-in" ? "zoom-out" : action === "zoom-out" ? "zoom-in" : null;
+        const other = opposite ? buttons.current.get(opposite) : void 0;
+        return other?.isConnected && !other.disabled ? other : root.current;
+      }
+    });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...props,
+        id,
+        ref: root,
+        role: "group",
+        tabIndex: -1,
+        "aria-labelledby": joinIds(ids.label, labelledBy),
+        className: clsx(controlStyles(), className),
+        onFocusCapture: (event) => {
+          onFocusCapture?.(event);
+          restoreFocus.onFocusCapture(event);
+        },
+        onBlurCapture: (event) => {
+          onBlurCapture?.(event);
+          restoreFocus.onBlurCapture(event);
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "h3",
+            {
+              ref: labelRef,
+              id: ids.label,
+              className: "m-0 min-w-0 font-medium uppercase tracking-oprt-sm oprt-wrap-anywhere",
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2u font-mono tabular-nums", children: [
+            /* @__PURE__ */ jsx("p", { className: "m-0", children: validZoom ? `Zoom ${readout.format(zoom)}` : "Zoom unknown" }),
+            /* @__PURE__ */ jsx("p", { className: "m-0", children: validBearing ? `Bearing ${readout.format(shownBearing(bearing))}\xB0` : "Bearing unknown" })
+          ] }),
+          !limitsValid && /* @__PURE__ */ jsx("p", { className: "m-0 text-oprt-error", children: "Zoom limits are invalid. Supply finite minimum and maximum values in order." }),
+          /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-wrap gap-1u", children: actions.map((action) => /* @__PURE__ */ jsx(
+            Button,
+            {
+              ref: (button) => {
+                if (button) buttons.current.set(action.id, button);
+                else buttons.current.delete(action.id);
+              },
+              size: "sm",
+              variant: "secondary",
+              disabled: unavailable(action.id),
+              onClick: () => {
+                if (!unavailable(action.id)) onAction?.(action.id);
+              },
+              children: action.label
+            },
+            action.id
+          )) })
+        ]
+      }
+    );
+  }
+);
+MapControls.displayName = "MapControls";
+export {
+  MapControls
+};