@oprt/react 0.0.0-stage → 0.2.0

package/dist/Popover/Popover.manifest.js

@@ -0,0 +1,50 @@
+// src/Popover/Popover.manifest.ts
+var PopoverManifest = {
+  Popover: {
+    description: "Named nonmodal interactive details anchored to an explicitly activated trigger.",
+    props: {
+      title: {
+        type: "string",
+        description: "Visible heading that names the dialog; required unless aria-label is set."
+      },
+      "aria-label": {
+        type: "string",
+        description: "Name without a visible heading; required unless title is set."
+      },
+      open: { type: "boolean" },
+      defaultOpen: { type: "boolean", default: false },
+      onOpenChange: { type: "function" },
+      side: { type: "enum", values: ["top", "right", "bottom", "left"], default: "bottom" },
+      align: { type: "enum", values: ["start", "center", "end"], default: "start" },
+      disabled: { type: "boolean", default: false },
+      motion: { type: "enum", values: ["auto", "none"], default: "auto" },
+      description: {
+        type: "string",
+        description: "Short summary: a tooltip preview on the trigger and a line under the title of the open surface, which it describes. A disabled trigger with a description stays focusable, so focus or a tap shows it."
+      },
+      returnFocusRef: {
+        type: "node",
+        description: "RefObject<HTMLElement | null> fallback when the trigger is removed."
+      },
+      onCloseAutoFocus: { type: "function" },
+      className: { type: "string" }
+    },
+    slots: {
+      children: { type: "single focusable trigger element", required: true },
+      content: { type: "node", required: true }
+    },
+    composable_with: [
+      "Button",
+      "EntityPreview",
+      "DescriptionList",
+      "CopyButton",
+      "Inspector",
+      "Tooltip"
+    ],
+    never_inside: ["Tooltip"],
+    example: '<Popover title="Equipment details" description="Equipment operational" content={<button>Inspect</button>}><Button>Details</Button></Popover>'
+  }
+};
+export {
+  PopoverManifest
+};

package/dist/Popover/index.js

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

package/dist/Progress/Progress.js

@@ -0,0 +1,132 @@
+"use client";
+
+// src/Progress/Progress.tsx
+import { ProgressBar } from "react-aria-components";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { ProgressManifest } from "./Progress.manifest.js";
+import { devValidate } from "../_internal/devValidate.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var rootStyles = cva(
+  "relative w-full overflow-hidden bg-oprt-surface-2 border border-oprt-border",
+  {
+    variants: {
+      size: {
+        sm: "h-1.5u",
+        md: "h-2u"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var BLOCK_CELLS = 20;
+var SOLID_FILL = "bg-oprt-accent forced-colors:bg-[CanvasText] forced-colors:[forced-color-adjust:none]";
+var HATCH_FILL = "[--oprt-hatch:var(--oprt-accent)] forced-colors:[--oprt-hatch:CanvasText] forced-colors:[forced-color-adjust:none] [background-image:repeating-linear-gradient(135deg,var(--oprt-hatch)_0,var(--oprt-hatch)_var(--oprt-space-0-5),transparent_var(--oprt-space-0-5),transparent_var(--oprt-space-1))]";
+var SLIDE_STILL = "motion-reduce:animate-none forced-colors:animate-none";
+var BLOCK_HATCH = ["\u259A", "\u259E"];
+var Progress = forwardRef((allProps, ref) => {
+  const {
+    className,
+    value,
+    max = 100,
+    label,
+    showValue = false,
+    variant,
+    size,
+    ...props
+  } = allProps;
+  const blocks = variant === "blocks";
+  const sizeKey = size === "sm" ? "sm" : "md";
+  const safeMax = Number.isFinite(max) && max > 0 ? max : 100;
+  const indeterminate = value == null || !Number.isFinite(value);
+  const safeValue = indeterminate ? 0 : Math.min(safeMax, Math.max(0, value));
+  const pct = safeValue / safeMax * 100;
+  const ariaLabel = props["aria-label"] ?? label ?? "Progress";
+  const barProps = { maxValue: safeMax, minValue: 0 };
+  if (indeterminate) barProps["isIndeterminate"] = true;
+  else barProps["value"] = safeValue;
+  const filled = Math.round(pct / 100 * BLOCK_CELLS);
+  const fillState = indeterminate ? "indeterminate" : "determinate";
+  if (process.env.NODE_ENV !== "production") {
+    devValidate("Progress", ProgressManifest.Progress.props, allProps);
+  }
+  return (
+    // The wrapper takes the width its container gives it, in a flex row as in a block: a bar has no
+    // width of its own, and without this it was 2 px wide beside other content.
+    /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 flex-col gap-1u font-sans", children: [
+      (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-x-2u", children: [
+        label ? /* @__PURE__ */ jsx("span", { className: "m-0 min-w-0 oprt-wrap-anywhere text-oprt-sm uppercase tracking-oprt-sm text-oprt-text-dim", children: label }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+        showValue && /* @__PURE__ */ jsx("span", { className: "m-0 shrink-0 font-mono text-oprt-base text-oprt-text tabular-nums", children: indeterminate ? "\u2014" : `${Math.round(pct)}%` })
+      ] }),
+      /* @__PURE__ */ jsx(
+        ProgressBar,
+        {
+          ref,
+          "aria-label": ariaLabel,
+          className: blocks ? clsx("font-mono text-oprt-base", className) : clsx(rootStyles({ size: sizeKey }), className),
+          ...barProps,
+          ...props,
+          children: blocks ? indeterminate ? (
+            // An unknown amount is a hatch of alternating quarter blocks: neither the empty glyph
+            // of 0% nor the full one of 100%. The fill is as wide as the twenty cells and clips the
+            // row, which slides two cells (one repeat, a tenth of its width) at a time; two more
+            // cells wait just before its start and slide in, so each loop ends as the next begins.
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                "data-oprt-progress-fill": fillState,
+                className: "flex w-fit max-w-full overflow-hidden",
+                children: /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: clsx(
+                      "relative flex tracking-oprt-md oprt-motion-slide-[10%]",
+                      SLIDE_STILL
+                    ),
+                    children: [
+                      Array.from({ length: BLOCK_CELLS }, (_, i) => /* @__PURE__ */ jsx("span", { className: "text-oprt-accent", children: BLOCK_HATCH[i % 2] }, i)),
+                      /* @__PURE__ */ jsx("span", { "data-oprt-progress-tail": "", className: "absolute right-full top-0 flex", children: BLOCK_HATCH.map((glyph) => /* @__PURE__ */ jsx("span", { className: "text-oprt-accent", children: glyph }, glyph)) })
+                    ]
+                  }
+                )
+              }
+            )
+          ) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-oprt-progress-fill": fillState,
+              className: "flex tracking-oprt-md",
+              children: Array.from({ length: BLOCK_CELLS }, (_, i) => /* @__PURE__ */ jsx("span", { className: i < filled ? "text-oprt-accent" : "text-oprt-text-dim", children: i < filled ? "\u2588" : "\u2591" }, i))
+            }
+          ) : (
+            // RAC has no Indicator part; the fill is a plain element inside the progressbar. A known
+            // value slides the fill in from the left; an unknown one covers the track with the hatch,
+            // and one repeat more before its start, so the slide never uncovers the track.
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-oprt-progress-fill": fillState,
+                className: clsx(
+                  "h-full",
+                  indeterminate ? clsx(
+                    HATCH_FILL,
+                    "-ml-[var(--oprt-slide-distance)] w-[calc(100%+var(--oprt-slide-distance))] oprt-motion-slide",
+                    SLIDE_STILL
+                  ) : clsx(SOLID_FILL, "w-full transition-transform duration-oprt-normal")
+                ),
+                ...indeterminate ? {} : { style: { transform: `translateX(-${100 - pct}%)` } }
+              }
+            )
+          )
+        }
+      )
+    ] })
+  );
+});
+Progress.displayName = "Progress";
+export {
+  Progress
+};

package/dist/Progress/Progress.manifest.js

@@ -0,0 +1,30 @@
+// src/Progress/Progress.manifest.ts
+var ProgressManifest = {
+  Progress: {
+    description: "Determinate or indeterminate progress indicator rendered as a filled bar or a row of block glyphs. It fills the width its container gives it.",
+    props: {
+      value: {
+        type: "number",
+        description: "Current progress, clamped from 0 to max. Omit or pass a non-finite value for an indeterminate (amount unknown) state: a full-width hatched fill that slides gently and stays a still hatch with reduced motion and in forced colors, so it never looks like 0% or 100%."
+      },
+      max: {
+        type: "number",
+        default: 100,
+        description: "Finite positive upper bound. Zero, negative, and non-finite values fall back to 100."
+      },
+      label: {
+        type: "string",
+        description: "Optional short progress heading, displayed uppercase. Long identifiers wrap beside the value."
+      },
+      showValue: { type: "boolean", default: false },
+      variant: { type: "enum", values: ["bar", "blocks"], default: "bar" },
+      size: { type: "enum", values: ["sm", "md"], default: "md" }
+    },
+    composable_with: ["Card", "Field"],
+    never_inside: ["Progress"],
+    example: "<Progress value={72} showValue />"
+  }
+};
+export {
+  ProgressManifest
+};

package/dist/Progress/index.js

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

package/dist/PropertyFilter/PropertyFilter.js

@@ -0,0 +1,306 @@
+"use client";
+
+// src/PropertyFilter/PropertyFilter.tsx
+import {
+  forwardRef,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useRef,
+  useState
+} from "react";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import { Button } from "../Button/Button.js";
+import { Field } from "../Field/Field.js";
+import { Input } from "../Input/Input.js";
+import { Select, SelectOption } from "../Select/Select.js";
+import { TagGroup } from "../TagGroup/TagGroup.js";
+import { joinIds, usePartIds } from "../_internal/fieldIds.js";
+import { useRestoreFocusOnRemoval } from "../_internal/useRestoreFocusOnRemoval.js";
+import {
+  getPropertyFilterTokenError
+} from "./tokenError.js";
+import {
+  getPropertyFilterTokenError as getPropertyFilterTokenError2
+} from "./tokenError.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var filterStyles = cva(
+  "flex min-w-0 flex-col gap-2u font-sans normal-case text-oprt-base text-oprt-text"
+);
+var controlStyles = "min-w-[min(100%,calc(24*var(--oprt-space-1)))] max-w-full grow basis-[calc(24*var(--oprt-space-1))]";
+var selectStyles = "w-full min-w-0 max-w-full";
+function tokenLabel(token, fields) {
+  const field = fields.find((candidate) => candidate.key === token.field);
+  const operator = field?.operators.find((candidate) => candidate.key === token.operator);
+  const value = field?.options?.find((option) => option.value === token.value)?.label ?? token.value;
+  const label = `${field?.label ?? token.field} ${operator?.label ?? token.operator}${value === null ? "" : ` ${value}`}`;
+  const error = getPropertyFilterTokenError(token, fields);
+  return error ? `Invalid filter: ${label}. ${error}` : label;
+}
+var PropertyFilter = forwardRef(
+  ({
+    fields,
+    value,
+    onValueChange,
+    label = "Filters",
+    disabled = false,
+    className,
+    id,
+    onFocusCapture,
+    onBlurCapture,
+    "aria-labelledby": labelledBy,
+    ...props
+  }, ref) => {
+    const instanceId = useId();
+    const root = useRef(null);
+    useImperativeHandle(ref, () => root.current, []);
+    const ids = usePartIds(["error"], {
+      id,
+      readRendered: () => root.current?.getAttribute("data-oprt-ids")
+    });
+    const nextId = useRef(0);
+    const addRef = useRef(null);
+    const clearRef = useRef(null);
+    const composing = useRef(false);
+    const pendingAdd = useRef(null);
+    const [draft, setDraft] = useState({ field: "", operator: "", value: "" });
+    const [error, setError] = useState(null);
+    const field = fields.find((candidate) => candidate.key === draft.field);
+    const operator = field?.operators.find((candidate) => candidate.key === draft.operator);
+    const fault = (control) => error?.control === control ? { invalid: true, "aria-describedby": ids.error } : {};
+    const clearLeft = useRef(false);
+    const restore = useRestoreFocusOnRemoval(root, {
+      track: (element) => element === clearRef.current ? void 0 : null,
+      findTarget: () => !clearLeft.current && !disabled && value.tokens.length === 0 ? addRef.current : null
+    });
+    useEffect(() => {
+      const pending = pendingAdd.current;
+      if (pending && value.tokens.some(
+        (token) => token.id === pending.token.id && token.field === pending.token.field && token.operator === pending.token.operator && token.value === pending.token.value
+      )) {
+        pendingAdd.current = null;
+        setDraft((current) => current === pending.draft ? { ...current, value: "" } : current);
+      }
+    }, [value]);
+    function addFilter() {
+      if (disabled || fields.length === 0) return;
+      if (!field || !operator) {
+        setError({
+          message: "Choose a field and operator before adding a filter.",
+          control: field ? "operator" : "field"
+        });
+        return;
+      }
+      let id2;
+      do {
+        id2 = `filter-${instanceId}-${++nextId.current}`;
+      } while (value.tokens.some((token2) => token2.id === id2));
+      const token = {
+        id: id2,
+        field: field.key,
+        operator: operator.key,
+        value: operator.requiresValue ? draft.value : null
+      };
+      const tokenError = getPropertyFilterTokenError(token, fields);
+      if (tokenError || operator.requiresValue && field.options?.some((option) => option.value === draft.value && option.disabled)) {
+        setError({
+          message: tokenError ?? `Choose an available value for ${field.label}.`,
+          control: "value"
+        });
+        return;
+      }
+      setError(null);
+      pendingAdd.current = { token, draft };
+      onValueChange({ ...value, tokens: [...value.tokens, token] });
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...props,
+        ref: root,
+        role: "group",
+        id: id ?? (labelledBy ? ids.base : void 0),
+        "aria-label": label,
+        "aria-labelledby": labelledBy ? joinIds(ids.base, labelledBy) : void 0,
+        "data-oprt-ids": ids.base,
+        className: clsx(filterStyles(), className),
+        onFocusCapture: (event) => {
+          onFocusCapture?.(event);
+          if (event.target === clearRef.current) clearLeft.current = false;
+          restore.onFocusCapture(event);
+        },
+        onBlurCapture: (event) => {
+          onBlurCapture?.(event);
+          const clear = clearRef.current;
+          if (event.target === clear && clear && !clear.disabled)
+            clearLeft.current = true;
+          restore.onBlurCapture(event);
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-end gap-2u", children: [
+            /* @__PURE__ */ jsx(Field, { label: "Field", className: controlStyles, children: /* @__PURE__ */ jsx(
+              Select,
+              {
+                value: draft.field,
+                placeholder: "Choose field",
+                disabled: disabled || fields.length === 0,
+                className: selectStyles,
+                ...fault("field"),
+                onValueChange: (key) => {
+                  if (disabled) return;
+                  const next = fields.find((candidate) => candidate.key === key);
+                  setDraft({ field: key, operator: next?.operators[0]?.key ?? "", value: "" });
+                  setError(null);
+                },
+                children: fields.map((item) => /* @__PURE__ */ jsx(SelectOption, { value: item.key, children: item.label }, item.key))
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Field, { label: "Operator", className: controlStyles, children: /* @__PURE__ */ jsx(
+              Select,
+              {
+                value: draft.operator,
+                placeholder: "Choose operator",
+                disabled: disabled || !field || !field.operators.length,
+                className: selectStyles,
+                ...fault("operator"),
+                onValueChange: (key) => {
+                  if (disabled) return;
+                  const next = field?.operators.find((candidate) => candidate.key === key);
+                  setDraft((current) => ({
+                    ...current,
+                    operator: key,
+                    value: operator?.requiresValue === next?.requiresValue ? current.value : ""
+                  }));
+                  setError(null);
+                },
+                children: (field?.operators ?? []).map((item) => /* @__PURE__ */ jsx(SelectOption, { value: item.key, children: item.label }, item.key))
+              }
+            ) }),
+            operator?.requiresValue && /* @__PURE__ */ jsx(Field, { label: "Value", className: controlStyles, children: field?.options ? /* @__PURE__ */ jsx(
+              Select,
+              {
+                value: draft.value,
+                placeholder: "Choose value",
+                disabled,
+                className: selectStyles,
+                ...fault("value"),
+                onValueChange: (next) => {
+                  if (!disabled) {
+                    setDraft((current) => ({ ...current, value: next }));
+                    setError(null);
+                  }
+                },
+                children: field.options.map((option) => /* @__PURE__ */ jsx(
+                  SelectOption,
+                  {
+                    value: option.value,
+                    disabled: !!option.disabled,
+                    children: option.label
+                  },
+                  option.value
+                ))
+              }
+            ) : /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: draft.value,
+                disabled,
+                className: "w-full min-w-0",
+                ...fault("value"),
+                onChange: (event) => {
+                  if (!disabled) {
+                    setDraft((current) => ({ ...current, value: event.target.value }));
+                    setError(null);
+                  }
+                },
+                onCompositionStart: () => {
+                  composing.current = true;
+                },
+                onCompositionEnd: () => {
+                  composing.current = false;
+                },
+                onKeyDown: (event) => {
+                  if (event.key !== "Enter") return;
+                  if (composing.current || event.nativeEvent.isComposing || event.keyCode === 229)
+                    return;
+                  event.preventDefault();
+                  addFilter();
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                ref: addRef,
+                disabled: disabled || fields.length === 0,
+                onClick: addFilter,
+                "aria-describedby": error ? ids.error : void 0,
+                children: "Add filter"
+              }
+            )
+          ] }),
+          error && /* @__PURE__ */ jsx(
+            "p",
+            {
+              id: ids.error,
+              role: "alert",
+              className: "m-0 oprt-wrap-anywhere text-oprt-base text-oprt-error",
+              children: error.message
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-end gap-2u", children: [
+            /* @__PURE__ */ jsx(Field, { label: "Match", className: "min-w-0 max-w-full", children: /* @__PURE__ */ jsxs(
+              Select,
+              {
+                value: value.match,
+                disabled,
+                className: selectStyles,
+                onValueChange: (match) => {
+                  if (!disabled && (match === "all" || match === "any"))
+                    onValueChange({ ...value, match });
+                },
+                children: [
+                  /* @__PURE__ */ jsx(SelectOption, { value: "all", children: "All filters" }),
+                  /* @__PURE__ */ jsx(SelectOption, { value: "any", children: "Any filter" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                ref: clearRef,
+                variant: "ghost",
+                disabled: disabled || value.tokens.length === 0,
+                onClick: () => {
+                  if (disabled || value.tokens.length === 0) return;
+                  onValueChange({ ...value, tokens: [] });
+                },
+                children: "Clear filters"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            TagGroup,
+            {
+              label: `${label}: active filters`,
+              items: value.tokens.map((token) => ({ id: token.id, label: tokenLabel(token, fields) })),
+              disabled,
+              emptyMessage: "No active filters",
+              returnFocusRef: addRef,
+              onRemove: (id2) => {
+                if (!disabled)
+                  onValueChange({ ...value, tokens: value.tokens.filter((token) => token.id !== id2) });
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+PropertyFilter.displayName = "PropertyFilter";
+export {
+  PropertyFilter,
+  getPropertyFilterTokenError2 as getPropertyFilterTokenError
+};

package/dist/PropertyFilter/PropertyFilter.manifest.js

@@ -0,0 +1,32 @@
+// src/PropertyFilter/PropertyFilter.manifest.ts
+var PropertyFilterManifest = {
+  PropertyFilter: {
+    description: "Controlled flat property-filter editor with text or enum values, all/any matching and removable, semantically validated clauses.",
+    props: {
+      fields: {
+        type: "array",
+        required: true,
+        description: "Readonly PropertyFilterField[] with key, label, operators and optional value/label/disabled options. Operators have key, label and requiresValue."
+      },
+      value: {
+        type: "node",
+        required: true,
+        description: "PropertyFilterValue: match all or any, and readonly tokens containing id, field, operator and string or null value."
+      },
+      onValueChange: {
+        type: "function",
+        required: true,
+        description: "Requests the complete next value. The parent accepts it through value; declined updates keep tokens and addition drafts."
+      },
+      label: { type: "string", default: "Filters" },
+      disabled: { type: "boolean", default: false },
+      className: { type: "string" }
+    },
+    composable_with: ["TagGroup", "DataGrid", "CollectionState"],
+    never_inside: ["Button"],
+    example: '<PropertyFilter fields={fields} value={filter} onValueChange={setFilter} label="Equipment filters" />'
+  }
+};
+export {
+  PropertyFilterManifest
+};

package/dist/PropertyFilter/index.js

@@ -0,0 +1,11 @@
+// src/PropertyFilter/index.ts
+import { PropertyFilter } from "./PropertyFilter.js";
+import {
+  getPropertyFilterTokenError
+} from "./tokenError.js";
+import { PropertyFilterManifest } from "./PropertyFilter.manifest.js";
+export {
+  PropertyFilter,
+  PropertyFilterManifest,
+  getPropertyFilterTokenError
+};

package/dist/PropertyFilter/tokenError.js

@@ -0,0 +1,17 @@
+// src/PropertyFilter/tokenError.ts
+function getPropertyFilterTokenError(token, fields) {
+  const field = fields.find((candidate) => candidate.key === token.field);
+  if (!field) return `Unknown field: ${token.field}.`;
+  const operator = field.operators.find((candidate) => candidate.key === token.operator);
+  if (!operator) return `Unknown operator for ${field.label}: ${token.operator}.`;
+  if (!operator.requiresValue)
+    return token.value === null ? null : `${field.label} ${operator.label} does not accept a value.`;
+  if (typeof token.value !== "string" || token.value.trim().length === 0)
+    return `Enter a value for ${field.label}.`;
+  if (field.options && !field.options.some((option) => option.value === token.value))
+    return `Unknown value for ${field.label}: ${token.value}.`;
+  return null;
+}
+export {
+  getPropertyFilterTokenError
+};