@discuss-ds/ui 0.3.4 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @discuss-ds/ui
 
+## 0.4.0
+
+### Minor Changes
+
+- [#21](https://github.com/TamyresLucas/Discuss-UI-Storybook/pull/21) [`a7ebe02`](https://github.com/TamyresLucas/Discuss-UI-Storybook/commit/a7ebe02f16a57fd1e40115e9a949484f23e1103a) Thanks [@TamyresLucas](https://github.com/TamyresLucas)! - `QuestionOptionEditor` gets an optional `kind` (`radio` | `checkbox`). With it the row is quiet at rest (no border, the radio or checkbox indicator in front of the label) and turns into the editor on hover or keyboard focus: border and shadow, the drag handle replaces the indicator, and the remove and add buttons appear. The buttons keep their space while hidden, so the row is the same width in every state. Without `kind` the row is the same always-on editor as before.
+
+## 0.3.5
+
+### Patch Changes
+
+- [#19](https://github.com/TamyresLucas/Discuss-UI-Storybook/pull/19) [`1c64708`](https://github.com/TamyresLucas/Discuss-UI-Storybook/commit/1c647085c1f97bce822f81975a7e5a100b6250e1) Thanks [@TamyresLucas](https://github.com/TamyresLucas)! - `QuestionOption` (radio and checkbox answer cards): hovering now changes only the fill and shadow. The border changes only when the option is selected (accent). `RadioGroupItem` is now 16px (was 20px, matching the checkbox) with a proportionally smaller centre dot.
+  
+  `ActivityStructure`: section text is rendered in a `div` instead of a `p`, so it can hold block-level content such as an `InlineEdit` without invalid HTML nesting.
+
 ## 0.3.4
 
 ### Patch Changes

package/dist/index.cjs

@@ -526,14 +526,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__ */ (0, import_jsx_runtime9.jsx)(import_radix_ui7.RadioGroup.Indicator, { className: "size-2.5 rounded-full bg-ring" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_radix_ui7.RadioGroup.Indicator, { className: "size-2 rounded-full bg-ring" })
   }
 ));
 RadioGroupItem.displayName = "RadioGroupItem";
@@ -2925,7 +2925,7 @@ QuestionNavItem.displayName = "QuestionNavItem";
 var React44 = __toESM(require("react"), 1);
 var import_react23 = require("@phosphor-icons/react");
 var import_jsx_runtime45 = require("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__ */ (0, import_jsx_runtime45.jsxs)("label", { htmlFor: id, className: cn(optionClasses, props.className), children: [
@@ -2978,22 +2978,64 @@ var QuestionOtherOption = React44.forwardRef(
   }
 );
 QuestionOtherOption.displayName = "QuestionOtherOption";
-function QuestionOptionEditor({ label, onLabelChange, onRemove, onAdd, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: cn("flex w-full items-center gap-2", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("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__ */ (0, import_jsx_runtime45.jsx)(import_react23.DotsSixVertical, { size: 20, "aria-hidden": true, className: "shrink-0 text-surface-foreground" }),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-        "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__ */ (0, import_jsx_runtime45.jsx)(Button, { type: "button", variant: "destructive", size: "icon-sm", "aria-label": "Remove option", onClick: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react23.Trash, { size: 16, "aria-hidden": true }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Add option", onClick: onAdd, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react23.Plus, { size: 16, "aria-hidden": true }) })
+function QuestionOptionEditor({ label, onLabelChange, onRemove, onAdd, className, kind }) {
+  const reveal = kind !== void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: cn("group/option flex w-full items-center gap-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+      "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__ */ (0, import_jsx_runtime45.jsxs)("span", { "aria-hidden": "true", className: "relative flex size-5 shrink-0 items-center justify-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              "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__ */ (0, import_jsx_runtime45.jsx)(
+              import_react23.DotsSixVertical,
+              {
+                size: 20,
+                className: "hidden shrink-0 text-surface-foreground group-hover/option:block group-focus-within/option:block"
+              }
+            )
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react23.DotsSixVertical, { size: 20, "aria-hidden": true, className: "shrink-0 text-surface-foreground" }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            "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__ */ (0, import_jsx_runtime45.jsxs)(
+      "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__ */ (0, import_jsx_runtime45.jsx)(Button, { type: "button", variant: "destructive", size: "icon-sm", "aria-label": "Remove option", onClick: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react23.Trash, { size: 16, "aria-hidden": true }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Add option", onClick: onAdd, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react23.Plus, { size: 16, "aria-hidden": true }) })
+        ]
+      }
+    )
   ] });
 }
 
@@ -3364,7 +3406,7 @@ var ActivityStructure = React51.forwardRef(
         /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "grid grid-cols-2 gap-3", children: stats.map(({ id, ...stat }) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(StatCard, { ...stat }, id)) }),
         sections?.map(({ id, heading, body, tags }) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex flex-col gap-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("h4", { className: "text-heading-h4 text-surface-foreground", children: heading }),
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "text-body-base text-surface-foreground", children: body }),
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "text-body-base text-surface-foreground", children: body }),
           (tags?.length || onAddTag) && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
             tags?.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(EditableTag, { type: "editable", onRemove: onRemoveTag && (() => onRemoveTag(id, tag)), children: tag }, tag)),
             onAddTag && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(EditableTag, { type: "add", onClick: () => onAddTag(id), children: addTagLabel })