@oprt/react 0.0.0-stage → 0.2.0

package/dist/Textarea/Textarea.js

@@ -0,0 +1,68 @@
+"use client";
+
+// src/Textarea/Textarea.tsx
+import { forwardRef } from "react";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import { useFieldWiring } from "../_internal/fieldIds.js";
+import { FORCED_FOCUS_WITHIN, FORCED_NO_RESTING_OUTLINE } from "../_internal/controlStyles.js";
+import { jsx } from "react/jsx-runtime";
+var wrapperStyles = cva(
+  // Disabled looks like DC-9's disabled buttons (coordinator ruling on DC-B04-2): dim text, the
+  // control outline and a muted fill, with no fade of the whole field.
+  "flex bg-oprt-surface-2 border normal-case transition-colors duration-oprt-fast focus-within:shadow-oprt-focus has-[textarea:disabled]:cursor-not-allowed has-[textarea:disabled]:bg-oprt-surface-3 has-[textarea:disabled]:border-oprt-border-control px-2u py-2u",
+  {
+    variants: {
+      invalid: {
+        true: "border-oprt-error focus-within:border-oprt-error",
+        // The control outline (design call DC-3); focus in the focus token, as the siblings do.
+        false: "border-oprt-border-control focus-within:border-oprt-border-focus"
+      }
+    },
+    defaultVariants: { invalid: false }
+  }
+);
+var textareaStyles = "w-full bg-transparent border-0 outline-hidden resize-none font-sans font-medium text-oprt-md text-oprt-text placeholder:text-oprt-text-placeholder disabled:placeholder:text-oprt-text-dim disabled:cursor-not-allowed disabled:text-oprt-text-dim";
+var Textarea = forwardRef(
+  ({
+    className,
+    invalid,
+    rows = 4,
+    id,
+    required,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid,
+    ...props
+  }, ref) => {
+    const wiring = useFieldWiring(
+      { id, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, invalid, required },
+      { label: "for" }
+    );
+    return (
+      // In forced colors focus is a 2px CanvasText outline around the field (Textarea-B5-1).
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx(wrapperStyles({ invalid: wiring.invalid }), FORCED_FOCUS_WITHIN, className),
+          children: /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref,
+              id: wiring.id,
+              rows,
+              "aria-invalid": wiring.ariaInvalid,
+              "aria-describedby": wiring.describedBy,
+              required: wiring.required,
+              className: clsx(textareaStyles, FORCED_NO_RESTING_OUTLINE),
+              ...props
+            }
+          )
+        }
+      )
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+export {
+  Textarea
+};

package/dist/Textarea/Textarea.manifest.js

@@ -0,0 +1,25 @@
+// src/Textarea/Textarea.manifest.ts
+var TextareaManifest = {
+  Textarea: {
+    description: "Multi-line text input. Fixed rows (default 4); scroll on overflow. No native resize handle (rounded grip violates radius rule).",
+    props: {
+      rows: { type: "number", default: 4 },
+      value: { type: "string" },
+      defaultValue: { type: "string" },
+      placeholder: { type: "string" },
+      disabled: { type: "boolean", default: false },
+      required: { type: "boolean", default: false },
+      invalid: {
+        type: "boolean",
+        description: "Override Field's invalid state."
+      },
+      name: { type: "string" }
+    },
+    composable_with: ["Field"],
+    never_inside: ["Button", "Badge"],
+    example: '<Field label="MISSION NOTES" help="Free-form text.">\n  <Textarea placeholder="ENTER NOTES..." />\n</Field>'
+  }
+};
+export {
+  TextareaManifest
+};

package/dist/Textarea/index.js

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

package/dist/TimeField/TimeField.js

@@ -0,0 +1,118 @@
+"use client";
+
+// src/TimeField/TimeField.tsx
+import { forwardRef, useContext, useEffect, useId, useMemo, useRef } from "react";
+import {
+  TimeField as AriaTimeField,
+  TimeFieldStateContext,
+  DateInput,
+  DateSegment,
+  Label,
+  Text
+} from "react-aria-components";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import {
+  formatTimeOnly,
+  parseTimeOnly,
+  readTimeSegments,
+  timeConfiguration
+} from "../_internal/date.js";
+import { useHydrationRoot } from "../_internal/hydration.js";
+import {
+  FIELD_BOX_STYLES,
+  FIELD_LABEL_STYLES,
+  SEGMENT_STYLES,
+  SegmentGroupContext,
+  firstSegmentFocus,
+  useReportSegments,
+  useSegmentDraft
+} from "../_internal/segmentField.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var fieldStyles = cva("flex min-w-0 flex-col gap-1u font-sans text-oprt-base text-oprt-text");
+function DraftObserver({ report }) {
+  const state = useContext(TimeFieldStateContext);
+  useReportSegments(state.segments, readTimeSegments, report);
+  return null;
+}
+var TimeField = forwardRef(
+  ({
+    label,
+    value,
+    onValueChange,
+    onDraftValidityChange,
+    min,
+    max,
+    disabled = false,
+    readOnly = false,
+    required = false,
+    id,
+    className
+  }, ref) => {
+    const generated = useId();
+    const inputId = id ?? `oprt-time-${generated}`;
+    const hydration = useHydrationRoot(inputId);
+    const config = useMemo(() => timeConfiguration(value, min, max), [value, min, max]);
+    const displayedValue = config.time ? formatTimeOnly(config.time) : null;
+    const group = useContext(SegmentGroupContext);
+    const draft = useSegmentDraft({
+      value,
+      displayed: displayedValue,
+      valid: value === null || !!config.time,
+      inactive: disabled || readOnly || config.invalidBounds
+    });
+    const time = parseTimeOnly(draft.snapshot.value);
+    const valid = draft.snapshot.valid && !draft.rejected && (draft.snapshot.empty ? !required : !!time && time.compare(config.min) >= 0 && time.compare(config.max) <= 0);
+    const error = config.error ?? (!valid ? draft.snapshot.empty && required ? "A time is required." : (
+      // The bound an edit crossed, named as for a supplied value (TimeField-R1).
+      draft.rejection ?? "Enter a complete, valid time within the allowed bounds."
+    ) : null);
+    const callback = useRef(onDraftValidityChange);
+    callback.current = onDraftValidityChange;
+    const pending = draft.pending;
+    useEffect(() => callback.current?.(!error, { pending }), [error, pending]);
+    return /* @__PURE__ */ jsx("div", { ...draft.editProps, children: /* @__PURE__ */ jsxs(
+      AriaTimeField,
+      {
+        ...hydration.probeProps,
+        id: inputId,
+        value: config.time,
+        minValue: config.min,
+        maxValue: config.max,
+        hourCycle: 24,
+        granularity: "minute",
+        isDisabled: disabled || config.invalidBounds,
+        isReadOnly: readOnly,
+        isRequired: required || !!group?.required,
+        isInvalid: !!error,
+        validationBehavior: "aria",
+        className: clsx(fieldStyles(), className),
+        onChange: (next) => {
+          if (disabled || readOnly || config.invalidBounds || draft.blurRejected()) return;
+          const nextValue = next ? formatTimeOnly(next) : null;
+          const nextTime = parseTimeOnly(nextValue);
+          if (next && (!nextTime || nextTime.compare(config.min) < 0 || nextTime.compare(config.max) > 0)) {
+            draft.reject(nextTime ? timeConfiguration(nextValue, min, max).error : null);
+            return;
+          }
+          draft.accept();
+          onValueChange(nextValue);
+        },
+        children: [
+          /* @__PURE__ */ jsxs(Label, { className: FIELD_LABEL_STYLES, children: [
+            label,
+            required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " *" })
+          ] }),
+          /* @__PURE__ */ jsx(DraftObserver, { report: draft.report }),
+          /* @__PURE__ */ jsx(DateInput, { ref, ...firstSegmentFocus(disabled), className: FIELD_BOX_STYLES, children: (segment) => /* @__PURE__ */ jsx(DateSegment, { segment, className: SEGMENT_STYLES }) }),
+          error && /* @__PURE__ */ jsx(Text, { slot: "errorMessage", className: "m-0 text-oprt-error", children: error })
+        ]
+      },
+      hydration.key
+    ) });
+  }
+);
+TimeField.displayName = "TimeField";
+export {
+  TimeField
+};

package/dist/TimeField/TimeField.manifest.js

@@ -0,0 +1,42 @@
+// src/TimeField/TimeField.manifest.ts
+var TimeFieldManifest = {
+  TimeField: {
+    description: "Controlled 24-hour wall-time field with segmented editing and explicit draft validity. It carries no date or time zone.",
+    props: {
+      label: { type: "string", required: true },
+      value: {
+        type: "string",
+        required: true,
+        description: "HH:mm from 00:00 through 23:59, or null."
+      },
+      onValueChange: {
+        type: "function",
+        required: true,
+        description: "Requests a complete valid time or null after clearing."
+      },
+      onDraftValidityChange: {
+        type: "function",
+        description: "Callback (valid, { pending }). Pending identifies uncommitted local edits; pristine required-empty or malformed supplied values are invalid but not pending. Reports initial and changed validity. False for partial, out-of-bounds, or required-empty drafts even while value still contains an earlier valid time. Block Review/Save while false."
+      },
+      min: { type: "string", description: "Inclusive HH:mm lower bound." },
+      max: {
+        type: "string",
+        description: "Inclusive HH:mm upper bound. Overnight bounds are not supported."
+      },
+      disabled: { type: "boolean", default: false },
+      readOnly: { type: "boolean", default: false },
+      required: { type: "boolean", default: false },
+      id: {
+        type: "string",
+        description: "ID of the focusable time-control group. Focusing it or its forwarded HTMLDivElement ref enters the first segment."
+      },
+      className: { type: "string" }
+    },
+    composable_with: ["FormSection", "FormErrorSummary", "DateTimePicker"],
+    never_inside: ["Button"],
+    example: '<TimeField id="start-time" label="Start time" value={time} onValueChange={setTime} onDraftValidityChange={setTimeValid} required />'
+  }
+};
+export {
+  TimeFieldManifest
+};

package/dist/TimeField/index.js

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

package/dist/TimeRange/TimeRange.js

@@ -0,0 +1,184 @@
+"use client";
+
+// src/TimeRange/TimeRange.tsx
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { Input } from "../Input/Input.js";
+import { Button } from "../Button/Button.js";
+import { joinIds, usePartIds } from "../_internal/fieldIds.js";
+import { useMergedRefs } from "../_internal/mergeRefs.js";
+import { formatUtcTimestamp, isValidTimestamp } from "../_internal/timestamp.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var rangeStyles = cva("flex min-w-0 flex-col gap-2u font-sans text-oprt-text");
+var fieldStyles = "flex min-w-[min(100%,calc(22*var(--oprt-space-1)))] grow basis-[calc(22*var(--oprt-space-1))] flex-col gap-1u";
+var pressedPresetStyles = [
+  "aria-[pressed=true]:border-oprt-accent-light aria-[pressed=true]:bg-oprt-accent aria-[pressed=true]:text-oprt-bg",
+  "aria-[pressed=true]:disabled:border-oprt-border-control aria-[pressed=true]:disabled:bg-oprt-surface-3 aria-[pressed=true]:disabled:text-oprt-text-dim",
+  "forced-colors:aria-[pressed=true]:[forced-color-adjust:none] forced-colors:aria-[pressed=true]:border-[color:Highlight] forced-colors:aria-[pressed=true]:bg-[color:Highlight] forced-colors:aria-[pressed=true]:text-[color:HighlightText]",
+  "forced-colors:aria-[pressed=true]:disabled:border-[color:GrayText] forced-colors:aria-[pressed=true]:disabled:bg-[color:GrayText] forced-colors:aria-[pressed=true]:disabled:text-[color:Canvas]",
+  "forced-colors:aria-[pressed=true]:focus-visible:outline-solid forced-colors:aria-[pressed=true]:focus-visible:outline-2 forced-colors:aria-[pressed=true]:focus-visible:outline-offset-2 forced-colors:aria-[pressed=true]:focus-visible:outline-[color:CanvasText]"
+].join(" ");
+var PARTS = ["start", "end"];
+var FIELDS = ["date", "time"];
+var dateIsValid = (value) => isValidTimestamp(value, { years: "1-9999" });
+var toInput = (value) => dateIsValid(value) ? new Date(value).toISOString().slice(0, -1) : "";
+var toEndpoint = (value) => {
+  const [date = "", time = ""] = toInput(value).split("T");
+  return { date, time };
+};
+var draftOf = (range) => ({
+  start: toEndpoint(range.start),
+  end: toEndpoint(range.end)
+});
+var parseInput = (value) => {
+  if (!/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2}(?:\.\d{1,3})?)?$/.test(value)) return NaN;
+  const parsed = Date.parse(`${value}Z`);
+  return dateIsValid(parsed) && toInput(parsed).slice(0, 16) === value.slice(0, 16) ? parsed : NaN;
+};
+var parseEndpoint = ({ date, time }) => parseInput(`${date}T${time}`);
+var validate = ({ start, end }, min, max) => {
+  if (min !== void 0 && !dateIsValid(min) || max !== void 0 && !dateIsValid(max) || min !== void 0 && max !== void 0 && min >= max)
+    return "Time bounds must be valid UTC dates with minimum before maximum.";
+  if (!dateIsValid(start) || !dateIsValid(end)) return "Enter a valid start and end date in UTC.";
+  if (start >= end) return "Start must be before end.";
+  if (min !== void 0 && start < min || max !== void 0 && end > max)
+    return "The range must be within the allowed time bounds.";
+  return "";
+};
+var unchanged = (edited, parsed, applied, instant) => edited.date === applied.date && edited.time === applied.time || !Number.isNaN(parsed) && dateIsValid(instant) && parsed === Math.floor(instant);
+function describeRange(start, end) {
+  const from = formatUtcTimestamp(start, { precision: "milliseconds" });
+  const to = formatUtcTimestamp(end, { precision: "milliseconds" });
+  if (!from || !to) return null;
+  const sameDay = from.slice(0, 10) === to.slice(0, 10);
+  return `${from} to ${sameDay ? to.slice(11) : to}`;
+}
+var TimeRange = forwardRef(
+  ({
+    value,
+    onValueChange,
+    onDraftValidityChange,
+    presets = [],
+    min,
+    max,
+    disabled = false,
+    label = "Time range",
+    className,
+    ...props
+  }, ref) => {
+    const root = useRef(null);
+    const setRoot = useMergedRefs(root, ref);
+    const ids = usePartIds(
+      ["start-date", "start-time", "end-date", "end-time", "error", "range", "status"],
+      { readRendered: () => root.current?.getAttribute("data-oprt-ids") }
+    );
+    const base = `${value.start}|${value.end}`;
+    const applied = draftOf(value);
+    const [draft, setDraft] = useState(() => ({ base, ...applied }));
+    const current = draft.base === base ? draft : applied;
+    const parsed = { start: parseEndpoint(current.start), end: parseEndpoint(current.end) };
+    const error = validate(parsed, min, max);
+    const pending = !(unchanged(current.start, parsed.start, applied.start, value.start) && unchanged(current.end, parsed.end, applied.end, value.end));
+    const valid = !error && !pending;
+    const callback = useRef(onDraftValidityChange);
+    callback.current = onDraftValidityChange;
+    useEffect(() => callback.current?.(valid, { pending }), [valid, pending]);
+    const readout = Number.isNaN(parsed.start) || Number.isNaN(parsed.end) ? null : describeRange(parsed.start, parsed.end);
+    const unapplied = !error && pending;
+    const edit = (part, field, next) => setDraft({ ...current, base, [part]: { ...current[part], [field]: next } });
+    const commit = () => {
+      if (!disabled && !error) onValueChange(parsed);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...props,
+        ref: setRoot,
+        role: "group",
+        "aria-label": label,
+        "aria-describedby": joinIds(
+          props["aria-describedby"],
+          readout && ids.range,
+          unapplied && ids.status
+        ),
+        "data-oprt-ids": ids.base,
+        className: clsx(rangeStyles(), className),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-end gap-2u", children: [
+            PARTS.map((part) => /* @__PURE__ */ jsx("div", { className: "flex min-w-0 grow flex-wrap gap-1u", children: FIELDS.map((field) => /* @__PURE__ */ jsxs("div", { className: fieldStyles, children: [
+              /* @__PURE__ */ jsxs(
+                "label",
+                {
+                  htmlFor: ids[`${part}-${field}`],
+                  className: "m-0 text-oprt-base font-medium uppercase tracking-oprt-caps",
+                  children: [
+                    part === "start" ? "Start" : "End",
+                    " ",
+                    field,
+                    " (UTC)"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: ids[`${part}-${field}`],
+                  type: field,
+                  step: field === "time" ? "0.001" : void 0,
+                  value: current[part][field],
+                  min: field === "date" && min !== void 0 ? toEndpoint(min).date : void 0,
+                  max: field === "date" && max !== void 0 ? toEndpoint(max).date : void 0,
+                  disabled,
+                  "aria-invalid": !!error,
+                  "aria-describedby": error ? ids.error : void 0,
+                  className: "w-full [&_input]:font-mono",
+                  onChange: (event) => edit(part, field, event.target.value),
+                  onKeyDown: (event) => {
+                    if (event.key === "Enter") {
+                      event.preventDefault();
+                      commit();
+                    }
+                  }
+                }
+              )
+            ] }, field)) }, part)),
+            /* @__PURE__ */ jsx(Button, { disabled, onClick: commit, children: "Apply range" })
+          ] }),
+          readout && /* @__PURE__ */ jsx(
+            "p",
+            {
+              id: ids.range,
+              className: "m-0 font-mono text-oprt-base text-oprt-text-dim oprt-wrap-anywhere",
+              children: readout
+            }
+          ),
+          error && /* @__PURE__ */ jsx("p", { id: ids.error, role: "alert", className: "m-0 text-oprt-base text-oprt-error", children: error }),
+          unapplied && /* @__PURE__ */ jsx("p", { id: ids.status, className: "m-0 text-oprt-base text-oprt-text-dim", children: "The range change has not been applied." }),
+          presets.length > 0 && /* @__PURE__ */ jsx("div", { role: "group", "aria-label": "Preset time ranges", className: "flex flex-wrap gap-1u", children: presets.map((preset) => /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              variant: "tertiary",
+              className: pressedPresetStyles,
+              "aria-pressed": preset.value.start === value.start && preset.value.end === value.end,
+              disabled: disabled || !!validate(preset.value, min, max),
+              onClick: () => {
+                if (!disabled && !validate(preset.value, min, max)) {
+                  setDraft({ base, ...draftOf(preset.value) });
+                  onValueChange({ ...preset.value });
+                }
+              },
+              children: preset.label
+            },
+            preset.id
+          )) })
+        ]
+      }
+    );
+  }
+);
+TimeRange.displayName = "TimeRange";
+export {
+  TimeRange
+};

package/dist/TimeRange/TimeRange.manifest.js

@@ -0,0 +1,48 @@
+// src/TimeRange/TimeRange.manifest.ts
+var TimeRangeManifest = {
+  TimeRange: {
+    description: "Controlled UTC range with separate native date and time fields, OPERATOR Calendar/Clock icons, validated drafts, an Apply action, and optional presets. One line under the fields gives the draft range in 24-hour UTC with milliseconds, and an edit not yet applied is said so.",
+    props: {
+      value: {
+        type: "node",
+        required: true,
+        description: "TimeRangeValue: { start: number; end: number }, Unix epoch milliseconds. Start must precede end; dates must be in years 0001\u20139999."
+      },
+      onValueChange: {
+        type: "function",
+        required: true,
+        description: "(value: TimeRangeValue) => void. Only called on Apply, Enter or a valid preset; never for invalid drafts."
+      },
+      onDraftValidityChange: {
+        type: "function",
+        description: "(valid: boolean, details: { pending: boolean }) => void. Reports on mount and on every change whether the range in the fields can be used as it stands; valid is false while they hold an error or an edit not yet applied (pending: true). Connect it to Review and Save, as with DateRangePicker."
+      },
+      presets: {
+        type: "array",
+        description: "Readonly TimeRangePreset array. Invalid or out-of-bounds presets are disabled.",
+        items: {
+          id: "string (required, unique)",
+          label: "string (required)",
+          value: "TimeRangeValue (required)"
+        }
+      },
+      min: {
+        type: "number",
+        description: "Inclusive minimum epoch milliseconds. Invalid dates or conflicting bounds prevent commits."
+      },
+      max: { type: "number", description: "Inclusive maximum epoch milliseconds." },
+      disabled: { type: "boolean", default: false },
+      label: {
+        type: "string",
+        default: "Time range",
+        description: "Accessible name of the range group; each input also has a visible UTC label."
+      }
+    },
+    composable_with: ["EventTimeline", "Chart", "DataGrid"],
+    never_inside: ["Button"],
+    example: '<TimeRange value={range} onValueChange={setRange} min={windowStart} max={windowEnd} presets={[{ id: "all", label: "Full window", value: { start: windowStart, end: windowEnd } }]} />'
+  }
+};
+export {
+  TimeRangeManifest
+};

package/dist/TimeRange/index.js

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