@discuss-ds/ui 0.6.2 → 0.7.0

package/dist/index.d.cts

@@ -749,9 +749,14 @@ interface QuestionOptionEditorProps {
      * On hover or keyboard focus it becomes the editor: the shadow lifts, the drag handle replaces the indicator and the
      * buttons appear. The border colour does not change. Omit it for an always-on editor row.
      */
-    kind?: 'radio' | 'checkbox';
+    kind?: 'radio' | 'checkbox' | 'rank';
+    /**
+     * `kind="rank"` only: the position shown in the round number tag, as in `RankList`. For a ranking question the row keeps
+     * its drag handle and number at rest and, like the other kinds, becomes the editor on hover or keyboard focus.
+     */
+    rank?: number;
 }
-declare function QuestionOptionEditor({ label, onLabelChange, onRemove, onAdd, className, kind }: QuestionOptionEditorProps): React.JSX.Element;
+declare function QuestionOptionEditor({ label, onLabelChange, onRemove, onAdd, className, kind, rank }: QuestionOptionEditorProps): React.JSX.Element;
 
 interface RankItemData {
     id: string;

package/dist/index.d.ts

@@ -749,9 +749,14 @@ interface QuestionOptionEditorProps {
      * On hover or keyboard focus it becomes the editor: the shadow lifts, the drag handle replaces the indicator and the
      * buttons appear. The border colour does not change. Omit it for an always-on editor row.
      */
-    kind?: 'radio' | 'checkbox';
+    kind?: 'radio' | 'checkbox' | 'rank';
+    /**
+     * `kind="rank"` only: the position shown in the round number tag, as in `RankList`. For a ranking question the row keeps
+     * its drag handle and number at rest and, like the other kinds, becomes the editor on hover or keyboard focus.
+     */
+    rank?: number;
 }
-declare function QuestionOptionEditor({ label, onLabelChange, onRemove, onAdd, className, kind }: QuestionOptionEditorProps): React.JSX.Element;
+declare function QuestionOptionEditor({ label, onLabelChange, onRemove, onAdd, className, kind, rank }: QuestionOptionEditorProps): React.JSX.Element;
 
 interface RankItemData {
     id: string;

package/dist/index.js

@@ -2519,6 +2519,8 @@ var QuestionHeader = React40.forwardRef(
               ...dragHandleProps,
               className: cn(
                 "group/handle inline-flex h-6 items-center gap-1 rounded-sm px-2.5 text-ui-caption hover:pl-1",
+                // Inside a QuestionEditorCard the tag takes its hover look whenever the card is hovered.
+                "group-hover/editor:pl-1",
                 active ? "bg-accent-soft text-accent-soft-foreground" : "bg-secondary bg-linear-to-r from-overlay-dark-5 to-overlay-dark-5 text-surface-foreground",
                 dragHandleProps && "cursor-grab touch-none select-none focus-visible:pl-1",
                 dragHandleProps?.className
@@ -2529,7 +2531,7 @@ var QuestionHeader = React40.forwardRef(
                   {
                     size: 16,
                     "aria-hidden": true,
-                    className: "hidden shrink-0 group-hover/handle:block group-focus-visible/handle:block"
+                    className: "hidden shrink-0 group-hover/editor:block group-hover/handle:block group-focus-visible/handle:block"
                   }
                 ),
                 "Question ",
@@ -2788,7 +2790,7 @@ QuestionNavItem.displayName = "QuestionNavItem";
 // src/components/Question Types/QuestionOption.tsx
 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";
+import { Fragment as Fragment8, 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: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();
@@ -2842,7 +2844,7 @@ var QuestionOtherOption = React44.forwardRef(
   }
 );
 QuestionOtherOption.displayName = "QuestionOtherOption";
-function QuestionOptionEditor({ label, onLabelChange, onRemove, onAdd, className, kind }) {
+function QuestionOptionEditor({ label, onLabelChange, onRemove, onAdd, className, kind, rank }) {
   const reveal = kind !== void 0;
   return /* @__PURE__ */ jsxs31("div", { className: cn("group/option flex w-full items-center gap-2", className), children: [
     /* @__PURE__ */ jsxs31(
@@ -2856,7 +2858,17 @@ function QuestionOptionEditor({ label, onLabelChange, onRemove, onAdd, className
           ) : "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: [
+          kind === "rank" ? /* @__PURE__ */ jsxs31(Fragment8, { children: [
+            /* @__PURE__ */ jsx45(DotsSixVertical3, { size: 20, "aria-hidden": true, className: "shrink-0 text-surface-foreground" }),
+            /* @__PURE__ */ jsx45(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "flex size-6 shrink-0 items-center justify-center rounded-full border border-border bg-background bg-linear-to-r from-overlay-dark-5 to-overlay-dark-5 text-ui-caption text-surface-foreground",
+                children: rank
+              }
+            )
+          ] }) : reveal ? /* @__PURE__ */ jsxs31("span", { "aria-hidden": "true", className: "relative flex size-5 shrink-0 items-center justify-center", children: [
             /* @__PURE__ */ jsx45(
               "span",
               {
@@ -2905,7 +2917,7 @@ function QuestionOptionEditor({ label, onLabelChange, onRemove, onAdd, className
 // src/components/Question Types/RankList.tsx
 import * as React45 from "react";
 import { DotsSixVertical as DotsSixVertical4 } from "@phosphor-icons/react";
-import { Fragment as Fragment8, jsx as jsx46, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx46, jsxs as jsxs32 } from "react/jsx-runtime";
 function move(list, from, to) {
   if (from === to || to < 0 || to >= list.length) return list;
   const next = list.slice();
@@ -2932,7 +2944,7 @@ var RankList = React45.forwardRef(
       setAnnouncement(`Moved to position ${to + 1} of ${items.length}`);
       onItemsChange(next);
     };
-    return /* @__PURE__ */ jsxs32(Fragment8, { children: [
+    return /* @__PURE__ */ jsxs32(Fragment9, { children: [
       /* @__PURE__ */ jsx46("ol", { ref, className: cn("flex w-full max-w-150 flex-col gap-4", className), ...props, children: items.map((item, index) => /* @__PURE__ */ jsxs32(
         "li",
         {