@superbuilders/incept-renderer 0.1.7 → 0.1.11

package/dist/components/index.js

@@ -345,7 +345,7 @@ var choiceIndicatorVariants = cva(
     "data-[state=unchecked]:bg-background data-[state=unchecked]:border-2 data-[state=unchecked]:border-input data-[state=unchecked]:text-muted-foreground",
     "data-[state=checked]:border-2 data-[state=checked]:border-[var(--choice-complement)] data-[state=checked]:text-[var(--choice-foreground)]",
     "data-[filled=true]:data-[state=checked]:bg-[var(--choice-complement)]",
-    "data-[filled=true]:data-[state=checked]:shadow-[inset_0_0_0_2px_rgb(255_255_255)] dark:data-[filled=true]:data-[state=checked]:shadow-[inset_0_0_0_2px_rgb(255_255_255)]",
+    "data-[filled=true]:data-[state=checked]:shadow-[inset_0_0_0_3px_rgb(255_255_255)] dark:data-[filled=true]:data-[state=checked]:shadow-[inset_0_0_0_3px_hsl(var(--background))]",
     "focus-visible:ring-[var(--choice-complement)] focus-visible:ring-[3px]",
     "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
   ],
@@ -374,31 +374,38 @@ function ChoiceIndicator({
   letter,
   type = "radio",
   showLetter = true,
-  ...props
+  id,
+  value,
+  checked,
+  onCheckedChange,
+  disabled
 }) {
   const baseClassName = cn(choiceIndicatorVariants({ palette }), className);
   if (type === "checkbox") {
-    const checkboxProps = props;
     return /* @__PURE__ */ jsx(
       CheckboxPrimitive.Root,
       {
         "data-slot": "choice-indicator",
         "data-palette": palette,
-        "data-filled": !showLetter,
+        "data-filled": !showLetter ? "true" : void 0,
         className: baseClassName,
-        ...checkboxProps,
+        id,
+        checked,
+        onCheckedChange,
+        disabled,
         children: showLetter && /* @__PURE__ */ jsx("span", { className: "data-[state=unchecked]:block data-[state=checked]:hidden", children: letter })
       }
     );
   }
-  const radioProps = props;
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Item,
     {
       "data-slot": "choice-indicator",
       "data-palette": palette,
       className: baseClassName,
-      ...radioProps,
+      id,
+      value: value ?? "",
+      disabled,
       children: letter
     }
   );
@@ -615,18 +622,18 @@ function ChoiceInteractionRenderer({
     if (!isImagesOnly) return "space-y-2";
     switch (choiceCount) {
       case 4:
-        return "grid grid-cols-2 gap-4";
+        return "qti-image-grid-4";
       case 3:
-        return "grid grid-cols-3 gap-4";
+        return "qti-image-grid-3";
       case 2:
-        return "max-w-3xl mx-auto grid grid-cols-2 gap-6";
+        return "qti-image-grid-2";
       default:
-        return "grid grid-cols-2 md:grid-cols-3 gap-4";
+        return "qti-image-grid-many";
     }
   }, [isImagesOnly, choiceCount]);
   const imageCardClass = React3.useMemo(() => {
     if (!isImagesOnly) return "";
-    return choiceCount === 2 ? "justify-center text-center [&_img]:max-h-52 md:[&_img]:max-h-60 ![&_img]:w-auto ![&_img]:h-auto ![&_img]:max-w-full ![&_img]:block [&_img]:mx-auto min-h-[220px] px-8 py-8" : "justify-center text-center [&_img]:max-h-40 md:[&_img]:max-h-48 ![&_img]:w-auto ![&_img]:h-auto ![&_img]:max-w-full ![&_img]:block [&_img]:mx-auto min-h-[180px]";
+    return choiceCount === 2 ? "qti-image-card qti-image-card-large" : "qti-image-card";
   }, [isImagesOnly, choiceCount]);
   const handleSingleChoice = (value) => {
     if (!disabled && onAnswerSelect) {
@@ -1751,14 +1758,16 @@ function SortableItem({
       style,
       ...attributes,
       ...listeners,
+      "data-disabled": disabled,
+      "data-dragging": isDragging,
       className: cn(
-        "bg-background border rounded-lg shadow-sm touch-none select-none",
+        "qti-order-item",
         // Styling differs based on orientation
-        isHorizontal ? "px-4 py-2 min-w-[100px] flex items-center justify-center text-center" : "p-4 w-full flex items-center gap-3",
-        disabled ? "cursor-default opacity-90 bg-muted/50" : "cursor-grab active:cursor-grabbing hover:border-macaw/50 hover:shadow-md"
+        isHorizontal ? "min-w-[100px] flex items-center justify-center text-center" : "w-full flex items-center gap-3",
+        disabled ? "cursor-default" : "cursor-grab active:cursor-grabbing"
       ),
       children: [
-        !isHorizontal && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground shrink-0", children: /* @__PURE__ */ jsx(DragHandleIcon, {}) }),
+        !isHorizontal && /* @__PURE__ */ jsx("div", { className: "qti-order-item-handle shrink-0", children: /* @__PURE__ */ jsx(DragHandleIcon, {}) }),
         /* @__PURE__ */ jsx(HTMLContent, { html: contentHtml })
       ]
     }
@@ -1768,12 +1777,13 @@ function DragOverlayItem({ contentHtml, isHorizontal }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      "data-dragging": "true",
       className: cn(
-        "bg-background border-2 border-macaw rounded-lg shadow-xl cursor-grabbing z-50",
-        isHorizontal ? "px-4 py-2 min-w-[100px] flex items-center justify-center" : "p-4 w-full flex items-center gap-3"
+        "qti-order-item cursor-grabbing z-50",
+        isHorizontal ? "min-w-[100px] flex items-center justify-center" : "w-full flex items-center gap-3"
       ),
       children: [
-        !isHorizontal && /* @__PURE__ */ jsx("div", { className: "text-macaw shrink-0", children: /* @__PURE__ */ jsx(DragHandleIcon, {}) }),
+        !isHorizontal && /* @__PURE__ */ jsx("div", { className: "qti-order-item-handle shrink-0", children: /* @__PURE__ */ jsx(DragHandleIcon, {}) }),
         /* @__PURE__ */ jsx(HTMLContent, { html: contentHtml })
       ]
     }
@@ -1827,14 +1837,9 @@ function OrderInteraction({
       styles: { active: { opacity: "0.4" } }
     })
   };
-  const getContainerStyles = () => {
-    if (!hasSubmitted) {
-      return "bg-muted/30 border-transparent";
-    }
-    if (isCorrect) {
-      return "bg-owl/10 border-owl";
-    }
-    return "bg-cardinal/10 border-cardinal";
+  const getContainerCorrectness = () => {
+    if (!hasSubmitted) return void 0;
+    return isCorrect;
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
     interaction.promptHtml && /* @__PURE__ */ jsx(HTMLContent, { html: interaction.promptHtml }),
@@ -1849,11 +1854,8 @@ function OrderInteraction({
           /* @__PURE__ */ jsx(SortableContext, { items: items.map((i) => i.id), strategy, disabled: disabled || hasSubmitted, children: /* @__PURE__ */ jsx(
             "div",
             {
-              className: cn(
-                "rounded-xl p-4 transition-colors border-2",
-                isHorizontal ? "flex flex-wrap gap-3" : "flex flex-col gap-2",
-                getContainerStyles()
-              ),
+              "data-correct": getContainerCorrectness(),
+              className: cn("qti-order-container", isHorizontal ? "flex flex-wrap" : "flex flex-col"),
               children: items.map((item) => /* @__PURE__ */ jsx(
                 SortableItem,
                 {