@oprt/react 0.0.0-stage → 0.1.0

package/dist/DateTimePicker/DateTimePicker.js

@@ -0,0 +1,213 @@
+"use client";
+
+// src/DateTimePicker/DateTimePicker.tsx
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import { DatePicker } from "../DatePicker/DatePicker.js";
+import { TimeField } from "../TimeField/TimeField.js";
+import { Button } from "../Button/Button.js";
+import { RadioGroup, Radio } from "../RadioGroup/RadioGroup.js";
+import { instantWallTime, resolveWallTime, validInstant, validTimeZone } from "../_internal/date.js";
+import { joinIds, usePartIds } from "../_internal/fieldIds.js";
+import {
+  FIELD_COLUMNS,
+  FIELD_LABEL_STYLES,
+  SegmentGroupContext,
+  firstSegmentFocus
+} from "../_internal/segmentField.js";
+import { useMergedRefs } from "../_internal/mergeRefs.js";
+import { formatUtcTimestamp } from "../_internal/timestamp.js";
+import { useRestoreFocusOnRemoval } from "../_internal/useRestoreFocusOnRemoval.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var pickerStyles = cva(
+  "flex min-w-0 flex-col gap-2u font-sans text-oprt-base text-oprt-text focus-visible:outline-hidden focus-visible:shadow-oprt-focus"
+);
+var DateTimePicker = forwardRef(
+  ({
+    label,
+    value,
+    onValueChange,
+    onDraftValidityChange,
+    timeZone,
+    min,
+    max,
+    disabled = false,
+    readOnly = false,
+    required = false,
+    id,
+    className
+  }, ref) => {
+    const root = useRef(null);
+    const setRoot = useMergedRefs(root, ref);
+    const ids = usePartIds(["label", "zone", "error", "status"], {
+      id,
+      readRendered: () => root.current?.id
+    });
+    const zoneName = typeof timeZone === "string" ? timeZone : "invalid";
+    const base = `${String(value)}|${String(timeZone)}`;
+    const wall = useMemo(() => instantWallTime(value, timeZone), [value, timeZone]);
+    const initial = {
+      base,
+      date: wall.date,
+      time: wall.time,
+      occurrence: wall.occurrence,
+      dateValid: true,
+      timeValid: true,
+      dirty: false
+    };
+    const [draft, setDraft] = useState(initial);
+    const current = draft.base === base ? draft : initial;
+    const zoneValid = validTimeZone(timeZone);
+    const boundsValid = (min === void 0 || validInstant(min)) && (max === void 0 || validInstant(max)) && !(min !== void 0 && max !== void 0 && min > max);
+    const resolution = current.date && current.time ? resolveWallTime(current.date, current.time, timeZone) : null;
+    const ambiguous = resolution?.status === "valid" && resolution.earlier !== resolution.later;
+    const candidate = resolution?.status === "valid" ? current.occurrence === "later" ? resolution.later : resolution.earlier : null;
+    const empty = current.date === null && current.time === null;
+    const checkedInstant = current.dirty ? candidate : value;
+    const error = !zoneValid ? "Invalid time zone. Supply an IANA time zone." : !boundsValid ? "Invalid instant bounds. Supply finite epoch milliseconds in ascending order." : !current.dirty && wall.error ? wall.error : !current.dateValid || !current.timeValid ? "Complete the date and time before applying this change." : empty ? required ? "A date and time are required." : null : !current.date || !current.time ? "Enter both a date and a time." : resolution?.status === "invalid" ? resolution.error : ambiguous && current.occurrence === null ? "Choose the earlier or later occurrence of this repeated time." : checkedInstant !== null && min !== void 0 && checkedInstant < min ? `Choose an instant at or after ${formatUtcTimestamp(min)}.` : checkedInstant !== null && max !== void 0 && checkedInstant > max ? `Choose an instant at or before ${formatUtcTimestamp(max)}.` : null;
+    const group = useMemo(() => {
+      const dayOf = (bound) => bound !== void 0 && zoneValid && boundsValid ? instantWallTime(bound, timeZone).date ?? void 0 : void 0;
+      return { required, calendar: { min: dayOf(min), max: dayOf(max) } };
+    }, [required, min, max, timeZone, zoneValid, boundsValid]);
+    const restoring = useRef(false);
+    const restore = useRestoreFocusOnRemoval(root, {
+      findTarget: () => {
+        restoring.current = true;
+        queueMicrotask(() => {
+          restoring.current = false;
+        });
+        return root.current;
+      }
+    });
+    const keepFocus = (event) => {
+      if (restoring.current) {
+        restoring.current = false;
+        return true;
+      }
+      const from = event.relatedTarget;
+      return from instanceof Node && event.currentTarget.contains(from);
+    };
+    const callback = useRef(onDraftValidityChange);
+    callback.current = onDraftValidityChange;
+    useEffect(
+      () => callback.current?.(!error && !current.dirty, { pending: current.dirty }),
+      [error, current.dirty]
+    );
+    const edit = (part, next) => {
+      if (disabled || readOnly) return;
+      setDraft({ ...current, [part]: next, dirty: true, occurrence: null });
+    };
+    const reportValidity = (part, valid) => setDraft((previous) => {
+      const active = previous.base === base ? previous : initial;
+      if (active[part] === valid) return previous;
+      return { ...active, [part]: valid, dirty: active.dirty || !valid };
+    });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: setRoot,
+        id: ids.base,
+        role: "group",
+        "aria-labelledby": ids.label,
+        "aria-describedby": joinIds(
+          ids.zone,
+          error && ids.error,
+          !error && current.dirty && ids.status
+        ),
+        "aria-invalid": !!error || void 0,
+        className: clsx(pickerStyles(), className),
+        onFocusCapture: restore.onFocusCapture,
+        onBlurCapture: restore.onBlurCapture,
+        ...firstSegmentFocus(disabled, keepFocus),
+        children: [
+          /* @__PURE__ */ jsxs("p", { id: ids.label, className: FIELD_LABEL_STYLES, children: [
+            label,
+            required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " *" })
+          ] }),
+          /* @__PURE__ */ jsxs("p", { id: ids.zone, className: "m-0 text-oprt-text-dim oprt-wrap-anywhere", children: [
+            "Time zone: ",
+            /* @__PURE__ */ jsx("span", { children: zoneName })
+          ] }),
+          /* @__PURE__ */ jsx(SegmentGroupContext.Provider, { value: group, children: /* @__PURE__ */ jsxs("div", { className: FIELD_COLUMNS, children: [
+            /* @__PURE__ */ jsx(
+              DatePicker,
+              {
+                label: `${label} date`,
+                value: current.date,
+                onValueChange: (next) => edit("date", next),
+                onDraftValidityChange: (valid) => reportValidity("dateValid", valid),
+                disabled: disabled || !zoneValid || !boundsValid,
+                readOnly,
+                className: "min-w-0 flex-1"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TimeField,
+              {
+                label: `${label} time`,
+                value: current.time,
+                onValueChange: (next) => edit("time", next),
+                onDraftValidityChange: (valid) => reportValidity("timeValid", valid),
+                disabled: disabled || !zoneValid || !boundsValid,
+                readOnly,
+                className: "min-w-0 flex-1"
+              }
+            )
+          ] }, base) }),
+          ambiguous && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1u", children: [
+            /* @__PURE__ */ jsxs("p", { className: "m-0 text-oprt-text-dim oprt-wrap-anywhere", children: [
+              "This wall time occurs twice in ",
+              zoneName,
+              "."
+            ] }),
+            /* @__PURE__ */ jsxs(
+              RadioGroup,
+              {
+                "aria-label": "Repeated time occurrence",
+                value: current.occurrence ?? "",
+                disabled: disabled || readOnly,
+                onValueChange: (occurrence) => {
+                  if (!disabled && !readOnly && (occurrence === "earlier" || occurrence === "later"))
+                    setDraft({ ...current, occurrence, dirty: true });
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(Radio, { value: "earlier", children: [
+                    "Earlier occurrence (",
+                    formatUtcTimestamp(resolution.status === "valid" ? resolution.earlier : 0),
+                    ")"
+                  ] }),
+                  /* @__PURE__ */ jsxs(Radio, { value: "later", children: [
+                    "Later occurrence (",
+                    formatUtcTimestamp(resolution.status === "valid" ? resolution.later : 0),
+                    ")"
+                  ] })
+                ]
+              }
+            )
+          ] }),
+          error && /* @__PURE__ */ jsx("p", { id: ids.error, className: "m-0 text-oprt-error", children: error }),
+          !error && current.dirty && /* @__PURE__ */ jsx("p", { id: ids.status, className: "m-0 text-oprt-text-dim", children: "Apply this change before continuing." }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: "self-start",
+              disabled: disabled || readOnly || !current.dirty || !!error,
+              onClick: () => {
+                if (disabled || readOnly || error || !current.dirty) return;
+                const next = empty ? null : candidate;
+                if (next === value) setDraft({ ...current, dirty: false });
+                onValueChange(next);
+              },
+              children: "Apply"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+DateTimePicker.displayName = "DateTimePicker";
+export {
+  DateTimePicker
+};

package/dist/DateTimePicker/DateTimePicker.manifest.js

@@ -0,0 +1,44 @@
+// src/DateTimePicker/DateTimePicker.manifest.ts
+var DateTimePickerManifest = {
+  DateTimePicker: {
+    description: "Controlled instant editor with an explicit IANA time zone, minute-level date/time drafts, Apply, and explicit daylight-saving overlap choices.",
+    props: {
+      label: { type: "string", required: true },
+      value: {
+        type: "number",
+        required: true,
+        description: "Integer epoch milliseconds, or null. Untouched values retain their supplied seconds and milliseconds."
+      },
+      timeZone: {
+        type: "string",
+        required: true,
+        description: "IANA time zone used to display and resolve the wall-time draft. Visible beside the fields."
+      },
+      onValueChange: {
+        type: "function",
+        required: true,
+        description: "Requests an instant or null only after Apply. Minute-level edits commit with zero seconds and milliseconds."
+      },
+      onDraftValidityChange: {
+        type: "function",
+        description: "Callback (valid, { pending }). Pending identifies uncommitted local edits; pristine required-empty or malformed supplied values are invalid but not pending. False for invalid, incomplete, or unapplied edits. Returns true when the host accepts Apply or supplies another valid value. Block Review/Save while false."
+      },
+      min: { type: "number", description: "Inclusive epoch-millisecond lower bound." },
+      max: { type: "number", description: "Inclusive epoch-millisecond upper bound." },
+      disabled: { type: "boolean", default: false },
+      readOnly: { type: "boolean", default: false },
+      required: { type: "boolean", default: false },
+      id: {
+        type: "string",
+        description: "ID of the focusable group. Focusing it or its forwarded HTMLDivElement ref enters the first date segment."
+      },
+      className: { type: "string" }
+    },
+    composable_with: ["FormSection", "FormErrorSummary", "DatePicker", "TimeField"],
+    never_inside: ["Button"],
+    example: '<DateTimePicker id="window-start" label="Window start" value={instant} timeZone="America/Los_Angeles" onValueChange={setInstant} onDraftValidityChange={setInstantValid} required />'
+  }
+};
+export {
+  DateTimePickerManifest
+};

package/dist/DateTimePicker/index.js

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

package/dist/DescriptionList/DescriptionList.js

@@ -0,0 +1,93 @@
+"use client";
+
+// src/DescriptionList/DescriptionList.tsx
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import { forwardRef, useEffect, useRef } from "react";
+import { DescriptionListManifest } from "./DescriptionList.manifest.js";
+import { devValidate } from "../_internal/devValidate.js";
+import { NumberText, isNumberText } from "../_internal/numberText.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var listStyles = cva("m-0 min-w-0 font-sans text-oprt-base text-oprt-text", {
+  variants: {
+    layout: {
+      stacked: "flex flex-col gap-2u",
+      aligned: "flex flex-col gap-2u",
+      details: "flex flex-col gap-1u"
+    }
+  },
+  defaultVariants: { layout: "stacked" }
+});
+var itemStyles = cva("grid min-w-0", {
+  variants: {
+    layout: {
+      stacked: "grid-cols-1 gap-1u",
+      aligned: "grid-cols-[repeat(auto-fit,minmax(min(100%,8rem),1fr))] gap-y-1u gap-x-3u",
+      details: "grid-cols-[minmax(0,2fr)_minmax(0,3fr)] items-baseline gap-y-1u gap-x-2u"
+    }
+  },
+  defaultVariants: { layout: "stacked" }
+});
+var labelStyles = cva(
+  "m-0 min-w-0 oprt-wrap-anywhere text-oprt-text-dim uppercase tracking-oprt-sm",
+  {
+    variants: {
+      layout: { stacked: "", aligned: "", details: "text-oprt-sm font-medium" }
+    },
+    defaultVariants: { layout: "stacked" }
+  }
+);
+var valueStyles = cva(
+  "m-0 min-w-0 oprt-wrap-anywhere normal-case tracking-normal [&>[data-oprt-badge]]:align-baseline",
+  {
+    variants: {
+      layout: { stacked: "", aligned: "", details: "text-right" }
+    },
+    defaultVariants: { layout: "stacked" }
+  }
+);
+var isMissing = (value) => value === null || value === void 0 || value === "";
+var DescriptionList = forwardRef(
+  ({ items, layout = "stacked", className, ...props }, ref) => {
+    if (process.env.NODE_ENV !== "production") {
+      devValidate("DescriptionList", DescriptionListManifest.DescriptionList.props, { layout });
+    }
+    const reported = useRef(/* @__PURE__ */ new Set());
+    useEffect(() => {
+      if (process.env.NODE_ENV === "production") return;
+      const fresh = items.filter(({ id, value }) => isMissing(value) && !reported.current.has(id)).map(({ id }) => id);
+      if (fresh.length === 0) return;
+      for (const id of fresh) reported.current.add(id);
+      console.warn(
+        JSON.stringify(
+          {
+            component: "DescriptionList",
+            warning: "MISSING_VALUE",
+            prop: "items",
+            received: `value of ${fresh.map((id) => JSON.stringify(id)).join(", ")}`,
+            suggestion: "Supply explicit text for a missing value, such as Not supplied: an empty value leaves its term standing alone, on screen and for a screen reader. Zero and false are shown as they are."
+          },
+          null,
+          2
+        )
+      );
+    }, [items]);
+    return /* @__PURE__ */ jsx(
+      "dl",
+      {
+        ref,
+        className: clsx(listStyles({ layout }), className),
+        "data-layout": layout,
+        ...props,
+        children: items.map(({ id, label, value, mono }) => /* @__PURE__ */ jsxs("div", { className: itemStyles({ layout }), children: [
+          /* @__PURE__ */ jsx("dt", { className: labelStyles({ layout }), children: label }),
+          /* @__PURE__ */ jsx("dd", { className: clsx(valueStyles({ layout }), mono && "font-mono"), children: typeof value === "boolean" ? String(value) : isNumberText(value) ? /* @__PURE__ */ jsx(NumberText, { value }) : value })
+        ] }, id))
+      }
+    );
+  }
+);
+DescriptionList.displayName = "DescriptionList";
+export {
+  DescriptionList
+};

package/dist/DescriptionList/DescriptionList.manifest.js

@@ -0,0 +1,40 @@
+// src/DescriptionList/DescriptionList.manifest.ts
+var DescriptionListManifest = {
+  DescriptionList: {
+    description: "Semantic label/value facts with wrapping, exact values, and stacked, responsive aligned, or compact detail layouts.",
+    props: {
+      items: {
+        type: "array",
+        required: true,
+        description: "Readonly DescriptionListItem array. IDs are stable unique keys within this list, never DOM IDs. Direct booleans render as true/false; zero and other ReactNode values are preserved. Supply explicit text for missing values (development warns for null, undefined or empty text) and include units in the value. A value that is a number, optionally followed by its unit, wraps only between digit groups and keeps the unit with its last group; a word after it that is not a unit wraps as text, and more than 15 ungrouped digits are an identifier that wraps anywhere.",
+        items: {
+          id: "string (required, unique)",
+          label: "ReactNode (required)",
+          value: "ReactNode (required)",
+          mono: "boolean (optional)"
+        }
+      },
+      layout: {
+        type: "enum",
+        values: ["stacked", "aligned", "details"],
+        default: "stacked",
+        description: "Stacked places each value below its label. Aligned uses columns when space permits and stacks in narrow containers. Details keeps 40/60 columns with 9px medium uppercase muted labels, 11px right-aligned values, baseline alignment, 8px row spacing and a 16px column gap. Long content wraps in either column."
+      },
+      className: { type: "string" }
+    },
+    composable_with: [
+      "EntityPreview",
+      "OperationalStatus",
+      "Inspector",
+      "Popover",
+      "Card",
+      "Link",
+      "CopyButton"
+    ],
+    never_inside: ["Button", "Badge", "Link"],
+    example: '<DescriptionList layout="aligned" items={[{ id: "pressure", label: "Pressure", value: "0 kPa", mono: true }, { id: "enabled", label: "Enabled", value: false }]} />'
+  }
+};
+export {
+  DescriptionListManifest
+};

package/dist/DescriptionList/index.js

@@ -0,0 +1,9 @@
+// src/DescriptionList/index.ts
+import {
+  DescriptionList
+} from "./DescriptionList.js";
+import { DescriptionListManifest } from "./DescriptionList.manifest.js";
+export {
+  DescriptionList,
+  DescriptionListManifest
+};

package/dist/Dialog/Dialog.js

@@ -0,0 +1,214 @@
+"use client";
+
+// src/Dialog/Dialog.tsx
+import { X } from "@oprt/icons";
+import {
+  DialogTrigger,
+  Dialog as AriaDialog,
+  ModalOverlay,
+  Modal,
+  Heading,
+  Text,
+  Button as AriaButton,
+  Pressable
+} from "react-aria-components";
+import { mergeProps } from "react-aria";
+import { cva } from "class-variance-authority";
+import {
+  forwardRef,
+  cloneElement,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  useLayoutEffect
+} from "react";
+import clsx from "clsx";
+import { Button } from "../Button/Button.js";
+import { DialogManifest } from "./Dialog.manifest.js";
+import { devValidate } from "../_internal/devValidate.js";
+import { definedOnly } from "../_internal/aria.js";
+import { useMergedRefs } from "../_internal/mergeRefs.js";
+import {
+  useMotion,
+  composeMotionHandlers,
+  MotionContext
+} from "../_internal/motion.js";
+import { isSingleElement } from "../_internal/overlay.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var surfaceStyles = cva("oprt-motion-surface relative z-50 flex max-h-full w-full flex-col", {
+  variants: {
+    size: {
+      sm: "max-w-sm",
+      md: "max-w-md",
+      lg: "max-w-lg"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+function DialogReentryFocus({
+  open,
+  dialog,
+  children
+}) {
+  const wasOpen = useRef(open);
+  useLayoutEffect(() => {
+    if (open && !wasOpen.current && !dialog.current?.contains(document.activeElement)) {
+      dialog.current?.focus({ preventScroll: true });
+    }
+    wasOpen.current = open;
+  }, [open, dialog]);
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function useScrolls(element, content) {
+  const [scrolls, setScrolls] = useState(false);
+  useEffect(() => {
+    const box = element.current;
+    if (!box || typeof ResizeObserver === "undefined") return;
+    const measure = () => setScrolls(box.scrollHeight > box.clientHeight + 1);
+    const observer = new ResizeObserver(measure);
+    observer.observe(box);
+    if (content.current) observer.observe(content.current);
+    measure();
+    return () => observer.disconnect();
+  }, [element, content]);
+  return scrolls;
+}
+function DialogBody({ title, children }) {
+  const body = useRef(null);
+  const content = useRef(null);
+  const scrolls = useScrolls(body, content);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: body,
+      "data-oprt-dialog-body": "",
+      className: "-m-0.5u min-h-0 flex-1 overflow-y-auto overscroll-contain p-0.5u outline-hidden focus-visible:shadow-oprt-focus forced-colors:focus-visible:outline-solid forced-colors:focus-visible:outline-2 forced-colors:focus-visible:-outline-offset-2 forced-colors:focus-visible:outline-[CanvasText]",
+      ...scrolls ? { tabIndex: 0, role: "region", "aria-label": `${title} content` } : {},
+      children: /* @__PURE__ */ jsx("div", { ref: content, className: "flex flex-col gap-3u", children })
+    }
+  );
+}
+function withDroppedProps(rendered, accepted) {
+  const dropped = {};
+  for (const [key, value] of Object.entries(accepted)) {
+    if (value === void 0) continue;
+    if (!(key in rendered) || rendered[key] === void 0) dropped[key] = value;
+    else if (typeof value === "function" && rendered[key] !== value) dropped[key] = value;
+  }
+  return mergeProps(rendered, dropped);
+}
+var Dialog = forwardRef(
+  ({
+    title,
+    motion = "auto",
+    description,
+    trigger,
+    footer,
+    open,
+    defaultOpen,
+    onOpenChange,
+    size = "md",
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const motionState = useMotion(motion);
+    const dialogRef = useRef(null);
+    const setDialogRef = useMergedRefs(dialogRef, ref);
+    const rootProps = definedOnly({
+      isOpen: open,
+      defaultOpen,
+      onOpenChange
+    });
+    if (process.env.NODE_ENV !== "production") {
+      devValidate("Dialog", DialogManifest.Dialog.props, { ...props, size });
+    }
+    const generatedId = useId();
+    const describedBy = description ? `${generatedId}description` : void 0;
+    const naming = definedOnly({
+      id: props.id,
+      role: props.role === "alertdialog" ? "alertdialog" : void 0,
+      "aria-label": props["aria-label"],
+      "aria-labelledby": props["aria-labelledby"],
+      "aria-describedby": props["aria-describedby"] ?? describedBy
+    });
+    const overlay = (
+      // With a trigger the open state is owned by DialogTrigger and read from
+      // context; standalone the ModalOverlay owns it. `isDismissable` restores
+      // the Radix behavior of closing on an outside click (React Aria opts out
+      // by default). Escape is handled by React Aria unless explicitly disabled.
+      // The overlay is as tall as the visible viewport React Aria measures, so the dialog also
+      // fits above an on-screen keyboard.
+      /* @__PURE__ */ jsx(
+        ModalOverlay,
+        {
+          ...trigger ? {} : rootProps,
+          isDismissable: true,
+          className: "oprt-motion oprt-motion-overlay fixed inset-x-0 top-0 z-40 flex h-[var(--visual-viewport-height,100dvh)] items-center justify-center p-2u bg-oprt-bg/80",
+          ...motionState.props,
+          render: (domProps) => /* @__PURE__ */ jsx("div", { ...domProps, ...motionState.props }),
+          children: /* @__PURE__ */ jsx(Modal, { className: surfaceStyles({ size }), children: ({ state }) => /* @__PURE__ */ jsx(DialogReentryFocus, { open: state.isOpen, dialog: dialogRef, children: /* @__PURE__ */ jsxs(
+            AriaDialog,
+            {
+              ref: setDialogRef,
+              className: clsx(
+                "flex min-h-0 w-full flex-col gap-3u bg-oprt-surface-1 border border-oprt-border p-4u font-sans focus-visible:border-oprt-border-focus focus-visible:shadow-oprt-focus focus-visible:outline-hidden forced-colors:focus-visible:outline-solid forced-colors:focus-visible:outline-2 forced-colors:focus-visible:-outline-offset-2 forced-colors:focus-visible:outline-[CanvasText]",
+                className
+              ),
+              ...naming,
+              render: (domProps) => /* @__PURE__ */ jsx("section", { ...withDroppedProps(domProps, props) }),
+              children: [
+                /* @__PURE__ */ jsx(
+                  Heading,
+                  {
+                    slot: "title",
+                    className: "m-0 min-w-0 shrink-0 pr-2u text-oprt-lg uppercase tracking-oprt-lg text-oprt-text oprt-wrap-anywhere",
+                    children: title
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  AriaButton,
+                  {
+                    slot: "close",
+                    "aria-label": "Close",
+                    className: "absolute right-2u top-2u inline-flex items-center justify-center w-3u h-oprt-sm border border-transparent text-oprt-text-dim hover:text-oprt-text outline-hidden data-[focus-visible]:border-oprt-border-focus data-[focus-visible]:shadow-oprt-focus",
+                    children: /* @__PURE__ */ jsx(X, { size: 12 })
+                  }
+                ),
+                /* @__PURE__ */ jsxs(DialogBody, { title, children: [
+                  description && /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      slot: "description",
+                      elementType: "p",
+                      id: describedBy,
+                      className: "m-0 min-w-0 text-oprt-base normal-case text-oprt-text-dim oprt-wrap-anywhere",
+                      children: description
+                    }
+                  ),
+                  children
+                ] }),
+                footer && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 flex-wrap justify-end gap-2u", children: footer })
+              ]
+            }
+          ) }) })
+        }
+      )
+    );
+    if (!trigger)
+      return /* @__PURE__ */ jsx(MotionContext.Provider, { value: motionState.mode, children: overlay });
+    const triggerElement = isSingleElement(trigger) ? trigger : /* @__PURE__ */ jsx(Button, { children: trigger });
+    return /* @__PURE__ */ jsx(MotionContext.Provider, { value: motionState.mode, children: /* @__PURE__ */ jsxs(DialogTrigger, { ...rootProps, children: [
+      /* @__PURE__ */ jsx(Pressable, { ...{ "aria-haspopup": "dialog" }, children: cloneElement(
+        triggerElement,
+        composeMotionHandlers(motionState.props, triggerElement.props)
+      ) }),
+      overlay
+    ] }) });
+  }
+);
+Dialog.displayName = "Dialog";
+export {
+  Dialog
+};

package/dist/Dialog/Dialog.manifest.js

@@ -0,0 +1,31 @@
+// src/Dialog/Dialog.manifest.ts
+var DialogManifest = {
+  Dialog: {
+    description: "Modal dialog with a flat API: pass title, optional description, trigger, footer, and body children. Portal'd overlay + content built on React Aria Components (ModalOverlay + Modal + Dialog).",
+    props: {
+      motion: {
+        type: "enum",
+        values: ["auto", "none"],
+        default: "auto",
+        description: "Tactile pointer/touch feedback. None disables motion; keyboard and system reduced motion are always immediate."
+      },
+      title: { type: "string", required: true },
+      description: { type: "string" },
+      size: { type: "enum", values: ["sm", "md", "lg"], default: "md" },
+      open: { type: "boolean" },
+      defaultOpen: { type: "boolean" },
+      onOpenChange: { type: "function" }
+    },
+    slots: {
+      trigger: { type: "focusable element | text (text renders a Button)" },
+      children: { type: "any", required: true },
+      footer: { type: "Button | ButtonGroup" }
+    },
+    composable_with: ["Button", "ButtonGroup"],
+    never_inside: ["Button", "Badge"],
+    example: '<Dialog\n  title="DEPLOY UNIT"\n  description="Confirm deployment to the selected theater."\n  trigger={<Button variant="primary">DEPLOY</Button>}\n  footer={\n    <>\n      <Button variant="secondary">CANCEL</Button>\n      <Button variant="primary">CONFIRM</Button>\n    </>\n  }\n>\n  <p>This action cannot be undone.</p>\n</Dialog>'
+  }
+};
+export {
+  DialogManifest
+};

package/dist/Dialog/index.js

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