@discuss-ds/ui 0.3.4 → 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;
@@ -835,6 +842,7 @@ interface ActivityStat extends Pick<StatCardProps, 'label' | 'value' | 'icon' |
 interface ActivitySection {
     id: string;
     heading: React.ReactNode;
+    /** Section text. May contain block elements (e.g. an `InlineEdit`), so it is rendered in a `div`. */
     body: React.ReactNode;
     /** Removable tags shown under the body. */
     tags?: 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;
@@ -835,6 +842,7 @@ interface ActivityStat extends Pick<StatCardProps, 'label' | 'value' | 'icon' |
 interface ActivitySection {
     id: string;
     heading: React.ReactNode;
+    /** Section text. May contain block elements (e.g. an `InlineEdit`), so it is rendered in a `div`. */
     body: React.ReactNode;
     /** Removable tags shown under the body. */
     tags?: string[];

package/dist/index.js

@@ -368,14 +368,14 @@ var RadioGroupItem = React9.forwardRef(({ className, ...props }, ref) => /* @__P
   {
     ref,
     className: cn(
-      "peer inline-flex size-5 shrink-0 items-center justify-center rounded-full border-2 border-input bg-surface transition-colors",
+      "peer inline-flex size-4 shrink-0 items-center justify-center rounded-full border-2 border-input bg-surface transition-colors",
       "disabled:cursor-not-allowed disabled:opacity-50",
       // Brand override: selected controls use `ring`, not `primary`/`accent`.
       "data-[state=checked]:border-ring",
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx9(RadioGroupPrimitive.Indicator, { className: "size-2.5 rounded-full bg-ring" })
+    children: /* @__PURE__ */ jsx9(RadioGroupPrimitive.Indicator, { className: "size-2 rounded-full bg-ring" })
   }
 ));
 RadioGroupItem.displayName = "RadioGroupItem";
@@ -2779,7 +2779,7 @@ QuestionNavItem.displayName = "QuestionNavItem";
 import * as React44 from "react";
 import { Check as Check4, DotsSixVertical as DotsSixVertical3, Plus as Plus4, Trash as Trash4 } from "@phosphor-icons/react";
 import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
-var optionClasses = "flex w-full max-w-150 cursor-pointer items-center gap-2 rounded-md border border-border bg-surface px-4 py-2 text-body-base text-surface-foreground transition-colors hover:border-input hover:bg-accent-soft hover:shadow-md has-[[data-state=checked]]:border-accent-foreground has-[[data-state=checked]]:hover:border-accent-foreground has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50";
+var optionClasses = "flex w-full max-w-150 cursor-pointer items-center gap-2 rounded-md border border-border bg-surface px-4 py-2 text-body-base text-surface-foreground transition-colors hover:bg-accent-soft hover:shadow-md has-[[data-state=checked]]:border-accent-foreground has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50";
 function QuestionOption(props) {
   const id = React44.useId();
   return /* @__PURE__ */ jsxs31("label", { htmlFor: id, className: cn(optionClasses, props.className), children: [
@@ -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 }) })
+        ]
+      }
+    )
   ] });
 }
 
@@ -3218,7 +3260,7 @@ var ActivityStructure = React51.forwardRef(
         /* @__PURE__ */ jsx52("div", { className: "grid grid-cols-2 gap-3", children: stats.map(({ id, ...stat }) => /* @__PURE__ */ jsx52(StatCard, { ...stat }, id)) }),
         sections?.map(({ id, heading, body, tags }) => /* @__PURE__ */ jsxs38("div", { className: "flex flex-col gap-2", children: [
           /* @__PURE__ */ jsx52("h4", { className: "text-heading-h4 text-surface-foreground", children: heading }),
-          /* @__PURE__ */ jsx52("p", { className: "text-body-base text-surface-foreground", children: body }),
+          /* @__PURE__ */ jsx52("div", { className: "text-body-base text-surface-foreground", children: body }),
           (tags?.length || onAddTag) && /* @__PURE__ */ jsxs38("div", { className: "flex flex-wrap items-center gap-2", children: [
             tags?.map((tag) => /* @__PURE__ */ jsx52(EditableTag, { type: "editable", onRemove: onRemoveTag && (() => onRemoveTag(id, tag)), children: tag }, tag)),
             onAddTag && /* @__PURE__ */ jsx52(EditableTag, { type: "add", onClick: () => onAddTag(id), children: addTagLabel })