@invana/ui 0.0.34 → 0.0.35

package/dist/index.cjs

@@ -4565,7 +4565,7 @@ var NavItems = ({
     const isActive = key === currentKey;
     const hasMenu = !item.href && Boolean(item.menuItems?.length);
     const asCaret = hasMenu && item.menuTrigger === "caret";
-    const hostsButton = asCaret || Boolean(item.onClose);
+    const hostsButton = asCaret;
     const isInteractive = Boolean(
       item.href || item.onClick || hasMenu || isTabs
     );
@@ -4628,9 +4628,9 @@ var NavItems = ({
       }
     ) });
     const close = item.onClose && /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
+      "button",
       {
-        role: "button",
+        type: "button",
         tabIndex: -1,
         "aria-label": `Close ${item.name}`,
         onClick: (e) => {
@@ -4645,20 +4645,49 @@ var NavItems = ({
       icon,
       label,
       caret,
-      close,
       badge
     ] });
-    const control = hostsButton ? /* @__PURE__ */ jsxRuntime.jsx(
+    const control = close ? /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        ref: setNode,
-        ...tabProps,
-        ...a11y,
+        ref: itemRef(index),
         style: item.style,
         onClick: () => select(item),
-        className: itemClass,
-        children: inner
+        className: cn(
+          itemClass,
+          "has-[[role=tab]:focus-visible]:ring-2 has-[[role=tab]:focus-visible]:ring-ring"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: (el) => {
+                nodes.current[key] = el;
+              },
+              ...tabProps,
+              ...a11y,
+              className: "inline-flex items-center gap-[inherit] focus-visible:outline-none",
+              children: inner
+            }
+          ),
+          close
+        ]
       }
+    ) : hostsButton ? (
+      // A caret item hosts a button, so it cannot itself be one — nested
+      // buttons are invalid, and the browser resolves the click to the outer control.
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: setNode,
+          ...tabProps,
+          ...a11y,
+          style: item.style,
+          onClick: () => select(item),
+          className: itemClass,
+          children: inner
+        }
+      )
     ) : item.href ? /* @__PURE__ */ jsxRuntime.jsx(
       "a",
       {
@@ -5469,6 +5498,7 @@ ClarifyActions.displayName = "ClarifyActions";
 var ClarifyCard = React25__namespace.forwardRef(
   ({
     state = "pending",
+    variant = "card",
     kind = "question",
     step,
     waiting,
@@ -5476,7 +5506,13 @@ var ClarifyCard = React25__namespace.forwardRef(
     question,
     options,
     value,
+    answer,
+    questions,
     onSelect,
+    onTypeInstead,
+    typeInsteadLabel,
+    collapsible = false,
+    defaultOpen,
     children,
     footnote,
     actions,
@@ -5485,50 +5521,153 @@ var ClarifyCard = React25__namespace.forwardRef(
     ...props
   }, ref) => {
     const settled = state !== "pending";
+    const inline = variant === "inline";
     const name = React25__namespace.useId();
+    const asks = questions ?? (question != null || options ? [{ question, options, value, answer }] : []);
+    const [open, setOpen] = React25__namespace.useState(defaultOpen ?? !settled);
+    const wasSettled = React25__namespace.useRef(settled);
+    React25__namespace.useEffect(() => {
+      if (settled && !wasSettled.current) setOpen(defaultOpen ?? false);
+      wasSettled.current = settled;
+    }, [settled, defaultOpen]);
+    const shown = !collapsible || open;
+    const summary = settled ? summaryOf(asks) : null;
+    const title = settled && !inline ? state : kind;
+    const sub = inline ? [settled ? state : null, summary ?? step].filter((x) => x != null) : step != null ? [step] : [];
+    const chevron = collapsible ? /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        "aria-hidden": "true",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: cn("size-3 shrink-0 transition-transform", open && "rotate-180"),
+        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" })
+      }
+    ) : null;
+    const headerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("shrink-0 font-medium", inline && "first-letter:uppercase"), children: title }),
+      sub.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate text-muted-foreground first-letter:uppercase", children: sub.map((part, i) => /* @__PURE__ */ jsxRuntime.jsxs(React25__namespace.Fragment, { children: [
+        i > 0 ? " \xB7 " : null,
+        part
+      ] }, i)) }) : null,
+      inline ? chevron : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1" }),
+      waiting != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-muted-foreground", children: waiting }) : null,
+      time != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-muted-foreground", children: time }) : null,
+      !inline ? chevron : null
+    ] });
+    const headerClass = inline ? "flex min-w-0 items-center gap-1.5 text-start" : "flex h-control-sm shrink-0 items-center gap-2 border-b border-border bg-chrome px-2 text-sm text-start";
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
         "data-state": state,
+        "data-variant": variant,
         className: cn(
-          "flex min-w-0 flex-col overflow-hidden border border-border bg-card",
+          "flex min-w-0 flex-col",
+          inline ? "gap-2" : "overflow-hidden border border-border bg-card",
           (state === "superseded" || state === "expired") && "opacity-75",
           className
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-control-sm shrink-0 items-center gap-2 border-b border-border bg-chrome px-2 text-sm", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 font-medium", children: settled ? state : kind }),
-            step != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-muted-foreground", children: step }) : null,
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1" }),
-            waiting != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-muted-foreground", children: waiting }) : null,
-            time != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-muted-foreground", children: time }) : null
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-2 p-2", children: [
-            question != null ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: question }) : null,
-            children ?? (options ? /* @__PURE__ */ jsxRuntime.jsx(Questionnaire, { onSubmit: (e) => e.preventDefault(), children: /* @__PURE__ */ jsxRuntime.jsx(QuestionnaireItem, { name, children: /* @__PURE__ */ jsxRuntime.jsx(QuestionnaireChoices, { children: options.map((o) => /* @__PURE__ */ jsxRuntime.jsx(
-              QuestionnaireChoice,
+          collapsible ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-expanded": open,
+              onClick: () => setOpen((o) => !o),
+              className: cn(
+                headerClass,
+                "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                inline && "self-start rounded-control"
+              ),
+              children: headerContent
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headerClass, children: headerContent }),
+          shown ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-1 flex-col", inline ? "gap-3" : "gap-2 p-2"), children: [
+            children ?? asks.map((ask, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              Ask,
               {
-                value: o.value,
-                detail: o.detail,
-                disabled: o.disabled,
-                readOnly: settled,
-                checked: value === void 0 ? void 0 : value === o.value,
-                onChange: () => onSelect?.(o.value),
-                children: /* @__PURE__ */ jsxRuntime.jsx(QuestionnaireChoiceTitle, { children: o.label })
+                ask,
+                name: `${name}-${index}`,
+                inline,
+                settled,
+                onSelect: onSelect ? (v) => onSelect(v, index) : void 0,
+                onTypeInstead,
+                typeInsteadLabel
               },
-              o.value
-            )) }) }) }) : null),
+              index
+            )),
             footnote != null ? /* @__PURE__ */ jsxRuntime.jsx(ClarifyFootnote, { children: footnote }) : null,
             actions ? /* @__PURE__ */ jsxRuntime.jsx(ClarifyActions, { align: actionsAlign, children: actions }) : null
-          ] })
+          ] }) : null
         ]
       }
     );
   }
 );
 ClarifyCard.displayName = "ClarifyCard";
+function summaryOf(asks) {
+  if (asks.length > 1) return `${asks.length} questions`;
+  const ask = asks[0];
+  if (!ask) return null;
+  return ask.options?.find((o) => o.value === ask.value)?.label ?? ask.answer ?? null;
+}
+var TYPED = "\0typed";
+function Ask({
+  ask,
+  name,
+  inline,
+  settled,
+  onSelect,
+  onTypeInstead,
+  typeInsteadLabel
+}) {
+  const options = ask.options ?? [];
+  const picked = options.some((o) => o.value === ask.value);
+  const typed = settled && !picked && ask.answer != null;
+  const row = (checked) => cn(inline && "border-transparent", settled && !checked && "opacity-60");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
+    ask.question != null ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(inline && "font-medium"), children: ask.question }) : null,
+    options.length > 0 || typed || !settled && onTypeInstead ? /* @__PURE__ */ jsxRuntime.jsx(Questionnaire, { onSubmit: (e) => e.preventDefault(), children: /* @__PURE__ */ jsxRuntime.jsx(QuestionnaireItem, { name, children: /* @__PURE__ */ jsxRuntime.jsxs(QuestionnaireChoices, { children: [
+      options.map((o) => {
+        const checked = ask.value === o.value;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          QuestionnaireChoice,
+          {
+            value: o.value,
+            detail: o.detail,
+            disabled: o.disabled,
+            readOnly: settled,
+            checked: ask.value === void 0 ? void 0 : checked,
+            onChange: () => onSelect?.(o.value),
+            className: row(checked),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(QuestionnaireChoiceTitle, { children: o.label }),
+              o.description != null ? /* @__PURE__ */ jsxRuntime.jsx(QuestionnaireChoiceDescription, { children: o.description }) : null
+            ]
+          },
+          o.value
+        );
+      }),
+      typed ? /* @__PURE__ */ jsxRuntime.jsx(QuestionnaireChoice, { value: TYPED, readOnly: true, checked: true, className: row(true), children: /* @__PURE__ */ jsxRuntime.jsx(QuestionnaireChoiceTitle, { children: ask.answer }) }) : null,
+      !settled && onTypeInstead ? /* @__PURE__ */ jsxRuntime.jsx(
+        QuestionnaireChoice,
+        {
+          value: TYPED,
+          checked: false,
+          onChange: onTypeInstead,
+          className: row(false),
+          children: /* @__PURE__ */ jsxRuntime.jsx(QuestionnaireChoiceTitle, { children: typeInsteadLabel ?? (options.length > 0 ? "Something else \u2014 let me type" : "Type your answer") })
+        }
+      ) : null
+    ] }) }) }) : null
+  ] });
+}
 var ContextBar = React25__namespace.forwardRef(
   ({ counters, hint, className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -9285,7 +9424,9 @@ function useTour(options) {
   const lastIndex = Math.max(total - 1, 0);
   const clamped = Math.min(Math.max(current, 0), lastIndex);
   const at = React25__namespace.useRef(clamped);
-  at.current = clamped;
+  React25__namespace.useLayoutEffect(() => {
+    at.current = clamped;
+  }, [clamped]);
   const move = React25__namespace.useCallback(
     (to) => {
       if (to === at.current) return;