@discuss-ds/ui 0.8.1 → 0.9.0

package/dist/index.d.cts

@@ -803,6 +803,10 @@ interface StimulusCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     onCaptionChange?: (caption: string) => void;
     /** Editor mode: placeholder for an empty caption. */
     captionPlaceholder?: string;
+    /** Editor mode: caption length limit. Also what the counter counts against. */
+    maxLength?: number;
+    /** Editor mode: shows the "n/2000 characters" counter under the caption (it counts live while typing). Defaults to `true`; needs `maxLength`. */
+    showCounter?: boolean;
     /** Shows the trash button. */
     onRemove?: () => void;
     /** Accessible name of the trash button. Defaults to "Remove stimulus". */

package/dist/index.d.ts

@@ -803,6 +803,10 @@ interface StimulusCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     onCaptionChange?: (caption: string) => void;
     /** Editor mode: placeholder for an empty caption. */
     captionPlaceholder?: string;
+    /** Editor mode: caption length limit. Also what the counter counts against. */
+    maxLength?: number;
+    /** Editor mode: shows the "n/2000 characters" counter under the caption (it counts live while typing). Defaults to `true`; needs `maxLength`. */
+    showCounter?: boolean;
     /** Shows the trash button. */
     onRemove?: () => void;
     /** Accessible name of the trash button. Defaults to "Remove stimulus". */

package/dist/index.js

@@ -3052,6 +3052,8 @@ RatingScale.displayName = "RatingScale";
 import * as React47 from "react";
 import { Image as ImageIcon2, ImageBroken, Trash as Trash5 } from "@phosphor-icons/react";
 import { jsx as jsx48, jsxs as jsxs34 } from "react/jsx-runtime";
+var MIN_THUMBNAIL = 80;
+var MAX_THUMBNAIL = 240;
 var StimulusCard = React47.forwardRef(
   ({
     className,
@@ -3063,6 +3065,8 @@ var StimulusCard = React47.forwardRef(
     caption,
     onCaptionChange,
     captionPlaceholder = "Click to write what the AI moderator says",
+    maxLength,
+    showCounter = true,
     onRemove,
     removeLabel = "Remove stimulus",
     ...props
@@ -3070,41 +3074,69 @@ var StimulusCard = React47.forwardRef(
     const [failedSrc, setFailedSrc] = React47.useState();
     const error = status === "error" || thumbnail !== void 0 && failedSrc === thumbnail;
     const showImage = thumbnail !== void 0 && !error;
+    const [draft, setDraft] = React47.useState(null);
+    const count = (draft ?? caption ?? "").length;
+    const textRef = React47.useRef(null);
+    const [thumbnailSize, setThumbnailSize] = React47.useState(MIN_THUMBNAIL);
+    React47.useEffect(() => {
+      const el = textRef.current;
+      if (!el || typeof ResizeObserver === "undefined") return;
+      const observer = new ResizeObserver(() => {
+        setThumbnailSize(Math.min(MAX_THUMBNAIL, Math.max(MIN_THUMBNAIL, Math.ceil(el.getBoundingClientRect().height))));
+      });
+      observer.observe(el);
+      return () => observer.disconnect();
+    }, []);
     return /* @__PURE__ */ jsxs34(
       "div",
       {
         ref,
         "data-status": error ? "error" : "default",
-        className: cn("flex w-full items-center gap-4 rounded-md border border-border p-0.5 pr-4", className),
+        className: cn("flex min-h-21.5 w-full items-center gap-4 rounded-md border border-border p-0.5 pr-4", className),
         ...props,
         children: [
           /* @__PURE__ */ jsxs34("div", { className: "flex min-w-0 flex-1 items-center gap-4", children: [
             /* @__PURE__ */ jsx48(
               "span",
               {
+                style: { width: thumbnailSize, height: thumbnailSize },
                 className: cn(
-                  "flex size-20 shrink-0 items-center justify-center overflow-hidden rounded-sm border",
+                  "relative flex shrink-0 items-center justify-center overflow-hidden rounded-sm border",
                   error ? "border-destructive-soft-border bg-destructive-soft bg-linear-to-r from-overlay-dark-5 to-overlay-dark-5 text-destructive" : "border-border bg-background bg-linear-to-r from-overlay-dark-5 to-overlay-dark-5 text-surface-foreground",
                   showImage && "bg-none"
                 ),
-                children: showImage ? /* @__PURE__ */ jsx48("img", { src: thumbnail, alt: thumbnailAlt, className: "size-full object-cover", onError: () => setFailedSrc(thumbnail) }) : error ? /* @__PURE__ */ jsx48(ImageBroken, { size: 24, "aria-hidden": true }) : icon ?? /* @__PURE__ */ jsx48(ImageIcon2, { size: 24, "aria-hidden": true })
+                children: showImage ? (
+                  // Out of flow, so the image's own size never sets the thumbnail's size.
+                  /* @__PURE__ */ jsx48("img", { src: thumbnail, alt: thumbnailAlt, className: "absolute inset-0 size-full object-cover", onError: () => setFailedSrc(thumbnail) })
+                ) : error ? /* @__PURE__ */ jsx48(ImageBroken, { size: 24, "aria-hidden": true }) : icon ?? /* @__PURE__ */ jsx48(ImageIcon2, { size: 24, "aria-hidden": true })
               }
             ),
-            /* @__PURE__ */ jsxs34("div", { className: "flex min-w-0 flex-1 flex-col gap-2 text-surface-foreground", children: [
+            /* @__PURE__ */ jsxs34("div", { ref: textRef, className: "flex min-w-0 flex-1 flex-col justify-center gap-2 py-2 text-surface-foreground", children: [
               /* @__PURE__ */ jsx48("p", { className: "w-full text-ui-label", children: label }),
               onCaptionChange ? /* @__PURE__ */ jsx48(
                 InlineEdit,
                 {
                   variant: "question",
                   multiline: true,
-                  className: "-mx-3 w-auto",
+                  className: "-mx-3 -mt-1 -mb-1.5 w-auto",
                   "aria-label": "Stimulus caption",
                   value: caption ?? "",
                   placeholder: captionPlaceholder,
+                  maxLength,
                   onValueChange: onCaptionChange,
+                  onDraftChange: setDraft,
+                  onEditingChange: (editing) => {
+                    if (!editing) setDraft(null);
+                  },
                   textClassName: "text-body-base"
                 }
-              ) : /* @__PURE__ */ jsx48("p", { className: "w-full text-body-base [word-break:break-word]", children: caption })
+              ) : /* @__PURE__ */ jsx48("p", { className: "w-full text-body-base [word-break:break-word]", children: caption }),
+              onCaptionChange && showCounter && maxLength !== void 0 && /* @__PURE__ */ jsxs34("p", { className: "text-ui-caption text-secondary-muted-foreground", children: [
+                count,
+                "/",
+                maxLength,
+                " characters"
+              ] })
             ] })
           ] }),
           onRemove && /* @__PURE__ */ jsx48(Button, { type: "button", variant: "destructive", size: "icon-sm", "aria-label": removeLabel, onClick: onRemove, children: /* @__PURE__ */ jsx48(Trash5, { size: 16, "aria-hidden": true }) })