@oprt/react 0.0.0-stage → 0.2.0

package/dist/Divider/Divider.js

@@ -0,0 +1,64 @@
+"use client";
+
+// src/Divider/Divider.tsx
+import { Separator } from "react-aria-components";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { DividerManifest } from "./Divider.manifest.js";
+import { devValidate } from "../_internal/devValidate.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var lineStyles = "bg-oprt-border";
+var Divider = forwardRef((allProps, ref) => {
+  const {
+    className,
+    orientation: requested = "horizontal",
+    decorative = true,
+    label,
+    ...props
+  } = allProps;
+  if (process.env.NODE_ENV !== "production") {
+    devValidate("Divider", DividerManifest.Divider.props, { ...allProps });
+  }
+  const orientation = requested ?? "horizontal";
+  if (label && orientation === "horizontal") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: decorative ? "none" : "separator",
+        "aria-orientation": decorative ? void 0 : "horizontal",
+        ...decorative ? {} : { "aria-label": label },
+        className: clsx("flex items-center gap-2u", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: clsx("flex-1 h-px min-w-2u", lineStyles) }),
+          /* @__PURE__ */ jsx("span", { className: "m-0 min-w-0 text-center text-oprt-sm uppercase tracking-oprt-sm text-oprt-text-dim oprt-wrap-anywhere", children: label }),
+          /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: clsx("flex-1 h-px min-w-2u", lineStyles) })
+        ]
+      }
+    );
+  }
+  const lineClass = clsx(
+    lineStyles,
+    orientation === "vertical" ? "w-px self-stretch" : "h-px w-full",
+    className
+  );
+  if (decorative) {
+    return /* @__PURE__ */ jsx("div", { ref, role: "none", "data-orientation": orientation, className: lineClass, ...props });
+  }
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      ref,
+      elementType: "div",
+      orientation,
+      "data-orientation": orientation,
+      className: lineClass,
+      ...props
+    }
+  );
+});
+Divider.displayName = "Divider";
+export {
+  Divider
+};

package/dist/Divider/Divider.manifest.js

@@ -0,0 +1,21 @@
+// src/Divider/Divider.manifest.ts
+var DividerManifest = {
+  Divider: {
+    description: "Thin rule that separates content, with an optional centered uppercase label (horizontal only). A horizontal rule takes the width of its container and a vertical one the height of its flex row. A long label wraps between its two lines and breaks anywhere. A semantic labeled divider is named by its label.",
+    props: {
+      orientation: {
+        type: "enum",
+        values: ["horizontal", "vertical"],
+        default: "horizontal",
+        description: "The direction of the rule. A vertical rule stretches to the height of its flex row, so put it in a flex row or give it a height."
+      },
+      decorative: { type: "boolean", default: true },
+      label: { type: "string" }
+    },
+    composable_with: ["Card", "Sidebar"],
+    example: "<Divider />"
+  }
+};
+export {
+  DividerManifest
+};

package/dist/Divider/index.js

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

package/dist/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,170 @@
+"use client";
+
+// src/DropdownMenu/DropdownMenu.tsx
+import {
+  MenuTrigger,
+  Menu,
+  MenuItem,
+  Separator,
+  Header,
+  Pressable,
+  Text,
+  Keyboard
+} from "react-aria-components";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useRef,
+  useState
+} from "react";
+import clsx from "clsx";
+import { Button } from "../Button/Button.js";
+import { DropdownMenuManifest } from "./DropdownMenu.manifest.js";
+import { devValidate } from "../_internal/devValidate.js";
+import { definedOnly } from "../_internal/aria.js";
+import { useHydrationRoot } from "../_internal/hydration.js";
+import { MotionContext, useMotion } from "../_internal/motion.js";
+import { MotionPopover } from "../_internal/MotionPopover.js";
+import {
+  DESTRUCTIVE_ACTION,
+  MENU_ITEM_DESCRIPTION,
+  MENU_ITEM_LABEL,
+  MENU_ITEM_SHORTCUT,
+  MENU_ITEM_TEXT,
+  MENU_OFFSET,
+  MENU_SURFACE,
+  SCREEN_MARGIN,
+  isSingleElement,
+  menuItemStyles,
+  toPlacement
+} from "../_internal/overlay.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var KeepOpenContext = createContext(null);
+var DropdownMenu = forwardRef((props, ref) => {
+  const {
+    motion = "auto",
+    trigger,
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    align = "start",
+    side = "bottom",
+    className,
+    children
+  } = props;
+  const motionState = useMotion(motion);
+  const [localOpen, setLocalOpen] = useState(defaultOpen);
+  const isOpen = open ?? localOpen;
+  const keepOpen = useRef(false);
+  const requestOpen = useCallback(
+    (next) => {
+      if (!next && keepOpen.current) {
+        keepOpen.current = false;
+        return;
+      }
+      if (open === void 0) setLocalOpen(next);
+      onOpenChange?.(next);
+    },
+    [open, onOpenChange]
+  );
+  if (process.env.NODE_ENV !== "production") {
+    devValidate("DropdownMenu", DropdownMenuManifest.DropdownMenu.props, {
+      ...props,
+      align,
+      side
+    });
+  }
+  const hydration = useHydrationRoot();
+  return /* @__PURE__ */ jsx(MotionContext.Provider, { value: motionState.mode, children: /* @__PURE__ */ jsx(KeepOpenContext.Provider, { value: keepOpen, children: /* @__PURE__ */ jsxs(MenuTrigger, { isOpen, onOpenChange: requestOpen, children: [
+    /* @__PURE__ */ jsx("span", { className: "contents", ...motionState.props, ...hydration.probeProps, children: /* @__PURE__ */ jsx(Pressable, { children: isSingleElement(trigger) ? trigger : /* @__PURE__ */ jsx(Button, { variant: "secondary", children: trigger }) }) }),
+    /* @__PURE__ */ jsx(
+      MotionPopover,
+      {
+        motionState,
+        offset: MENU_OFFSET,
+        containerPadding: SCREEN_MARGIN,
+        placement: toPlacement(side, align),
+        className: clsx(MENU_SURFACE, className),
+        children: /* @__PURE__ */ jsx(Menu, { ref, className: "outline-hidden", children })
+      }
+    )
+  ] }, hydration.key) }) });
+});
+DropdownMenu.displayName = "DropdownMenu";
+var DropdownMenuItem = forwardRef(
+  ({ className, shortcut, danger = false, disabled, textValue, onSelect, children, ...props }, ref) => {
+    const keepOpen = useContext(KeepOpenContext);
+    const itemProps = { ...definedOnly(props) };
+    if (textValue !== void 0) itemProps["textValue"] = textValue;
+    else if (typeof children === "string") itemProps["textValue"] = children;
+    if (onSelect) {
+      itemProps["onAction"] = () => {
+        const event = new CustomEvent("menuitemselect", { cancelable: true });
+        onSelect(event);
+        if (!event.defaultPrevented || !keepOpen) return;
+        keepOpen.current = true;
+        queueMicrotask(() => {
+          keepOpen.current = false;
+        });
+      };
+    }
+    return /* @__PURE__ */ jsxs(
+      MenuItem,
+      {
+        ref,
+        isDisabled: disabled ?? false,
+        className: clsx(menuItemStyles({ danger }), className),
+        ...itemProps,
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: MENU_ITEM_TEXT, children: [
+            /* @__PURE__ */ jsx(Text, { slot: "label", className: MENU_ITEM_LABEL, children }),
+            danger && /* @__PURE__ */ jsx(Text, { slot: "description", className: MENU_ITEM_DESCRIPTION, children: DESTRUCTIVE_ACTION })
+          ] }),
+          shortcut && /* @__PURE__ */ jsx(Keyboard, { className: MENU_ITEM_SHORTCUT, children: shortcut })
+        ]
+      }
+    );
+  }
+);
+DropdownMenuItem.displayName = "DropdownMenuItem";
+var DropdownMenuSeparator = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    Separator,
+    {
+      ref,
+      elementType: "div",
+      className: clsx("h-px bg-oprt-border my-1u", className),
+      ...definedOnly(props)
+    }
+  )
+);
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+var DropdownMenuLabel = forwardRef(
+  ({ className, ...props }, ref) => (
+    // RAC's Header is a valid collection leaf inside a Menu, but a bare
+    // <header> element maps to the `banner` landmark role, which is illegal
+    // inside role="menu". role="presentation" strips that back to the inert
+    // text node Radix's Label rendered.
+    /* @__PURE__ */ jsx(
+      Header,
+      {
+        ref,
+        role: "presentation",
+        className: clsx(
+          "m-0 px-3u py-1u text-oprt-sm uppercase tracking-oprt-sm text-oprt-text-dim oprt-wrap-anywhere [&_code]:normal-case [&_code]:tracking-normal [&_kbd]:normal-case [&_kbd]:tracking-normal",
+          className
+        ),
+        ...definedOnly(props)
+      }
+    )
+  )
+);
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+export {
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator
+};

package/dist/DropdownMenu/DropdownMenu.manifest.js

@@ -0,0 +1,82 @@
+// src/DropdownMenu/DropdownMenu.manifest.ts
+var DropdownMenuManifest = {
+  DropdownMenu: {
+    description: "Portal'd action menu anchored to a trigger element. Holds DropdownMenuItem, DropdownMenuSeparator, and DropdownMenuLabel children.",
+    props: {
+      motion: {
+        type: "enum",
+        values: ["auto", "none"],
+        default: "auto",
+        description: "Tactile pointer arrival and exit; keyboard, assistive activation, and system reduced motion remain immediate."
+      },
+      trigger: {
+        type: "node",
+        required: true,
+        description: "One focusable element that forwards its ref and handlers, such as a Button; plain text renders a secondary Button."
+      },
+      open: { type: "boolean" },
+      defaultOpen: { type: "boolean" },
+      onOpenChange: { type: "function" },
+      align: { type: "enum", values: ["start", "center", "end"], default: "start" },
+      side: { type: "enum", values: ["top", "right", "bottom", "left"], default: "bottom" }
+    },
+    slots: {
+      children: {
+        type: "DropdownMenuItem | DropdownMenuSeparator | DropdownMenuLabel",
+        required: true
+      }
+    },
+    composable_with: ["Toolbar", "CardHeader"],
+    never_inside: ["Button", "Badge"],
+    example: '<DropdownMenu trigger={<Button variant="secondary">ACTIONS</Button>}>\n  <DropdownMenuLabel>ACTIONS</DropdownMenuLabel>\n  <DropdownMenuItem shortcut="\u2318C">COPY</DropdownMenuItem>\n  <DropdownMenuSeparator />\n  <DropdownMenuItem danger>DELETE</DropdownMenuItem>\n</DropdownMenu>'
+  },
+  DropdownMenuItem: {
+    description: "Selectable uppercase action row inside a DropdownMenu. Keyboard shortcuts, code, and kbd retain their casing. Wrap other case-sensitive names or IDs in a child with normal-case tracking-normal. Supports a danger style.",
+    props: {
+      shortcut: {
+        type: "string",
+        description: "Display text for an application-owned shortcut; it describes the item."
+      },
+      danger: {
+        type: "boolean",
+        default: false,
+        description: "Colors the item and adds a written \u201CDestructive action\u201D description."
+      },
+      disabled: { type: "boolean", default: false },
+      textValue: {
+        type: "string",
+        description: "Plain text for typeahead when children are not a string (for example a <code> ID)."
+      },
+      onSelect: {
+        type: "function",
+        description: "Receives a cancelable event; call event.preventDefault() to keep the menu open."
+      }
+    },
+    composable_with: ["DropdownMenu"],
+    never_inside: ["Button", "Badge"],
+    example: '<DropdownMenuItem shortcut="\u2318C">COPY</DropdownMenuItem>'
+  },
+  DropdownMenuSeparator: {
+    description: "Thin horizontal rule grouping items inside a DropdownMenu.",
+    props: {},
+    composable_with: ["DropdownMenu"],
+    never_inside: ["Button", "Badge"],
+    example: "<DropdownMenuSeparator />"
+  },
+  DropdownMenuLabel: {
+    description: "Non-interactive uppercase section heading inside a DropdownMenu.",
+    props: {},
+    composable_with: ["DropdownMenu"],
+    never_inside: ["Button", "Badge"],
+    example: "<DropdownMenuLabel>ACTIONS</DropdownMenuLabel>"
+  }
+};
+var DropdownMenuCompositionRules = {
+  DropdownMenu: {
+    allowed_children: ["DropdownMenuItem", "DropdownMenuSeparator", "DropdownMenuLabel"]
+  }
+};
+export {
+  DropdownMenuCompositionRules,
+  DropdownMenuManifest
+};

package/dist/DropdownMenu/index.js

@@ -0,0 +1,16 @@
+// src/DropdownMenu/index.ts
+import {
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuLabel
+} from "./DropdownMenu.js";
+import { DropdownMenuManifest, DropdownMenuCompositionRules } from "./DropdownMenu.manifest.js";
+export {
+  DropdownMenu,
+  DropdownMenuCompositionRules,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuManifest,
+  DropdownMenuSeparator
+};

package/dist/EntityPreview/EntityPreview.js

@@ -0,0 +1,82 @@
+"use client";
+
+// src/EntityPreview/EntityPreview.tsx
+import { forwardRef, useId } from "react";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import { Badge } from "../Badge/Badge.js";
+import { DescriptionList } from "../DescriptionList/DescriptionList.js";
+import {
+  OperationalStatus
+} from "../OperationalStatus/OperationalStatus.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var previewStyles = cva(
+  "flex min-w-0 flex-col gap-2u font-sans text-oprt-base normal-case tracking-normal text-oprt-text"
+);
+var EntityPreview = forwardRef(
+  ({ entity, media, actions, headingLevel = 3, className, ...props }, ref) => {
+    const instanceId = useId();
+    const headingId = `${instanceId}-name`;
+    const conditionId = `${instanceId}-condition`;
+    const Heading = `h${headingLevel}`;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "group",
+        "aria-labelledby": headingId,
+        ...props,
+        ref,
+        className: clsx(previewStyles(), className),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1u", children: [
+            /* @__PURE__ */ jsx(
+              Heading,
+              {
+                id: headingId,
+                className: "m-0 oprt-wrap-anywhere text-oprt-lg font-semibold normal-case tracking-normal",
+                children: entity.name
+              }
+            ),
+            (entity.typeLabel || entity.id !== entity.name) && /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-baseline justify-between gap-x-2u gap-y-0.5u text-oprt-text-dim", children: [
+              entity.typeLabel && /* @__PURE__ */ jsx("p", { className: "m-0 min-w-0 oprt-wrap-anywhere text-oprt-sm font-medium uppercase tracking-oprt-sm", children: entity.typeLabel }),
+              entity.id !== entity.name && /* @__PURE__ */ jsx("p", { className: "m-0 min-w-0 oprt-wrap-anywhere font-mono normal-case tracking-normal", children: entity.id })
+            ] }),
+            entity.summary && /* @__PURE__ */ jsx("p", { className: "m-0 mt-1u oprt-wrap-anywhere normal-case tracking-normal text-oprt-text-dim", children: entity.summary })
+          ] }),
+          media != null && /* @__PURE__ */ jsx("div", { className: "min-w-0 [&_img]:max-w-full [&_video]:max-w-full", children: media }),
+          (entity.condition || entity.facts.length > 0) && /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex flex-col gap-1u border-t border-oprt-border pt-2u", children: [
+            entity.condition && /* @__PURE__ */ jsx("div", { role: "group", "aria-labelledby": conditionId, children: /* @__PURE__ */ jsx(
+              DescriptionList,
+              {
+                layout: "details",
+                items: [
+                  {
+                    id: "condition",
+                    label: /* @__PURE__ */ jsx("span", { id: conditionId, children: "Condition" }),
+                    value: /* @__PURE__ */ jsx(
+                      Badge,
+                      {
+                        variant: entity.condition.variant ?? "neutral",
+                        appearance: "text",
+                        size: "md",
+                        className: "ml-auto tracking-oprt-sm",
+                        children: entity.condition.label
+                      }
+                    )
+                  }
+                ]
+              }
+            ) }),
+            entity.facts.length > 0 && /* @__PURE__ */ jsx(DescriptionList, { items: entity.facts, layout: "details" })
+          ] }),
+          /* @__PURE__ */ jsx(OperationalStatus, { ...entity.quality, className: "border-t border-oprt-border pt-2u" }),
+          actions != null && /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-wrap items-center gap-1u border-t border-oprt-border pt-2u", children: actions })
+        ]
+      }
+    );
+  }
+);
+EntityPreview.displayName = "EntityPreview";
+export {
+  EntityPreview
+};

package/dist/EntityPreview/EntityPreview.manifest.js

@@ -0,0 +1,43 @@
+// src/EntityPreview/EntityPreview.manifest.ts
+var EntityPreviewManifest = {
+  EntityPreview: {
+    description: "Entity identity with aligned label/value rows for condition, structured facts and report quality in transient or persistent inspection.",
+    props: {
+      entity: {
+        type: "node",
+        required: true,
+        description: "EntityPreviewRecord: id, name, readonly DescriptionListItem facts, and quality (OperationalStatus state/source/updatedAt/detail); optional typeLabel, summary, and condition { label, variant }. Application identity is never used as a DOM ID. An ID identical to the name appears only in the heading. Pass a complete replacement record on update. Condition and facts use DescriptionList details; report quality uses OperationalStatus. Text-only badges, muted labels and right-aligned values share 40/60 columns with wrapping. No data fetching, health inference, or freshness calculation."
+      },
+      media: {
+        type: "node",
+        description: "Optional supplied image, video, or other media content. The caller owns sizing, alternative text, transport, and controls."
+      },
+      actions: {
+        type: "node",
+        description: "Optional named controls such as Link and CopyButton. The caller owns actions and selection."
+      },
+      headingLevel: {
+        type: "number",
+        default: 3,
+        description: "Entity name heading level: 2, 3, 4, 5, or 6. Choose it for the hosting surface's heading hierarchy."
+      },
+      className: { type: "string" }
+    },
+    slots: { media: { type: "ReactNode" }, actions: { type: "ReactNode" } },
+    composable_with: [
+      "Popover",
+      "Inspector",
+      "DescriptionList",
+      "OperationalStatus",
+      "Badge",
+      "Link",
+      "CopyButton",
+      "Button"
+    ],
+    never_inside: ["Button", "Badge", "Link", "Tooltip"],
+    example: '<EntityPreview entity={{ id: "pump-07", name: "West pump", facts: [{ id: "pressure", label: "Pressure", value: "0 kPa", mono: true }], condition: { label: "Healthy", variant: "success" }, quality: { state: "stale", source: "Maintenance report", updatedAt: null } }} />'
+  }
+};
+export {
+  EntityPreviewManifest
+};

package/dist/EntityPreview/index.js

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