@kwtv/components 0.1.0

package/src/react/Select.css

@@ -0,0 +1,183 @@
+/* Select. Trigger plus listbox. All values from the design-system tokens. */
+
+.ui-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1-5);
+}
+
+.ui-field__label {
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  color: var(--text);
+}
+
+.ui-field__req {
+  color: var(--danger);
+  margin-inline-start: var(--space-0-5);
+}
+
+.ui-field__hint {
+  font-size: var(--text-xs);
+  line-height: var(--leading-xs);
+  color: var(--text-muted);
+}
+
+.ui-field__error {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1-5);
+  font-size: var(--text-xs);
+  line-height: var(--leading-xs);
+  color: var(--danger);
+}
+
+.ui-select {
+  position: relative;
+  display: block;
+}
+
+.ui-select__btn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  width: 100%;
+  min-height: 40px;
+  padding: 0 var(--space-3);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text);
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  text-align: start;
+  cursor: pointer;
+  transition: border-color var(--duration-fast) var(--ease-standard);
+}
+
+.ui-select__btn:hover,
+.ui-select__btn.is-hover {
+  border-color: var(--border-strong);
+}
+
+.ui-select__btn:focus-visible,
+.ui-select__btn.is-focus {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px var(--focus-outer);
+}
+
+.ui-select__btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ui-select__value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-select__value--empty {
+  color: var(--text-muted);
+}
+
+.ui-select__chev {
+  display: inline-flex;
+  flex: none;
+  color: var(--text-muted);
+}
+
+/* Invalid: 2 px danger border. */
+.ui-select--invalid .ui-select__btn {
+  border-width: 2px;
+  border-color: var(--danger);
+  padding-inline: calc(var(--space-3) - 1px);
+}
+
+/* The list. 6 px offset, 272 px max height, 36 px rows. */
+.ui-select__list {
+  position: absolute;
+  top: calc(100% + var(--space-1-5));
+  left: 0;
+  right: 0;
+  z-index: var(--z-dropdown);
+  max-height: 272px;
+  overflow-y: auto;
+  padding: var(--space-1);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+}
+
+.ui-select__opt {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  width: 100%;
+  min-height: 36px;
+  padding: 0 var(--space-2);
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  text-align: start;
+  cursor: pointer;
+}
+
+.ui-select__opt:hover,
+.ui-select__opt.is-hover,
+.ui-select__opt.is-focus {
+  background: var(--surface-hover);
+}
+
+/* Selection marked by the tick and a weight change, not the fill alone. */
+.ui-select__opt[aria-selected="true"] {
+  font-weight: var(--weight-semibold);
+}
+
+.ui-select__tick {
+  display: inline-flex;
+  flex: none;
+  width: 13px;
+  color: var(--primary);
+  visibility: hidden;
+}
+
+.ui-select__opt[aria-selected="true"] .ui-select__tick {
+  visibility: visible;
+}
+
+.ui-select__opt.is-disabled,
+.ui-select__opt[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Group headings. Not selectable. */
+.ui-select__grouplabel {
+  display: block;
+  padding: var(--space-2) var(--space-2) var(--space-1);
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  font-weight: var(--weight-semibold);
+  letter-spacing: var(--tracking-wider);
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+@media (max-width: 700px), (pointer: coarse) {
+  .ui-select__opt {
+    min-height: 40px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-select__btn {
+    transition: none;
+  }
+}

package/src/react/Select.tsx

@@ -0,0 +1,389 @@
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type KeyboardEvent,
+} from "react";
+import "./Select.css";
+
+/**
+ * Select. A custom combobox built as a trigger plus a listbox, because the
+ * native popup cannot be styled and breaks the brand at the one moment the
+ * reader is choosing.
+ *
+ * Keyboard behaviour stays native: Enter or Space opens, arrows move the active
+ * option, Enter picks, Escape closes and returns focus to the trigger.
+ *
+ * Selection is marked by a tick and a weight change, never by the sage fill
+ * alone, so it reads without colour.
+ *
+ * Grouping: pass each option a `group` string. Options that share a group are
+ * rendered under one non-selectable `.ui-select__grouplabel`. Ungrouped options
+ * render first, in order. Disabled options stay in the list so the reader
+ * learns the group exists.
+ */
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+  /** Optional group heading. Options sharing a group render under one label. */
+  group?: string;
+}
+
+export interface SelectProps {
+  /** Visible label text. Rendered above the field and wired by aria-labelledby. */
+  label?: string;
+  /** Accessible name when there is no visible label. */
+  ariaLabel?: string;
+  options: SelectOption[];
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  invalid?: boolean;
+  /** Error text, shown under the field and wired by aria-describedby. */
+  error?: string;
+  disabled?: boolean;
+  required?: boolean;
+  /** Hint text under the field, when not invalid. */
+  hint?: string;
+  /** Start with the listbox open. Useful for a persistent first view or specimen. */
+  defaultOpen?: boolean;
+  className?: string;
+}
+
+interface FlatRow {
+  kind: "group" | "option";
+  label: string;
+  option?: SelectOption;
+  /** Index into the list of selectable options, for active tracking. */
+  optionIndex?: number;
+}
+
+function buildRows(options: SelectOption[]): {
+  rows: FlatRow[];
+  selectable: SelectOption[];
+} {
+  const ungrouped = options.filter((o) => !o.group);
+  const groups: string[] = [];
+  for (const o of options) {
+    if (o.group && !groups.includes(o.group)) groups.push(o.group);
+  }
+
+  const rows: FlatRow[] = [];
+  const selectable: SelectOption[] = [];
+
+  const pushOption = (o: SelectOption) => {
+    const optionIndex = selectable.length;
+    selectable.push(o);
+    rows.push({ kind: "option", label: o.label, option: o, optionIndex });
+  };
+
+  ungrouped.forEach(pushOption);
+  for (const g of groups) {
+    rows.push({ kind: "group", label: g });
+    options.filter((o) => o.group === g).forEach(pushOption);
+  }
+
+  return { rows, selectable };
+}
+
+export default function Select({
+  label,
+  ariaLabel,
+  options,
+  value,
+  onChange,
+  placeholder = "Kies een optie",
+  invalid = false,
+  error,
+  disabled = false,
+  required = false,
+  hint,
+  defaultOpen = false,
+  className,
+}: SelectProps) {
+  const [open, setOpen] = useState(defaultOpen);
+  const [activeIndex, setActiveIndex] = useState<number>(-1);
+
+  const rootRef = useRef<HTMLDivElement>(null);
+  const btnRef = useRef<HTMLButtonElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const reactId = useId();
+  const labelId = label ? `${reactId}-label` : undefined;
+  const errorId = error ? `${reactId}-error` : undefined;
+  const hintId = hint && !error ? `${reactId}-hint` : undefined;
+
+  const { rows, selectable } = buildRows(options);
+  const selected = selectable.find((o) => o.value === value);
+
+  const close = useCallback((returnFocus = true) => {
+    setOpen(false);
+    setActiveIndex(-1);
+    if (returnFocus) btnRef.current?.focus();
+  }, []);
+
+  const openList = useCallback(() => {
+    if (disabled) return;
+    setOpen(true);
+    const current = selectable.findIndex((o) => o.value === value && !o.disabled);
+    const firstEnabled = selectable.findIndex((o) => !o.disabled);
+    setActiveIndex(current >= 0 ? current : firstEnabled);
+  }, [disabled, selectable, value]);
+
+  const pick = useCallback(
+    (option: SelectOption) => {
+      if (option.disabled) return;
+      onChange?.(option.value);
+      close();
+    },
+    [onChange, close],
+  );
+
+  // Close on outside click.
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e: MouseEvent) => {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
+        setOpen(false);
+        setActiveIndex(-1);
+      }
+    };
+    document.addEventListener("mousedown", onDown);
+    return () => document.removeEventListener("mousedown", onDown);
+  }, [open]);
+
+  // Keep the active option scrolled into view.
+  useEffect(() => {
+    if (!open || activeIndex < 0 || !listRef.current) return;
+    const el = listRef.current.querySelector<HTMLElement>(
+      `[data-opt-index="${activeIndex}"]`,
+    );
+    el?.scrollIntoView({ block: "nearest" });
+  }, [open, activeIndex]);
+
+  const moveActive = (dir: 1 | -1) => {
+    if (selectable.length === 0) return;
+    let i = activeIndex;
+    for (let step = 0; step < selectable.length; step++) {
+      i = (i + dir + selectable.length) % selectable.length;
+      if (!selectable[i].disabled) {
+        setActiveIndex(i);
+        return;
+      }
+    }
+  };
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    switch (e.key) {
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (!open) {
+          openList();
+        } else if (activeIndex >= 0) {
+          pick(selectable[activeIndex]);
+        }
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        if (!open) openList();
+        else moveActive(1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (!open) openList();
+        else moveActive(-1);
+        break;
+      case "Escape":
+        if (open) {
+          e.preventDefault();
+          close();
+        }
+        break;
+      case "Tab":
+        if (open) {
+          setOpen(false);
+          setActiveIndex(-1);
+        }
+        break;
+      case "Home":
+        if (open) {
+          e.preventDefault();
+          const first = selectable.findIndex((o) => !o.disabled);
+          if (first >= 0) setActiveIndex(first);
+        }
+        break;
+      case "End":
+        if (open) {
+          e.preventDefault();
+          for (let i = selectable.length - 1; i >= 0; i--) {
+            if (!selectable[i].disabled) {
+              setActiveIndex(i);
+              break;
+            }
+          }
+        }
+        break;
+    }
+  };
+
+  const activeId =
+    open && activeIndex >= 0 ? `${reactId}-opt-${activeIndex}` : undefined;
+
+  const describedBy = [errorId, hintId].filter(Boolean).join(" ") || undefined;
+
+  const fieldClasses = ["ui-select", invalid && "ui-select--invalid", open && "is-open"]
+    .filter(Boolean)
+    .join(" ");
+
+  const selectControl = (
+    <div className={fieldClasses} ref={rootRef}>
+      <button
+        ref={btnRef}
+        type="button"
+        className="ui-select__btn"
+        role="combobox"
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-controls={`${reactId}-list`}
+        aria-activedescendant={activeId}
+        aria-labelledby={labelId}
+        aria-label={!labelId ? ariaLabel : undefined}
+        aria-invalid={invalid || undefined}
+        aria-describedby={describedBy}
+        aria-required={required || undefined}
+        disabled={disabled}
+        onClick={() => (open ? close(false) : openList())}
+        onKeyDown={onKeyDown}
+      >
+        <span
+          className={`ui-select__value${selected ? "" : " ui-select__value--empty"}`}
+        >
+          {selected ? selected.label : placeholder}
+        </span>
+        <span className="ui-select__chev" aria-hidden="true">
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M6 9l6 6 6-6" />
+          </svg>
+        </span>
+      </button>
+      {open && (
+        <div
+          ref={listRef}
+          id={`${reactId}-list`}
+          className="ui-select__list"
+          role="listbox"
+          aria-labelledby={labelId}
+          aria-label={!labelId ? ariaLabel : undefined}
+          tabIndex={-1}
+        >
+          {rows.map((row, i) =>
+            row.kind === "group" ? (
+              <span
+                key={`g-${i}`}
+                className="ui-select__grouplabel"
+                role="presentation"
+              >
+                {row.label}
+              </span>
+            ) : (
+              <button
+                key={`o-${row.option!.value}`}
+                id={`${reactId}-opt-${row.optionIndex}`}
+                data-opt-index={row.optionIndex}
+                type="button"
+                className={[
+                  "ui-select__opt",
+                  row.optionIndex === activeIndex && "is-focus",
+                  row.option!.disabled && "is-disabled",
+                ]
+                  .filter(Boolean)
+                  .join(" ")}
+                role="option"
+                aria-selected={row.option!.value === value}
+                aria-disabled={row.option!.disabled || undefined}
+                onClick={() => pick(row.option!)}
+                onMouseEnter={() =>
+                  !row.option!.disabled && setActiveIndex(row.optionIndex!)
+                }
+                tabIndex={-1}
+              >
+                <span className="ui-select__tick" aria-hidden="true">
+                  <svg
+                    width="13"
+                    height="13"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2.6"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="M5 13l4 4L19 7" />
+                  </svg>
+                </span>
+                {row.label}
+              </button>
+            ),
+          )}
+        </div>
+      )}
+    </div>
+  );
+
+  if (!label && !error && !hint) {
+    return <div className={className}>{selectControl}</div>;
+  }
+
+  return (
+    <label className={["ui-field", className].filter(Boolean).join(" ")}>
+      {label && (
+        <span className="ui-field__label" id={labelId}>
+          {label}
+          {required && (
+            <span className="ui-field__req" aria-hidden="true">
+              *
+            </span>
+          )}
+        </span>
+      )}
+      {selectControl}
+      {error ? (
+        <span className="ui-field__error" id={errorId}>
+          <span aria-hidden="true">
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2.2"
+              strokeLinecap="round"
+            >
+              <circle cx="12" cy="12" r="9" />
+              <path d="M12 8v4.5M12 16v.5" />
+            </svg>
+          </span>
+          {error}
+        </span>
+      ) : hint ? (
+        <span className="ui-field__hint" id={hintId}>
+          {hint}
+        </span>
+      ) : null}
+    </label>
+  );
+}

package/src/react/Toast.css

@@ -0,0 +1,140 @@
+/* Toast. All values from the design-system tokens. */
+
+.ui-toast-region {
+  position: fixed;
+  z-index: var(--z-toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: var(--space-4);
+  /* Shrink-wrap to the toasts instead of covering a whole corner, so the empty
+     area never overlays or blocks clicks on the page behind it. */
+  width: max-content;
+  max-width: 100vw;
+}
+
+.ui-toast-region--bottom-right {
+  right: 0;
+  bottom: 0;
+  align-items: flex-end;
+}
+
+.ui-toast-region--bottom-center {
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+/* A light card lifted off the page by its shadow. Dark text keeps every word
+   at full contrast; the tone shows in a coloured icon, not the surface. */
+.ui-toast {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+  width: 100%;
+  max-width: 380px;
+  padding: var(--space-4);
+  /* ivory-light, not ivory-base: ivory-base (#C9C2B1) is dark enough that the
+     undo link drops to 3.79 on it, the very contrast problem this redesign
+     fixes. ivory-light keeps a warm card distinct from the page and clears AA
+     for the link (5.65) and everything on it. */
+  background: var(--surface-hover);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
+  font-size: var(--text-sm);
+  line-height: var(--leading-sm);
+  color: var(--text);
+  pointer-events: auto;
+  animation: ui-toast-in var(--duration-base) var(--ease-enter);
+}
+
+.ui-toast__icon {
+  display: inline-flex;
+  flex: none;
+  margin-top: 1px;
+}
+
+/* One coloured icon per tone. The status roles already clear 4.5:1 on the
+   light surface, so the glyph carries the meaning without tinting the card. */
+.ui-toast--success .ui-toast__icon {
+  color: var(--success);
+}
+.ui-toast--danger .ui-toast__icon {
+  color: var(--danger);
+}
+.ui-toast--warning .ui-toast__icon {
+  color: var(--warning);
+}
+.ui-toast--info .ui-toast__icon {
+  color: var(--primary);
+}
+
+.ui-toast__msg {
+  flex: 1;
+}
+
+.ui-toast__action {
+  display: inline-block;
+  margin-top: var(--space-1);
+  background: none;
+  border: 0;
+  padding: 0;
+  font: inherit;
+  font-weight: var(--weight-semibold);
+  color: var(--link);
+  text-decoration: underline;
+  cursor: pointer;
+}
+.ui-toast__action:hover {
+  color: var(--link-hover);
+}
+.ui-toast__action:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+.ui-toast__x {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin: -2px -2px 0 0;
+  background: none;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  cursor: pointer;
+}
+.ui-toast__x:hover {
+  color: var(--text);
+  background: var(--surface-hover);
+}
+.ui-toast__x:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+
+/* The SVG in the close button is decorative. Let clicks and the cursor fall
+   through to the button, so its pointer cursor always shows. */
+.ui-toast__x svg,
+.ui-toast__action svg {
+  pointer-events: none;
+}
+
+@keyframes ui-toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-toast {
+    animation: none;
+  }
+}