@oprt/react 0.0.0-stage → 0.2.0

package/dist/MapControls/MapControls.manifest.js

@@ -0,0 +1,31 @@
+// src/MapControls/MapControls.manifest.ts
+var MapControlsManifest = {
+  MapControls: {
+    description: "Engine-independent map navigation requests with supplied zoom and north-bearing readouts.",
+    props: {
+      label: { type: "string", default: "Map controls" },
+      zoom: {
+        type: "number",
+        description: "Supplied finite zoom within minZoom/maxZoom; null or missing is unknown. Readouts round to two decimals without changing the supplied value."
+      },
+      bearing: {
+        type: "number",
+        description: "Supplied clockwise degrees from north in [0,360). Null, missing or invalid values remain unknown. Display rounds to two decimals, so a bearing that rounds to 360 shows 0."
+      },
+      minZoom: { type: "number", default: 2 },
+      maxZoom: { type: "number", default: 20 },
+      onAction: {
+        type: "function",
+        description: "(action: MapAction) => void. Requests zoom-in, zoom-out, pan-north/east/south/west, reset-north or fit; no internal viewport change. Omission disables actions."
+      },
+      disabled: { type: "boolean", default: false },
+      className: { type: "string" }
+    },
+    composable_with: ["MapScale", "LayerControl", "MapLegend", "CoordinateInput", "AppShell"],
+    never_inside: ["Button"],
+    example: "<MapControls zoom={view.zoom} bearing={view.bearing} onAction={requestMapAction} />"
+  }
+};
+export {
+  MapControlsManifest
+};

package/dist/MapControls/index.js

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

package/dist/MapLegend/MapLegend.js

@@ -0,0 +1,89 @@
+"use client";
+
+// src/MapLegend/MapLegend.tsx
+import { forwardRef, useRef } from "react";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import { joinIds, usePartIds } from "../_internal/fieldIds.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var legendStyles = cva("flex min-w-0 flex-col gap-2u font-sans text-oprt-base text-oprt-text");
+var symbolStyles = cva("block shrink-0 forced-colors:text-[CanvasText]", {
+  variants: {
+    kind: {
+      point: "h-1u w-1u bg-current forced-colors:border forced-colors:border-[CanvasText]",
+      line: "w-3u border-t-2 border-current",
+      area: "h-2u w-3u border-2 border-current"
+    },
+    variant: {
+      neutral: "text-oprt-text-dim",
+      success: "text-oprt-success",
+      warning: "text-oprt-warning",
+      error: "text-oprt-error",
+      info: "text-oprt-info",
+      accent: "text-oprt-accent"
+    },
+    pattern: { solid: "border-solid", dashed: "border-dashed" }
+  },
+  defaultVariants: { variant: "neutral", pattern: "solid" }
+});
+var kinds = { point: "Point", line: "Line", area: "Area" };
+var MapLegend = forwardRef(
+  ({ label = "Map legend", items, className, id, "aria-labelledby": labelledBy, ...props }, ref) => {
+    const labelRef = useRef(null);
+    const ids = usePartIds(["label"], {
+      id,
+      readRendered: () => labelRef.current?.id.replace(/-label$/, "")
+    });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...props,
+        id,
+        ref,
+        role: "group",
+        "aria-labelledby": joinIds(ids.label, labelledBy),
+        className: clsx(legendStyles(), className),
+        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
+            }
+          ),
+          items.length === 0 ? /* @__PURE__ */ jsx("p", { className: "m-0", children: "No legend items supplied." }) : /* @__PURE__ */ jsx("ul", { "aria-label": label, className: "m-0 flex min-w-0 list-none flex-col gap-2u p-0", children: items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "flex min-w-0 items-start gap-2u", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "flex h-3u w-3u shrink-0 items-center justify-center",
+                children: /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: symbolStyles({
+                      kind: item.kind,
+                      variant: item.variant ?? "neutral",
+                      pattern: item.kind === "point" ? "solid" : item.pattern ?? "solid"
+                    })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 oprt-wrap-anywhere", children: [
+              /* @__PURE__ */ jsx("p", { className: "m-0 font-medium", children: item.label }),
+              /* @__PURE__ */ jsx("p", { className: "m-0 text-oprt-text-dim", children: kinds[item.kind] }),
+              item.kind !== "point" && /* @__PURE__ */ jsx("p", { className: "m-0 text-oprt-text-dim", children: item.pattern === "dashed" ? "Dashed" : "Solid" }),
+              item.description && /* @__PURE__ */ jsx("p", { className: "m-0", children: item.description })
+            ] })
+          ] }, `${item.id}-${index}`)) })
+        ]
+      }
+    );
+  }
+);
+MapLegend.displayName = "MapLegend";
+export {
+  MapLegend
+};

package/dist/MapLegend/MapLegend.manifest.js

@@ -0,0 +1,29 @@
+// src/MapLegend/MapLegend.manifest.ts
+var MapLegendManifest = {
+  MapLegend: {
+    description: "Text and shape map legend for supplied point, line and area meanings.",
+    props: {
+      label: { type: "string", default: "Map legend" },
+      items: {
+        type: "array",
+        required: true,
+        description: "Readonly MapLegendItem[]; labels/descriptions explain the supplied geometry. Variants use existing tokens; geometry kind and line/area pattern are always visible as text. Point symbols remain solid.",
+        items: {
+          id: "string",
+          label: "string",
+          kind: "point | line | area",
+          variant: "neutral | success | warning | error | info | accent (optional; neutral)",
+          pattern: "solid | dashed (optional; solid; applies to line/area)",
+          description: "string (optional)"
+        }
+      },
+      className: { type: "string" }
+    },
+    composable_with: ["LayerControl", "MapControls", "DescriptionList"],
+    never_inside: ["Button"],
+    example: '<MapLegend items={[{ id: "coverage", label: "Reported coverage", kind: "area", variant: "info", description: "Supplied model footprint" }]} />'
+  }
+};
+export {
+  MapLegendManifest
+};

package/dist/MapLegend/index.js

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

package/dist/MapScale/MapScale.js

@@ -0,0 +1,96 @@
+"use client";
+
+// src/MapScale/MapScale.tsx
+import { forwardRef, useRef } from "react";
+import { useNumberFormatter } from "react-aria";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import { devValidate } from "../_internal/devValidate.js";
+import { joinIds, usePartIds } from "../_internal/fieldIds.js";
+import { NumberText } from "../_internal/numberText.js";
+import { useElementWidth } from "../_internal/useElementWidth.js";
+import { MapScaleManifest } from "./MapScale.manifest.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DISTANCE = { maximumSignificantDigits: 15 };
+var scaleStyles = cva("flex min-w-0 flex-col gap-1u font-sans text-oprt-base text-oprt-text");
+function scale(metersPerPixel, width, units) {
+  if (metersPerPixel === null || !Number.isFinite(metersPerPixel) || metersPerPixel <= 0 || !Number.isFinite(width) || width <= 0)
+    return null;
+  const meters = metersPerPixel * width;
+  if (!Number.isFinite(meters) || meters <= 0) return null;
+  const [factor, unit] = units === "imperial" ? meters >= 1609.344 ? [1609.344, "mi"] : [0.3048, "ft"] : meters >= 1e3 ? [1e3, "km"] : [1, "m"];
+  const bound = meters / factor, magnitude = 10 ** Math.floor(Math.log10(bound));
+  const distance = [5, 2, 1].map((multiple) => multiple * magnitude).find((candidate) => candidate <= bound);
+  if (!distance || !Number.isFinite(distance)) return null;
+  const pixels = distance * factor / metersPerPixel;
+  if (!Number.isFinite(pixels) || pixels <= 0 || pixels > width) return null;
+  return { pixels, distance, unit };
+}
+var MapScale = forwardRef((allProps, ref) => {
+  const {
+    label = "Map scale",
+    metersPerPixel = null,
+    maxWidth = 120,
+    units = "metric",
+    className,
+    id,
+    "aria-labelledby": labelledBy,
+    ...props
+  } = allProps;
+  if (process.env.NODE_ENV !== "production") {
+    devValidate("MapScale", MapScaleManifest.MapScale.props, { ...allProps });
+  }
+  const labelRef = useRef(null);
+  const ids = usePartIds(["label"], {
+    id,
+    readRendered: () => labelRef.current?.id.replace(/-label$/, "")
+  });
+  const format = useNumberFormatter(DISTANCE);
+  const available = useRef(null);
+  const measuredWidth = useElementWidth(available, {
+    initial: null
+  });
+  const value = Number.isFinite(maxWidth) && maxWidth > 0 ? scale(
+    metersPerPixel,
+    measuredWidth === null ? maxWidth : Math.min(maxWidth, measuredWidth),
+    units
+  ) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      id,
+      ref,
+      role: "group",
+      "aria-labelledby": joinIds(ids.label, labelledBy),
+      className: clsx(scaleStyles(), className),
+      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("div", { ref: available, className: "min-w-0 w-full", children: value ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-testid": "scale-bar",
+              "aria-hidden": "true",
+              className: "block h-1u border-x-2 border-b-2 border-oprt-text forced-colors:border-[CanvasText]",
+              style: { width: value.pixels }
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "m-0 font-mono tabular-nums", children: /* @__PURE__ */ jsx(NumberText, { value: format.format(value.distance), unit: value.unit }) })
+        ] }) : /* @__PURE__ */ jsx("p", { className: "m-0 text-oprt-text-dim", children: "Scale unavailable" }) })
+      ]
+    }
+  );
+});
+MapScale.displayName = "MapScale";
+export {
+  MapScale
+};

package/dist/MapScale/MapScale.manifest.js

@@ -0,0 +1,31 @@
+// src/MapScale/MapScale.manifest.ts
+var MapScaleManifest = {
+  MapScale: {
+    description: "Bounded 1/2/5 ground-distance scale from a supplied local map resolution.",
+    props: {
+      label: { type: "string", default: "Map scale" },
+      metersPerPixel: {
+        type: "number",
+        description: "Positive finite local ground meters per CSS pixel. Missing/null/nonpositive/nonfinite values show Scale unavailable. Adapter owns projection and scale location."
+      },
+      maxWidth: {
+        type: "number",
+        default: 120,
+        description: "Positive finite maximum bar width in CSS pixels. Recomputes against narrower measured container width rather than shrinking a mislabeled bar."
+      },
+      units: {
+        type: "enum",
+        values: ["metric", "imperial"],
+        default: "metric",
+        description: "Metric uses m/km; imperial uses ft/mi. Both derive from the same supplied ground resolution."
+      },
+      className: { type: "string" }
+    },
+    composable_with: ["MapControls", "MapLegend", "AppShell"],
+    never_inside: ["Button"],
+    example: '<MapScale metersPerPixel={frame.metersPerPixel} units="metric" />'
+  }
+};
+export {
+  MapScaleManifest
+};

package/dist/MapScale/index.js

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

package/dist/MediaFrame/MediaFrame.js

@@ -0,0 +1,113 @@
+"use client";
+
+// src/MediaFrame/MediaFrame.tsx
+import { forwardRef, useRef } from "react";
+import { useNumberFormatter } from "react-aria";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import { Badge } from "../Badge/Badge.js";
+import { devValidate } from "../_internal/devValidate.js";
+import { joinIds, usePartIds } from "../_internal/fieldIds.js";
+import { NumberText } from "../_internal/numberText.js";
+import { formatUtcTimestamp, isValidTimestamp } from "../_internal/timestamp.js";
+import { MediaFrameManifest } from "./MediaFrame.manifest.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var EXACT_NUMBER = { maximumSignificantDigits: 21 };
+var frameStyles = cva(
+  "flex min-w-0 flex-col border border-oprt-border bg-oprt-surface-1 font-sans text-oprt-base normal-case text-oprt-text"
+);
+var MediaFrame = forwardRef((allProps, ref) => {
+  const {
+    label,
+    state,
+    capturedAt,
+    source,
+    latencyMs,
+    retained = false,
+    detail,
+    aspectRatio = 16 / 9,
+    children,
+    actions,
+    className,
+    id,
+    "aria-labelledby": labelledBy,
+    ...props
+  } = allProps;
+  if (process.env.NODE_ENV !== "production") {
+    devValidate("MediaFrame", MediaFrameManifest.MediaFrame.props, { ...allProps });
+  }
+  const labelRef = useRef(null);
+  const ids = usePartIds(["label"], {
+    id,
+    readRendered: () => labelRef.current?.id.replace(/-label$/, "")
+  });
+  const latency = useNumberFormatter(EXACT_NUMBER);
+  const valid = isValidTimestamp(capturedAt);
+  const shownTime = valid ? formatUtcTimestamp(capturedAt) : null;
+  const timestamp = valid ? new Date(capturedAt).toISOString() : null;
+  const unavailable = state === "unavailable" || state === "reconnecting";
+  const ratio = Number.isFinite(aspectRatio) && aspectRatio > 0 ? aspectRatio : 16 / 9;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      id,
+      ref,
+      role: "region",
+      "aria-labelledby": joinIds(ids.label, labelledBy),
+      className: clsx(frameStyles(), className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2u border-b border-oprt-border p-2u", 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(Badge, { appearance: "text", variant: "neutral", children: state })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "relative flex w-full min-w-0 items-center justify-center overflow-hidden bg-oprt-bg [&>canvas]:h-full [&>canvas]:w-full [&>canvas]:object-contain [&>img]:h-full [&>img]:w-full [&>img]:object-contain [&>video]:h-full [&>video]:w-full [&>video]:object-contain",
+            style: { aspectRatio: ratio === 16 / 9 ? "16 / 9" : String(ratio) },
+            children: children ?? /* @__PURE__ */ jsx("p", { className: "m-0 p-2u text-oprt-text-dim", children: "No media supplied." })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1u border-t border-oprt-border p-2u", children: [
+          source && /* @__PURE__ */ jsxs("p", { className: "m-0 text-oprt-text-dim oprt-wrap-anywhere", children: [
+            "Source: ",
+            /* @__PURE__ */ jsx("span", { children: source })
+          ] }),
+          unavailable && /* @__PURE__ */ jsx("p", { className: "m-0", children: "Current frame unavailable." }),
+          retained && /* @__PURE__ */ jsx("p", { className: "m-0", children: "Retained frame \u2014 not current." }),
+          /* @__PURE__ */ jsx("p", { className: "m-0 text-oprt-text-dim oprt-wrap-anywhere", children: timestamp && shownTime ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            retained || unavailable ? "Last frame captured: " : "Captured: ",
+            /* @__PURE__ */ jsx("time", { className: "font-mono tabular-nums", dateTime: timestamp, children: shownTime })
+          ] }) : "Capture time unknown." }),
+          latencyMs !== void 0 && /* @__PURE__ */ jsx("p", { className: "m-0 text-oprt-text-dim", children: latencyMs !== null && Number.isFinite(latencyMs) && latencyMs >= 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            "Latency:",
+            " ",
+            /* @__PURE__ */ jsx(
+              NumberText,
+              {
+                value: latency.format(latencyMs + 0),
+                unit: "ms",
+                className: "font-mono tabular-nums"
+              }
+            )
+          ] }) : "Latency unknown." }),
+          detail && /* @__PURE__ */ jsx("p", { className: "m-0 oprt-wrap-anywhere", children: detail }),
+          actions && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1u", children: actions })
+        ] })
+      ]
+    }
+  );
+});
+MediaFrame.displayName = "MediaFrame";
+export {
+  MediaFrame
+};

package/dist/MediaFrame/MediaFrame.manifest.js

@@ -0,0 +1,57 @@
+// src/MediaFrame/MediaFrame.manifest.ts
+var MediaFrameManifest = {
+  MediaFrame: {
+    description: "Named media surface with supplied freshness state, capture time and retained-frame disclosure.",
+    props: {
+      label: { type: "string", required: true },
+      state: {
+        type: "enum",
+        values: ["live", "delayed", "paused", "recorded", "reconnecting", "unavailable"],
+        required: true,
+        description: "Caller-supplied state. Reconnecting and unavailable always disclose that a current frame is unavailable."
+      },
+      capturedAt: {
+        type: "number",
+        required: true,
+        description: "Actual supplied frame capture time in epoch milliseconds, or null (fractional milliseconds allowed). Shown as YYYY-MM-DD HH:MM:SS UTC; the time element keeps the exact ISO instant in dateTime. Invalid dates and null display an unknown capture time."
+      },
+      source: {
+        type: "string",
+        description: "Readable source identity; does not initiate a connection."
+      },
+      latencyMs: {
+        type: "number",
+        description: "Supplied nonnegative latency in milliseconds, or null for unknown. Invalid values display unknown; omitted values are hidden."
+      },
+      retained: {
+        type: "boolean",
+        default: false,
+        description: "Explicitly labels imagery as a retained frame that is not current."
+      },
+      detail: {
+        type: "string",
+        description: "Persistent application explanation of the media state."
+      },
+      aspectRatio: {
+        type: "number",
+        default: 1.7777777777777777,
+        description: "Media width divided by height; defaults to 16/9. Nonpositive or nonfinite ratios fall back to 16/9."
+      },
+      children: {
+        type: "node",
+        description: "Application-owned media, image, canvas or fallback. Direct media children fit within the aspect-ratio surface without cropping."
+      },
+      actions: {
+        type: "node",
+        description: "Application-supplied accessible actions. Availability, permissions and outcomes remain with the caller."
+      },
+      className: { type: "string" }
+    },
+    composable_with: ["PlaybackControls", "Button", "AttachmentPreview", "Inspector"],
+    never_inside: ["Button"],
+    example: '<MediaFrame label="Pump camera" state="recorded" capturedAt={confirmedFrameTime} source="CAM-12" detail="Training footage"><video muted playsInline src={recordingUrl} /></MediaFrame>'
+  }
+};
+export {
+  MediaFrameManifest
+};

package/dist/MediaFrame/index.js

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

package/dist/MultiSelect/MultiSelect.js

@@ -0,0 +1,113 @@
+"use client";
+
+// src/MultiSelect/MultiSelect.tsx
+import { forwardRef, useRef, useState } from "react";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import { Check } from "@oprt/icons";
+import { joinIds, usePartIds } from "../_internal/fieldIds.js";
+import { useMergedRefs } from "../_internal/mergeRefs.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var styles = cva("m-0 min-w-0 border p-2u font-sans text-oprt-base normal-case text-oprt-text", {
+  variants: { invalid: { true: "border-oprt-error", false: "border-oprt-border" } },
+  defaultVariants: { invalid: false }
+});
+var MultiSelect = forwardRef(
+  ({
+    label,
+    options,
+    value,
+    defaultValue = [],
+    onValueChange,
+    name,
+    description,
+    error,
+    disabled = false,
+    className,
+    "aria-describedby": describedBy,
+    ...props
+  }, ref) => {
+    const fieldset = useRef(null);
+    const fieldsetRef = useMergedRefs(fieldset, ref);
+    const ids = usePartIds(["description", "error"], {
+      readRendered: () => fieldset.current?.getAttribute("data-oprt-ids")
+    });
+    const [local, setLocal] = useState(defaultValue);
+    const selected = value ?? local;
+    const descriptions = joinIds(describedBy, description && ids.description, error && ids.error);
+    return /* @__PURE__ */ jsxs(
+      "fieldset",
+      {
+        ...props,
+        ref: fieldsetRef,
+        "data-oprt-ids": ids.base,
+        disabled,
+        "aria-invalid": Boolean(error) || void 0,
+        "aria-describedby": descriptions,
+        className: clsx(styles({ invalid: Boolean(error) }), className),
+        children: [
+          /* @__PURE__ */ jsx("legend", { className: "min-w-0 px-1u oprt-wrap-anywhere text-oprt-base font-medium text-oprt-text", children: label }),
+          description && /* @__PURE__ */ jsx(
+            "p",
+            {
+              id: ids.description,
+              className: "m-0 mb-1u min-w-0 oprt-wrap-anywhere text-oprt-text-dim",
+              children: description
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2u", children: options.map((option) => /* @__PURE__ */ jsxs(
+            "label",
+            {
+              className: "m-0 inline-flex min-h-3u items-center gap-1u font-medium has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50",
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "relative inline-flex h-3u w-3u shrink-0", children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "checkbox",
+                      name,
+                      value: option.value,
+                      checked: selected.includes(option.value),
+                      disabled: disabled || option.disabled,
+                      className: "peer m-0 h-3u w-3u appearance-none border border-oprt-border-control bg-oprt-surface-2 checked:border-oprt-accent focus-visible:outline-hidden focus-visible:border-oprt-border-focus focus-visible:shadow-oprt-focus",
+                      onChange: (event) => {
+                        if (disabled || option.disabled) return;
+                        const next = event.target.checked ? [.../* @__PURE__ */ new Set([...selected, option.value])] : selected.filter((key) => key !== option.value);
+                        if (value === void 0) setLocal(next);
+                        onValueChange?.(next);
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Check,
+                    {
+                      size: 20,
+                      className: "pointer-events-none absolute inset-0 m-auto hidden text-oprt-accent peer-checked:block"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 oprt-wrap-anywhere", children: option.label })
+              ]
+            },
+            option.value
+          )) }),
+          options.length === 0 && /* @__PURE__ */ jsx("p", { className: "m-0 text-oprt-text-dim", children: "No options available." }),
+          error && // A caller's error is an alert, as in a Field (MultiSelect-R2).
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              id: ids.error,
+              role: "alert",
+              className: "m-0 mt-1u min-w-0 oprt-wrap-anywhere text-oprt-error",
+              children: error
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+MultiSelect.displayName = "MultiSelect";
+export {
+  MultiSelect
+};

package/dist/MultiSelect/MultiSelect.manifest.js

@@ -0,0 +1,51 @@
+// src/MultiSelect/MultiSelect.manifest.ts
+var MultiSelectManifest = {
+  MultiSelect: {
+    description: "Native checkbox group with shared OPERATOR Check icons, stable values, labeled options, and explicit validation.",
+    props: {
+      label: {
+        type: "string",
+        required: true,
+        description: "Visible fieldset legend and accessible group name."
+      },
+      options: {
+        type: "array",
+        required: true,
+        description: "Unique stable values. Disabled options remain visible.",
+        items: {
+          value: "string (required, unique)",
+          label: "string (required)",
+          disabled: "boolean"
+        }
+      },
+      value: {
+        type: "array",
+        description: "Controlled selected values; values missing from options are preserved during changes."
+      },
+      defaultValue: {
+        type: "array",
+        description: "Initial values for uncontrolled selection. Defaults to an empty array."
+      },
+      onValueChange: {
+        type: "function",
+        description: "(values: string[]) => void. Controlled state only changes when the owner supplies new values."
+      },
+      name: {
+        type: "string",
+        description: "Native form name shared by selected checkboxes. FormData returns one entry per selected, enabled option."
+      },
+      disabled: { type: "boolean", default: false },
+      description: { type: "string" },
+      error: {
+        type: "string",
+        description: "Visible validation text; associated with the group and paired with aria-invalid."
+      }
+    },
+    composable_with: ["Card"],
+    never_inside: ["Button"],
+    example: '<MultiSelect label="Sensors" options={[{ value: "radar", label: "Radar" }, { value: "optical", label: "Optical" }]} value={sensors} onValueChange={setSensors} />'
+  }
+};
+export {
+  MultiSelectManifest
+};

package/dist/MultiSelect/index.js

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