@discuss-ds/ui 0.3.5 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @discuss-ds/ui
 
+## 0.4.1
+
+### Patch Changes
+
+- [#23](https://github.com/TamyresLucas/Discuss-UI-Storybook/pull/23) [`36eb4b6`](https://github.com/TamyresLucas/Discuss-UI-Storybook/commit/36eb4b6aada7d998f5715cd1b9a79aa873365823) Thanks [@TamyresLucas](https://github.com/TamyresLucas)! - `QuestionOptionEditor` with `kind`: the row now keeps its normal border at rest (0.4.0 removed it). Hovering or focusing the row still swaps the indicator for the drag handle and reveals the remove and add buttons, and lifts the row with a shadow, but the border colour does not change. The row is the same width in every state.
+
+## 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

package/dist/index.cjs

@@ -2978,22 +2978,63 @@ 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 ? (
+            // The border is always visible and does not change on hover; only the shadow lifts the row. The field being edited keeps the accent.
+            "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 }) })
+        ]
+      }
+    )
   ] });
 }