@optiaxiom/proteus 0.1.13 → 0.1.14

package/dist/esm/assets/src/proteus-chart/{ProteusChart.css.ts.vanilla-D33V0Us-.css → ProteusChart.css.ts.vanilla-DMK3zTMn.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom._14psyja;
-@layer optiaxiom._14psyja {
+@layer optiaxiom._13rw4yo;
+@layer optiaxiom._13rw4yo {
   .ProteusChart__jmlqij1 {
     border-radius: 16px;
   }

package/dist/esm/assets/src/proteus-chart/{ProteusChartTooltipContent.css.ts.vanilla-61AtcZEK.css → ProteusChartTooltipContent.css.ts.vanilla-BNYSJiKc.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom._14psyja;
-@layer optiaxiom._14psyja {
+@layer optiaxiom._13rw4yo;
+@layer optiaxiom._13rw4yo {
   .ProteusChartTooltipContent__1gsvq810 {
     min-width: 128px;
   }

package/dist/esm/assets/src/proteus-question/ProteusQuestion.css.ts.vanilla-vsj__kKE.css

@@ -0,0 +1,36 @@
+@layer optiaxiom._13rw4yo;
+@layer optiaxiom._13rw4yo {
+  .ProteusQuestion__8f590p0 {
+    outline: none;
+  }
+  .ProteusQuestion__8f590p2 {
+    background-color: transparent;
+    border-color: var(--ax-colors-border-secondary);
+    border-inline-color: transparent;
+    border-inline-width: 6px;
+    cursor: pointer;
+    user-select: none;
+  }
+  .ProteusQuestion__8f590p2:focus-visible {
+    outline: 2px solid var(--ax-colors-border-focus);
+    outline-offset: 1px;
+    z-index: 1;
+  }
+  .ProteusQuestion__8f590p2[data-disabled] {
+    cursor: default;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+  .ProteusQuestion__8f590p2:has(+ .ProteusQuestion__8f590p1:hover, + .ProteusQuestion__8f590p1[data-selected], + .ProteusQuestion__8f590p1 [contenteditable]:focus) {
+    border-bottom-color: transparent;
+  }
+  .ProteusQuestion__8f590p3 {
+    background-color: var(--ax-colors-bg-avatar-neutral);
+  }
+  @media (hover: hover) {
+    .ProteusQuestion__8f590p2:hover, .ProteusQuestion__8f590p2[data-selected], .ProteusQuestion__8f590p2:has([contenteditable]:focus) {
+      background-color: var(--ax-colors-bg-page);
+      border-color: var(--ax-colors-bg-page);
+    }
+  }
+}

package/dist/esm/icons/IconX.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { withIcon } from './withIcon.js';
+
+const IconX = withIcon(
+  {
+    name: "IconX"
+  },
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M14.8669 3.77596C15.0444 3.59845 15.0444 3.31064 14.8669 3.13313C14.6894 2.95562 14.4016 2.95562 14.224 3.13313L10 7.35718L5.77596 3.13313C5.59845 2.95562 5.31064 2.95562 5.13313 3.13313C4.95562 3.31064 4.95562 3.59845 5.13313 3.77596L9.35718 8L5.13313 12.224C4.95562 12.4016 4.95562 12.6894 5.13313 12.8669C5.31064 13.0444 5.59845 13.0444 5.77596 12.8669L10 8.64282L14.224 12.8669C14.4016 13.0444 14.6894 13.0444 14.8669 12.8669C15.0444 12.6894 15.0444 12.4016 14.8669 12.224L10.6428 8L14.8669 3.77596Z",
+      fill: "currentColor",
+      fillRule: "evenodd"
+    }
+  )
+);
+
+export { IconX };

package/dist/esm/proteus-chart/ProteusChart-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-chart/ProteusChart.css.ts.vanilla-D33V0Us-.css';
+import './../assets/src/proteus-chart/ProteusChart.css.ts.vanilla-DMK3zTMn.css';
 import { recipe } from '@optiaxiom/react/css-runtime';
 
 var chart = recipe({base:[{border:'1',borderColor:'border.tertiary',fontSize:'sm',p:'16'},'ProteusChart__jmlqij1','ProteusChart__jmlqij0']});

package/dist/esm/proteus-chart/ProteusChartTooltipContent-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-chart/ProteusChartTooltipContent.css.ts.vanilla-61AtcZEK.css';
+import './../assets/src/proteus-chart/ProteusChartTooltipContent.css.ts.vanilla-BNYSJiKc.css';
 import { recipe } from '@optiaxiom/react/css-runtime';
 
 var tooltip = recipe({base:[{bg:'bg.default',border:'1',borderColor:'border.secondary',display:'grid',fontSize:'sm',gap:'6',px:'8',py:'10',rounded:'lg',shadow:'lg'},'ProteusChartTooltipContent__1gsvq810']});

package/dist/esm/proteus-question/ProteusQuestion-css.js

@@ -0,0 +1,9 @@
+import './../assets/src/proteus-question/ProteusQuestion.css.ts.vanilla-vsj__kKE.css';
+import { recipe } from '@optiaxiom/react/css-runtime';
+
+var addon = recipe({base:[{display:'grid',fontWeight:'500',placeItems:'center',rounded:'lg',size:'md',transition:'colors'},'ProteusQuestion__8f590p3'],variants:{cursor:{pointer:{cursor:'pointer'}}}});
+var choice = recipe({base:[{color:'fg.default',flexDirection:'column',fontSize:'md',gap:'8',px:'10',py:'16',rounded:'lg',transition:'colors'},'ProteusQuestion__8f590p2','ProteusQuestion__8f590p1'],variants:{cursor:{pointer:{borderB:'1'},text:{cursor:'text'}}}});
+var choiceGroup = recipe({base:{flexDirection:'column'}});
+var question = recipe({base:[{flexDirection:'column',gap:'16',p:'4'},'ProteusQuestion__8f590p0']});
+
+export { addon, choice, choiceGroup, question };

package/dist/esm/proteus-question/ProteusQuestion.js

@@ -1,11 +1,16 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Group, Button, Text } from '@optiaxiom/react';
-import { useState, useRef, useEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { IconNorth } from '@optiaxiom/icons';
+import { Group, Text, Button, Box, Checkbox } from '@optiaxiom/react';
+import { InlineInput } from '@optiaxiom/react/unstable';
+import * as RovingFocus from '@radix-ui/react-roving-focus';
+import { useState, useCallback, useRef, useEffect } from 'react';
 import { IconAngleLeft } from '../icons/IconAngleLeft.js';
 import { IconAngleRight } from '../icons/IconAngleRight.js';
+import { IconPencil } from '../icons/IconPencil.js';
+import { IconX } from '../icons/IconX.js';
 import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentContext.js';
-import { ProteusQuestionItem } from './ProteusQuestionItem.js';
+import { question, choiceGroup, choice, addon } from './ProteusQuestion-css.js';
 
 function ProteusQuestion({ questions }) {
   const { onEvent } = useProteusDocumentContext(
@@ -13,8 +18,13 @@ function ProteusQuestion({ questions }) {
   );
   const [answers, setAnswers] = useState([]);
   const [currentIndex, setCurrentIndex] = useState(0);
-  const answer = answers[currentIndex];
-  const valid = Array.isArray(answer) && answer.length > 0 && answer.every(Boolean);
+  const value = answers[currentIndex];
+  const valid = Array.isArray(value) && value.length > 0 && value.every(Boolean);
+  const onDismiss = useCallback(() => {
+    void onEvent({
+      message: "[User declined to answer the question]"
+    });
+  }, [onEvent]);
   const questionRef = useRef(null);
   const lastIndexRef = useRef(currentIndex);
   useEffect(() => {
@@ -35,102 +45,319 @@ function ProteusQuestion({ questions }) {
         }
       );
       lastIndexRef.current = currentIndex;
+      const item = questionRef.current?.querySelector("[data-selected]") ?? questionRef.current?.querySelector("[tabindex]");
+      item?.focus();
     }
   }, [currentIndex]);
+  const otherInputRef = useRef(null);
+  const otherItemRef = useRef(null);
   if (currentIndex >= questions.length) {
     return null;
   }
-  const current = questions[currentIndex];
+  const { options, question: question$1, type } = questions[currentIndex];
   const isLast = currentIndex === questions.length - 1;
+  const otherValue = value?.find((v) => !options.includes(v));
+  const otherChecked = otherValue !== void 0;
   const onComplete = () => onEvent({
     message: answers.map(
-      (value, index) => `Q: ${questions[index].question}
-A: ${value || "[Not specified]"}`
+      (value2, index) => `Q: ${questions[index].question}
+A: ${value2 || "[Not specified]"}`
     ).join("\n\n")
   });
-  return /* @__PURE__ */ jsxs(Group, { flexDirection: "column", gap: "16", children: [
-    /* @__PURE__ */ jsx(
-      ProteusQuestionItem,
-      {
-        addonAfter: questions.length > 1 && /* @__PURE__ */ jsxs(Group, { gap: "6", children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              "aria-label": "Previous",
-              disabled: currentIndex === 0,
-              icon: /* @__PURE__ */ jsx(IconAngleLeft, {}),
-              onClick: (event) => {
-                event.preventDefault();
-                setCurrentIndex((i) => i - 1);
-              },
-              size: "sm"
-            }
-          ),
-          /* @__PURE__ */ jsxs(Text, { color: "fg.tertiary", fontSize: "sm", children: [
-            currentIndex + 1,
-            " of ",
-            questions.length
+  const onValueChange = (value2) => {
+    answers[currentIndex] = value2;
+    setAnswers([...answers]);
+  };
+  const onSkip = () => {
+    answers[currentIndex] = null;
+    setAnswers([...answers]);
+    if (isLast) {
+      void onComplete();
+    } else {
+      setCurrentIndex((i) => i + 1);
+    }
+  };
+  const onSubmit = () => {
+    if (isLast) {
+      void onComplete();
+    } else {
+      setCurrentIndex((i) => i + 1);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Group,
+    {
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          if (valid) {
+            onValueChange(null);
+          } else {
+            onSkip();
+          }
+        }
+        if ((event.key === "ArrowLeft" || event.key === "ArrowRight") && !(event.target instanceof HTMLInputElement) && !event.target.isContentEditable) {
+          event.preventDefault();
+          if (event.key === "ArrowLeft" && currentIndex > 0) {
+            setCurrentIndex((i) => i - 1);
+          } else if (event.key === "ArrowRight" && !isLast) {
+            setCurrentIndex((i) => i + 1);
+          }
+        }
+      },
+      tabIndex: -1,
+      ...question(),
+      children: [
+        /* @__PURE__ */ jsxs(Group, { flexDirection: "column", gap: "16", children: [
+          /* @__PURE__ */ jsxs(Group, { pl: "16", children: [
+            /* @__PURE__ */ jsx(Text, { flex: "1", fontWeight: "500", children: question$1 }),
+            /* @__PURE__ */ jsxs(Group, { gap: "6", children: [
+              questions.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    appearance: "subtle",
+                    "aria-label": "Previous",
+                    disabled: currentIndex === 0,
+                    icon: /* @__PURE__ */ jsx(IconAngleLeft, {}),
+                    onClick: (event) => {
+                      event.preventDefault();
+                      setCurrentIndex((i) => i - 1);
+                    },
+                    size: "sm"
+                  }
+                ),
+                /* @__PURE__ */ jsxs(Text, { color: "fg.tertiary", fontSize: "sm", children: [
+                  currentIndex + 1,
+                  " of ",
+                  questions.length
+                ] }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    appearance: "subtle",
+                    "aria-label": "Next",
+                    disabled: isLast,
+                    icon: /* @__PURE__ */ jsx(IconAngleRight, {}),
+                    onClick: (event) => {
+                      event.preventDefault();
+                      setCurrentIndex((i) => i + 1);
+                    },
+                    size: "sm"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  appearance: "subtle",
+                  "aria-label": "Dismiss",
+                  icon: /* @__PURE__ */ jsx(IconX, {}),
+                  onClick: (event) => {
+                    event.preventDefault();
+                    onDismiss();
+                  },
+                  size: "sm"
+                }
+              )
+            ] })
           ] }),
-          /* @__PURE__ */ jsx(
-            Button,
+          /* @__PURE__ */ jsx(RovingFocus.Root, { asChild: true, loop: true, orientation: "vertical", ref: questionRef, children: /* @__PURE__ */ jsxs(
+            Group,
             {
-              "aria-label": "Next",
-              disabled: isLast,
-              icon: /* @__PURE__ */ jsx(IconAngleRight, {}),
-              onClick: (event) => {
-                event.preventDefault();
-                setCurrentIndex((i) => i + 1);
-              },
-              size: "sm"
+              role: type === "single_select" ? "radiogroup" : "listbox",
+              ...choiceGroup(),
+              children: [
+                options.map((option, index) => {
+                  const checked = type === "single_select" ? value?.[0] === option : value?.includes(option);
+                  const disabled = type === "single_select" && otherChecked && !!otherValue;
+                  return /* @__PURE__ */ jsx(RovingFocus.Item, { asChild: true, children: /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      "aria-checked": type === "single_select" ? checked : void 0,
+                      "data-disabled": disabled ? "" : void 0,
+                      "data-selected": checked && type === "single_select" ? "" : void 0,
+                      onClick: () => {
+                        if (type === "single_select") {
+                          onValueChange([option]);
+                          onSubmit();
+                        } else {
+                          const current = value ?? [];
+                          onValueChange(
+                            checked ? current.filter((v) => v !== option) : [...current, option]
+                          );
+                        }
+                      },
+                      onFocus: () => {
+                        if (type === "single_select") {
+                          onValueChange([option]);
+                        }
+                      },
+                      onKeyDown: (event) => {
+                        if (type === "single_select" && event.key === "Enter") {
+                          event.preventDefault();
+                          onSubmit();
+                        } else if (type === "multi_select" && (event.key === "Enter" || event.key === " ")) {
+                          event.preventDefault();
+                          const current = value ?? [];
+                          onValueChange(
+                            checked ? current.filter((v) => v !== option) : [...current, option]
+                          );
+                        }
+                      },
+                      role: type === "single_select" ? "radio" : "option",
+                      tabIndex: 0,
+                      ...choice({ cursor: "pointer" }),
+                      children: /* @__PURE__ */ jsxs(Group, { gap: "12", children: [
+                        /* @__PURE__ */ jsx(Box, { ...addon(), children: type === "single_select" ? index + 1 : /* @__PURE__ */ jsx(
+                          Checkbox,
+                          {
+                            checked,
+                            hidden: true,
+                            pointerEvents: "none",
+                            tabIndex: -1
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx(Group, { flex: "1", flexDirection: "column", gap: "2", children: /* @__PURE__ */ jsx(Text, { children: option }) }),
+                        type === "single_select" && checked && /* @__PURE__ */ jsx(Box, { asChild: true, color: "fg.tertiary", ml: "auto", children: /* @__PURE__ */ jsx(IconNorth, {}) })
+                      ] })
+                    }
+                  ) }, option);
+                }),
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    "aria-label": "Something else",
+                    "data-selected": otherChecked ? "" : void 0,
+                    role: "group",
+                    ...choice({ cursor: "text" }),
+                    children: /* @__PURE__ */ jsxs(Group, { gap: "12", children: [
+                      /* @__PURE__ */ jsx(Box, { ...addon({ cursor: "pointer" }), children: type === "single_select" ? /* @__PURE__ */ jsx(IconPencil, {}) : /* @__PURE__ */ jsx(
+                        Checkbox,
+                        {
+                          checked: otherChecked,
+                          hidden: true,
+                          pointerEvents: "none",
+                          tabIndex: -1
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx(RovingFocus.Item, { asChild: true, children: /* @__PURE__ */ jsx(
+                        Group,
+                        {
+                          flex: "1",
+                          flexDirection: "column",
+                          gap: "2",
+                          onFocus: () => {
+                            if (type === "single_select" && !otherValue) {
+                              onValueChange([""]);
+                            }
+                            otherInputRef.current?.focus();
+                          },
+                          ref: otherItemRef,
+                          children: /* @__PURE__ */ jsx(
+                            InlineInput,
+                            {
+                              label: "Something else",
+                              onKeyDown: (event) => {
+                                if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+                                  event.preventDefault();
+                                  otherItemRef.current?.focus();
+                                  otherItemRef.current?.dispatchEvent(
+                                    new KeyboardEvent("keydown", {
+                                      bubbles: true,
+                                      key: event.key
+                                    })
+                                  );
+                                } else if (event.key === "Enter") {
+                                  onSubmit();
+                                }
+                              },
+                              onValueChange: (text) => {
+                                if (type === "single_select") {
+                                  onValueChange([text]);
+                                } else {
+                                  const current = value ?? [];
+                                  onValueChange([
+                                    ...current.filter((v) => options.includes(v)),
+                                    ...text ? [text] : []
+                                  ]);
+                                }
+                              },
+                              ref: otherInputRef,
+                              value: otherValue ?? ""
+                            }
+                          )
+                        }
+                      ) }),
+                      type === "single_select" && /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          appearance: otherValue ? "primary" : "default",
+                          "aria-label": otherValue && (isLast ? "Submit" : "Next"),
+                          icon: otherValue && /* @__PURE__ */ jsx(IconNorth, {}),
+                          ml: "auto",
+                          onClick: (event) => {
+                            event.preventDefault();
+                            if (otherValue) {
+                              onSubmit();
+                            } else {
+                              onSkip();
+                            }
+                          },
+                          children: !otherValue && "Skip"
+                        }
+                      )
+                    ] })
+                  },
+                  "other"
+                )
+              ]
             }
-          )
+          ) })
         ] }),
-        choiceRef: questionRef,
-        onValueChange: (value) => {
-          answers[currentIndex] = value;
-          setAnswers([...answers]);
-        },
-        options: current.options,
-        question: current.question,
-        type: current.type,
-        value: answers[currentIndex] ?? null
-      }
-    ),
-    /* @__PURE__ */ jsxs(Group, { gap: "8", justifyContent: "end", children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          onClick: (event) => {
-            event.preventDefault();
-            answers[currentIndex] = null;
-            setAnswers([...answers]);
-            if (isLast) {
-              void onComplete();
-            } else {
-              setCurrentIndex((i) => i + 1);
-            }
-          },
-          children: "Skip"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          appearance: "primary",
-          disabled: !valid,
-          onClick: (event) => {
-            event.preventDefault();
-            if (isLast) {
-              void onComplete();
-            } else {
-              setCurrentIndex((i) => i + 1);
-            }
-          },
-          children: isLast ? "Submit" : "Next"
-        }
-      )
-    ] })
-  ] });
+        type === "multi_select" && /* @__PURE__ */ jsxs(
+          Group,
+          {
+            borderColor: "border.secondary",
+            borderT: "1",
+            gap: "8",
+            pt: "16",
+            px: "16",
+            children: [
+              /* @__PURE__ */ jsxs(Text, { children: [
+                value?.length || 0,
+                " selected"
+              ] }),
+              (value?.length || 0) > 0 ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  appearance: "primary",
+                  "aria-label": isLast ? "Submit" : "Next",
+                  disabled: !valid,
+                  icon: /* @__PURE__ */ jsx(IconNorth, {}),
+                  ml: "auto",
+                  onClick: (event) => {
+                    event.preventDefault();
+                    onSubmit();
+                  }
+                }
+              ) : /* @__PURE__ */ jsx(
+                Button,
+                {
+                  ml: "auto",
+                  onClick: (event) => {
+                    event.preventDefault();
+                    onSkip();
+                  },
+                  children: "Skip"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 ProteusQuestion.displayName = "@optiaxiom/proteus/ProteusQuestion";
 

package/dist/esm/schema/public-schema.json.js

@@ -5802,6 +5802,17 @@ var definitions = {
 				],
 				description: "Control the appearance of the input."
 			},
+			autoFocus: {
+				anyOf: [
+					{
+						type: "boolean"
+					},
+					{
+						$ref: "#/definitions/ProteusValue"
+					}
+				],
+				description: "Whether the input should be focused on mount."
+			},
 			backgroundImage: {
 				$ref: "#/definitions/SprinkleProp_backgroundImage"
 			},

package/dist/esm/schema/runtime-schema.json.js

@@ -5767,6 +5767,17 @@ var definitions = {
 				],
 				description: "Control the appearance of the input."
 			},
+			autoFocus: {
+				anyOf: [
+					{
+						type: "boolean"
+					},
+					{
+						$ref: "#/definitions/ProteusValue"
+					}
+				],
+				description: "Whether the input should be focused on mount."
+			},
 			backgroundImage: {
 				$ref: "#/definitions/SprinkleProp_backgroundImage"
 			},