@discuss-ds/ui 0.3.5 → 0.4.0

package/dist/index.d.cts

@@ -734,8 +734,15 @@ interface QuestionOptionEditorProps {
     /** Called by the add (+) button. */
     onAdd?: () => void;
     className?: string;
+    /**
+     * Answer type. When set the row is quiet at rest: no border, the radio or checkbox indicator in front of the label,
+     * and the remove/add buttons hidden but still taking their space, so the row is the same width in every state.
+     * On hover or keyboard focus it becomes the editor: border and shadow, the drag handle replaces the indicator and
+     * the buttons appear. Omit it for an always-on editor row.
+     */
+    kind?: 'radio' | 'checkbox';
 }
-declare function QuestionOptionEditor({ label, onLabelChange, onRemove, onAdd, className }: QuestionOptionEditorProps): React.JSX.Element;
+declare function QuestionOptionEditor({ label, onLabelChange, onRemove, onAdd, className, kind }: QuestionOptionEditorProps): React.JSX.Element;
 
 interface RankItemData {
     id: string;

package/dist/index.d.ts

@@ -734,8 +734,15 @@ interface QuestionOptionEditorProps {
     /** Called by the add (+) button. */
     onAdd?: () => void;
     className?: string;
+    /**
+     * Answer type. When set the row is quiet at rest: no border, the radio or checkbox indicator in front of the label,
+     * and the remove/add buttons hidden but still taking their space, so the row is the same width in every state.
+     * On hover or keyboard focus it becomes the editor: border and shadow, the drag handle replaces the indicator and
+     * the buttons appear. Omit it for an always-on editor row.
+     */
+    kind?: 'radio' | 'checkbox';
 }
-declare function QuestionOptionEditor({ label, onLabelChange, onRemove, onAdd, className }: QuestionOptionEditorProps): React.JSX.Element;
+declare function QuestionOptionEditor({ label, onLabelChange, onRemove, onAdd, className, kind }: QuestionOptionEditorProps): React.JSX.Element;
 
 interface RankItemData {
     id: string;

package/dist/index.js

@@ -2832,22 +2832,64 @@ var QuestionOtherOption = React44.forwardRef(
   }
 );
 QuestionOtherOption.displayName = "QuestionOtherOption";
-function QuestionOptionEditor({ label, onLabelChange, onRemove, onAdd, className }) {
-  return /* @__PURE__ */ jsxs31("div", { className: cn("flex w-full items-center gap-2", className), children: [
-    /* @__PURE__ */ jsxs31("div", { className: "flex h-11.5 min-w-0 flex-1 items-center gap-2 rounded-md border border-border bg-surface px-4 py-2 focus-within:border-input-accent hover:border-input hover:shadow-md", children: [
-      /* @__PURE__ */ jsx45(DotsSixVertical3, { size: 20, "aria-hidden": true, className: "shrink-0 text-surface-foreground" }),
-      /* @__PURE__ */ jsx45(
-        "input",
-        {
-          "aria-label": "Option label",
-          value: label,
-          onChange: (event) => onLabelChange?.(event.target.value),
-          className: "min-w-0 flex-1 bg-transparent text-body-base text-surface-foreground outline-none"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx45(Button, { type: "button", variant: "destructive", size: "icon-sm", "aria-label": "Remove option", onClick: onRemove, children: /* @__PURE__ */ jsx45(Trash4, { size: 16, "aria-hidden": true }) }),
-    /* @__PURE__ */ jsx45(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Add option", onClick: onAdd, children: /* @__PURE__ */ jsx45(Plus4, { size: 16, "aria-hidden": true }) })
+function QuestionOptionEditor({ label, onLabelChange, onRemove, onAdd, className, kind }) {
+  const reveal = kind !== void 0;
+  return /* @__PURE__ */ jsxs31("div", { className: cn("group/option flex w-full items-center gap-2", className), children: [
+    /* @__PURE__ */ jsxs31(
+      "div",
+      {
+        className: cn(
+          "flex h-11.5 min-w-0 flex-1 items-center gap-2 rounded-md border bg-surface px-4 py-2 focus-within:border-input-accent",
+          reveal ? [
+            // Hover or focus anywhere in the row shows the border; the field being edited keeps the accent.
+            "border-transparent group-hover/option:not-focus-within:border-border group-focus-within/option:not-focus-within:border-border",
+            "group-hover/option:shadow-md group-focus-within/option:shadow-md"
+          ] : "border-border hover:border-input hover:shadow-md"
+        ),
+        children: [
+          reveal ? /* @__PURE__ */ jsxs31("span", { "aria-hidden": "true", className: "relative flex size-5 shrink-0 items-center justify-center", children: [
+            /* @__PURE__ */ jsx45(
+              "span",
+              {
+                className: cn(
+                  "inline-flex size-4 border-2 border-input bg-surface group-hover/option:hidden group-focus-within/option:hidden",
+                  kind === "radio" ? "rounded-full" : "rounded-xxs"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx45(
+              DotsSixVertical3,
+              {
+                size: 20,
+                className: "hidden shrink-0 text-surface-foreground group-hover/option:block group-focus-within/option:block"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx45(DotsSixVertical3, { size: 20, "aria-hidden": true, className: "shrink-0 text-surface-foreground" }),
+          /* @__PURE__ */ jsx45(
+            "input",
+            {
+              "aria-label": "Option label",
+              value: label,
+              onChange: (event) => onLabelChange?.(event.target.value),
+              className: "min-w-0 flex-1 bg-transparent text-body-base text-surface-foreground outline-none"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs31(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-2",
+          reveal && "opacity-0 transition-opacity group-hover/option:opacity-100 group-focus-within/option:opacity-100"
+        ),
+        children: [
+          /* @__PURE__ */ jsx45(Button, { type: "button", variant: "destructive", size: "icon-sm", "aria-label": "Remove option", onClick: onRemove, children: /* @__PURE__ */ jsx45(Trash4, { size: 16, "aria-hidden": true }) }),
+          /* @__PURE__ */ jsx45(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Add option", onClick: onAdd, children: /* @__PURE__ */ jsx45(Plus4, { size: 16, "aria-hidden": true }) })
+        ]
+      }
+    )
   ] });
 }