@oprt/react 0.0.0-stage → 0.2.0

package/dist/ComboBox/ComboBox.manifest.js

@@ -0,0 +1,87 @@
+// src/ComboBox/ComboBox.manifest.ts
+var ComboBoxManifest = {
+  ComboBox: {
+    description: "Searchable single-value selection with keyboard navigation and caller-supplied asynchronous results.",
+    props: {
+      motion: {
+        type: "enum",
+        values: ["auto", "none"],
+        default: "auto",
+        description: "Tactile pointer arrival, exit, and open-state chevron rotation; keyboard, assistive activation, and system reduced motion remain immediate."
+      },
+      options: {
+        type: "array",
+        required: true,
+        description: "Available options. Values must be unique and stable; labels preserve authored case.",
+        items: {
+          value: "string (required, unique)",
+          label: "string (required)",
+          disabled: "boolean (default false)"
+        }
+      },
+      value: {
+        type: "string",
+        description: "Controlled selected option value, or null to clear selection. Omit for internal selection state."
+      },
+      defaultValue: {
+        type: "string",
+        description: "Initial selected option value for uncontrolled use."
+      },
+      onValueChange: {
+        type: "function",
+        description: "(value: string | null) => void. Called on option selection or when clearing the input clears the selected value."
+      },
+      inputValue: {
+        type: "string",
+        description: "Controlled search input text; independent from the selected value."
+      },
+      onInputChange: {
+        type: "function",
+        description: "(text: string) => void. Use with inputValue for caller-owned search and asynchronous results."
+      },
+      label: {
+        type: "string",
+        description: "Visible accessible label. Alternatively, use Field or aria-label."
+      },
+      "aria-label": {
+        type: "string",
+        description: "Accessible name when there is no visible label or surrounding Field."
+      },
+      "aria-describedby": {
+        type: "string",
+        description: "Description IDs; otherwise inherits the surrounding Field help or error message."
+      },
+      placeholder: { type: "string" },
+      disabled: { type: "boolean", default: false },
+      required: { type: "boolean", default: false },
+      size: { type: "enum", values: ["sm", "md", "lg"], default: "md" },
+      invalid: {
+        type: "boolean",
+        default: false,
+        description: "Error appearance and aria-invalid; otherwise inherits Field error state."
+      },
+      loading: {
+        type: "boolean",
+        default: false,
+        description: "Announces loading and marks input busy. Supplied options remain selectable unless disabled."
+      },
+      filter: {
+        type: "boolean",
+        default: true,
+        description: "Language-sensitive contains matching by default. Set false when the caller already filters options or supplies asynchronous results."
+      },
+      emptyMessage: { type: "string", default: "No options found." },
+      name: { type: "string", description: "Form field name; submits the selected option value." },
+      id: {
+        type: "string",
+        description: "Input ID; otherwise inherits Field or React Aria's generated ID."
+      }
+    },
+    composable_with: ["Field", "DataGrid"],
+    never_inside: ["Button", "Badge"],
+    example: '<ComboBox\n  label="STATION"\n  options={[{ value: "alpha", label: "Alpha station" }, { value: "bravo", label: "Bravo station" }]}\n  value={station}\n  onValueChange={setStation}\n  placeholder="Search stations\u2026"\n/>'
+  }
+};
+export {
+  ComboBoxManifest
+};

package/dist/ComboBox/index.js

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

package/dist/CommandPalette/CommandPalette.js

@@ -0,0 +1,276 @@
+"use client";
+
+// src/CommandPalette/CommandPalette.tsx
+import { Search } from "@oprt/icons";
+import {
+  Autocomplete,
+  Dialog,
+  Header,
+  Heading,
+  Input,
+  ListBox,
+  ListBoxItem,
+  ListBoxSection,
+  Modal,
+  ModalOverlay,
+  TextField,
+  useFilter
+} from "react-aria-components";
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import clsx from "clsx";
+import { FORCED_ACTIVE_ROW, MENU_EMPTY, MENU_ITEM_SHORTCUT, MENU_ROW } from "../_internal/overlay.js";
+import { useIsomorphicLayoutEffect } from "../_internal/useIsomorphicLayoutEffect.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var itemStyles = `m-0 ${MENU_ROW} text-oprt-base font-medium text-oprt-text cursor-pointer list-none outline-hidden data-[focused]:border-oprt-border-focus data-[focused]:shadow-oprt-focus data-[focused]:bg-oprt-surface-3 data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed ${FORCED_ACTIVE_ROW}`;
+var FOCUSABLE = "button, a[href], input, select, textarea, summary, [tabindex], [contenteditable]:not([contenteditable='false'])";
+function reveal(list, row) {
+  const group = row.closest('[role="group"]');
+  const first = group?.querySelector('[role="option"]:not([aria-disabled="true"])');
+  const lead = group && list.contains(group) && first === row ? group : row;
+  const viewTop = list.getBoundingClientRect().top + list.clientTop;
+  const top = lead.getBoundingClientRect().top - viewTop;
+  const bottom = row.getBoundingClientRect().bottom - viewTop;
+  if (top < 0) list.scrollTop += top;
+  else if (bottom > list.clientHeight) list.scrollTop += bottom - list.clientHeight;
+}
+function useSettled(value, delay) {
+  const [settled, setSettled] = useState(value);
+  useEffect(() => {
+    const timer = setTimeout(() => setSettled(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+  return settled;
+}
+function useReturnFocusToOpener(isOpen) {
+  const clicked = useRef(null);
+  const opener = useRef(null);
+  useEffect(() => {
+    const record = (event) => {
+      const target = event.target instanceof Element ? event.target.closest(FOCUSABLE) : null;
+      clicked.current = target;
+      setTimeout(() => {
+        if (clicked.current === target) clicked.current = null;
+      }, 0);
+    };
+    document.addEventListener("click", record, true);
+    return () => document.removeEventListener("click", record, true);
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    if (!isOpen) return;
+    opener.current = clicked.current;
+    return () => {
+      const target = opener.current;
+      opener.current = null;
+      if (!target) return;
+      requestAnimationFrame(() => {
+        const active = document.activeElement;
+        if (target.isConnected && (active === null || active === document.body))
+          target.focus({ preventScroll: true });
+      });
+    };
+  }, [isOpen]);
+}
+function PaletteContent({
+  commands,
+  placeholder,
+  emptyMessage,
+  onRun
+}) {
+  const [query, setQuery] = useState("");
+  const byId = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const cmd of commands) map.set(cmd.id, cmd);
+    return map;
+  }, [commands]);
+  const hasGroups = useMemo(
+    () => commands.some((cmd) => cmd.group !== void 0 && cmd.group !== ""),
+    [commands]
+  );
+  const runs = useMemo(() => {
+    const out = [];
+    for (const cmd of commands) {
+      const group = hasGroups && cmd.group !== void 0 && cmd.group !== "" ? cmd.group : void 0;
+      const last = out[out.length - 1];
+      if (last && last.group === group) last.items.push(cmd);
+      else out.push({ key: `${group ?? ""}::${cmd.id}`, group, items: [cmd] });
+    }
+    return out;
+  }, [commands, hasGroups]);
+  const disabledKeys = useMemo(
+    () => commands.filter((cmd) => cmd.disabled).map((cmd) => cmd.id),
+    [commands]
+  );
+  const { contains } = useFilter({ sensitivity: "base" });
+  const filter = useCallback(
+    (textValue, inputValue, node) => {
+      if (inputValue === "") return true;
+      if (contains(textValue, inputValue)) return true;
+      const group = byId.get(String(node.key))?.group;
+      return group !== void 0 && group !== "" ? contains(group, inputValue) : false;
+    },
+    [contains, byId]
+  );
+  const noMatch = query !== "" && !commands.some((cmd) => filter(cmd.label, query, { key: cmd.id }));
+  const announcement = useSettled(noMatch ? emptyMessage : "", 300);
+  const onAction = useCallback(
+    (key) => {
+      const cmd = byId.get(String(key));
+      if (cmd && !cmd.disabled) onRun(cmd);
+    },
+    [byId, onRun]
+  );
+  const listObserver = useRef(null);
+  const listRef = useCallback((list) => {
+    listObserver.current?.disconnect();
+    listObserver.current = null;
+    if (!list) return;
+    const observer = new MutationObserver(() => {
+      const row = list.querySelector('[role="option"][data-focused]');
+      if (row) reveal(list, row);
+    });
+    observer.observe(list, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: ["data-focused"]
+    });
+    listObserver.current = observer;
+  }, []);
+  const renderItem = (cmd) => /* @__PURE__ */ jsxs(ListBoxItem, { id: cmd.id, textValue: cmd.label, className: itemStyles, children: [
+    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2u", children: [
+      cmd.icon && /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "shrink-0 text-oprt-text-dim forced-colors:[color:inherit]",
+          children: cmd.icon
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 uppercase tracking-oprt-caps oprt-wrap-anywhere", children: cmd.label })
+    ] }),
+    cmd.shortcut && /* @__PURE__ */ jsx("span", { className: MENU_ITEM_SHORTCUT, children: cmd.shortcut })
+  ] }, cmd.id);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Autocomplete, { filter, inputValue: query, onInputChange: setQuery, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2u px-3u border border-transparent border-b-oprt-border focus-within:border-oprt-border-focus focus-within:shadow-oprt-focus", children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-oprt-text-dim", children: /* @__PURE__ */ jsx(Search, { size: 14 }) }),
+        /* @__PURE__ */ jsx(TextField, { "aria-label": "Command Palette", className: "w-full", children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            autoFocus: true,
+            role: "combobox",
+            "aria-expanded": "true",
+            placeholder,
+            className: "w-full bg-transparent h-oprt-lg text-oprt-md normal-case text-oprt-text font-sans font-medium outline-hidden placeholder:text-oprt-text-placeholder"
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        ListBox,
+        {
+          ref: listRef,
+          "aria-label": "Commands",
+          selectionMode: "none",
+          autoFocus: "first",
+          shouldFocusWrap: true,
+          disabledKeys,
+          onAction,
+          className: "m-0 min-h-0 p-0 list-none max-h-40u overflow-auto outline-hidden",
+          renderEmptyState: () => /* @__PURE__ */ jsx("div", { className: `${MENU_EMPTY} list-none`, children: emptyMessage }),
+          children: runs.map(
+            (run) => run.group !== void 0 ? /* @__PURE__ */ jsxs(ListBoxSection, { id: run.key, children: [
+              /* @__PURE__ */ jsx(Header, { className: "m-0 px-3u py-1u text-oprt-sm uppercase tracking-oprt-sm text-oprt-text-dim list-none oprt-wrap-anywhere", children: run.group }),
+              run.items.map(renderItem)
+            ] }, run.key) : run.items.map(renderItem)
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { role: "status", className: "sr-only", children: announcement })
+  ] });
+}
+var CommandPalette = forwardRef(
+  ({
+    open,
+    defaultOpen,
+    onOpenChange,
+    commands,
+    placeholder = "Type a command\u2026",
+    emptyMessage = "No results",
+    className
+  }, ref) => {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);
+    const isControlled = open !== void 0;
+    const isOpen = isControlled ? open : internalOpen;
+    useReturnFocusToOpener(isOpen);
+    const setOpen = useCallback(
+      (next) => {
+        if (!isControlled) setInternalOpen(next);
+        onOpenChange?.(next);
+      },
+      [isControlled, onOpenChange]
+    );
+    const onRun = useCallback(
+      (cmd) => {
+        cmd.onSelect();
+        setOpen(false);
+      },
+      [setOpen]
+    );
+    return (
+      // The overlay is as tall as the visible viewport React Aria measures (above an on-screen
+      // keyboard too) and keeps a margin on every side, so the palette never touches the edges.
+      /* @__PURE__ */ jsx(
+        ModalOverlay,
+        {
+          isOpen,
+          onOpenChange: setOpen,
+          isDismissable: true,
+          className: "fixed inset-x-0 top-0 z-40 flex h-[var(--visual-viewport-height,100dvh)] flex-col items-center bg-oprt-bg/80 p-2u",
+          children: /* @__PURE__ */ jsxs(Modal, { className: "contents", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": "true",
+                className: "pointer-events-none shrink-[999] basis-[calc(15dvh-var(--oprt-space-2))]"
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Dialog,
+              {
+                ref,
+                className: clsx(
+                  "relative z-50 flex min-h-0 w-full max-w-lg flex-col bg-oprt-surface-1 border border-oprt-border font-sans focus:outline-hidden focus-visible:border-oprt-border-focus focus-visible:shadow-oprt-focus",
+                  className
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(Heading, { slot: "title", className: "sr-only", children: "Command Palette" }),
+                  /* @__PURE__ */ jsx(
+                    PaletteContent,
+                    {
+                      commands,
+                      placeholder,
+                      emptyMessage,
+                      onRun
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        }
+      )
+    );
+  }
+);
+CommandPalette.displayName = "CommandPalette";
+export {
+  CommandPalette
+};

package/dist/CommandPalette/CommandPalette.manifest.js

@@ -0,0 +1,24 @@
+// src/CommandPalette/CommandPalette.manifest.ts
+var CommandPaletteManifest = {
+  CommandPalette: {
+    description: "Modal command launcher: search field over a filtered, keyboard-navigable action list. Command and group labels display uppercase; search input, empty messages, and keyboard shortcuts retain their casing.",
+    props: {
+      commands: { type: "array", required: true },
+      placeholder: { type: "string", default: "Type a command\u2026" },
+      emptyMessage: { type: "string", default: "No results" },
+      open: { type: "boolean" },
+      defaultOpen: {
+        type: "boolean",
+        default: false,
+        description: "Initial open state when the palette manages its own state."
+      },
+      onOpenChange: { type: "function" }
+    },
+    composable_with: [],
+    never_inside: ["CommandPalette"],
+    example: '<CommandPalette\n  open={open}\n  onOpenChange={setOpen}\n  commands={[\n    { id: "new", label: "New File", shortcut: "\u2318N", onSelect: () => {} },\n    { id: "open", label: "Open\u2026", shortcut: "\u2318O", onSelect: () => {} },\n  ]}\n/>'
+  }
+};
+export {
+  CommandPaletteManifest
+};

package/dist/CommandPalette/index.js

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

package/dist/ConfirmDialog/ConfirmDialog.js

@@ -0,0 +1,84 @@
+"use client";
+
+// src/ConfirmDialog/ConfirmDialog.tsx
+import { forwardRef, useEffect, useState } from "react";
+import { Dialog } from "../Dialog/Dialog.js";
+import { Button } from "../Button/Button.js";
+import { Input } from "../Input/Input.js";
+import { Field } from "../Field/Field.js";
+import { ConfirmDialogManifest } from "./ConfirmDialog.manifest.js";
+import { devValidate } from "../_internal/devValidate.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ConfirmDialog = forwardRef((props, ref) => {
+  const {
+    trigger,
+    title,
+    description,
+    confirmLabel = "CONFIRM",
+    cancelLabel = "CANCEL",
+    confirmVariant = "primary",
+    confirmPhrase,
+    onConfirm,
+    open,
+    defaultOpen,
+    onOpenChange,
+    size,
+    className
+  } = props;
+  const isControlled = open !== void 0;
+  const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);
+  const resolvedOpen = isControlled ? open : internalOpen;
+  const setOpen = (next) => {
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+  const [phrase, setPhrase] = useState("");
+  useEffect(() => {
+    if (!resolvedOpen) setPhrase("");
+  }, [resolvedOpen]);
+  const confirmDisabled = confirmPhrase !== void 0 && phrase.trim() !== confirmPhrase;
+  const optionalProps = {};
+  if (trigger !== void 0) optionalProps.trigger = trigger;
+  if (description !== void 0) optionalProps.description = description;
+  if (size !== void 0) optionalProps.size = size;
+  if (className !== void 0) optionalProps.className = className;
+  if (process.env.NODE_ENV !== "production") {
+    devValidate("ConfirmDialog", ConfirmDialogManifest.ConfirmDialog.props, {
+      ...props,
+      confirmVariant
+    });
+  }
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      ref,
+      title,
+      open: resolvedOpen,
+      onOpenChange: setOpen,
+      ...optionalProps,
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: () => setOpen(false), children: cancelLabel }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: confirmVariant,
+            disabled: confirmDisabled,
+            onClick: () => {
+              onConfirm();
+              setOpen(false);
+            },
+            children: confirmLabel
+          }
+        )
+      ] }),
+      children: confirmPhrase !== void 0 ? (
+        // The Field's visible label names the input (WCAG 2.5.3).
+        /* @__PURE__ */ jsx(Field, { label: `Type "${confirmPhrase}" to confirm`, children: /* @__PURE__ */ jsx(Input, { value: phrase, onChange: (e) => setPhrase(e.target.value), autoComplete: "off" }) })
+      ) : null
+    }
+  );
+});
+ConfirmDialog.displayName = "ConfirmDialog";
+export {
+  ConfirmDialog
+};

package/dist/ConfirmDialog/ConfirmDialog.manifest.js

@@ -0,0 +1,32 @@
+// src/ConfirmDialog/ConfirmDialog.manifest.ts
+var ConfirmDialogManifest = {
+  ConfirmDialog: {
+    description: "Confirmation modal for destructive or high-consequence actions. Composes Dialog + Button (+ Field + Input for typed confirmation). Flat API: pass title, optional description, onConfirm, and an optional confirmPhrase the user must type exactly to enable Confirm.",
+    props: {
+      title: { type: "string", required: true },
+      description: { type: "string" },
+      confirmLabel: { type: "string", default: "CONFIRM" },
+      cancelLabel: { type: "string", default: "CANCEL" },
+      confirmVariant: {
+        type: "enum",
+        values: ["primary", "danger"],
+        default: "primary"
+      },
+      confirmPhrase: { type: "string" },
+      onConfirm: { type: "function", required: true },
+      size: { type: "enum", values: ["sm", "md", "lg"], default: "md" },
+      open: { type: "boolean" },
+      defaultOpen: { type: "boolean" },
+      onOpenChange: { type: "function" }
+    },
+    slots: {
+      trigger: { type: "focusable element | text (text renders a Button)" }
+    },
+    composable_with: ["Card", "Toolbar"],
+    never_inside: ["Dialog", "ConfirmDialog"],
+    example: '<ConfirmDialog\n  title="DELETE UNIT"\n  description="This permanently removes UNIT-07 from the roster."\n  confirmPhrase="UNIT-07"\n  confirmVariant="danger"\n  confirmLabel="DELETE"\n  trigger={<Button variant="danger">DELETE</Button>}\n  onConfirm={() => deleteUnit("UNIT-07")}\n/>'
+  }
+};
+export {
+  ConfirmDialogManifest
+};

package/dist/ConfirmDialog/index.js

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