@oprt/react 0.0.0-stage → 0.2.0

package/dist/FileUpload/FileUpload.manifest.js

@@ -0,0 +1,48 @@
+// src/FileUpload/FileUpload.manifest.ts
+var FileUploadManifest = {
+  FileUpload: {
+    description: "Choose, drop or paste files with bounded validation and readable rejection feedback.",
+    props: {
+      label: {
+        type: "string",
+        required: true,
+        description: "Visible name for the file selection group."
+      },
+      description: { type: "node", description: "Optional guidance associated with the group." },
+      accept: {
+        type: "array",
+        description: "Allowed extensions (.csv), MIME types (text/csv), or MIME wildcards (image/*). Case-insensitive, OR matching. Empty means any type. Browser hints do not validate content."
+      },
+      multiple: { type: "boolean", default: false },
+      maxFiles: {
+        type: "number",
+        description: "Positive integer limit per selection batch. Single-file mode always permits at most one file. Files are considered in input order, including files rejected by type/size."
+      },
+      maxFileSizeBytes: {
+        type: "number",
+        description: "Inclusive nonnegative integer byte limit. Zero allows only empty files. Omitted means unlimited."
+      },
+      disabled: {
+        type: "boolean",
+        default: false,
+        description: "Blocks all input paths and invalidates in-flight file resolution."
+      },
+      onFiles: {
+        type: "function",
+        required: true,
+        description: "Receives accepted readonly File[] in input order. Selection does not establish upload or persistence. No callback for chooser cancellation or an empty accepted set."
+      },
+      onReject: {
+        type: "function",
+        description: "Receives readonly FileRejection[]: name, code (type/size/count/directory/unsupported/read), message. Rejections are also displayed."
+      },
+      className: { type: "string" }
+    },
+    composable_with: ["UploadQueue", "AttachmentPreview", "FormSection"],
+    never_inside: ["Button"],
+    example: '<FileUpload label="Equipment import" accept={[".csv"]} maxFileSizeBytes={1048576} onFiles={selectFiles} onReject={reportIssues} />'
+  }
+};
+export {
+  FileUploadManifest
+};

package/dist/FileUpload/index.js

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

package/dist/FilterBar/FilterBar.js

@@ -0,0 +1,173 @@
+"use client";
+
+// src/FilterBar/FilterBar.tsx
+import { ToggleButtonGroup, ToggleButton } from "react-aria-components";
+import { mergeProps } from "react-aria";
+import { filterDOMProps } from "react-aria/filterDOMProps";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import { useMergedRefs } from "../_internal/mergeRefs.js";
+import { useRestoreFocusOnRemoval } from "../_internal/useRestoreFocusOnRemoval.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var itemStyles = [
+  // Design call DC-8 and its ruling: the height is a minimum, so a label that wraps grows its filter
+  // instead of spilling out, and the label is centered on one line or several. The padding is what
+  // is left of 32 px around one line and the border, so a one-line filter keeps its exact height,
+  // and `h-fit` keeps a row that stretches its items from growing it to its tallest neighbor. An
+  // unbroken label breaks anywhere instead of widening the bar (R4).
+  "inline-flex h-fit min-h-oprt-md min-w-0 max-w-full flex-col items-center justify-center whitespace-normal text-center oprt-wrap-anywhere",
+  "px-2u py-[calc((var(--oprt-height-md)-2px-var(--oprt-line-base))/2)]",
+  // The boundary of an unselected filter is the control outline (design call DC-3).
+  "border border-oprt-border-control text-oprt-base font-medium uppercase tracking-oprt-caps text-oprt-text-dim",
+  // Hover brightens an enabled, unselected filter only: a disabled one keeps its look.
+  "data-[hovered]:[&:not([data-selected])]:text-oprt-text",
+  "data-[selected]:text-oprt-bg data-[selected]:bg-oprt-accent data-[selected]:border-oprt-accent-light",
+  // The system's focus ring replaces the browser's own.
+  "focus-visible:outline-hidden data-[focus-visible]:border-oprt-border-focus data-[focus-visible]:shadow-oprt-focus",
+  "disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-oprt-fast",
+  // Forced colors replace backgrounds and borders with system colors and drop the shadow, so the
+  // selected filter would look like the others and focus would vanish. Selection is redrawn from
+  // Highlight; a disabled selected filter stays filled, in GrayText (`:disabled` outranks the
+  // enabled rule); focus becomes an outline.
+  "forced-colors:data-[selected]:[forced-color-adjust:none] forced-colors:data-[selected]:bg-[color:Highlight] forced-colors:data-[selected]:text-[color:HighlightText] forced-colors:data-[selected]:border-[color:Highlight]",
+  "forced-colors:data-[selected]:disabled:bg-[color:GrayText] forced-colors:data-[selected]:disabled:text-[color:Canvas] forced-colors:data-[selected]:disabled:border-[color:GrayText]",
+  "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-[color:CanvasText]"
+].join(" ");
+var UNAVAILABLE = "Unavailable";
+var shownAs = (value) => value === "" ? "\u2014" : value;
+function toKeys(value) {
+  if (typeof value !== "string") return value;
+  return value === "" ? [] : [value];
+}
+var reported = /* @__PURE__ */ new Set();
+function report(mistake, prop, received) {
+  if (process.env.NODE_ENV === "production") return;
+  const key = `${mistake}\0${prop}\0${received}`;
+  if (reported.has(key)) return;
+  reported.add(key);
+  const [error, suggestion] = mistake === "unknown value" ? [
+    "UNKNOWN_FILTER_VALUE",
+    "The selection names a value that is not in `filters`. FilterBar shows it as a selected filter marked unavailable, at the end of the bar, which the operator can remove. Add it to `filters` if it is still offered, or leave it out of the selection."
+  ] : mistake === "duplicate filter" ? [
+    "DUPLICATE_FILTER",
+    "Each filter label must be unique: FilterBar shows a repeated label once. Remove the duplicate from `filters`."
+  ] : [
+    "PROP_NOT_APPLIED",
+    prop === "role" ? "FilterBar's group is a radio group in single mode and a toolbar in multiple mode; a role is not applied." : prop === "aria-orientation" ? "FilterBar's filters wrap onto rows and arrow keys follow reading order; aria-orientation is not applied." : "FilterBar draws its own filters; dangerouslySetInnerHTML is not applied. Supply them as `filters`."
+  ];
+  console.error(
+    JSON.stringify({ component: "FilterBar", error, prop, received, suggestion }, null, 2)
+  );
+}
+var NOT_APPLIED = ["role", "aria-orientation", "dangerouslySetInnerHTML"];
+var buttonsIn = (root) => root ? Array.from(root.querySelectorAll("button")) : [];
+var FilterBar = forwardRef((componentProps, ref) => {
+  const {
+    className,
+    filters,
+    value,
+    defaultValue,
+    onValueChange: _onValueChange,
+    multiple = false,
+    ariaLabel = "Filters",
+    disabled = false,
+    ...props
+  } = componentProps;
+  const root = useRef(null);
+  const mergedRef = useMergedRefs(root, ref);
+  const [ownSelection, setOwnSelection] = useState(
+    () => toKeys(defaultValue ?? "")
+  );
+  const selected = value !== void 0 ? toKeys(value) : ownSelection;
+  const offered = [...new Set(filters)];
+  const duplicates = [
+    ...new Set(filters.filter((filter, index) => filters.indexOf(filter) !== index))
+  ];
+  const unavailable = [...new Set(selected)].filter((key) => !offered.includes(key));
+  const sourceProp = value !== void 0 ? "value" : "defaultValue";
+  const unavailableKey = JSON.stringify(unavailable);
+  const duplicatesKey = JSON.stringify(duplicates);
+  useEffect(() => {
+    if (process.env.NODE_ENV === "production") return;
+    for (const key of JSON.parse(unavailableKey))
+      report("unknown value", sourceProp, key);
+    for (const key of JSON.parse(duplicatesKey))
+      report("duplicate filter", "filters", key);
+  }, [unavailableKey, duplicatesKey, sourceProp]);
+  function changeSelection(keys) {
+    const next = Array.from(keys, String);
+    const current = new Set(selected);
+    if (next.length === current.size && next.every((key) => current.has(key))) return;
+    if (value === void 0) setOwnSelection(next);
+    if (componentProps.multiple) componentProps.onValueChange?.(next);
+    else componentProps.onValueChange?.(next[0] ?? "");
+  }
+  const restore = useRestoreFocusOnRemoval(root, {
+    track: (element) => {
+      const index = buttonsIn(root.current).indexOf(element);
+      return index >= 0 ? { index } : null;
+    },
+    findTarget: ({ index }) => {
+      const enabled = buttonsIn(root.current).filter((button) => !button.disabled);
+      return enabled[Math.min(index, enabled.length - 1)] ?? null;
+    }
+  });
+  const forwarded = filterDOMProps(props, {
+    global: true,
+    labelable: true
+  });
+  const dropped = { ...props };
+  for (const name of [...Object.keys(forwarded), ...NOT_APPLIED])
+    delete dropped[name];
+  const notApplied = NOT_APPLIED.filter((name) => props[name] !== void 0).join(" ");
+  useEffect(() => {
+    if (process.env.NODE_ENV === "production") return;
+    for (const name of notApplied ? notApplied.split(" ") : []) report("not applied", name, name);
+  }, [notApplied]);
+  return /* @__PURE__ */ jsxs(
+    ToggleButtonGroup,
+    {
+      ref: mergedRef,
+      isDisabled: disabled,
+      "aria-label": ariaLabel,
+      selectionMode: multiple ? "multiple" : "single",
+      disallowEmptySelection: !multiple,
+      selectedKeys: selected,
+      onSelectionChange: changeSelection,
+      className: clsx("flex min-w-0 max-w-full flex-wrap gap-1u font-sans", className),
+      ...props,
+      render: (domProps) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...mergeProps(dropped, domProps, {
+            onFocusCapture: restore.onFocusCapture,
+            onBlurCapture: restore.onBlurCapture
+          })
+        }
+      ),
+      children: [
+        offered.map((filter) => /* @__PURE__ */ jsx(ToggleButton, { id: filter, className: itemStyles, children: filter }, filter)),
+        unavailable.map((key) => (
+          // The name joins the value and its cue with a pause; it contains the visible text.
+          /* @__PURE__ */ jsxs(
+            ToggleButton,
+            {
+              id: key,
+              "aria-label": `${shownAs(key)}, ${UNAVAILABLE}`,
+              className: itemStyles,
+              children: [
+                shownAs(key),
+                /* @__PURE__ */ jsx("span", { className: "font-normal normal-case tracking-normal", children: UNAVAILABLE })
+              ]
+            },
+            key
+          )
+        ))
+      ]
+    }
+  );
+});
+FilterBar.displayName = "FilterBar";
+export {
+  FilterBar
+};

package/dist/FilterBar/FilterBar.manifest.js

@@ -0,0 +1,49 @@
+// src/FilterBar/FilterBar.manifest.ts
+var FilterBarManifest = {
+  FilterBar: {
+    description: "Toggle-button filters for a view, wrapping onto more rows when they do not fit. Single-select by default; set multiple for multi-select.",
+    props: {
+      filters: {
+        type: "array",
+        required: true,
+        description: "Readonly string[] of filter labels, each shown once, in order."
+      },
+      value: {
+        type: "union",
+        types: ["string", "array"],
+        description: "Controlled selection: string in single mode; readonly string[] when multiple=true. Use an empty string or array to clear the corresponding mode. A selected value that is not in filters shows at the end of the bar as a selected filter marked unavailable, which the operator can remove."
+      },
+      defaultValue: {
+        type: "union",
+        types: ["string", "array"],
+        description: "Initial uncontrolled selection: string in single mode; readonly string[] when multiple=true."
+      },
+      multiple: {
+        type: "boolean",
+        default: false,
+        description: "When true, value, defaultValue, and onValueChange use string[] and a selected filter can be cleared; otherwise they use string and the filters are radios, so the active filter stays selected until another is chosen."
+      },
+      ariaLabel: {
+        type: "string",
+        default: "Filters",
+        description: "Accessible name for the group."
+      },
+      disabled: {
+        type: "boolean",
+        default: false,
+        description: "Disable pointer and keyboard selection while retaining the active filters."
+      },
+      onValueChange: {
+        type: "function",
+        description: "Receives the active string in single mode or the complete string[] selection when multiple=true."
+      },
+      className: { type: "string" }
+    },
+    composable_with: ["Card"],
+    never_inside: ["Button", "Badge"],
+    example: '<FilterBar filters={["ALL","FRIENDLY","HOSTILE","NEUTRAL","UNKNOWN"]} defaultValue="ALL" />'
+  }
+};
+export {
+  FilterBarManifest
+};

package/dist/FilterBar/index.js

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

package/dist/FormErrorSummary/FormErrorSummary.js

@@ -0,0 +1,70 @@
+"use client";
+
+// src/FormErrorSummary/FormErrorSummary.tsx
+import { forwardRef, useRef } from "react";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import { joinIds, usePartIds } from "../_internal/fieldIds.js";
+import { useMergedRefs } from "../_internal/mergeRefs.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var summaryStyles = cva(
+  "flex min-w-0 flex-col gap-2u border border-oprt-error bg-oprt-surface-1 p-3u font-sans text-oprt-base normal-case tracking-normal text-oprt-text outline-hidden focus-visible:shadow-oprt-focus"
+);
+var errorStyles = cva(
+  "inline-flex min-h-3u min-w-3u max-w-full items-center border border-transparent px-1u py-0.5u text-left text-oprt-base font-medium normal-case tracking-normal text-oprt-text underline underline-offset-2 hover:text-oprt-accent outline-hidden focus-visible:border-oprt-border-focus focus-visible:shadow-oprt-focus oprt-wrap-anywhere"
+);
+var FormErrorSummary = forwardRef(
+  ({
+    errors,
+    title = "Check these fields",
+    onErrorSelect,
+    className,
+    tabIndex = -1,
+    "aria-labelledby": labelledBy,
+    ...props
+  }, ref) => {
+    const root = useRef(null);
+    const mergedRef = useMergedRefs(root, ref);
+    const ids = usePartIds(["title"], {
+      id: props.id,
+      readRendered: () => root.current?.getAttribute("data-oprt-ids")
+    });
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        ...props,
+        ref: mergedRef,
+        tabIndex,
+        "data-oprt-ids": ids.base,
+        "aria-labelledby": joinIds(ids.title, labelledBy),
+        className: clsx(summaryStyles(), className),
+        children: [
+          /* @__PURE__ */ jsx(
+            "h2",
+            {
+              id: ids.title,
+              className: "m-0 min-w-0 oprt-wrap-anywhere text-oprt-base font-medium uppercase tracking-oprt-sm text-oprt-error",
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsx("ul", { className: "m-0 flex min-w-0 list-none flex-col gap-1u p-0", children: errors.map((error) => /* @__PURE__ */ jsx("li", { className: "m-0 min-w-0 p-0", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: errorStyles(),
+              onClick: (event) => {
+                if (onErrorSelect) onErrorSelect(error);
+                else event.currentTarget.ownerDocument.getElementById(error.targetId)?.focus();
+              },
+              children: error.message
+            }
+          ) }, error.id)) })
+        ]
+      }
+    );
+  }
+);
+FormErrorSummary.displayName = "FormErrorSummary";
+export {
+  FormErrorSummary
+};

package/dist/FormErrorSummary/FormErrorSummary.manifest.js

@@ -0,0 +1,29 @@
+// src/FormErrorSummary/FormErrorSummary.manifest.ts
+var FormErrorSummaryManifest = {
+  FormErrorSummary: {
+    description: "Focusable error summary with actions that reveal or focus invalid form controls.",
+    props: {
+      errors: {
+        type: "array",
+        required: true,
+        description: "Readonly errors with stable unique id, readable message and targetId for the control."
+      },
+      title: {
+        type: "string",
+        default: "Check these fields",
+        description: "Visible heading that names the summary section."
+      },
+      onErrorSelect: {
+        type: "function",
+        description: "Optional reveal/focus handler receiving the selected error. Replaces direct target focus; reveal hidden controls before focusing them after render."
+      },
+      className: { type: "string" }
+    },
+    composable_with: ["Field", "FormSection", "Input"],
+    never_inside: ["Button"],
+    example: "<FormErrorSummary ref={summaryRef} errors={errors} onErrorSelect={revealAndFocus} />"
+  }
+};
+export {
+  FormErrorSummaryManifest
+};

package/dist/FormErrorSummary/index.js

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

package/dist/FormSection/FormSection.js

@@ -0,0 +1,51 @@
+"use client";
+
+// src/FormSection/FormSection.tsx
+import { forwardRef, useRef } from "react";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import { joinIds, usePartIds } from "../_internal/fieldIds.js";
+import { useMergedRefs } from "../_internal/mergeRefs.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var sectionStyles = cva(
+  "m-0 min-w-0 border border-oprt-border bg-oprt-surface-1 p-3u font-sans text-oprt-base normal-case tracking-normal text-oprt-text"
+);
+var FormSection = forwardRef(
+  ({ legend, description, children, className, "aria-describedby": describedBy, ...props }, ref) => {
+    const root = useRef(null);
+    const mergedRef = useMergedRefs(root, ref);
+    const ids = usePartIds(["description"], {
+      id: props.id,
+      readRendered: () => root.current?.getAttribute("data-oprt-ids")
+    });
+    const hasDescription = description != null && typeof description !== "boolean";
+    return /* @__PURE__ */ jsxs(
+      "fieldset",
+      {
+        ...props,
+        ref: mergedRef,
+        "data-oprt-ids": ids.base,
+        "aria-describedby": joinIds(hasDescription && ids.description, describedBy),
+        className: clsx(sectionStyles(), className),
+        children: [
+          /* @__PURE__ */ jsx("legend", { className: "m-0 max-w-full oprt-wrap-anywhere px-1u text-oprt-base font-medium uppercase tracking-oprt-sm", children: legend }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-2u", children: [
+            hasDescription && /* @__PURE__ */ jsx(
+              "div",
+              {
+                id: ids.description,
+                className: "min-w-0 oprt-wrap-anywhere text-oprt-text-dim [&_p]:m-0",
+                children: description
+              }
+            ),
+            children
+          ] })
+        ]
+      }
+    );
+  }
+);
+FormSection.displayName = "FormSection";
+export {
+  FormSection
+};

package/dist/FormSection/FormSection.manifest.js

@@ -0,0 +1,30 @@
+// src/FormSection/FormSection.manifest.ts
+var FormSectionManifest = {
+  FormSection: {
+    description: "Native fieldset with a legend, optional description and supplied form controls.",
+    props: {
+      legend: {
+        type: "string",
+        required: true,
+        description: "Visible legend that names the group."
+      },
+      description: {
+        type: "node",
+        description: "Supporting content associated with the fieldset."
+      },
+      disabled: {
+        type: "boolean",
+        default: false,
+        description: "Uses native fieldset disabling for descendant form controls."
+      },
+      className: { type: "string" }
+    },
+    slots: { children: { type: "ReactNode", required: true } },
+    composable_with: ["Field", "Input", "Checkbox", "FormErrorSummary"],
+    never_inside: ["Button"],
+    example: '<FormSection legend="Equipment details" description="Use the registered name.">\n  <Field controlId="resource-name" label="Name"><Input /></Field>\n</FormSection>'
+  }
+};
+export {
+  FormSectionManifest
+};

package/dist/FormSection/index.js

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