@oprt/react 0.0.0-stage → 0.2.0

package/dist/EventTimeline/EventTimeline.js

@@ -0,0 +1,249 @@
+"use client";
+
+// src/EventTimeline/EventTimeline.tsx
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Badge } from "../Badge/Badge.js";
+import { Button } from "../Button/Button.js";
+import { useMergedRefs } from "../_internal/mergeRefs.js";
+import { formatUtcTimestamp, isValidTimestamp } from "../_internal/timestamp.js";
+import { useElementWidth } from "../_internal/useElementWidth.js";
+import { useIsomorphicLayoutEffect } from "../_internal/useIsomorphicLayoutEffect.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var timelineStyles = cva("flex min-w-0 flex-col gap-2u font-sans text-oprt-text");
+var markStyles = cva("fill-current", {
+  variants: {
+    severity: {
+      neutral: "text-oprt-text-dim",
+      info: "text-oprt-info",
+      success: "text-oprt-success",
+      warning: "text-oprt-warning",
+      error: "text-oprt-error"
+    }
+  },
+  defaultVariants: { severity: "neutral" }
+});
+var utc = (value) => formatUtcTimestamp(value, { precision: "milliseconds" }) ?? "";
+var eventValid = (event) => isValidTimestamp(event.start) && (event.end === void 0 || isValidTimestamp(event.end) && event.end >= event.start);
+var laneOf = (event) => event.lane || "Events";
+var DEFAULT_WIDTH = 1e3;
+var MIN_WIDTH = 16;
+var Marker = memo(function Marker2({ id, severity, x, width, selected }) {
+  const classes = clsx(
+    markStyles({ severity: severity ?? "neutral" }),
+    selected && "stroke-oprt-text"
+  );
+  return width !== null ? /* @__PURE__ */ jsx(
+    "rect",
+    {
+      "data-event-id": id,
+      x,
+      y: selected ? 10 : 14,
+      width,
+      height: selected ? 28 : 20,
+      className: classes,
+      vectorEffect: "non-scaling-stroke"
+    }
+  ) : /* @__PURE__ */ jsx(
+    "path",
+    {
+      "data-event-id": id,
+      d: `M ${x} 8 L ${x + 5} 24 L ${x} 40 L ${x - 5} 24 Z`,
+      className: classes,
+      vectorEffect: "non-scaling-stroke"
+    }
+  );
+});
+var TimelineRow = memo(function TimelineRow2({
+  event,
+  selected,
+  selectable,
+  disabled,
+  detailsId,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: clsx(
+        "flex min-w-0 flex-col gap-1u border p-2u",
+        selected ? "border-oprt-accent bg-oprt-surface-2" : "border-oprt-border"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-2u", children: [
+          selectable ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              variant: "ghost",
+              disabled,
+              className: "h-auto! min-h-3u min-w-0 flex-1 justify-start! px-0! whitespace-normal text-left normal-case! tracking-normal hover:underline",
+              "aria-pressed": selected,
+              "aria-describedby": detailsId,
+              onClick: () => {
+                if (!disabled) onSelect(event.id);
+              },
+              children: /* @__PURE__ */ jsx("span", { className: "block min-w-0 oprt-wrap-anywhere", children: event.label })
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 text-oprt-base font-medium normal-case oprt-wrap-anywhere", children: event.label }),
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col items-end gap-1u", children: [
+            /* @__PURE__ */ jsx(Badge, { variant: event.severity ?? "neutral", indicator: "dot", children: event.severity ?? "neutral" }),
+            selected && /* @__PURE__ */ jsx("span", { className: "text-oprt-base font-medium uppercase tracking-oprt-caps", children: "Selected" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { id: detailsId, className: "flex min-w-0 flex-col gap-1u text-oprt-base normal-case", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2u gap-y-1u text-oprt-text-dim", children: [
+            /* @__PURE__ */ jsxs("span", { className: "min-w-0 font-mono oprt-wrap-anywhere", children: [
+              /* @__PURE__ */ jsx("time", { dateTime: new Date(event.start).toISOString(), children: utc(event.start) }),
+              event.end !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                " \u2013 ",
+                /* @__PURE__ */ jsx("time", { dateTime: new Date(event.end).toISOString(), children: utc(event.end) })
+              ] })
+            ] }),
+            event.lane && /* @__PURE__ */ jsx("span", { className: "min-w-0 oprt-wrap-anywhere", children: event.lane })
+          ] }),
+          event.description && /* @__PURE__ */ jsx("p", { className: "m-0 oprt-wrap-anywhere", children: event.description })
+        ] })
+      ]
+    }
+  );
+});
+var EventTimeline = forwardRef(
+  ({
+    events,
+    start,
+    end,
+    selectedId,
+    onSelectionChange,
+    disabled = false,
+    label = "Event timeline",
+    emptyMessage = "No events in this time range.",
+    className,
+    ...props
+  }, forwardedRef) => {
+    const id = useId();
+    const rootRef = useRef(null);
+    const setRef = useMergedRefs(rootRef, forwardedRef);
+    const observed = useElementWidth(rootRef, {
+      initial: null,
+      min: MIN_WIDTH
+    });
+    const [firstWidth, setFirstWidth] = useState(null);
+    useIsomorphicLayoutEffect(() => {
+      const width = rootRef.current?.getBoundingClientRect().width;
+      if (width !== void 0 && Number.isFinite(width) && width > MIN_WIDTH) setFirstWidth(width);
+    }, []);
+    const plotWidth = observed ?? firstWidth ?? DEFAULT_WIDTH;
+    const validRange = isValidTimestamp(start) && isValidTimestamp(end) && start < end;
+    const { visible, omitted, lanes } = useMemo(() => {
+      const validEvents = events.filter(eventValid);
+      const inWindow = validRange ? validEvents.filter((event) => event.start <= end && (event.end ?? event.start) >= start).sort((a, b) => a.start - b.start) : [];
+      const byLane = /* @__PURE__ */ new Map();
+      for (const event of inWindow) {
+        const lane = laneOf(event);
+        const list = byLane.get(lane);
+        if (list) list.push(event);
+        else byLane.set(lane, [event]);
+      }
+      return { visible: inWindow, omitted: events.length - validEvents.length, lanes: byLane };
+    }, [events, start, end, validRange]);
+    const selectionRef = useRef(onSelectionChange);
+    useIsomorphicLayoutEffect(() => {
+      selectionRef.current = onSelectionChange;
+    });
+    const select = useCallback((eventId) => selectionRef.current?.(eventId), []);
+    const extent = plotWidth - 16;
+    const position = (time) => 8 + Math.max(0, Math.min(extent, (time - start) / (end - start) * extent));
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...props,
+        ref: setRef,
+        role: "group",
+        "aria-label": label,
+        className: clsx(timelineStyles(), className),
+        children: [
+          !validRange ? /* @__PURE__ */ jsx("p", { role: "status", className: "m-0 text-oprt-base text-oprt-text-dim", children: "Choose a valid time range with start before end." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-between gap-1u font-mono text-oprt-base text-oprt-text-dim", children: [
+              /* @__PURE__ */ jsx("time", { dateTime: new Date(start).toISOString(), children: utc(start) }),
+              /* @__PURE__ */ jsx("time", { dateTime: new Date(end).toISOString(), children: utc(end) })
+            ] }),
+            visible.length === 0 ? /* @__PURE__ */ jsx("p", { className: "m-0 text-oprt-base text-oprt-text-dim", children: emptyMessage }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "flex flex-col gap-1u", children: [...lanes].map(([lane, laneEvents]) => /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("p", { className: "m-0 text-oprt-base font-medium uppercase tracking-oprt-caps oprt-wrap-anywhere", children: lane }),
+                /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    viewBox: `0 0 ${plotWidth} 48`,
+                    preserveAspectRatio: "none",
+                    className: "block h-6u w-full overflow-hidden",
+                    focusable: "false",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "line",
+                        {
+                          x1: "8",
+                          x2: plotWidth - 8,
+                          y1: "24",
+                          y2: "24",
+                          className: "stroke-oprt-border",
+                          vectorEffect: "non-scaling-stroke"
+                        }
+                      ),
+                      laneEvents.map((event) => {
+                        const x = position(event.start);
+                        const duration = event.end !== void 0 && event.end > event.start;
+                        return /* @__PURE__ */ jsx(
+                          Marker,
+                          {
+                            id: event.id,
+                            severity: event.severity,
+                            x,
+                            width: duration ? Math.max(2, position(event.end) - x) : null,
+                            selected: selectedId === event.id
+                          },
+                          event.id
+                        );
+                      })
+                    ]
+                  }
+                )
+              ] }, lane)) }),
+              /* @__PURE__ */ jsx("ol", { "aria-label": `${label} list`, className: "m-0 flex list-none flex-col gap-1u p-0", children: visible.map((event, index) => /* @__PURE__ */ jsx(
+                TimelineRow,
+                {
+                  event,
+                  selected: selectedId === event.id,
+                  selectable: !!onSelectionChange,
+                  disabled,
+                  detailsId: `${id}-details-${index}`,
+                  onSelect: select
+                },
+                event.id
+              )) })
+            ] })
+          ] }),
+          omitted > 0 && /* @__PURE__ */ jsxs("p", { className: "m-0 text-oprt-base text-oprt-text-dim", children: [
+            omitted,
+            " ",
+            omitted === 1 ? "event omitted" : "events omitted",
+            " because timestamps are invalid."
+          ] })
+        ]
+      }
+    );
+  }
+);
+EventTimeline.displayName = "EventTimeline";
+export {
+  EventTimeline
+};

package/dist/EventTimeline/EventTimeline.manifest.js

@@ -0,0 +1,57 @@
+// src/EventTimeline/EventTimeline.manifest.ts
+var EventTimelineManifest = {
+  EventTimeline: {
+    description: "UTC event graphic with lanes, clipped duration bars, point markers, and a complete accessible event list. Event titles lead each entry, severity aligns at the trailing edge, and timestamps/categories form a secondary metadata row.",
+    props: {
+      events: {
+        type: "array",
+        required: true,
+        description: "Readonly TimelineEvent array. Invalid timestamps and reversed intervals are omitted with an explicit count. The visible list is sorted by start time.",
+        items: {
+          id: "string (required, unique)",
+          label: "string (required)",
+          start: "number (required, epoch milliseconds)",
+          end: "number (optional, epoch milliseconds, inclusive)",
+          lane: "string (optional, defaults to Events)",
+          description: "string (optional)",
+          severity: "enum [neutral, info, success, warning, error] (default neutral)"
+        }
+      },
+      start: {
+        type: "number",
+        required: true,
+        description: "Inclusive visible window start, Unix epoch milliseconds."
+      },
+      end: {
+        type: "number",
+        required: true,
+        description: "Inclusive visible window end, Unix epoch milliseconds. Must follow start."
+      },
+      selectedId: {
+        type: "string",
+        description: "Controlled selected event ID, or null for no selection. Filtering the visible window never changes the supplied selection."
+      },
+      onSelectionChange: {
+        type: "function",
+        description: "(id: string) => void. Adds native selection buttons to the event list; Enter and Space select an event."
+      },
+      disabled: {
+        type: "boolean",
+        default: false,
+        description: "Disables selection buttons while keeping data readable."
+      },
+      label: {
+        type: "string",
+        default: "Event timeline",
+        description: 'Accessible name of the group. The event list is named after it with "list" added (label="Service events" names the list "Service events list").'
+      },
+      emptyMessage: { type: "string", default: "No events in this time range." }
+    },
+    composable_with: ["TimeRange", "SplitPane", "Card"],
+    never_inside: ["Button"],
+    example: '<EventTimeline events={events} start={range.start} end={range.end} selectedId={selectedId} onSelectionChange={setSelectedId} label="Service events" />'
+  }
+};
+export {
+  EventTimelineManifest
+};

package/dist/EventTimeline/index.js

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

package/dist/Field/Field.js

@@ -0,0 +1,81 @@
+"use client";
+
+// src/Field/Field.tsx
+import { forwardRef, useContext, useRef } from "react";
+import clsx from "clsx";
+import { FieldContext, usePartIds } from "../_internal/fieldIds.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function useFieldContext() {
+  const ctx = useContext(FieldContext);
+  if (!ctx) {
+    throw new Error("useFieldContext must be used inside a <Field>.");
+  }
+  return ctx;
+}
+function useOptionalFieldContext() {
+  return useContext(FieldContext);
+}
+var Field = forwardRef(
+  ({ controlId, label, help, error, required, children, className, ...props }, ref) => {
+    const labelRef = useRef(null);
+    const ids = usePartIds(["label", "help", "error"], {
+      id: controlId,
+      readRendered: () => labelRef.current?.htmlFor
+    });
+    const id = ids.base;
+    const describedBy = error ? ids.error : help ? ids.help : void 0;
+    const ctx = {
+      id,
+      labelId: ids.label,
+      describedBy,
+      invalid: Boolean(error),
+      required: Boolean(required)
+    };
+    return /* @__PURE__ */ jsx(FieldContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: clsx("flex min-w-0 flex-col gap-1u font-sans normal-case", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "label",
+            {
+              ref: labelRef,
+              id: ids.label,
+              htmlFor: id,
+              className: "m-0 min-w-0 oprt-wrap-anywhere text-oprt-base font-medium text-oprt-text",
+              children: [
+                label,
+                required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " *" })
+              ]
+            }
+          ),
+          children,
+          error ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              id: ids.error,
+              className: "m-0 min-w-0 oprt-wrap-anywhere text-oprt-base text-oprt-error",
+              role: "alert",
+              children: error
+            }
+          ) : help ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              id: ids.help,
+              className: "m-0 min-w-0 oprt-wrap-anywhere text-oprt-base text-oprt-text-dim",
+              children: help
+            }
+          ) : null
+        ]
+      }
+    ) });
+  }
+);
+Field.displayName = "Field";
+export {
+  Field,
+  useFieldContext,
+  useOptionalFieldContext
+};

package/dist/Field/Field.manifest.js

@@ -0,0 +1,32 @@
+// src/Field/Field.manifest.ts
+var FieldManifest = {
+  Field: {
+    description: "Form field wrapper providing label, help text, and error display. Labels, help, errors, and entered values preserve their original casing. A required Field makes its control required. NumberInput, CoordinateInput and MultiSelect carry their own label and are not placed in a Field.",
+    props: {
+      controlId: {
+        type: "string",
+        description: "Stable child control ID used by the label and context. Native id remains the wrapper ID; generated control IDs are the default."
+      },
+      label: { type: "string", required: true },
+      help: { type: "string" },
+      error: { type: "string" },
+      required: {
+        type: "boolean",
+        default: false,
+        description: "Marks the label and makes the control inside required: announced as required, and the browser stops a native submission while it is empty. A form that validates itself sets noValidate on the form, which keeps the announcement. A control's own required={false} wins."
+      }
+    },
+    slots: {
+      children: {
+        type: "Input | Textarea | Select | ComboBox | Checkbox | RadioGroup | Toggle | Slider",
+        required: true
+      }
+    },
+    composable_with: ["Card", "FormSection", "FormErrorSummary"],
+    never_inside: ["Field", "Button"],
+    example: '<Field label="ENDPOINT" error="Required">\n  <Input placeholder="api.system.io" />\n</Field>'
+  }
+};
+export {
+  FieldManifest
+};

package/dist/Field/index.js

@@ -0,0 +1,9 @@
+// src/Field/index.ts
+import { Field, useFieldContext, useOptionalFieldContext } from "./Field.js";
+import { FieldManifest } from "./Field.manifest.js";
+export {
+  Field,
+  FieldManifest,
+  useFieldContext,
+  useOptionalFieldContext
+};

package/dist/FileUpload/FileUpload.js

@@ -0,0 +1,215 @@
+"use client";
+
+// src/FileUpload/FileUpload.tsx
+import {
+  forwardRef,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { Button as AriaButton, DropZone, FileTrigger } from "react-aria-components";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import { Button } from "../Button/Button.js";
+import { NUMBER_UNIT_SPACE } from "../_internal/bytes.js";
+import { joinIds, usePartIds } from "../_internal/fieldIds.js";
+import { useMergedRefs } from "../_internal/mergeRefs.js";
+import { useIsMounted } from "../_internal/useIsMounted.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var uploadStyles = cva(
+  "flex min-w-0 flex-col gap-2u font-sans text-oprt-base normal-case text-oprt-text"
+);
+var dropStyles = cva(
+  "flex min-w-0 flex-col items-start gap-2u border border-dashed border-oprt-border bg-oprt-surface-1 p-3u data-[drop-target]:border-oprt-accent data-[focus-visible]:border-oprt-border-focus data-[focus-visible]:shadow-oprt-focus"
+);
+var validAccept = (token) => /^\.[a-z0-9][a-z0-9._+-]*$/i.test(token) || /^(?:[a-z0-9!#$&^_.+-]+\/(?:[a-z0-9!#$&^_.+-]+|\*)|\*\/\*)$/i.test(token);
+var FileUpload = forwardRef(
+  ({
+    label,
+    description,
+    accept,
+    multiple = false,
+    maxFiles,
+    maxFileSizeBytes,
+    disabled = false,
+    onFiles,
+    onReject,
+    className,
+    "aria-labelledby": labelledBy,
+    "aria-describedby": describedBy,
+    ...props
+  }, ref) => {
+    const root = useRef(null);
+    const mergedRef = useMergedRefs(root, ref);
+    const ids = usePartIds(["label", "description", "configuration"], {
+      id: props.id,
+      readRendered: () => root.current?.getAttribute("data-oprt-ids")
+    });
+    const [issues, setIssues] = useState([]);
+    const [reading, setReading] = useState(false);
+    const [feedback, setFeedback] = useState("");
+    const isMounted = useIsMounted();
+    const generation = useRef(0);
+    const types = accept?.map((token) => token.trim().toLowerCase()) ?? [];
+    const configurationError = accept?.some((token) => !validAccept(token.trim())) ? "Invalid accept configuration. Use file extensions or MIME types." : maxFiles !== void 0 && (!Number.isSafeInteger(maxFiles) || maxFiles < 1) ? "Invalid maxFiles configuration. Supply a positive integer." : maxFileSizeBytes !== void 0 && (!Number.isSafeInteger(maxFileSizeBytes) || maxFileSizeBytes < 0) ? "Invalid maxFileSizeBytes configuration. Supply a nonnegative integer." : "";
+    const signature = JSON.stringify([types, multiple, String(maxFiles), String(maxFileSizeBytes)]);
+    const latest = useRef({ disabled, configurationError, signature, onFiles, onReject });
+    latest.current = { disabled, configurationError, signature, onFiles, onReject };
+    useEffect(() => {
+      const requests = generation;
+      return () => {
+        requests.current++;
+      };
+    }, []);
+    useEffect(() => {
+      generation.current++;
+      setReading(false);
+    }, [signature, disabled]);
+    async function select(candidates) {
+      if (!candidates.length || latest.current.disabled || latest.current.configurationError)
+        return;
+      const request = ++generation.current;
+      const constraints = signature;
+      setIssues([]);
+      setFeedback("");
+      setReading(true);
+      const results = await Promise.allSettled(
+        candidates.map(
+          async (candidate) => "issue" in candidate ? candidate : { file: await candidate.read() }
+        )
+      );
+      if (!isMounted() || generation.current !== request || latest.current.disabled || latest.current.configurationError || latest.current.signature !== constraints)
+        return;
+      const accepted = [];
+      const rejected = [];
+      const countLimit = multiple ? maxFiles ?? Infinity : 1;
+      let fileCount = 0;
+      results.forEach((result, index) => {
+        const candidate = candidates[index];
+        if (result.status === "rejected") {
+          rejected.push({
+            name: "name" in candidate ? candidate.name : "File",
+            code: "read",
+            message: "File could not be read."
+          });
+          return;
+        }
+        if ("issue" in result.value) {
+          rejected.push(result.value.issue);
+          return;
+        }
+        const value = result.value.file;
+        fileCount++;
+        if (fileCount > countLimit)
+          rejected.push({
+            name: value.name,
+            code: "count",
+            message: `Choose at most ${countLimit} file${countLimit === 1 ? "" : "s"} per selection.`
+          });
+        else if (types.length && !types.some(
+          (type) => type === "*/*" || (type.startsWith(".") ? value.name.toLowerCase().endsWith(type) : type.endsWith("/*") ? value.type.toLowerCase().startsWith(type.slice(0, -1)) : value.type.toLowerCase() === type)
+        ))
+          rejected.push({ name: value.name, code: "type", message: "File type is not accepted." });
+        else if (maxFileSizeBytes !== void 0 && value.size > maxFileSizeBytes)
+          rejected.push({
+            name: value.name,
+            code: "size",
+            // The limit and its unit stay on one line (R4, design call DC-11).
+            message: `File exceeds ${maxFileSizeBytes}${NUMBER_UNIT_SPACE}bytes.`
+          });
+        else accepted.push(value);
+      });
+      setReading(false);
+      setIssues(rejected);
+      setFeedback(
+        `${accepted.length} file${accepted.length === 1 ? "" : "s"} selected locally${rejected.length ? `; ${rejected.length} rejected` : ""}.`
+      );
+      if (accepted.length) latest.current.onFiles(Object.freeze(accepted));
+      if (rejected.length) latest.current.onReject?.(Object.freeze(rejected));
+    }
+    function dropped(items) {
+      return select(
+        items.map(
+          (item) => item.kind === "file" ? { name: item.name, read: () => item.getFile() } : {
+            issue: {
+              name: item.kind === "directory" ? item.name : "Dropped item",
+              code: item.kind === "directory" ? "directory" : "unsupported",
+              message: item.kind === "directory" ? "Directories are not supported. Choose individual files." : "Only files are supported."
+            }
+          }
+        )
+      );
+    }
+    const blocked = disabled || !!configurationError;
+    const hasDescription = description != null && typeof description !== "boolean";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...props,
+        ref: mergedRef,
+        role: "group",
+        "data-oprt-ids": ids.base,
+        "aria-labelledby": joinIds(ids.label, labelledBy),
+        "aria-describedby": joinIds(
+          hasDescription && ids.description,
+          configurationError && ids.configuration,
+          describedBy
+        ),
+        className: clsx(uploadStyles(), className),
+        children: [
+          /* @__PURE__ */ jsx("p", { id: ids.label, className: "m-0 oprt-wrap-anywhere font-medium uppercase tracking-oprt-sm", children: label }),
+          hasDescription && /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: ids.description,
+              className: "min-w-0 oprt-wrap-anywhere text-oprt-text-dim [&_p]:m-0",
+              children: description
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            DropZone,
+            {
+              "aria-label": `${label} drop area`,
+              isDisabled: blocked,
+              className: dropStyles(),
+              onDrop: (event) => {
+                void dropped(event.items);
+              },
+              getDropOperation: (_types, operations) => operations.includes("copy") ? "copy" : "cancel",
+              children: [
+                /* @__PURE__ */ jsx("p", { className: clsx("m-0", blocked && "text-oprt-text-dim"), children: "Drop files here or choose files." }),
+                /* @__PURE__ */ jsx(
+                  FileTrigger,
+                  {
+                    allowsMultiple: multiple,
+                    ...accept ? { acceptedFileTypes: accept } : {},
+                    onSelect: (files) => {
+                      void select(
+                        Array.from(files ?? []).map((file) => ({
+                          name: file.name,
+                          read: async () => file
+                        }))
+                      );
+                    },
+                    children: /* @__PURE__ */ jsx(Button, { asChild: true, variant: "secondary", children: /* @__PURE__ */ jsx(AriaButton, { isDisabled: blocked, children: "Choose files" }) })
+                  }
+                )
+              ]
+            }
+          ),
+          configurationError && /* @__PURE__ */ jsx("p", { id: ids.configuration, role: "alert", className: "m-0 text-oprt-error", children: configurationError }),
+          issues.length > 0 && /* @__PURE__ */ jsx("ul", { className: "m-0 flex min-w-0 list-disc flex-col gap-1u pl-3u text-oprt-error", children: issues.map((issue, index) => /* @__PURE__ */ jsxs("li", { className: "oprt-wrap-anywhere", children: [
+            issue.name,
+            ": ",
+            issue.message
+          ] }, index)) }),
+          /* @__PURE__ */ jsx("p", { role: "status", "aria-atomic": "true", className: "m-0 text-oprt-text-dim", children: reading ? "Reading selected files\u2026" : feedback })
+        ]
+      }
+    );
+  }
+);
+FileUpload.displayName = "FileUpload";
+export {
+  FileUpload
+};