@discuss-ds/ui 0.3.5 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

package/dist/index.cjs

@@ -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 }) })
+        ]
+      }
+    )
   ] });
 }