@optiaxiom/proteus 0.1.16-next.0 → 0.1.16

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

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

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

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

package/dist/esm/assets/src/proteus-image-carousel/ProteusImageCarousel.css.ts.vanilla-DV3O-VwO.css

@@ -0,0 +1,72 @@
+@layer optiaxiom._1g6ippr;
+@layer optiaxiom._1g6ippr {
+  .ProteusImageCarousel__1t6qej70 {
+    outline: none;
+    user-select: none;
+  }
+  .ProteusImageCarousel__1t6qej71 {
+    aspect-ratio: 16 / 9;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto 1fr auto;
+    position: relative;
+  }
+  .ProteusImageCarousel__1t6qej72 {
+    grid-area: 1 / 1 / -1 / -1;
+  }
+  .ProteusImageCarousel__1t6qej73 {
+    backface-visibility: hidden;
+    display: flex;
+    touch-action: pan-y pinch-zoom;
+  }
+  .ProteusImageCarousel__1t6qej74 {
+    flex: 0 0 100%;
+    height: 100%;
+    min-width: 0;
+  }
+  .ProteusImageCarousel__1t6qej75 {
+    align-self: center;
+    grid-row: 2;
+    opacity: 0.7;
+    z-index: 1;
+  }
+  .ProteusImageCarousel__1t6qej75::before {
+    content: "";
+    inset-block: 0;
+    padding-left: 32px;
+    padding-right: 16px;
+    position: absolute;
+    width: 32px;
+  }
+  .ProteusImageCarousel__1t6qej75:hover {
+    opacity: 1;
+  }
+  .ProteusImageCarousel__1t6qej76 {
+    grid-column: 1;
+  }
+  .ProteusImageCarousel__1t6qej77 {
+    grid-column: 3;
+  }
+  .ProteusImageCarousel__1t6qej78 {
+    position: relative;
+  }
+  .ProteusImageCarousel__1t6qej78::after {
+    content: "";
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 2px var(--ax-colors-border-focus);
+    inset: 0;
+    opacity: 0;
+    outline: 2px solid var(--ax-colors-bg-default);
+    outline-offset: -4px;
+    position: absolute;
+    transition: opacity var(--ax-duration-sm);
+  }
+  .ProteusImageCarousel__1t6qej79 {
+    opacity: 0.7;
+  }
+  .ProteusImageCarousel__1t6qej7a {
+    opacity: 1;
+  }
+  .ProteusImageCarousel__1t6qej7a::after {
+    opacity: 1;
+  }
+}

package/dist/esm/assets/src/proteus-question/{ProteusQuestion.css.ts.vanilla-nFTJBsO_.css → ProteusQuestion.css.ts.vanilla-0cQoAJ0-.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom.ndq0nz;
-@layer optiaxiom.ndq0nz {
+@layer optiaxiom._1g6ippr;
+@layer optiaxiom._1g6ippr {
   .ProteusQuestion__8f590p0 {
     outline: none;
   }

package/dist/esm/index.js

@@ -6,6 +6,7 @@ export { ProteusDocumentRenderer } from './proteus-document/ProteusDocumentRende
 export { ProteusDocumentShell } from './proteus-document/ProteusDocumentShell.js';
 export { safeParseDocument } from './proteus-document/schemas.js';
 export { ProteusImage } from './proteus-image/ProteusImage.js';
+export { ProteusImageCarousel } from './proteus-image-carousel/ProteusImageCarousel.js';
 export { ProteusInput } from './proteus-input/ProteusInput.js';
 export { ProteusMap } from './proteus-map/ProteusMap.js';
 export { ProteusSelect } from './proteus-select/ProteusSelect.js';

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

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-chart/ProteusChart.css.ts.vanilla-Ct8ajpEs.css';
+import './../assets/src/proteus-chart/ProteusChart.css.ts.vanilla-CK0mlfvQ.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-CV4s3EJV.css';
+import './../assets/src/proteus-chart/ProteusChartTooltipContent.css.ts.vanilla-VEKfizml.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-document/ProteusDocumentShell.js

@@ -28,6 +28,24 @@ function ProteusDocumentShell({
       setValid(formRef.current.checkValidity());
     }
   }, []);
+  useEffect(() => {
+    if (!element.blocking || !formRef.current)
+      return;
+    const walker = document.createTreeWalker(
+      formRef.current,
+      NodeFilter.SHOW_ELEMENT,
+      {
+        acceptNode: (node) => {
+          if (node instanceof HTMLInputElement && node.type === "hidden")
+            return NodeFilter.FILTER_SKIP;
+          if (node.hidden)
+            return NodeFilter.FILTER_SKIP;
+          return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+        }
+      }
+    );
+    walker.nextNode()?.focus();
+  }, [element.blocking]);
   const [open, setOpen] = useControllableState({
     defaultProp: defaultOpen,
     onChange: onOpenChange,
@@ -77,7 +95,7 @@ function ProteusDocumentShell({
           borderColor: "border.tertiary",
           onOpenChange: setOpen,
           open,
-          p: "16",
+          p: "20",
           rounded: "xl",
           children: [
             element.appName && /* @__PURE__ */ jsx(Trigger, { py: "0", ...collapsible ? { chevronPosition: "end" } : {}, children: /* @__PURE__ */ jsxs(Group, { fontSize: "sm", gap: "8", children: [

package/dist/esm/proteus-element/ProteusElement.js

@@ -11,6 +11,7 @@ import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentCo
 import { useProteusDocumentPathContext } from '../proteus-document/ProteusDocumentPathContext.js';
 import { resolveProteusProp } from '../proteus-document/resolveProteusProp.js';
 import { safeParseElement } from '../proteus-document/schemas.js';
+import { ProteusImageCarousel } from '../proteus-image-carousel/ProteusImageCarousel.js';
 import { ProteusImage } from '../proteus-image/ProteusImage.js';
 import { ProteusInput } from '../proteus-input/ProteusInput.js';
 import { ProteusMap } from '../proteus-map/ProteusMap.js';
@@ -72,7 +73,7 @@ const ProteusElement = ({
     case "CardHeader":
       return /* @__PURE__ */ jsx(CardHeader, { ...resolve(element) });
     case "CardLink":
-      return /* @__PURE__ */ jsx(CardLink, { ...resolve(element) });
+      return /* @__PURE__ */ jsx(CardLink, { target: "_blank", ...resolve(element) });
     case "Chart":
       return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
         ProteusChart,
@@ -97,10 +98,17 @@ const ProteusElement = ({
       return /* @__PURE__ */ jsx(Box, { asChild: true, ...resolve(element), children: /* @__PURE__ */ jsx(IconCalendar, {}) });
     case "Image":
       return /* @__PURE__ */ jsx(ProteusImage, { ...resolve(element) });
+    case "ImageCarousel":
+      return /* @__PURE__ */ jsx(
+        ProteusImageCarousel,
+        {
+          ...resolve(element)
+        }
+      );
     case "Input":
       return /* @__PURE__ */ jsx(ProteusInput, { ...resolve(element) });
     case "Link":
-      return /* @__PURE__ */ jsx(Link, { ...resolve(element) });
+      return /* @__PURE__ */ jsx(Link, { target: "_blank", ...resolve(element) });
     case "Map":
       return /* @__PURE__ */ jsx(
         ProteusMap,

package/dist/esm/proteus-image-carousel/ProteusImageCarousel-css.js

@@ -0,0 +1,12 @@
+import './../assets/src/proteus-image-carousel/ProteusImageCarousel.css.ts.vanilla-DV3O-VwO.css';
+import { recipe } from '@optiaxiom/react/css-runtime';
+
+var carousel = recipe({base:[{flexDirection:'column',gap:'12'},'ProteusImageCarousel__1t6qej70']});
+var content = recipe({base:[{display:'grid',overflow:'hidden',rounded:'lg'},'ProteusImageCarousel__1t6qej71']});
+var navButton = recipe({base:[{bg:'bg.default',display:'grid',mx:'16',placeItems:'center',rounded:'full',size:'md',transition:'opacity'},'ProteusImageCarousel__1t6qej75'],variants:{side:{left:[{mr:'32'},'ProteusImageCarousel__1t6qej76'],right:[{ml:'32'},'ProteusImageCarousel__1t6qej77']}}});
+var slide = recipe({base:[{objectFit:'cover',size:'full'},'ProteusImageCarousel__1t6qej74']});
+var slideContainer = recipe({base:[{size:'full'},'ProteusImageCarousel__1t6qej73']});
+var thumbnail = recipe({base:[{cursor:'pointer',flex:'none',objectFit:'cover',overflow:'hidden',rounded:'lg',size:'80',transition:'opacity'},'ProteusImageCarousel__1t6qej78'],variants:{selected:{false:'ProteusImageCarousel__1t6qej79',true:'ProteusImageCarousel__1t6qej7a'}}});
+var viewport = recipe({base:[{overflow:'hidden'},'ProteusImageCarousel__1t6qej72']});
+
+export { carousel, content, navButton, slide, slideContainer, thumbnail, viewport };

package/dist/esm/proteus-image-carousel/ProteusImageCarousel.js

@@ -0,0 +1,164 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Group, Box, Text, Menu, MenuTrigger, MenuContent, Button } from '@optiaxiom/react';
+import useEmblaCarousel from 'embla-carousel-react';
+import { useState, useCallback, useEffect } from 'react';
+import { IconAngleLeft } from '../icons/IconAngleLeft.js';
+import { IconAngleRight } from '../icons/IconAngleRight.js';
+import { downloadFile } from '../proteus-image/downloadFile.js';
+import { ProteusImage } from '../proteus-image/ProteusImage.js';
+import { carousel, content, viewport, slideContainer, slide, navButton, thumbnail } from './ProteusImageCarousel-css.js';
+
+function ProteusImageCarousel({
+  downloadAll,
+  images,
+  title
+}) {
+  const [emblaMainRef, emblaMainApi] = useEmblaCarousel({ loop: false });
+  const [emblaThumbsRef, emblaThumbsApi] = useEmblaCarousel({
+    containScroll: "keepSnaps",
+    dragFree: true
+  });
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+  const onSelect = useCallback(() => {
+    if (!emblaMainApi || !emblaThumbsApi)
+      return;
+    setSelectedIndex(emblaMainApi.selectedScrollSnap());
+    emblaThumbsApi.scrollTo(emblaMainApi.selectedScrollSnap());
+    setCanScrollPrev(emblaMainApi.canScrollPrev());
+    setCanScrollNext(emblaMainApi.canScrollNext());
+  }, [emblaMainApi, emblaThumbsApi]);
+  useEffect(() => {
+    if (!emblaMainApi)
+      return;
+    onSelect();
+    emblaMainApi.on("select", onSelect).on("reInit", onSelect);
+  }, [emblaMainApi, onSelect]);
+  if (!images.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    Group,
+    {
+      "aria-label": title ?? "Image carousel",
+      "aria-roledescription": "carousel",
+      onKeyDownCapture: (event) => {
+        if (event.target instanceof HTMLInputElement)
+          return;
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          emblaMainApi?.scrollPrev();
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault();
+          emblaMainApi?.scrollNext();
+        }
+      },
+      role: "region",
+      tabIndex: 0,
+      ...carousel(),
+      children: [
+        /* @__PURE__ */ jsxs(Box, { ...content(), children: [
+          /* @__PURE__ */ jsx(Box, { ...viewport(), ref: emblaMainRef, children: /* @__PURE__ */ jsx(Group, { ...slideContainer(), children: images.map((image, index) => /* @__PURE__ */ jsx(
+            ProteusImage,
+            {
+              alt: image.alt,
+              src: image.src,
+              ...slide()
+            },
+            index
+          )) }) }),
+          canScrollPrev && /* @__PURE__ */ jsx(
+            Box,
+            {
+              "aria-label": "Previous image",
+              asChild: true,
+              onClick: () => emblaMainApi?.scrollPrev(),
+              ...navButton({ side: "left" }),
+              children: /* @__PURE__ */ jsx("button", { children: /* @__PURE__ */ jsx(IconAngleLeft, {}) })
+            }
+          ),
+          canScrollNext && /* @__PURE__ */ jsx(
+            Box,
+            {
+              "aria-label": "Next image",
+              asChild: true,
+              onClick: () => emblaMainApi?.scrollNext(),
+              ...navButton({ side: "right" }),
+              children: /* @__PURE__ */ jsx("button", { children: /* @__PURE__ */ jsx(IconAngleRight, {}) })
+            }
+          )
+        ] }),
+        images.length > 1 && /* @__PURE__ */ jsx(Box, { overflow: "hidden", ref: emblaThumbsRef, children: /* @__PURE__ */ jsx(Group, { gap: "12", children: images.map((image, index) => /* @__PURE__ */ jsx(
+          Box,
+          {
+            onClick: () => emblaMainApi?.scrollTo(index),
+            ...thumbnail({
+              selected: index === selectedIndex
+            }),
+            children: /* @__PURE__ */ jsx(Box, { asChild: true, objectFit: "cover", size: "full", children: /* @__PURE__ */ jsx("img", { alt: image.alt, src: image.thumb ?? image.src }) })
+          },
+          index
+        )) }) }),
+        /* @__PURE__ */ jsxs(Group, { mt: "4", children: [
+          images.length > 1 && /* @__PURE__ */ jsxs(
+            Text,
+            {
+              bg: "bg.secondary",
+              color: "fg.default",
+              fontSize: "sm",
+              fontWeight: "500",
+              px: "8",
+              py: "2",
+              rounded: "full",
+              children: [
+                selectedIndex + 1,
+                " / ",
+                images.length
+              ]
+            }
+          ),
+          images.length > 1 ? /* @__PURE__ */ jsxs(
+            Menu,
+            {
+              options: [
+                {
+                  execute: () => downloadFile(images[selectedIndex].src),
+                  label: "Download this image"
+                },
+                {
+                  execute: () => {
+                    if (downloadAll) {
+                      window.open(downloadAll, "_blank");
+                    } else {
+                      for (const image of images) {
+                        void downloadFile(image.src);
+                      }
+                    }
+                  },
+                  label: "Download all images"
+                }
+              ],
+              children: [
+                /* @__PURE__ */ jsx(MenuTrigger, { appearance: "primary", ml: "auto", children: "Download" }),
+                /* @__PURE__ */ jsx(MenuContent, { align: "end" })
+              ]
+            }
+          ) : /* @__PURE__ */ jsx(
+            Button,
+            {
+              appearance: "primary",
+              ml: "auto",
+              onClick: () => downloadFile(images[0].src),
+              children: "Download"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+ProteusImageCarousel.displayName = "@optiaxiom/proteus/ProteusImageCarousel";
+
+export { ProteusImageCarousel };

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

@@ -1,9 +1,9 @@
-import './../assets/src/proteus-question/ProteusQuestion.css.ts.vanilla-nFTJBsO_.css';
+import './../assets/src/proteus-question/ProteusQuestion.css.ts.vanilla-0cQoAJ0-.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']});
+var question = recipe({base:[{flexDirection:'column',gap:'16'},'ProteusQuestion__8f590p0']});
 
 export { addon, choice, choiceGroup, question };

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

@@ -45,9 +45,9 @@ function ProteusQuestion({ questions }) {
         }
       );
       lastIndexRef.current = currentIndex;
-      const item = questionRef.current?.querySelector("[data-selected]") ?? questionRef.current?.querySelector("[tabindex]");
-      item?.focus();
     }
+    const item = questionRef.current?.querySelector("[data-selected]") ?? questionRef.current?.querySelector("[tabindex]");
+    item?.focus();
   }, [currentIndex]);
   const otherInputRef = useRef(null);
   const otherItemRef = useRef(null);
@@ -90,7 +90,7 @@ A: ${value2 || "[Not specified]"}`
       onKeyDown: (event) => {
         if (event.key === "Escape") {
           event.preventDefault();
-          if (valid) {
+          if (type === "multi_select" && valid) {
             onValueChange(null);
           } else {
             onSkip();
@@ -328,28 +328,28 @@ A: ${value2 || "[Not specified]"}`
                 value?.length || 0,
                 " selected"
               ] }),
-              (value?.length || 0) > 0 ? /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(
                 Button,
                 {
-                  appearance: "primary",
-                  "aria-label": isLast ? "Submit" : "Next",
-                  disabled: !valid,
-                  icon: /* @__PURE__ */ jsx(IconNorth, {}),
                   ml: "auto",
                   onClick: (event) => {
                     event.preventDefault();
-                    onSubmit();
-                  }
+                    onSkip();
+                  },
+                  children: "Skip"
                 }
-              ) : /* @__PURE__ */ jsx(
+              ),
+              /* @__PURE__ */ jsx(
                 Button,
                 {
-                  ml: "auto",
+                  appearance: valid ? "primary" : "default",
+                  "aria-label": isLast ? "Submit" : "Next",
+                  disabled: !valid,
+                  icon: /* @__PURE__ */ jsx(IconNorth, {}),
                   onClick: (event) => {
                     event.preventDefault();
-                    onSkip();
-                  },
-                  children: "Skip"
+                    onSubmit();
+                  }
                 }
               )
             ]