feat: add matrix section

src/components/ChoiceStepper/ChoiceStepper.css

@@ -0,0 +1,80 @@
+.choice-stepper {
+  width: 100%;
+  flex: 1 1 auto;
+
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+
+  border: var(--border-width) solid var(--border-hairline);
+  border-radius: var(--radius-sm);
+  background: transparent;
+}
+
+.choice-stepper__input {
+  flex: 1 1 auto;
+  min-width: 0;
+  width: 100%;
+
+  font-family: var(--font-ui);
+  font-size: 3cqh;
+  font-weight: var(--font-weight-semibold);
+  text-align: center;
+
+  color: var(--accent-brand);
+
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  padding: 0.5ch;
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.choice-stepper__input:focus {
+  outline: none;
+}
+
+.choice-stepper__arrows {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.5cqh;
+
+  height: 100%;
+  box-sizing: border-box;
+  padding: 1cqh;
+  padding-left: 0;
+}
+
+.choice-stepper__arrow-btn {
+  aspect-ratio: 1;
+  height: 4.5cqh;
+  min-height: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 0;
+  color: var(--accent-brand);
+
+  background: transparent;
+  border-radius: 1cqh;
+
+  cursor: pointer;
+}
+
+.choice-stepper__arrow-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.choice-stepper__arrow-btn svg {
+  width: 100%;
+  height: 100%;
+}

src/components/ChoiceStepper/ChoiceStepper.tsx

@@ -0,0 +1,90 @@
+import { useEffect, useState } from 'react';
+import Button from '../Button/Button';
+import { TriangleUpIcon, TriangleDownIcon } from '../../assets/icons/Triangle';
+import './ChoiceStepper.css';
+
+type ChoiceStepperProps<T> = {
+  value: T;
+  values: readonly T[];
+  formatLabel: (value: T) => string;
+  onChange: (value: T) => void;
+};
+
+function ChoiceStepper<T>({ value, values, formatLabel, onChange }: ChoiceStepperProps<T>) {
+  const index = values.indexOf(value);
+
+  const canUp = index === -1 || index < values.length - 1;
+  const canDown = index > 0;
+
+  const [text, setText] = useState(formatLabel(value));
+
+  useEffect(() => {
+    setText(formatLabel(value));
+  }, [value, formatLabel]);
+
+  const step = (direction: 1 | -1) => {
+    const currentIndex = index === -1 ? 0 : index;
+
+    const nextIndex = Math.min(values.length - 1, Math.max(0, currentIndex + direction));
+
+    if (nextIndex !== currentIndex) {
+      onChange(values[nextIndex]);
+    }
+  };
+
+  const commitText = () => {
+    const match = values.find(
+      (v) => formatLabel(v).trim().toLowerCase() === text.trim().toLowerCase()
+    );
+
+    if (match !== undefined) {
+      onChange(match);
+    } else {
+      setText(formatLabel(value));
+    }
+  };
+
+  return (
+    <div className="choice-stepper">
+      <input
+        className="choice-stepper__input"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onBlur={commitText}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.currentTarget.blur();
+          } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            step(1);
+          } else if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            step(-1);
+          }
+        }}
+      />
+
+      <div className="choice-stepper__arrows">
+        <Button
+          variant="toggle"
+          className="choice-stepper__arrow-btn"
+          onClick={() => step(1)}
+          disabled={!canUp}
+        >
+          <TriangleUpIcon />
+        </Button>
+
+        <Button
+          variant="toggle"
+          className="choice-stepper__arrow-btn"
+          onClick={() => step(-1)}
+          disabled={!canDown}
+        >
+          <TriangleDownIcon />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default ChoiceStepper;