@oprt/react 0.0.0-stage → 0.1.0

package/dist/Checkbox/Checkbox.manifest.js

@@ -0,0 +1,38 @@
+// src/Checkbox/Checkbox.manifest.ts
+var CheckboxManifest = {
+  Checkbox: {
+    description: "Binary or tri-state checkbox. Shared OPERATOR Check icon when checked and Minus icon when indeterminate, inside an accent outline.",
+    props: {
+      motion: {
+        type: "enum",
+        values: ["auto", "none"],
+        default: "auto",
+        description: "Tactile pointer/touch feedback. None disables motion; keyboard and system reduced motion are always immediate."
+      },
+      checked: {
+        type: "enum",
+        values: ["true", "false", "indeterminate"],
+        description: "Pass boolean for binary state, or 'indeterminate' for tri-state."
+      },
+      defaultChecked: {
+        type: "enum",
+        values: ["true", "false", "indeterminate"]
+      },
+      onCheckedChange: {
+        type: "function",
+        description: "(checked: boolean | 'indeterminate') => void. Called when the operator checks or clears the box; the only way to observe a change."
+      },
+      disabled: { type: "boolean", default: false },
+      required: { type: "boolean", default: false },
+      size: { type: "enum", values: ["sm", "md", "lg"], default: "md" },
+      name: { type: "string" },
+      value: { type: "string" }
+    },
+    composable_with: ["Field"],
+    never_inside: ["Button", "Badge"],
+    example: '<Field label="ACKNOWLEDGE" required>\n  <Checkbox />\n</Field>'
+  }
+};
+export {
+  CheckboxManifest
+};

package/dist/Checkbox/index.js

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

package/dist/Collapsible/Collapsible.js

@@ -0,0 +1,177 @@
+"use client";
+
+// src/Collapsible/Collapsible.tsx
+import {
+  DisclosureGroup,
+  Disclosure,
+  DisclosurePanel,
+  Button as AriaButton,
+  Heading
+} from "react-aria-components";
+import { mergeProps } from "react-aria";
+import { forwardRef, useRef, useState } from "react";
+import clsx from "clsx";
+import { ChevronDown } from "@oprt/icons";
+import { CollapsibleManifest } from "./Collapsible.manifest.js";
+import { devValidate } from "../_internal/devValidate.js";
+import {
+  useMotion,
+  composeMotionHandlers,
+  MotionContext
+} from "../_internal/motion.js";
+import { useIsomorphicLayoutEffect } from "../_internal/useIsomorphicLayoutEffect.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function CollapsiblePanel({ expanded, children }) {
+  const panel = useRef(null);
+  const latestExpanded = useRef(expanded);
+  latestExpanded.current = expanded;
+  useIsomorphicLayoutEffect(() => {
+    const node = panel.current;
+    if (!node) return;
+    node.toggleAttribute("inert", !expanded);
+    if (!expanded && node.contains(document.activeElement)) {
+      document.getElementById(node.getAttribute("aria-labelledby") ?? "")?.focus();
+    }
+    const observer = new MutationObserver(() => {
+      if (latestExpanded.current && node.hasAttribute("hidden")) node.removeAttribute("hidden");
+    });
+    observer.observe(node, { attributes: true, attributeFilter: ["hidden"] });
+    return () => observer.disconnect();
+  }, [expanded]);
+  return /* @__PURE__ */ jsx(
+    DisclosurePanel,
+    {
+      ref: panel,
+      role: "region",
+      className: "oprt-motion-panel text-oprt-md normal-case text-oprt-text",
+      children: /* @__PURE__ */ jsx("div", { className: "min-w-0 break-words px-3u py-2u", children })
+    }
+  );
+}
+function withDroppedProps(rendered, accepted) {
+  const dropped = {};
+  for (const [key, value] of Object.entries(accepted)) {
+    if (value === void 0) continue;
+    if (!(key in rendered) || rendered[key] === void 0) dropped[key] = value;
+    else if (typeof value === "function" && rendered[key] !== value) dropped[key] = value;
+  }
+  return mergeProps(rendered, dropped);
+}
+function toKeySet(value) {
+  if (value === void 0) return /* @__PURE__ */ new Set();
+  if (Array.isArray(value)) return new Set(value);
+  return new Set(value === "" ? [] : [value]);
+}
+var Collapsible = forwardRef(
+  ({
+    type = "single",
+    motion = "auto",
+    value,
+    defaultValue,
+    onValueChange,
+    collapsible = true,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const motionState = useMotion(motion);
+    const isControlled = value !== void 0;
+    const [uncontrolledKeys, setUncontrolledKeys] = useState(
+      () => toKeySet(defaultValue)
+    );
+    const expandedKeys = isControlled ? toKeySet(value) : uncontrolledKeys;
+    const handleExpandedChange = (keys) => {
+      if (type === "single" && !collapsible && keys.size === 0) return;
+      if (!isControlled) setUncontrolledKeys(keys);
+      if (!onValueChange) return;
+      const list = [...keys].map(String);
+      onValueChange(type === "single" ? list[0] ?? "" : list);
+    };
+    if (process.env.NODE_ENV !== "production") {
+      devValidate("Collapsible", CollapsibleManifest.Collapsible.props, { type });
+    }
+    const rootProps = {
+      ...props,
+      allowsMultipleExpanded: type === "multiple",
+      expandedKeys,
+      onExpandedChange: handleExpandedChange,
+      // `min-w-0`: as an unsized flex item the group gives way to what its row leaves, instead of
+      // holding the width of the widest unbroken token in an open panel (break-words does not
+      // lower a minimum size) and widening the page.
+      className: clsx("oprt-motion w-full min-w-0 border-t border-oprt-border", className),
+      ...composeMotionHandlers(motionState.props, props)
+    };
+    return /* @__PURE__ */ jsx(MotionContext.Provider, { value: motionState.mode, children: /* @__PURE__ */ jsx(
+      DisclosureGroup,
+      {
+        ref,
+        ...rootProps,
+        render: (domProps) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...withDroppedProps(domProps, props),
+            ...composeMotionHandlers(motionState.props, props)
+          }
+        ),
+        children
+      }
+    ) });
+  }
+);
+Collapsible.displayName = "Collapsible";
+var CollapsibleItem = forwardRef(
+  ({ value, title, disabled, className, children, ...props }, ref) => {
+    const itemProps = {
+      ...props,
+      id: value,
+      isDisabled: disabled ?? false,
+      // `group` moves from the trigger to the Disclosure: RAC exposes the open
+      // state as data-expanded on the Disclosure, where Radix exposed
+      // data-state=open on the trigger itself.
+      className: clsx("oprt-motion-disclosure group border-b border-oprt-border", className)
+    };
+    return /* @__PURE__ */ jsx(
+      Disclosure,
+      {
+        ref,
+        ...itemProps,
+        render: (domProps) => /* @__PURE__ */ jsx("div", { ...withDroppedProps(domProps, props) }),
+        children: ({ isExpanded }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Heading, { className: "m-0", children: /* @__PURE__ */ jsxs(
+            AriaButton,
+            {
+              slot: "trigger",
+              className: clsx(
+                "flex w-full items-center justify-between gap-2u px-3u text-left text-oprt-base font-medium uppercase tracking-oprt-caps text-oprt-text group-data-[expanded]:text-oprt-accent border border-transparent data-[focus-visible]:border-oprt-border-focus data-[focus-visible]:shadow-oprt-focus outline-hidden disabled:opacity-50 disabled:cursor-not-allowed",
+                // A long title wraps and the trigger grows (the DC-8 rule): the height is a
+                // minimum, and the padding is what is left of it around one line and the 2 px of
+                // border, so a one-line trigger is exactly 40 px.
+                "min-h-oprt-lg py-[calc((var(--oprt-height-lg)-2px-var(--oprt-line-base))/2)]",
+                // Forced colors drop the focus border color and shadow and would paint the
+                // transparent outline on every trigger: only a focused one draws one
+                // (Collapsible-R5).
+                "forced-colors:outline-0 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]"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 oprt-wrap-anywhere", children: title }),
+                /* @__PURE__ */ jsx(
+                  ChevronDown,
+                  {
+                    size: 12,
+                    className: "oprt-motion-chevron shrink-0 group-data-[expanded]:rotate-180"
+                  }
+                )
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(CollapsiblePanel, { expanded: isExpanded, children })
+        ] })
+      }
+    );
+  }
+);
+CollapsibleItem.displayName = "CollapsibleItem";
+export {
+  Collapsible,
+  CollapsibleItem
+};

package/dist/Collapsible/Collapsible.manifest.js

@@ -0,0 +1,54 @@
+// src/Collapsible/Collapsible.manifest.ts
+var CollapsibleManifest = {
+  Collapsible: {
+    description: "Accordion container whose CollapsibleItem children expand and collapse; single or multiple open at a time.",
+    props: {
+      motion: {
+        type: "enum",
+        values: ["auto", "none"],
+        default: "auto",
+        description: "Tactile pointer/touch feedback. None disables motion; keyboard and system reduced motion are always immediate."
+      },
+      type: { type: "enum", values: ["single", "multiple"], default: "single" },
+      defaultValue: {
+        type: "union",
+        types: ["string", "array"],
+        description: "Initial open item: a string (type=single, empty for none) or a string[] (type=multiple)."
+      },
+      value: {
+        type: "union",
+        types: ["string", "array"],
+        description: "Controlled open item: a string (type=single, empty for none) or a string[] (type=multiple)."
+      },
+      onValueChange: { type: "function" },
+      collapsible: { type: "boolean", default: true }
+    },
+    slots: {
+      children: { type: "CollapsibleItem", required: true }
+    },
+    composable_with: ["Card"],
+    example: '<Collapsible type="single">\n  <CollapsibleItem value="net" title="NETWORK">All links nominal.</CollapsibleItem>\n  <CollapsibleItem value="pwr" title="POWER">Battery 98%.</CollapsibleItem>\n</Collapsible>'
+  },
+  CollapsibleItem: {
+    description: "A single expandable section with an uppercase trigger title and collapsible content body.",
+    props: {
+      value: { type: "string", required: true },
+      title: { type: "string", required: true },
+      disabled: { type: "boolean", default: false }
+    },
+    slots: {
+      children: { type: "any", required: true }
+    },
+    composable_with: ["Collapsible"],
+    example: '<CollapsibleItem value="net" title="NETWORK">All links nominal.</CollapsibleItem>'
+  }
+};
+var CollapsibleCompositionRules = {
+  Collapsible: {
+    allowed_children: ["CollapsibleItem"]
+  }
+};
+export {
+  CollapsibleCompositionRules,
+  CollapsibleManifest
+};

package/dist/Collapsible/index.js

@@ -0,0 +1,12 @@
+// src/Collapsible/index.ts
+import {
+  Collapsible,
+  CollapsibleItem
+} from "./Collapsible.js";
+import { CollapsibleManifest, CollapsibleCompositionRules } from "./Collapsible.manifest.js";
+export {
+  Collapsible,
+  CollapsibleCompositionRules,
+  CollapsibleItem,
+  CollapsibleManifest
+};

package/dist/CollectionState/CollectionState.js

@@ -0,0 +1,68 @@
+"use client";
+
+// src/CollectionState/CollectionState.tsx
+import { forwardRef, useId } from "react";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import { CollectionStateManifest } from "./CollectionState.manifest.js";
+import { devValidate } from "../_internal/devValidate.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var headingStyles = cva(
+  "m-0 min-w-0 oprt-wrap-anywhere text-oprt-base font-medium uppercase tracking-oprt-sm",
+  {
+    variants: {
+      variant: {
+        empty: "text-oprt-text",
+        "no-results": "text-oprt-text",
+        error: "text-oprt-error",
+        "access-denied": "text-oprt-text"
+      }
+    }
+  }
+);
+var CollectionState = forwardRef((allProps, ref) => {
+  const {
+    variant,
+    title,
+    description,
+    actions,
+    headingLevel = 2,
+    className,
+    "aria-labelledby": labelledBy,
+    "aria-describedby": describedBy,
+    ...props
+  } = allProps;
+  const id = useId();
+  const titleId = `${id}-title`;
+  const descriptionId = `${id}-description`;
+  const Heading = `h${headingLevel}`;
+  const hasDescription = description != null && typeof description !== "boolean";
+  const hasActions = actions != null && typeof actions !== "boolean";
+  if (process.env.NODE_ENV !== "production") {
+    devValidate("CollectionState", CollectionStateManifest.CollectionState.props, allProps);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      ref,
+      role: "region",
+      "aria-labelledby": [titleId, labelledBy].filter(Boolean).join(" "),
+      "aria-describedby": [hasDescription && descriptionId, describedBy].filter(Boolean).join(" ") || void 0,
+      "data-variant": variant,
+      className: clsx(
+        "flex min-w-0 flex-col gap-2u border border-oprt-border bg-oprt-surface-1 p-3u font-sans text-oprt-base normal-case tracking-normal text-oprt-text",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Heading, { id: titleId, className: headingStyles({ variant }), children: title }),
+        hasDescription && /* @__PURE__ */ jsx("div", { id: descriptionId, className: "min-w-0 oprt-wrap-anywhere text-oprt-text-dim [&_p]:m-0", children: description }),
+        hasActions && /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-wrap items-center gap-1u", children: actions })
+      ]
+    }
+  );
+});
+CollectionState.displayName = "CollectionState";
+export {
+  CollectionState
+};

package/dist/CollectionState/CollectionState.manifest.js

@@ -0,0 +1,44 @@
+// src/CollectionState/CollectionState.manifest.ts
+var CollectionStateManifest = {
+  CollectionState: {
+    description: "Named collection state with supplied explanation and recovery actions.",
+    props: {
+      variant: {
+        type: "enum",
+        values: ["empty", "no-results", "error", "access-denied"],
+        required: true,
+        description: "Supplied collection outcome. Empty means no source records; no-results means no matching records."
+      },
+      title: {
+        type: "string",
+        required: true,
+        description: "Visible heading that names the region and explains its state."
+      },
+      description: {
+        type: "node",
+        description: "Optional supporting content associated with the region."
+      },
+      actions: {
+        type: "node",
+        description: "Caller-supplied recovery controls. Activation never changes the supplied collection state."
+      },
+      headingLevel: {
+        type: "number",
+        default: 2,
+        description: "Native heading level from 2 through 6; match the surrounding document hierarchy."
+      },
+      "aria-live": {
+        type: "enum",
+        values: ["off", "polite", "assertive"],
+        description: "Optional caller-owned live-region behavior. No announcement is added by default."
+      },
+      className: { type: "string" }
+    },
+    composable_with: ["Button", "Link", "DataGrid", "PropertyFilter"],
+    never_inside: ["Button"],
+    example: '<CollectionState variant="error" title="Equipment unavailable" description="The source did not respond." actions={<Button onClick={retry}>Retry</Button>} />'
+  }
+};
+export {
+  CollectionStateManifest
+};

package/dist/CollectionState/index.js

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

package/dist/ComboBox/ComboBox.js

@@ -0,0 +1,221 @@
+"use client";
+
+// src/ComboBox/ComboBox.tsx
+import { forwardRef, useRef } from "react";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import {
+  ComboBox as AriaComboBox,
+  Input,
+  Button,
+  Label,
+  ListBox,
+  ListBoxItem
+} from "react-aria-components";
+import { ChevronDown, Check } from "@oprt/icons";
+import { ComboBoxManifest } from "./ComboBox.manifest.js";
+import { devValidate } from "../_internal/devValidate.js";
+import { useFieldWiring } from "../_internal/fieldIds.js";
+import { definedOnly, useAriaInvalidRef } from "../_internal/aria.js";
+import { useHydrationRoot } from "../_internal/hydration.js";
+import { MotionContext, useMotion } from "../_internal/motion.js";
+import { MotionPopover } from "../_internal/MotionPopover.js";
+import { MENU_ITEM_TEXT, SCREEN_MARGIN } from "../_internal/overlay.js";
+import {
+  FORCED_FOCUS_WITHIN,
+  FORCED_NO_RESTING_OUTLINE,
+  LISTBOX_EMPTY,
+  LISTBOX_ROW,
+  LISTBOX_SURFACE
+} from "../_internal/controlStyles.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var inputStyles = cva(
+  "min-w-0 w-full border bg-oprt-surface-2 font-sans text-oprt-md font-medium normal-case text-oprt-text placeholder:text-oprt-text-placeholder disabled:placeholder:text-oprt-text-dim outline-hidden focus-visible:shadow-oprt-focus disabled:cursor-not-allowed disabled:bg-oprt-surface-3 disabled:border-oprt-border-control disabled:text-oprt-text-dim",
+  {
+    variants: {
+      size: { sm: "h-oprt-sm px-2u", md: "h-oprt-md px-2u", lg: "h-oprt-lg px-3u" },
+      invalid: {
+        // The control outline (design call DC-3).
+        false: "border-oprt-border-control focus-visible:border-oprt-border-focus",
+        true: "border-oprt-error focus-visible:border-oprt-error"
+      }
+    },
+    defaultVariants: { size: "md", invalid: false }
+  }
+);
+var reportedValues = /* @__PURE__ */ new Set();
+function reportUnknownValue(received, options) {
+  if (reportedValues.has(received)) return;
+  reportedValues.add(received);
+  console.error(
+    JSON.stringify(
+      {
+        component: "ComboBox",
+        error: "UNKNOWN_VALUE",
+        prop: "value",
+        received,
+        valid_values: options.map((option) => option.value),
+        suggestion: "Keep the selected option in `options` (include it in remote results), or clear the value. Otherwise the field shows nothing while the form still submits the value."
+      },
+      null,
+      2
+    )
+  );
+}
+var ComboBox = forwardRef((props, ref) => {
+  const {
+    motion = "auto",
+    options,
+    value,
+    defaultValue,
+    onValueChange,
+    inputValue,
+    onInputChange,
+    label,
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedBy,
+    placeholder,
+    disabled = false,
+    required,
+    size = "md",
+    invalid,
+    loading = false,
+    filter = true,
+    emptyMessage = "No options found.",
+    name,
+    id,
+    className
+  } = props;
+  const motionState = useMotion(motion);
+  const editing = useRef(false);
+  const {
+    id: inputId,
+    labelledBy,
+    describedBy,
+    invalid: isInvalid,
+    required: isRequired
+  } = useFieldWiring(
+    { id, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, invalid, required },
+    { label: "labelledby", ownLabel: Boolean(label) }
+  );
+  const hiddenLabel = !label && ariaLabel ? ariaLabel : void 0;
+  if (process.env.NODE_ENV !== "production") {
+    devValidate("ComboBox", ComboBoxManifest.ComboBox.props, { ...props });
+    const selected = value ?? defaultValue;
+    if (typeof selected === "string" && (filter || inputValue === void 0) && !options.some((option) => option.value === selected))
+      reportUnknownValue(selected, options);
+  }
+  const inputRef = useAriaInvalidRef(ref, isInvalid);
+  const hydration = useHydrationRoot(inputId, labelledBy);
+  const rootProps = definedOnly({
+    selectedKey: value,
+    defaultSelectedKey: defaultValue,
+    inputValue,
+    onInputChange: (text) => {
+      if (editing.current) {
+        editing.current = false;
+        motionState.settleInput();
+      }
+      onInputChange?.(text);
+    },
+    name,
+    "aria-label": hiddenLabel ? void 0 : ariaLabel,
+    "aria-labelledby": labelledBy,
+    "aria-describedby": describedBy
+  });
+  return /* @__PURE__ */ jsx(MotionContext.Provider, { value: motionState.mode, children: /* @__PURE__ */ jsxs(
+    AriaComboBox,
+    {
+      ...hydration.probeProps,
+      ...rootProps,
+      isDisabled: disabled,
+      isRequired,
+      isInvalid,
+      allowsEmptyCollection: true,
+      ...!filter ? { defaultFilter: () => true } : {},
+      onSelectionChange: (key) => onValueChange?.(key === null ? null : String(key)),
+      render: (domProps) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...domProps,
+          ...motionState.props,
+          onInputCapture: (event) => {
+            if (event.target.getAttribute("role") === "combobox") {
+              editing.current = true;
+            }
+          },
+          onInput: () => {
+            queueMicrotask(() => {
+              editing.current = false;
+            });
+          }
+        }
+      ),
+      className: clsx(
+        "oprt-motion flex min-w-0 flex-col gap-1u font-sans text-oprt-base normal-case text-oprt-text",
+        className
+      ),
+      children: [
+        label && /* @__PURE__ */ jsx(Label, { className: "m-0 min-w-0 oprt-wrap-anywhere text-oprt-base font-medium text-oprt-text", children: label }),
+        hiddenLabel && /* @__PURE__ */ jsx(Label, { className: "sr-only", children: hiddenLabel }),
+        /* @__PURE__ */ jsxs("div", { className: clsx("flex min-w-0 items-stretch", FORCED_FOCUS_WITHIN), children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              ref: inputRef,
+              ...definedOnly({ id: inputId, placeholder }),
+              "aria-busy": loading,
+              className: clsx(inputStyles({ size, invalid: isInvalid }), FORCED_NO_RESTING_OUTLINE)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: clsx(
+                "inline-flex min-w-3u shrink-0 items-center justify-center border border-l-0 border-oprt-border-control bg-oprt-surface-2 px-1u text-oprt-text outline-hidden data-[focus-visible]:border-oprt-border-focus data-[focus-visible]:shadow-oprt-focus data-[disabled]:cursor-not-allowed data-[disabled]:bg-oprt-surface-3 data-[disabled]:border-oprt-border-control data-[disabled]:text-oprt-text-dim",
+                FORCED_NO_RESTING_OUTLINE
+              ),
+              children: /* @__PURE__ */ jsx(ChevronDown, { size: 12, className: "oprt-motion-popover-chevron", "aria-hidden": "true" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("p", { role: "status", className: loading ? "m-0 text-oprt-text-dim" : "sr-only", children: loading ? "Loading options." : null }),
+        /* @__PURE__ */ jsx(
+          MotionPopover,
+          {
+            motionState,
+            className: LISTBOX_SURFACE,
+            offset: 2,
+            containerPadding: SCREEN_MARGIN,
+            children: /* @__PURE__ */ jsx(
+              ListBox,
+              {
+                className: "outline-hidden",
+                renderEmptyState: () => /* @__PURE__ */ jsx("p", { className: LISTBOX_EMPTY, children: loading ? "Loading options." : emptyMessage }),
+                children: options.map((option) => /* @__PURE__ */ jsx(
+                  ListBoxItem,
+                  {
+                    id: option.value,
+                    textValue: option.label,
+                    isDisabled: option.disabled ?? false,
+                    className: LISTBOX_ROW,
+                    children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx("span", { className: MENU_ITEM_TEXT, children: option.label }),
+                      isSelected && /* @__PURE__ */ jsx(Check, { size: 12, className: "shrink-0", "aria-hidden": "true" })
+                    ] })
+                  },
+                  option.value
+                ))
+              }
+            )
+          }
+        )
+      ]
+    },
+    hydration.key
+  ) });
+});
+ComboBox.displayName = "ComboBox";
+export {
+  ComboBox
+};