@discuss-ds/ui 0.4.1 → 0.5.0

package/dist/index.d.cts

@@ -657,6 +657,8 @@ interface QuestionEditorCardProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     onPaste?: () => void;
     /** Optional strip under the card body, e.g. an "Inferred" assumption note. */
     note?: React.ReactNode;
+    /** Makes the "Question N" tag a drag handle for reordering. See `QuestionHeader`'s `dragHandleProps`. */
+    dragHandleProps?: React.ComponentPropsWithRef<'span'>;
 }
 declare const QuestionEditorCard: React.ForwardRefExoticComponent<QuestionEditorCardProps & React.RefAttributes<HTMLDivElement>>;
 
@@ -681,6 +683,13 @@ interface QuestionHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     active?: boolean;
     /** Editor mode: show the "n/2000 characters" counter. Defaults to `true`. */
     showCounter?: boolean;
+    /**
+     * Editor mode: turns the "Question N" tag into a drag handle. Spread onto the tag, so it takes anything a drag-and-drop
+     * library hands out (`ref`, `role`, `tabIndex`, pointer and keyboard listeners, aria attributes). The tag then shows a
+     * grab cursor, is focusable and reveals the grip icon on keyboard focus; it is labelled "Reorder question N" unless you
+     * pass your own `aria-label`. Omit it for the plain tag.
+     */
+    dragHandleProps?: React.ComponentPropsWithRef<'span'>;
 }
 declare const QuestionHeader: React.ForwardRefExoticComponent<QuestionHeaderProps & React.RefAttributes<HTMLDivElement>>;
 

package/dist/index.d.ts

@@ -657,6 +657,8 @@ interface QuestionEditorCardProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     onPaste?: () => void;
     /** Optional strip under the card body, e.g. an "Inferred" assumption note. */
     note?: React.ReactNode;
+    /** Makes the "Question N" tag a drag handle for reordering. See `QuestionHeader`'s `dragHandleProps`. */
+    dragHandleProps?: React.ComponentPropsWithRef<'span'>;
 }
 declare const QuestionEditorCard: React.ForwardRefExoticComponent<QuestionEditorCardProps & React.RefAttributes<HTMLDivElement>>;
 
@@ -681,6 +683,13 @@ interface QuestionHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     active?: boolean;
     /** Editor mode: show the "n/2000 characters" counter. Defaults to `true`. */
     showCounter?: boolean;
+    /**
+     * Editor mode: turns the "Question N" tag into a drag handle. Spread onto the tag, so it takes anything a drag-and-drop
+     * library hands out (`ref`, `role`, `tabIndex`, pointer and keyboard listeners, aria attributes). The tag then shows a
+     * grab cursor, is focusable and reveals the grip icon on keyboard focus; it is labelled "Reorder question N" unless you
+     * pass your own `aria-label`. Omit it for the plain tag.
+     */
+    dragHandleProps?: React.ComponentPropsWithRef<'span'>;
 }
 declare const QuestionHeader: React.ForwardRefExoticComponent<QuestionHeaderProps & React.RefAttributes<HTMLDivElement>>;
 

package/dist/index.js

@@ -2503,7 +2503,7 @@ import { DotsSixVertical } from "@phosphor-icons/react";
 import { jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
 var eyebrow = "text-ui-caption uppercase text-secondary-muted-foreground";
 var QuestionHeader = React40.forwardRef(
-  ({ className, number, title, required, error, onDismissError, editor, onTitleChange, actions, maxLength = 2e3, active, showCounter = true, ...props }, ref) => {
+  ({ className, number, title, required, error, onDismissError, editor, onTitleChange, actions, maxLength = 2e3, active, showCounter = true, dragHandleProps, ...props }, ref) => {
     const [draft, setDraft] = React40.useState(null);
     const label = String(number).padStart(2, "0");
     const showError = error !== void 0 && error !== false;
@@ -2515,12 +2515,23 @@ var QuestionHeader = React40.forwardRef(
           /* @__PURE__ */ jsxs28(
             "span",
             {
+              "aria-label": dragHandleProps ? `Reorder question ${number}` : void 0,
+              ...dragHandleProps,
               className: cn(
                 "group/handle inline-flex h-6 items-center gap-1 rounded-sm px-2.5 text-ui-caption hover: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"
+                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
               ),
               children: [
-                /* @__PURE__ */ jsx41(DotsSixVertical, { size: 16, "aria-hidden": true, className: "hidden shrink-0 group-hover/handle:block" }),
+                /* @__PURE__ */ jsx41(
+                  DotsSixVertical,
+                  {
+                    size: 16,
+                    "aria-hidden": true,
+                    className: "hidden shrink-0 group-hover/handle:block group-focus-visible/handle:block"
+                  }
+                ),
                 "Question ",
                 number
               ]
@@ -2590,6 +2601,7 @@ var QuestionEditorCard = React41.forwardRef(
     onAdd,
     onPaste,
     note,
+    dragHandleProps,
     children,
     ...props
   }, ref) => {
@@ -2620,6 +2632,7 @@ var QuestionEditorCard = React41.forwardRef(
                         onTitleChange,
                         active,
                         showCounter: !!active,
+                        dragHandleProps,
                         maxLength,
                         actions: actions ?? /* @__PURE__ */ jsxs29(Fragment7, { children: [
                           /* @__PURE__ */ jsx42(
@@ -3252,10 +3265,10 @@ var ActivityStructure = React51.forwardRef(
     "section",
     {
       ref,
-      className: cn("flex w-full max-w-96.5 flex-col gap-4 rounded-2xl border border-border bg-surface p-4", className),
+      className: cn("flex w-full max-w-96.5 flex-col gap-4 rounded-xl bg-surface p-4", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx52("h3", { className: "text-heading-h3 text-surface-foreground", children: title }),
+        /* @__PURE__ */ jsx52("h3", { className: "text-heading-h3 text-primary", children: title }),
         /* @__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 }),