@oprt/react 0.0.0-stage → 0.1.0

package/dist/DataTable/useTableWindow.js

@@ -0,0 +1,185 @@
+"use client";
+
+// src/DataTable/useTableWindow.ts
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useIsomorphicLayoutEffect } from "../_internal/useIsomorphicLayoutEffect.js";
+var finite = (value, fallback, minimum) => value !== void 0 && Number.isFinite(value) ? Math.max(minimum, value) : fallback;
+var NO_HEIGHTS = /* @__PURE__ */ new Map();
+var MIN_ROW = 24;
+function useTableWindow(rowKeys, options) {
+  const { keys, index } = rowKeys;
+  const count = keys.length;
+  const windowed = options !== void 0;
+  const height = finite(options?.height, 320, 24);
+  const fixed = options?.rowHeight === void 0 ? void 0 : finite(options.rowHeight, 32, 24);
+  const estimate = fixed ?? finite(options?.estimateRowHeight, 40, 24);
+  const overscan = Math.floor(finite(options?.overscan, 3, 1));
+  const measured = windowed && fixed === void 0;
+  const viewport = useRef(null);
+  const [heights, setHeights] = useState(NO_HEIGHTS);
+  const [anchor, setAnchor] = useState(0);
+  const [focusedKey, setFocusedKey] = useState(null);
+  const offsets = useMemo(() => {
+    if (!measured) return null;
+    const result = new Float64Array(keys.length + 1);
+    for (let row = 0; row < keys.length; row++)
+      result[row + 1] = result[row] + (heights.get(keys[row]) ?? estimate);
+    return result;
+  }, [measured, keys, heights, estimate]);
+  const geometry = useMemo(
+    () => ({ count, offsets, estimate, height }),
+    [count, offsets, estimate, height]
+  );
+  const offsetOf = (row) => offsetIn(geometry, row);
+  const [start, end] = windowed ? mountedRange(geometry, anchor, overscan) : [0, count];
+  const moved = (scrollTop) => {
+    const [from, to] = mountedRange(geometry, scrollTop, overscan);
+    return from !== start || to !== end;
+  };
+  let indices = null;
+  if (windowed) {
+    const focused = focusedKey === null ? void 0 : index.get(focusedKey);
+    const kept = focused === void 0 ? [] : [focused - 1, focused, focused + 1].filter(
+      (row) => row >= 0 && row < count && (row < start || row >= end)
+    );
+    indices = kept.filter((row) => row < start);
+    for (let row = start; row < end; row++) indices.push(row);
+    for (const row of kept) if (row >= end) indices.push(row);
+  }
+  useIsomorphicLayoutEffect(() => {
+    const element = viewport.current;
+    if (!windowed || !element) return;
+    const [from, to] = mountedRange(geometry, element.scrollTop, overscan);
+    if (from !== start || to !== end) setAnchor(element.scrollTop);
+  }, [windowed, geometry, overscan, start, end]);
+  const nodes = useRef(/* @__PURE__ */ new Map());
+  const keyOf = useRef(/* @__PURE__ */ new WeakMap());
+  const observer = useRef(null);
+  const rowRefs = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    if (!measured || typeof ResizeObserver === "undefined") return;
+    const resizes = new ResizeObserver((entries) => {
+      const sizes = [];
+      for (const entry of entries) {
+        const key = keyOf.current.get(entry.target);
+        const size = entry.borderBoxSize?.[0]?.blockSize ?? entry.target.getBoundingClientRect().height;
+        if (key !== void 0 && size >= MIN_ROW) sizes.push([key, size]);
+      }
+      if (sizes.length > 0) setHeights((current) => withHeights(current, sizes));
+    });
+    observer.current = resizes;
+    for (const node of nodes.current.values()) resizes.observe(node);
+    return () => {
+      resizes.disconnect();
+      observer.current = null;
+    };
+  }, [measured]);
+  useEffect(() => {
+    if (!measured || typeof ResizeObserver !== "undefined") return;
+    const sizes = [];
+    for (const [key, node] of nodes.current) {
+      const size = node.getBoundingClientRect().height;
+      if (size >= MIN_ROW) sizes.push([key, size]);
+    }
+    if (sizes.length > 0) setHeights((current) => withHeights(current, sizes));
+  }, [measured, start, end]);
+  useEffect(() => {
+    if (!measured) return;
+    for (const key of rowRefs.current.keys())
+      if (!index.has(key) && !nodes.current.has(key)) rowRefs.current.delete(key);
+    setHeights((current) => {
+      let next = null;
+      for (const key of current.keys())
+        if (!index.has(key)) (next ??= new Map(current)).delete(key);
+      return next ?? current;
+    });
+  }, [measured, index]);
+  const rowRef = (key) => {
+    if (!measured) return void 0;
+    let ref = rowRefs.current.get(key);
+    if (!ref) {
+      ref = (node) => {
+        if (node) {
+          nodes.current.set(key, node);
+          keyOf.current.set(node, key);
+          observer.current?.observe(node);
+          return;
+        }
+        const previous = nodes.current.get(key);
+        if (previous) observer.current?.unobserve(previous);
+        nodes.current.delete(key);
+        rowRefs.current.delete(key);
+      };
+      rowRefs.current.set(key, ref);
+    }
+    return ref;
+  };
+  return {
+    viewport,
+    height,
+    fixed,
+    /** The mounted rows in order, or null when every row is mounted (an unwindowed table). */
+    indices,
+    offsetOf,
+    rowRef,
+    onScroll: () => {
+      const element = viewport.current;
+      if (element && moved(element.scrollTop)) setAnchor(element.scrollTop);
+    },
+    onFocusRow: (key, row) => {
+      if (!windowed || key === focusedKey) return;
+      setFocusedKey(key);
+      const element = viewport.current;
+      if (!element) return;
+      const rowTop = offsetOf(row);
+      const rowBottom = offsetOf(row + 1);
+      const header = element.querySelector("thead")?.getBoundingClientRect().height ?? 0;
+      const visibleTop = element.scrollTop;
+      if (rowTop < visibleTop) element.scrollTop = rowTop;
+      else if (rowBottom + header > visibleTop + height)
+        element.scrollTop = rowBottom + header - height;
+      setAnchor(element.scrollTop);
+    },
+    clearFocus: () => {
+      if (windowed && focusedKey !== null) setFocusedKey(null);
+    }
+  };
+}
+function offsetIn({ offsets, estimate }, row) {
+  return offsets ? offsets[row] : row * estimate;
+}
+function rowAt({ count, offsets, estimate }, position) {
+  if (count === 0) return 0;
+  if (!offsets) return Math.min(count - 1, Math.max(0, Math.floor(position / estimate)));
+  let low = 0;
+  let high = count;
+  while (low < high) {
+    const mid = Math.floor((low + high) / 2);
+    if (offsets[mid + 1] <= position) low = mid + 1;
+    else high = mid;
+  }
+  return Math.min(count - 1, low);
+}
+function inView(geometry, scrollTop) {
+  const top = Math.min(
+    scrollTop,
+    Math.max(0, offsetIn(geometry, geometry.count) - geometry.height)
+  );
+  return [
+    rowAt(geometry, top),
+    Math.min(geometry.count, rowAt(geometry, top + geometry.height) + 1)
+  ];
+}
+function mountedRange(geometry, scrollTop, overscan) {
+  const [first, last] = inView(geometry, scrollTop);
+  return [Math.max(0, first - overscan), Math.min(geometry.count, last + overscan)];
+}
+function withHeights(current, sizes) {
+  let next = null;
+  for (const [key, size] of sizes)
+    if (current.get(key) !== size) (next ??= new Map(current)).set(key, size);
+  return next ?? current;
+}
+export {
+  useTableWindow
+};

package/dist/DatePicker/DatePicker.js

@@ -0,0 +1,187 @@
+"use client";
+
+// src/DatePicker/DatePicker.tsx
+import { forwardRef, useContext, useEffect, useId, useMemo, useRef } from "react";
+import {
+  Button,
+  Calendar as AriaCalendar,
+  DateFieldStateContext,
+  DateInput,
+  DatePicker as AriaDatePicker,
+  DateSegment,
+  Dialog,
+  Group,
+  I18nProvider,
+  Label,
+  Text,
+  useLocale
+} from "react-aria-components";
+import { GregorianCalendar, toCalendar } from "@internationalized/date";
+import { Calendar as CalendarIcon } from "@oprt/icons";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import { CALENDAR_ROOT, CalendarContent } from "../Calendar/Calendar.js";
+import { useMotion } from "../_internal/motion.js";
+import { MotionPopover } from "../_internal/MotionPopover.js";
+import { POPOVER_WIDTH, SCREEN_MARGIN } from "../_internal/overlay.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 {
+  dateConfiguration,
+  dateWithinBounds,
+  parseDateOnly,
+  readDateSegments
+} from "../_internal/date.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 ObservedYear({
+  segment,
+  report
+}) {
+  const state = useContext(DateFieldStateContext);
+  useReportSegments(state.segments, readDateSegments, report);
+  return /* @__PURE__ */ jsx(DateSegment, { segment, className: SEGMENT_STYLES });
+}
+var DatePicker = forwardRef(
+  ({
+    label,
+    value,
+    onValueChange,
+    onDraftValidityChange,
+    min,
+    max,
+    disabled = false,
+    readOnly = false,
+    required = false,
+    id,
+    className,
+    motion = "auto"
+  }, ref) => {
+    const generated = useId();
+    const inputId = id ?? `oprt-date-${generated}`;
+    const hydration = useHydrationRoot(inputId);
+    const { locale } = useLocale();
+    const gregorianLocale = useMemo(
+      () => new Intl.Locale(locale, { calendar: "gregory" }).toString(),
+      [locale]
+    );
+    const config = useMemo(() => dateConfiguration(value, min, max), [value, min, max]);
+    const displayedValue = config.date?.toString() ?? null;
+    const motionState = useMotion(motion);
+    const calendarButton = useRef(null);
+    const group = useContext(SegmentGroupContext);
+    const calendarMin = parseDateOnly(group?.calendar?.min);
+    const calendarMax = parseDateOnly(group?.calendar?.max);
+    const minValue = calendarMin && calendarMin.compare(config.min) > 0 ? calendarMin : config.min;
+    const maxValue = calendarMax && calendarMax.compare(config.max) < 0 ? calendarMax : config.max;
+    const draft = useSegmentDraft({
+      value,
+      displayed: displayedValue,
+      valid: value === null || !!config.date,
+      inactive: disabled || readOnly || config.invalidBounds
+    });
+    const draftDate = parseDateOnly(draft.snapshot.value);
+    const draftValid = draft.snapshot.valid && !draft.rejected && (draft.snapshot.empty ? !required : !!draftDate && dateWithinBounds(draftDate, config.min, config.max));
+    const error = config.error ?? (!draftValid ? draft.snapshot.empty && required ? "A date is required." : (
+      // The bound an edit crossed, named as for a supplied value (DatePicker-R6).
+      draft.rejection ?? "Enter a complete, valid date within the allowed bounds."
+    ) : null);
+    const validityCallback = useRef(onDraftValidityChange);
+    validityCallback.current = onDraftValidityChange;
+    const pending = draft.pending;
+    useEffect(() => validityCallback.current?.(!error, { pending }), [error, pending]);
+    return /* @__PURE__ */ jsx(I18nProvider, { locale: gregorianLocale, children: /* @__PURE__ */ jsxs(
+      AriaDatePicker,
+      {
+        ...hydration.probeProps,
+        id: inputId,
+        value: config.date,
+        minValue,
+        maxValue,
+        granularity: "day",
+        isDisabled: disabled || config.invalidBounds,
+        isReadOnly: readOnly,
+        isRequired: required || !!group?.required,
+        isInvalid: !!error,
+        validationBehavior: "aria",
+        className: clsx(fieldStyles(), className),
+        onOpenChange: (open) => {
+          if (open) draft.releaseBlur();
+        },
+        onChange: (next) => {
+          if (disabled || readOnly || config.invalidBounds || draft.blurRejected()) return;
+          const date = next ? toCalendar(next, new GregorianCalendar()) : null;
+          if (date && !parseDateOnly(date.toString())) {
+            draft.reject();
+            return;
+          }
+          if (date && !dateWithinBounds(date, config.min, config.max)) {
+            draft.reject(dateConfiguration(date.toString(), min, max).error);
+            return;
+          }
+          draft.accept();
+          onValueChange(date?.toString() ?? null);
+        },
+        children: [
+          /* @__PURE__ */ jsxs(Label, { className: FIELD_LABEL_STYLES, children: [
+            label,
+            required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " *" })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Group,
+            {
+              ref,
+              ...firstSegmentFocus(disabled),
+              className: `${FIELD_BOX_STYLES} gap-1u`,
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "contents", ...draft.editProps, children: /* @__PURE__ */ jsx(DateInput, { className: "flex min-w-0 flex-1 items-center", children: (segment) => segment.type === "year" ? /* @__PURE__ */ jsx(ObservedYear, { segment, report: draft.report }) : /* @__PURE__ */ jsx(DateSegment, { segment, className: SEGMENT_STYLES }) }) }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    ref: calendarButton,
+                    "aria-label": "Choose date",
+                    ...motionState.props,
+                    className: "oprt-motion flex min-h-3u min-w-3u shrink-0 items-center justify-center border border-transparent text-oprt-text focus-visible:outline-hidden forced-colors:data-[focus-visible]:outline-solid forced-colors:data-[focus-visible]:outline-2 forced-colors:data-[focus-visible]:-outline-offset-2 forced-colors:data-[focus-visible]:outline-[CanvasText] data-[hovered]:border-oprt-border data-[focus-visible]:border-oprt-border-focus data-[focus-visible]:shadow-oprt-focus data-[disabled]:cursor-not-allowed data-[disabled]:text-oprt-text-dim",
+                    children: /* @__PURE__ */ jsx(CalendarIcon, { size: 16 })
+                  }
+                )
+              ]
+            }
+          ),
+          error && /* @__PURE__ */ jsx(Text, { slot: "errorMessage", className: "m-0 text-oprt-error", children: error }),
+          /* @__PURE__ */ jsx(
+            MotionPopover,
+            {
+              motionState,
+              returnFocusRef: calendarButton,
+              offset: 4,
+              containerPadding: SCREEN_MARGIN,
+              className: `z-50 ${POPOVER_WIDTH} overflow-y-auto overscroll-contain border border-oprt-border bg-oprt-surface-1 p-2u text-oprt-text`,
+              children: /* @__PURE__ */ jsx(Dialog, { className: "outline-hidden", children: /* @__PURE__ */ jsx(
+                AriaCalendar,
+                {
+                  createCalendar: () => new GregorianCalendar(),
+                  className: CALENDAR_ROOT,
+                  children: /* @__PURE__ */ jsx(CalendarContent, {})
+                }
+              ) })
+            }
+          )
+        ]
+      },
+      hydration.key
+    ) });
+  }
+);
+DatePicker.displayName = "DatePicker";
+export {
+  DatePicker
+};

package/dist/DatePicker/DatePicker.manifest.js

@@ -0,0 +1,40 @@
+// src/DatePicker/DatePicker.manifest.ts
+var DatePickerManifest = {
+  DatePicker: {
+    description: "Controlled Gregorian date-only picker with segmented editing, calendar overlay and a draft-validity signal for incomplete or rejected edits.",
+    props: {
+      label: { type: "string", required: true },
+      value: {
+        type: "string",
+        required: true,
+        description: "YYYY-MM-DD in years 0001\u20139999, or null. Values contain no time or timezone."
+      },
+      onValueChange: {
+        type: "function",
+        required: true,
+        description: "Requests a complete valid date or null after clearing. Invalid or coerced dates are not emitted."
+      },
+      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, impossible, out-of-bounds or required-empty edits. Block Review/Save while false, even if value still contains a previous valid date."
+      },
+      min: { type: "string", description: "Inclusive YYYY-MM-DD lower bound." },
+      max: { type: "string", description: "Inclusive YYYY-MM-DD upper bound." },
+      disabled: { type: "boolean", default: false },
+      readOnly: { type: "boolean", default: false },
+      required: { type: "boolean", default: false },
+      motion: { type: "enum", values: ["auto", "none"], default: "auto" },
+      id: {
+        type: "string",
+        description: "ID of the focusable date-control group. Focusing it enters the first segment; the forwarded HTMLDivElement ref has the same behavior."
+      },
+      className: { type: "string" }
+    },
+    composable_with: ["FormSection", "FormErrorSummary"],
+    never_inside: ["Button"],
+    example: '<DatePicker id="inspection-date" label="Inspection date" value={date} onValueChange={setDate} onDraftValidityChange={setDateValid} required />'
+  }
+};
+export {
+  DatePickerManifest
+};

package/dist/DatePicker/index.js

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

package/dist/DateRangePicker/DateRangePicker.js

@@ -0,0 +1,156 @@
+"use client";
+
+// src/DateRangePicker/DateRangePicker.tsx
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import { DatePicker } from "../DatePicker/DatePicker.js";
+import { dateConfiguration, parseDateOnly } from "../_internal/date.js";
+import { definedOnly } from "../_internal/aria.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 { jsx, jsxs } from "react/jsx-runtime";
+var rangeStyles = 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 REQUIRED_GROUP = { required: true };
+var keyOf = (value) => value === null ? "null" : JSON.stringify([value.start, value.end]);
+var DateRangePicker = forwardRef(
+  ({
+    label,
+    value,
+    onValueChange,
+    onDraftValidityChange,
+    startLabel = "Start date",
+    endLabel = "End date",
+    min,
+    max,
+    disabled = false,
+    readOnly = false,
+    required = false,
+    id,
+    className
+  }, ref) => {
+    const root = useRef(null);
+    const setRoot = useMergedRefs(root, ref);
+    const ids = usePartIds(["label", "error", "status"], {
+      id,
+      readRendered: () => root.current?.id
+    });
+    const base = keyOf(value);
+    const [replacement, setReplacement] = useState({ base, generation: 0, requested: null });
+    if (replacement.base !== base) {
+      setReplacement({
+        base,
+        generation: replacement.generation + (replacement.requested === base ? 0 : 1),
+        requested: null
+      });
+    }
+    const request = (next) => {
+      const key = keyOf(next);
+      setReplacement((previous) => ({ ...previous, requested: key }));
+      onValueChange(next);
+    };
+    const initial = {
+      base,
+      start: value?.start ?? null,
+      end: value?.end ?? null,
+      startValid: true,
+      endValid: true,
+      startPending: false,
+      endPending: false
+    };
+    const [draft, setDraft] = useState(initial);
+    const current = draft.base === base ? draft : initial;
+    const start = parseDateOnly(current.start);
+    const end = parseDateOnly(current.end);
+    const startConfig = dateConfiguration(current.start, min, max);
+    const endConfig = dateConfiguration(current.end, min, max);
+    const empty = current.start === null && current.end === null;
+    const pending = current.startPending || current.endPending || current.start !== (value?.start ?? null) || current.end !== (value?.end ?? null);
+    const error = startConfig.error || endConfig.error || (!current.startValid || !current.endValid ? "Complete both date fields before continuing." : empty ? required ? "A date range is required." : null : !start || !end ? "Enter both a start date and an end date." : start.compare(end) > 0 ? "Start date must be on or before end date." : null);
+    const callback = useRef(onDraftValidityChange);
+    callback.current = onDraftValidityChange;
+    useEffect(() => callback.current?.(!error && !pending, { pending }), [error, pending]);
+    const setEndpoint = (part, next) => {
+      if (disabled || readOnly) return;
+      const nextDraft = { ...current, [part]: next };
+      setDraft(nextDraft);
+      if (!(part === "start" ? current.endValid : current.startValid)) return;
+      if (nextDraft.start === null && nextDraft.end === null) {
+        request(null);
+        return;
+      }
+      const nextStart = parseDateOnly(nextDraft.start);
+      const nextEnd = parseDateOnly(nextDraft.end);
+      if (!nextStart || !nextEnd || nextStart.compare(nextEnd) > 0 || dateConfiguration(nextDraft.start, min, max).error || dateConfiguration(nextDraft.end, min, max).error)
+        return;
+      request({ start: nextDraft.start, end: nextDraft.end });
+    };
+    const reportEndpoint = (part, valid, pending2) => setDraft((previous) => {
+      const active = previous.base === base ? previous : initial;
+      const validityKey = part === "start" ? "startValid" : "endValid";
+      const pendingKey = part === "start" ? "startPending" : "endPending";
+      return active[validityKey] === valid && active[pendingKey] === pending2 ? previous : { ...active, [validityKey]: valid, [pendingKey]: pending2 };
+    });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id: ids.base,
+        ref: setRoot,
+        role: "group",
+        "aria-labelledby": ids.label,
+        "aria-describedby": joinIds(error && ids.error, !error && pending && ids.status),
+        "aria-invalid": !!error || void 0,
+        className: clsx(rangeStyles(), className),
+        ...firstSegmentFocus(disabled),
+        children: [
+          /* @__PURE__ */ jsxs("p", { id: ids.label, className: FIELD_LABEL_STYLES, children: [
+            label,
+            required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " *" })
+          ] }),
+          /* @__PURE__ */ jsx(SegmentGroupContext.Provider, { value: required ? REQUIRED_GROUP : null, children: /* @__PURE__ */ jsxs("div", { className: FIELD_COLUMNS, children: [
+            /* @__PURE__ */ jsx(
+              DatePicker,
+              {
+                className: "min-w-0 flex-1",
+                label: startLabel,
+                value: current.start,
+                onValueChange: (next) => setEndpoint("start", next),
+                onDraftValidityChange: (valid, details) => reportEndpoint("start", valid, details.pending),
+                disabled,
+                readOnly,
+                ...definedOnly({ min, max })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              DatePicker,
+              {
+                className: "min-w-0 flex-1",
+                label: endLabel,
+                value: current.end,
+                onValueChange: (next) => setEndpoint("end", next),
+                onDraftValidityChange: (valid, details) => reportEndpoint("end", valid, details.pending),
+                disabled,
+                readOnly,
+                ...definedOnly({ min, max })
+              }
+            )
+          ] }, replacement.generation) }),
+          error && /* @__PURE__ */ jsx("p", { id: ids.error, className: "m-0 text-oprt-error", children: error }),
+          !error && pending && /* @__PURE__ */ jsx("p", { id: ids.status, className: "m-0 text-oprt-text-dim", children: "The range change has not been applied." })
+        ]
+      }
+    );
+  }
+);
+DateRangePicker.displayName = "DateRangePicker";
+export {
+  DateRangePicker
+};

package/dist/DateRangePicker/DateRangePicker.manifest.js

@@ -0,0 +1,41 @@
+// src/DateRangePicker/DateRangePicker.manifest.ts
+var DateRangePickerManifest = {
+  DateRangePicker: {
+    description: "Controlled ordered Gregorian date range with independently editable start and end fields and separate endpoint calendars. Equal-day ranges are valid.",
+    props: {
+      label: { type: "string", required: true },
+      value: {
+        type: "node",
+        required: true,
+        description: "{ start: YYYY-MM-DD, end: YYYY-MM-DD }, or null. Dates carry no time or time zone."
+      },
+      onValueChange: {
+        type: "function",
+        required: true,
+        description: "Requests complete ordered ranges or null when both endpoints are cleared. Partial and reversed ranges are retained as invalid drafts."
+      },
+      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 incomplete, invalid, out-of-bounds, required-empty, or unaccepted range drafts. Block Review/Save while false."
+      },
+      startLabel: { type: "string", default: "Start date" },
+      endLabel: { type: "string", default: "End date" },
+      min: { type: "string", description: "Inclusive YYYY-MM-DD lower bound for both endpoints." },
+      max: { type: "string", description: "Inclusive YYYY-MM-DD upper bound for both endpoints." },
+      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 start-date segment."
+      },
+      className: { type: "string" }
+    },
+    composable_with: ["FormSection", "FormErrorSummary", "DatePicker"],
+    never_inside: ["Button"],
+    example: '<DateRangePicker id="inspection-window" label="Inspection window" value={range} onValueChange={setRange} onDraftValidityChange={setRangeValid} required />'
+  }
+};
+export {
+  DateRangePickerManifest
+};

package/dist/DateRangePicker/index.js

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