@optiaxiom/proteus 0.1.0 → 0.1.1

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

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

package/dist/esm/assets/src/proteus-chart/{ProteusChartTooltipContent.css.ts.vanilla-sqWemcZm.css → ProteusChartTooltipContent.css.ts.vanilla-WrO00wrg.css}

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

package/dist/esm/assets/src/proteus-question/{ProteusQuestionItem.css.ts.vanilla-Dns_NfIP.css → ProteusQuestionItem.css.ts.vanilla-S1I3NGY4.css}

@@ -1,13 +1,19 @@
-@layer optiaxiom._1fm60vq;
-@layer optiaxiom._1fm60vq {
+@layer optiaxiom._1qll070;
+@layer optiaxiom._1qll070 {
   .ProteusQuestionItem__uar8vn2 {
     background-color: var(--ax-colors-bg-page);
     border-color: var(--ax-colors-bg-page);
+    cursor: pointer;
   }
   .ProteusQuestionItem__uar8vn2:has(.ProteusQuestionItem__uar8vn1:checked) {
     background-color: var(--ax-colors-bg-accent-subtle);
     border-color: var(--ax-colors-bg-accent-light);
   }
+  .ProteusQuestionItem__uar8vn2:has(.ProteusQuestionItem__uar8vn1:disabled) {
+    cursor: default;
+    opacity: 0.5;
+    pointer-events: none;
+  }
   .ProteusQuestionItem__uar8vn2:has(.ProteusQuestionItem__uar8vn1:focus-visible) {
     outline: 2px solid var(--ax-colors-border-focus);
     outline-offset: 1px;

package/dist/esm/icons/IconAngleRight.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { withIcon } from './withIcon.js';
+
+const IconAngleRight = withIcon(
+  {
+    fill: "none",
+    name: "IconAngleRight"
+  },
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M7.5 13L12.5 8L7.5 3",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+);
+
+export { IconAngleRight };

package/dist/esm/icons/IconPencil.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { withIcon } from './withIcon.js';
+
+const IconPencil = withIcon(
+  {
+    name: "IconPencil",
+    viewBox: "0 0 640 640"
+  },
+  // <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M100.4 417.2C104.5 402.6 112.2 389.3 123 378.5L304.2 197.3L338.1 163.4C354.7 180 389.4 214.7 442.1 267.4L476 301.3L442.1 335.2L260.9 516.4C250.2 527.1 236.8 534.9 222.2 539L94.4 574.6C86.1 576.9 77.1 574.6 71 568.4C64.9 562.2 62.6 553.3 64.9 545L100.4 417.2zM156 413.5C151.6 418.2 148.4 423.9 146.7 430.1L122.6 517L209.5 492.9C215.9 491.1 221.7 487.8 226.5 483.2L155.9 413.5zM510 267.4C493.4 250.8 458.7 216.1 406 163.4L372 129.5C398.5 103 413.4 88.1 416.9 84.6C430.4 71 448.8 63.4 468 63.4C487.2 63.4 505.6 71 519.1 84.6L554.8 120.3C568.4 133.9 576 152.3 576 171.4C576 190.5 568.4 209 554.8 222.5C551.3 226 536.4 240.9 509.9 267.4z",
+      fill: "currentColor"
+    }
+  )
+);
+
+export { IconPencil };

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

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-chart/ProteusChart.css.ts.vanilla-WpbWN23E.css';
+import './../assets/src/proteus-chart/ProteusChart.css.ts.vanilla-DWDlfc5R.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-sqWemcZm.css';
+import './../assets/src/proteus-chart/ProteusChartTooltipContent.css.ts.vanilla-WrO00wrg.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.js

@@ -1,8 +1,9 @@
 "use client";
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Group, Button, Text } from '@optiaxiom/react';
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { IconAngleLeft } from '../icons/IconAngleLeft.js';
+import { IconAngleRight } from '../icons/IconAngleRight.js';
 import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentContext.js';
 import { ProteusQuestionItem } from './ProteusQuestionItem.js';
 
@@ -12,6 +13,30 @@ 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 questionRef = useRef(null);
+  const lastIndexRef = useRef(currentIndex);
+  useEffect(() => {
+    if (lastIndexRef.current !== currentIndex) {
+      questionRef.current?.animate(
+        [
+          {
+            opacity: 0,
+            translate: currentIndex > lastIndexRef.current ? "8px" : "-8px"
+          },
+          {
+            opacity: 1,
+            translate: "0px"
+          }
+        ],
+        {
+          duration: 150
+        }
+      );
+      lastIndexRef.current = currentIndex;
+    }
+  }, [currentIndex]);
   if (currentIndex >= questions.length) {
     return null;
   }
@@ -27,6 +52,40 @@ A: ${value === null ? "[Not specified]" : value}`
     /* @__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
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              "aria-label": "Next",
+              disabled: isLast,
+              icon: /* @__PURE__ */ jsx(IconAngleRight, {}),
+              onClick: (event) => {
+                event.preventDefault();
+                setCurrentIndex((i) => i + 1);
+              },
+              size: "sm"
+            }
+          )
+        ] }),
+        choiceRef: questionRef,
         onValueChange: (value) => {
           answers[currentIndex] = value;
           setAnswers([...answers]);
@@ -38,25 +97,6 @@ A: ${value === null ? "[Not specified]" : value}`
       }
     ),
     /* @__PURE__ */ jsxs(Group, { gap: "8", justifyContent: "end", children: [
-      questions.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            "aria-label": "Previous",
-            disabled: currentIndex === 0,
-            icon: /* @__PURE__ */ jsx(IconAngleLeft, {}),
-            onClick: (event) => {
-              event.preventDefault();
-              setCurrentIndex((i) => i - 1);
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxs(Text, { color: "fg.tertiary", children: [
-          currentIndex + 1,
-          " of ",
-          questions.length
-        ] })
-      ] }),
       /* @__PURE__ */ jsx(
         Button,
         {
@@ -77,6 +117,7 @@ A: ${value === null ? "[Not specified]" : value}`
         Button,
         {
           appearance: "primary",
+          disabled: !valid,
           onClick: (event) => {
             event.preventDefault();
             if (isLast) {

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

@@ -1,8 +1,8 @@
-import './../assets/src/proteus-question/ProteusQuestionItem.css.ts.vanilla-Dns_NfIP.css';
+import './../assets/src/proteus-question/ProteusQuestionItem.css.ts.vanilla-S1I3NGY4.css';
 import { recipe } from '@optiaxiom/react/css-runtime';
 
-var addon = recipe({base:[{display:'grid',fontWeight:'500',placeItems:'center',rounded:'lg',size:'md',transition:'colors'},'ProteusQuestionItem__uar8vn3']});
-var choice = recipe({base:[{border:'1',color:'fg.default',cursor:'pointer',flexDirection:'column',fontSize:'md',gap:'8',px:'16',py:'12',rounded:'lg',transition:'colors'},'ProteusQuestionItem__uar8vn2','ProteusQuestionItem__uar8vn0']});
+var addon = recipe({base:[{display:'grid',fontWeight:'500',placeItems:'center',rounded:'lg',size:'md',transition:'colors'},'ProteusQuestionItem__uar8vn3'],variants:{cursor:{pointer:{cursor:'pointer'}}}});
+var choice = recipe({base:[{border:'1',color:'fg.default',flexDirection:'column',fontSize:'md',gap:'8',px:'16',py:'12',rounded:'lg',transition:'colors'},'ProteusQuestionItem__uar8vn2','ProteusQuestionItem__uar8vn0'],variants:{cursor:{text:{cursor:'text'}}}});
 var choiceGroup = recipe({base:{flexDirection:'column',gap:'8'}});
 var input = recipe({base:'ProteusQuestionItem__uar8vn1'});
 

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

@@ -1,55 +1,117 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { createElement } from 'react';
+import { useRef, createElement } from 'react';
 import { Group, Text, Box, Checkbox } from '@optiaxiom/react';
-import { VisuallyHidden } from '@optiaxiom/react/unstable';
+import { VisuallyHidden, InlineInput } from '@optiaxiom/react/unstable';
+import { IconPencil } from '../icons/IconPencil.js';
 import { choiceGroup, choice, input, addon } from './ProteusQuestionItem-css.js';
 
 function ProteusQuestionItem({
+  addonAfter,
+  choiceRef,
   onValueChange,
   options,
   question,
   type,
   value
 }) {
+  const otherInputRef = useRef(null);
+  const otherValue = value?.find((v) => !options.includes(v));
+  const otherChecked = otherValue !== void 0;
   return /* @__PURE__ */ jsxs(Group, { flexDirection: "column", gap: "16", children: [
-    /* @__PURE__ */ jsx(Text, { fontWeight: "500", children: question }),
-    /* @__PURE__ */ jsx(Group, { ...choiceGroup(), children: options.map((option, index) => {
-      const checked = type === "single_select" ? value?.[0] === option : Array.isArray(value) && value.includes(option);
-      return /* @__PURE__ */ createElement(Box, { asChild: true, ...choice(), key: option }, /* @__PURE__ */ jsxs("label", { children: [
+    /* @__PURE__ */ jsxs(Group, { children: [
+      /* @__PURE__ */ jsx(Text, { flex: "1", fontWeight: "500", children: question }),
+      addonAfter
+    ] }),
+    /* @__PURE__ */ jsxs(Group, { ref: choiceRef, ...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__ */ createElement(Box, { asChild: true, ...choice(), key: option }, /* @__PURE__ */ jsxs("label", { children: [
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(Box, { asChild: true, ...input(), children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              checked,
+              disabled,
+              name: type === "single_select" ? "question-item" : void 0,
+              onChange: () => {
+                if (type === "single_select") {
+                  onValueChange([option]);
+                } else {
+                  const current = value ?? [];
+                  onValueChange(
+                    checked ? current.filter((v) => v !== option) : [...current, option]
+                  );
+                }
+              },
+              type: type === "single_select" ? "radio" : "checkbox",
+              value: option
+            }
+          ) }) }),
+          /* @__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 }) })
+          ] })
+        ] }));
+      }),
+      /* @__PURE__ */ createElement(Box, { asChild: true, ...choice({ cursor: "text" }), key: "other" }, /* @__PURE__ */ jsxs("label", { children: [
         /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(Box, { asChild: true, ...input(), children: /* @__PURE__ */ jsx(
           "input",
           {
-            checked,
+            checked: otherChecked,
             name: type === "single_select" ? "question-item" : void 0,
             onChange: () => {
               if (type === "single_select") {
-                onValueChange([option]);
-              } else {
-                const current = Array.isArray(value) ? value : [];
-                onValueChange(
-                  checked ? current.filter((v) => v !== option) : [...current, option]
-                );
+                if (!otherValue) {
+                  onValueChange([""]);
+                }
               }
+              otherInputRef.current?.focus();
             },
-            type: type === "single_select" ? "radio" : "checkbox",
-            value: option
+            type: "checkbox",
+            value: "other"
           }
         ) }) }),
         /* @__PURE__ */ jsxs(Group, { gap: "12", children: [
-          /* @__PURE__ */ jsx(Box, { ...addon(), children: type === "single_select" ? index + 1 : /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Box, { ...addon({ cursor: "pointer" }), children: type === "single_select" ? /* @__PURE__ */ jsx(IconPencil, {}) : /* @__PURE__ */ jsx(
             Checkbox,
             {
-              checked,
+              checked: otherChecked,
               hidden: true,
               pointerEvents: "none",
               tabIndex: -1
             }
           ) }),
-          /* @__PURE__ */ jsx(Group, { flex: "1", flexDirection: "column", gap: "2", children: /* @__PURE__ */ jsx(Text, { fontWeight: "500", children: option }) })
+          /* @__PURE__ */ jsx(Group, { flex: "1", flexDirection: "column", gap: "2", children: /* @__PURE__ */ jsx(
+            InlineInput,
+            {
+              label: "Something else",
+              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 ?? ""
+            }
+          ) })
         ] })
-      ] }));
-    }) })
+      ] }))
+    ] })
   ] });
 }
 ProteusQuestionItem.displayName = "@optiaxiom/proteus/ProteusQuestionItem";

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/optimizely-axiom/optiaxiom.git"
   },
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "files": [
     "dist/**",
     "LICENSE"
@@ -31,10 +31,10 @@
     "@cfworker/json-schema": "^4.1.1",
     "@radix-ui/react-context": "^1.1.2",
     "@radix-ui/react-use-controllable-state": "^1.2.2",
-    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-table": "^8.0.0",
     "jsonpointer": "^5.0.1",
     "recharts": "^3.7.0",
-    "@optiaxiom/react": "1.9.18"
+    "@optiaxiom/react": "1.9.19"
   },
   "devDependencies": {
     "@emotion/hash": "^0.9.2",