@explorer02/cfm-survey-sdk 0.2.2 → 0.2.4

package/templates/docs/templates/LikertMatrixScale.tsx

@@ -0,0 +1,414 @@
+import React, { useState } from 'react';
+import type { CfmMatrixQuestion, MatrixRowAnswers } from '@explorer02/cfm-survey-sdk';
+import { columnSubmitValue } from './surveyUiScaleUtils';
+import MatrixDropdown from './MatrixDropdown';
+
+type LikertMatrixScaleProps = {
+  question: CfmMatrixQuestion;
+  selectedValue?: MatrixRowAnswers;
+  onSelect: (value: MatrixRowAnswers) => void;
+};
+
+// ── SUB-COMPONENT: Dropdown Layout ──────────────────────────────────────────
+type DropdownLayoutProps = {
+  question: CfmMatrixQuestion;
+  selectedValue: MatrixRowAnswers;
+  isMultiple: boolean;
+  onCellSelect: (rowId: string, colValue: string | number | null | undefined) => void;
+  onSelectAll: (value: MatrixRowAnswers) => void;
+};
+
+function LikertMatrixDropdownLayout({
+  question,
+  selectedValue,
+  isMultiple,
+  onCellSelect,
+  onSelectAll
+}: DropdownLayoutProps) {
+  const { statementRows, scaleColumns } = question;
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+      {statementRows.map(row => (
+        <div key={row.id} style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          <div style={{ fontSize: '15px', fontWeight: 500, color: '#374151' }} dangerouslySetInnerHTML={{ __html: row.statementText }} />
+          <MatrixDropdown
+            options={scaleColumns}
+            value={isMultiple ? (Array.isArray(selectedValue[row.id]) ? selectedValue[row.id] as any[] : []) : selectedValue[row.id]}
+            multiple={isMultiple}
+            onChange={(vals) => {
+              if (isMultiple) {
+                const multiVals = Array.isArray(vals) ? vals : [];
+                if (multiVals.length === 0) {
+                  const next = { ...selectedValue };
+                  delete next[row.id];
+                  onSelectAll(next);
+                } else {
+                  onSelectAll({ ...selectedValue, [row.id]: multiVals });
+                }
+              } else if (!Array.isArray(vals)) {
+                onCellSelect(row.id, vals);
+              }
+            }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ── SUB-COMPONENT: Carousel Layout ──────────────────────────────────────────
+type CarouselLayoutProps = {
+  question: CfmMatrixQuestion;
+  selectedValue: MatrixRowAnswers;
+  isMultiple: boolean;
+  onCellSelect: (rowId: string, colValue: string | number | null | undefined) => void;
+  isSelected: (rowId: string, colValue: string | number | null) => boolean;
+};
+
+function LikertMatrixCarouselLayout({
+  question,
+  selectedValue,
+  isMultiple,
+  onCellSelect,
+  isSelected
+}: CarouselLayoutProps) {
+  const { scaleColumns, statementRows } = question;
+  const [activeCarouselIndex, setActiveCarouselIndex] = useState(0);
+
+  const row = statementRows[activeCarouselIndex];
+  if (!row) return null;
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', backgroundColor: '#fff', borderRadius: '12px', border: '1px solid #e5e5e5', padding: '32px', boxShadow: '0 4px 6px -1px rgba(0,0,0,0.05)', width: '100%', boxSizing: 'border-box' }}>
+      <h3 style={{ fontSize: '18px', fontWeight: 500, color: '#111827', marginBottom: '32px', textAlign: 'center' }} dangerouslySetInnerHTML={{ __html: row.statementText }} />
+      
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: '20px 32px', width: '100%', maxWidth: '800px', marginBottom: '40px', justifyContent: 'center' }}>
+        {scaleColumns.map(col => {
+          const submitValue = columnSubmitValue(col);
+          const selected = isSelected(row.id, submitValue);
+          const isNaSelected = isSelected(row.id, null);
+          const isDisabled = isNaSelected && submitValue !== null;
+
+          return (
+            <div 
+              key={col.id} 
+              onClick={() => {
+                if (isDisabled) return;
+                if (!isMultiple && selected) {
+                  onCellSelect(row.id, undefined);
+                } else {
+                  onCellSelect(row.id, submitValue);
+                }
+              }}
+              style={{ 
+                display: 'flex', alignItems: 'center', gap: '12px', 
+                cursor: isDisabled ? 'not-allowed' : 'pointer',
+                opacity: isDisabled ? 0.5 : 1,
+                transition: 'opacity 0.15s'
+            }}>
+              {isMultiple ? (
+                <div style={{
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  width: '18px', height: '18px', borderRadius: '4px',
+                  border: selected ? '2px solid #e20074' : '2px solid #d1d5db',
+                  backgroundColor: selected ? '#e20074' : '#fff',
+                  flexShrink: 0, transition: 'all 0.15s'
+                }}>
+                  {selected && (
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                      <polyline points="20 6 9 17 4 12" />
+                    </svg>
+                  )}
+                </div>
+              ) : (
+                <div style={{
+                  display: 'flex', width: '18px', height: '18px', flexShrink: 0,
+                  alignItems: 'center', justifyContent: 'center', borderRadius: '50%',
+                  border: selected ? '2px solid #e20074' : '1.5px solid #9ca3af',
+                  backgroundColor: '#fff',
+                }}>
+                  {selected && <div style={{ width: '10px', height: '10px', borderRadius: '50%', backgroundColor: '#e20074' }} />}
+                </div>
+              )}
+              <span style={{ fontSize: '15px', fontWeight: 400, color: '#374151', userSelect: 'none' }} dangerouslySetInnerHTML={{ __html: col.label }} />
+            </div>
+          );
+        })}
+      </div>
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+        <button 
+          type="button"
+          disabled={activeCarouselIndex === 0}
+          onClick={() => setActiveCarouselIndex(i => i - 1)}
+          style={{ padding: '8px', color: activeCarouselIndex === 0 ? '#d1d5db' : '#6b7280', cursor: activeCarouselIndex === 0 ? 'not-allowed' : 'pointer', background: 'none', border: 'none' }}
+        >
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
+        </button>
+        
+        <div style={{ display: 'flex', gap: '8px' }}>
+          {statementRows.map((_, i) => (
+            <div key={i} style={{ 
+              width: '10px', height: '10px', borderRadius: '50%', 
+              backgroundColor: i === activeCarouselIndex ? '#2563eb' : '#e5e7eb',
+              cursor: 'pointer', transition: 'background-color 0.2s'
+            }} onClick={() => setActiveCarouselIndex(i)} />
+          ))}
+        </div>
+
+        <button 
+          type="button"
+          disabled={activeCarouselIndex === statementRows.length - 1}
+          onClick={() => setActiveCarouselIndex(i => i + 1)}
+          style={{ padding: '8px', color: activeCarouselIndex === statementRows.length - 1 ? '#d1d5db' : '#6b7280', cursor: activeCarouselIndex === statementRows.length - 1 ? 'not-allowed' : 'pointer', background: 'none', border: 'none' }}
+        >
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ── SUB-COMPONENT: Standard Grid Layout ──────────────────────────────────────
+type GridLayoutProps = {
+  question: CfmMatrixQuestion;
+  isMultiple: boolean;
+  onCellSelect: (rowId: string, colValue: string | number | null | undefined) => void;
+  isSelected: (rowId: string, colValue: string | number | null) => boolean;
+};
+
+function LikertMatrixGridLayout({
+  question,
+  isMultiple,
+  onCellSelect,
+  isSelected
+}: GridLayoutProps) {
+  const { 
+    scaleColumns, statementRows, transposeTable = false, repeatColumnHeaders = false,
+    showColumnHeaders = true
+  } = question;
+
+  const gridRows = transposeTable ? scaleColumns : statementRows;
+  const gridCols = transposeTable ? statementRows : scaleColumns;
+  const isBipolar = question.statementLayout === 'bipolar';
+  const labels = question.scaleAnchorLabels;
+
+  const renderHeader = () => {
+    const numCols = gridCols.length;
+    const hasLabels = isBipolar && labels && labels.length > 0;
+    
+    if (!hasLabels && !showColumnHeaders) {
+      return null;
+    }
+    
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '16px' }}>
+        {hasLabels && (
+          <div style={{ display: 'flex', alignItems: 'flex-end', minHeight: '24px', marginBottom: '8px' }}>
+            <div style={{ flex: '0 0 25%', paddingRight: '16px', boxSizing: 'border-box' }} />
+            <div style={{ flex: 1, position: 'relative', height: '20px' }}>
+              {labels.map((lbl, idx) => {
+                let leftPos = '50%';
+                if (idx === 0) leftPos = `${100 / (2 * numCols)}%`;
+                else if (idx === labels.length - 1 && labels.length > 1) leftPos = `${100 - 100 / (2 * numCols)}%`;
+                else if (labels.length === 3 && idx === 1) leftPos = '50%';
+                
+                return (
+                  <div key={idx} style={{ 
+                    position: 'absolute', left: leftPos, transform: 'translateX(-50%)',
+                    bottom: 0, display: 'flex', justifyContent: 'center', whiteSpace: 'nowrap'
+                  }}>
+                    <span style={{ fontSize: '13px', fontWeight: 600, color: '#111827' }}>{lbl}</span>
+                  </div>
+                );
+              })}
+            </div>
+            <div style={{ flex: '0 0 25%', paddingLeft: '16px', boxSizing: 'border-box' }} />
+          </div>
+        )}
+        {showColumnHeaders && (
+          <div style={{ display: 'flex', alignItems: 'flex-end', minHeight: '24px' }}>
+            <div style={{ flex: isBipolar ? '0 0 25%' : '0 0 180px', paddingRight: '16px', boxSizing: 'border-box' }} />
+            <div style={{ flex: 1, display: 'flex' }}>
+              <div style={{ flex: 1, display: 'grid', gridTemplateColumns: `repeat(${gridCols.length}, 1fr)` }}>
+                {gridCols.map((col) => (
+                  <div key={col.id} style={{ display: 'flex', justifyContent: 'center', padding: '0 4px' }}>
+                    <span style={{ fontSize: '13px', fontWeight: 500, color: '#4b5563', textAlign: 'center', lineHeight: 1.2 }}
+                          dangerouslySetInnerHTML={{ __html: transposeTable ? ('statementText' in col ? col.statementText : col.label) : ('label' in col ? col.label : (col as { statementText: string }).statementText) }} />
+                  </div>
+                ))}
+              </div>
+            </div>
+            {isBipolar && <div style={{ flex: '0 0 25%', paddingLeft: '16px', boxSizing: 'border-box' }} />}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div style={{ width: '100%' }}>
+      {!repeatColumnHeaders && renderHeader()}
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: repeatColumnHeaders ? '24px' : '0' }}>
+        {gridRows.map((rowItem, rowIdx) => {
+          return (
+            <div key={rowItem.id} style={{ display: 'flex', flexDirection: 'column' }}>
+              {repeatColumnHeaders && renderHeader()}
+              <div style={{
+                display: 'flex', alignItems: 'center', borderRadius: '8px',
+                padding: '12px 0', backgroundColor: !repeatColumnHeaders && rowIdx % 2 === 0 ? 'rgba(249, 250, 251, 0.8)' : '#fff',
+                boxSizing: 'border-box'
+              }}>
+                <div style={{ flex: isBipolar ? '0 0 25%' : '0 0 180px', padding: '0 16px', boxSizing: 'border-box' }}>
+                  <span style={{ fontSize: '14px', fontWeight: 500, color: '#111827', lineHeight: 1.4, wordWrap: 'break-word', display: 'block' }}
+                    dangerouslySetInnerHTML={{ __html: transposeTable ? ('label' in rowItem ? rowItem.label : '') : ('statementText' in rowItem ? rowItem.statementText : '') }} />
+                </div>
+                
+                <div style={{ flex: 1, display: 'flex', boxSizing: 'border-box' }}>
+                  <div style={{ flex: 1, display: 'grid', alignItems: 'center', gridTemplateColumns: `repeat(${gridCols.length}, 1fr)` }}>
+                    {gridCols.map((colItem) => {
+                      const actualRowId = transposeTable ? colItem.id : rowItem.id;
+                      const actualColValue = transposeTable
+                        ? columnSubmitValue(rowItem as typeof scaleColumns[number])
+                        : columnSubmitValue(colItem as typeof scaleColumns[number]);
+                      const selected = isSelected(actualRowId, actualColValue);
+                      const isNaSelected = isSelected(actualRowId, null);
+                      const isDisabled = isNaSelected && actualColValue !== null;
+
+                      return (
+                        <div key={colItem.id} style={{ display: 'flex', justifyContent: 'center' }}>
+                          <label style={{ 
+                            cursor: isDisabled ? 'not-allowed' : 'pointer', 
+                            opacity: isDisabled ? 0.4 : 1,
+                            padding: '8px', display: 'flex', alignItems: 'center', justifyContent: 'center' 
+                          }}>
+                            <input 
+                              type={isMultiple ? "checkbox" : "radio"} 
+                              checked={selected}
+                              disabled={isDisabled}
+                              onClick={(e) => {
+                                if (!isMultiple && selected) {
+                                  onCellSelect(actualRowId, undefined);
+                                }
+                              }}
+                              onChange={(e) => {
+                                if (isMultiple || !selected) {
+                                  onCellSelect(actualRowId, actualColValue);
+                                }
+                              }}
+                              style={{ 
+                                width: '18px', height: '18px', accentColor: '#e20074', 
+                                cursor: isDisabled ? 'not-allowed' : 'pointer',
+                                ...(isMultiple ? { borderRadius: '4px' } : {})
+                              }} 
+                            />
+                          </label>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+
+                {isBipolar && (
+                  <div style={{ flex: '0 0 25%', padding: '0 16px', textAlign: 'right', boxSizing: 'border-box' }}>
+                    <span style={{ fontSize: '14px', fontWeight: 500, color: '#111827', lineHeight: 1.4, wordWrap: 'break-word', display: 'block' }}
+                      dangerouslySetInnerHTML={{ __html: transposeTable ? '' : ('oppositeStatementText' in rowItem ? rowItem.oppositeStatementText ?? '' : '') }} />
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+// ── ORCHESTRATOR COMPONENT: LikertMatrixScale ────────────────────────────────
+export function LikertMatrixScale({ question, selectedValue = {}, onSelect }: LikertMatrixScaleProps) {
+  const { gridLayout = 'standard', selectionMode = 'single' } = question;
+  const isMultiple = selectionMode === 'multiple';
+
+  const handleCellSelect = (rowId: string, colValue: string | number | null | undefined) => {
+    if (colValue === undefined) {
+      const next = { ...selectedValue };
+      delete next[rowId];
+      onSelect(next);
+      return;
+    }
+
+    if (isMultiple) {
+      const currentVals = Array.isArray(selectedValue[rowId]) ? selectedValue[rowId] as any[] : [];
+      if (colValue === null) {
+        if (currentVals.includes(null)) {
+          const next = { ...selectedValue };
+          delete next[rowId];
+          onSelect(next);
+        } else {
+          onSelect({ ...selectedValue, [rowId]: [null] });
+        }
+        return;
+      }
+
+      let nextVals = currentVals.filter(v => v !== null);
+      if (nextVals.includes(colValue)) {
+        nextVals = nextVals.filter(v => v !== colValue);
+      } else {
+        nextVals = [...nextVals, colValue];
+      }
+
+      if (nextVals.length === 0) {
+        const next = { ...selectedValue };
+        delete next[rowId];
+        onSelect(next);
+      } else {
+        onSelect({ ...selectedValue, [rowId]: nextVals });
+      }
+    } else {
+      onSelect({ ...selectedValue, [rowId]: colValue });
+    }
+  };
+
+  const isSelected = (rowId: string, colValue: string | number | null) => {
+    const val = selectedValue[rowId];
+    if (isMultiple) {
+      return Array.isArray(val) && val.includes(colValue);
+    }
+    return val === colValue;
+  };
+
+  if (gridLayout === 'dropdown') {
+    return (
+      <LikertMatrixDropdownLayout
+        question={question}
+        selectedValue={selectedValue}
+        isMultiple={isMultiple}
+        onCellSelect={handleCellSelect}
+        onSelectAll={onSelect}
+      />
+    );
+  }
+
+  if (gridLayout === 'carousel') {
+    return (
+      <LikertMatrixCarouselLayout
+        question={question}
+        selectedValue={selectedValue}
+        isMultiple={isMultiple}
+        onCellSelect={handleCellSelect}
+        isSelected={isSelected}
+      />
+    );
+  }
+
+  return (
+    <LikertMatrixGridLayout
+      question={question}
+      isMultiple={isMultiple}
+      onCellSelect={handleCellSelect}
+      isSelected={isSelected}
+    />
+  );
+}

package/templates/docs/templates/MatrixDropdown.tsx

@@ -0,0 +1,216 @@
+'use client';
+
+/**
+ * Portable MatrixDropdown template — copy to src/components/MatrixDropdown.tsx
+ * Import SDK from your package.json: @explorer02/cfm-survey-sdk or @repo/sdk
+ * UI spec: docs/03-ui-specs/shared/matrix-dropdown.md
+ */
+
+import React, { useState, useRef, useEffect } from 'react';
+import type { ScaleColumn } from '@explorer02/cfm-survey-sdk';
+import { matrixColumnStoredValue } from '@explorer02/cfm-survey-sdk';
+
+type MatrixDropdownProps = {
+  options: ScaleColumn[];
+  value: string | number | null | Array<string | number | null> | undefined;
+  onChange: (val: string | number | null | Array<string | number | null>) => void;
+  multiple?: boolean;
+  placeholder?: string;
+};
+
+export default function MatrixDropdown({
+  options,
+  value,
+  onChange,
+  multiple = false,
+  placeholder = 'Select Answer',
+}: MatrixDropdownProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const multiValues: Array<string | number | null> = Array.isArray(value) ? value : [];
+  const selectedOptionSingle = !multiple
+    ? options.find(o => matrixColumnStoredValue(o) === value)
+    : null;
+
+  const toggleMultiOption = (val: string | number | null) => {
+    if (val === null) {
+      if (multiValues.includes(null)) onChange([]);
+      else onChange([null]);
+      return;
+    }
+
+    let nextVals = multiValues.filter(v => v !== null);
+    if (nextVals.includes(val)) {
+      nextVals = nextVals.filter(v => v !== val);
+    } else {
+      nextVals = [...nextVals, val];
+    }
+    onChange(nextVals);
+  };
+
+  const removeMultiOption = (e: React.MouseEvent, val: string | number | null) => {
+    e.stopPropagation();
+    onChange(multiValues.filter(v => v !== val));
+  };
+
+  const renderTrigger = () => {
+    if (multiple) {
+      return (
+        <div
+          onClick={() => setIsOpen(!isOpen)}
+          style={{
+            display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '8px',
+            width: '100%', padding: '10px 14px', backgroundColor: '#fff',
+            border: `1px solid ${isOpen ? '#e20074' : '#d1d5db'}`, borderRadius: '8px',
+            cursor: 'pointer', transition: 'all 0.2s', minHeight: '44px',
+            boxShadow: isOpen ? '0 0 0 3px rgba(226, 0, 116, 0.1)' : '0 1px 2px rgba(0,0,0,0.05)',
+          }}
+        >
+          {multiValues.length === 0 ? (
+            <span style={{ fontSize: '15px', color: '#6b7280', flex: 1 }}>{placeholder}</span>
+          ) : (
+            multiValues.map(v => {
+              const opt = options.find(o => matrixColumnStoredValue(o) === v);
+              return (
+                <div
+                  key={String(v)}
+                  style={{
+                    display: 'flex', alignItems: 'center', gap: '6px',
+                    backgroundColor: '#f3f4f6', padding: '4px 8px', borderRadius: '4px',
+                    fontSize: '14px', color: '#374151', fontWeight: 500,
+                  }}
+                >
+                  <span dangerouslySetInnerHTML={{ __html: opt?.label || String(v) }} />
+                  <div
+                    onClick={e => removeMultiOption(e, v)}
+                    style={{
+                      display: 'flex', alignItems: 'center', justifyContent: 'center',
+                      width: '16px', height: '16px', borderRadius: '50%', backgroundColor: '#e5e7eb',
+                      color: '#6b7280', cursor: 'pointer', fontSize: '12px', fontWeight: 'bold',
+                    }}
+                  >
+                    &times;
+                  </div>
+                </div>
+              );
+            })
+          )}
+          <div style={{ marginLeft: 'auto' }}>
+            <svg
+              style={{ width: '18px', height: '18px', color: '#6b7280', transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }}
+              fill="none" stroke="currentColor" viewBox="0 0 24 24"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+            </svg>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div
+        onClick={() => setIsOpen(!isOpen)}
+        style={{
+          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+          width: '100%', padding: '14px 16px', backgroundColor: '#fff',
+          border: `1px solid ${isOpen ? '#e20074' : '#d1d5db'}`, borderRadius: '8px',
+          cursor: 'pointer', transition: 'all 0.2s',
+          boxShadow: isOpen ? '0 0 0 3px rgba(226, 0, 116, 0.1)' : '0 1px 2px rgba(0,0,0,0.05)',
+        }}
+      >
+        <span
+          style={{ fontSize: '15px', color: selectedOptionSingle ? '#111827' : '#6b7280', fontWeight: selectedOptionSingle ? 500 : 400 }}
+          dangerouslySetInnerHTML={{ __html: selectedOptionSingle ? selectedOptionSingle.label : placeholder }}
+        />
+        <svg
+          style={{ width: '18px', height: '18px', color: '#6b7280', transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }}
+          fill="none" stroke="currentColor" viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </div>
+    );
+  };
+
+  return (
+    <div ref={containerRef} style={{ position: 'relative', width: '100%', userSelect: 'none' }}>
+      {renderTrigger()}
+
+      {isOpen && (
+        <div style={{
+          position: 'absolute', top: 'calc(100% + 8px)', left: 0, right: 0,
+          backgroundColor: '#fff', border: '1px solid #e5e5e5', borderRadius: '8px',
+          boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)',
+          zIndex: 50, overflow: 'hidden', maxHeight: '280px', overflowY: 'auto',
+        }}>
+          {options.map(col => {
+            const submitValue = matrixColumnStoredValue(col);
+            const isSelected = multiple ? multiValues.includes(submitValue) : value === submitValue;
+            const isNaSelected = multiple && multiValues.includes(null);
+            const isDisabled = multiple && isNaSelected && submitValue !== null;
+
+            return (
+              <div
+                key={col.id}
+                style={{
+                  padding: '12px 16px', cursor: isDisabled ? 'not-allowed' : 'pointer', transition: 'background-color 0.15s',
+                  backgroundColor: isSelected ? '#fdf2f8' : '#fff',
+                  opacity: isDisabled ? 0.5 : 1,
+                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '12px',
+                }}
+                onMouseEnter={e => { if (!isDisabled) e.currentTarget.style.backgroundColor = '#fdf2f8'; }}
+                onMouseLeave={e => { if (!isDisabled) e.currentTarget.style.backgroundColor = isSelected ? '#fdf2f8' : '#fff'; }}
+                onClick={e => {
+                  e.preventDefault();
+                  if (isDisabled) return;
+                  if (multiple) {
+                    toggleMultiOption(submitValue);
+                  } else {
+                    onChange(submitValue);
+                    setIsOpen(false);
+                  }
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', gap: '12px', flex: 1 }}>
+                  {multiple && (
+                    <div style={{
+                      display: 'flex', alignItems: 'center', justifyContent: 'center',
+                      width: '18px', height: '18px', borderRadius: '4px',
+                      border: isSelected ? '2px solid #e20074' : '2px solid #d1d5db',
+                      backgroundColor: isSelected ? '#e20074' : '#fff',
+                      flexShrink: 0, transition: 'all 0.15s',
+                    }}>
+                      {isSelected && (
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                          <polyline points="20 6 9 17 4 12" />
+                        </svg>
+                      )}
+                    </div>
+                  )}
+                  <span style={{ fontSize: '15px', fontWeight: isSelected ? 600 : 400, color: isSelected ? '#e20074' : '#374151', userSelect: 'none' }}
+                        dangerouslySetInnerHTML={{ __html: col.label }} />
+                </div>
+                {!multiple && isSelected && (
+                  <svg style={{ width: '18px', height: '18px', color: '#e20074', flexShrink: 0 }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
+                  </svg>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/docs/templates/Question.tsx

@@ -103,6 +103,9 @@ export default function Question({
   return (
     <section id={question.id} className="space-y-4 rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
       <h2 className="text-lg font-medium leading-relaxed text-gray-900">
+        {question.questionNumber != null && (
+          <span className="mr-1 font-semibold">{question.questionNumber}.</span>
+        )}
         <span dangerouslySetInnerHTML={{ __html: displayQuestionText }} />
         {question.required && <span className="text-red-500 ml-1">*</span>}
       </h2>