@kwtv/components 0.1.0

package/src/astro/TextField.astro

@@ -0,0 +1,231 @@
+---
+import Icon from "./Icon.astro";
+
+/**
+ * Text field. Label above, hint below, error replacing the hint. Label, hint
+ * and error are wired to the input with aria-describedby; an invalid field also
+ * sets aria-invalid="true". Errors name the fix, not just the failure.
+ *
+ * Set `multiline` for a textarea (min 96 px, resizes vertically). Set `count`
+ * with `maxlength` to show an "n / max" counter.
+ */
+interface Props {
+  label?: string;
+  hint?: string;
+  error?: string;
+  value?: string;
+  placeholder?: string;
+  type?: string;
+  inputmode?: string;
+  name?: string;
+  id?: string;
+  disabled?: boolean;
+  required?: boolean;
+  valid?: boolean;
+  maxlength?: number;
+  /** Show an "n / max" counter. Needs maxlength. */
+  count?: boolean;
+  multiline?: boolean;
+  rows?: number;
+  class?: string;
+}
+
+const {
+  label,
+  hint,
+  error,
+  value = "",
+  placeholder,
+  type = "text",
+  inputmode,
+  name,
+  id,
+  disabled = false,
+  required = false,
+  valid = false,
+  maxlength,
+  count = false,
+  multiline = false,
+  rows = 3,
+  class: className,
+  ...rest
+} = Astro.props;
+
+const base = id ?? `field-${Math.random().toString(36).slice(2, 9)}`;
+const hintId = `${base}-hint`;
+const errorId = `${base}-error`;
+const describedby = error ? errorId : hint ? hintId : undefined;
+
+const inputClasses = [
+  "ui-input",
+  error && "is-invalid",
+  valid && !error && "is-valid",
+]
+  .filter(Boolean)
+  .join(" ");
+
+const charCount = count && maxlength ? `${String(value).length} / ${maxlength}` : null;
+---
+
+<label class={["ui-field", className].filter(Boolean).join(" ")}>
+  {label && (
+    <span class="ui-field__label">
+      {label}
+      {required && <span class="ui-field__req" aria-hidden="true">*</span>}
+    </span>
+  )}
+
+  {multiline ? (
+    <textarea
+      class={inputClasses}
+      id={base}
+      name={name}
+      rows={rows}
+      placeholder={placeholder}
+      disabled={disabled}
+      required={required}
+      maxlength={maxlength}
+      aria-invalid={error ? "true" : undefined}
+      aria-describedby={describedby}
+      {...rest}
+    >{value}</textarea>
+  ) : (
+    <input
+      class={inputClasses}
+      id={base}
+      name={name}
+      type={type}
+      inputmode={inputmode as any}
+      value={value}
+      placeholder={placeholder}
+      disabled={disabled}
+      required={required}
+      maxlength={maxlength}
+      aria-invalid={error ? "true" : undefined}
+      aria-describedby={describedby}
+      {...rest}
+    />
+  )}
+
+  {error ? (
+    <span class="ui-field__error" id={errorId}>
+      <span aria-hidden="true">
+        <Icon name="alert-circle" size={12} stroke={2.2} />
+      </span>
+      {error}
+    </span>
+  ) : (
+    hint && <span class="ui-field__hint" id={hintId}>{hint}</span>
+  )}
+
+  {charCount && <span class="ui-field__count">{charCount}</span>}
+</label>
+
+<style>
+  .ui-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1-5);
+    font-family: var(--font-sans);
+  }
+
+  .ui-field__label {
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+    color: var(--text);
+  }
+
+  .ui-field__req {
+    color: var(--danger);
+    margin-left: 2px;
+  }
+
+  .ui-input {
+    min-height: 40px;
+    padding: var(--space-2) var(--space-3);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    color: var(--text);
+    transition:
+      border-color var(--duration-fast) var(--ease-standard),
+      box-shadow var(--duration-fast) var(--ease-standard);
+  }
+
+  textarea.ui-input {
+    min-height: 96px;
+    resize: vertical;
+    line-height: var(--leading-sm);
+  }
+
+  .ui-input::placeholder {
+    color: var(--text-muted);
+  }
+
+  .ui-input:hover,
+  .ui-input.is-hover {
+    border-color: var(--border-strong);
+  }
+
+  .ui-input:focus-visible,
+  .ui-input.is-focus {
+    outline: 2px solid var(--focus);
+    outline-offset: 1px;
+    border-color: var(--border-strong);
+    box-shadow: 0 0 0 4px var(--focus-outer);
+  }
+
+  /* Invalid: 2 px danger border. */
+  .ui-input.is-invalid,
+  .ui-input[aria-invalid="true"] {
+    border-width: 2px;
+    border-color: var(--danger);
+  }
+
+  .ui-input.is-valid {
+    border-color: var(--success);
+  }
+
+  .ui-input:disabled,
+  .ui-input.is-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .ui-field__hint {
+    font-size: var(--text-xs);
+    line-height: var(--leading-xs);
+    color: var(--text-muted);
+  }
+
+  .ui-field__error {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    font-size: var(--text-xs);
+    line-height: var(--leading-xs);
+    color: var(--danger);
+  }
+
+  .ui-field__count {
+    align-self: flex-end;
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+    font-variant-numeric: tabular-nums;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-input {
+      transition: none;
+    }
+  }
+
+  /* Mobile inputs grow to 44 px under a touch scope. */
+  @media (max-width: 700px), (pointer: coarse) {
+    .ui-input {
+      min-height: 44px;
+    }
+  }
+</style>

package/src/astro/Totals.astro

@@ -0,0 +1,92 @@
+---
+/**
+ * Order totals. A set of rows, label left and value right, with a final total
+ * row set larger. Money is tabular so the columns line up.
+ *
+ * This renders only the rows. Wrap it in a raised Card for the cart summary.
+ * Pass `rows` and `total`, or use the default slot for full control.
+ */
+interface Row {
+  label: string;
+  value: string;
+  /** Render this row's value at full text strength. */
+  emphasis?: boolean;
+}
+
+interface Props {
+  rows?: Row[];
+  total?: { label: string; value: string };
+  class?: string;
+}
+
+const { rows, total, class: className, ...rest } = Astro.props;
+const hasSlot = Astro.slots.has("default");
+
+const classes = ["ui-totals", className].filter(Boolean).join(" ");
+---
+
+<div class={classes} {...rest}>
+  {hasSlot ? (
+    <slot />
+  ) : (
+    <>
+      {rows?.map((row) => (
+        <div class="ui-trow">
+          <span>{row.label}</span>
+          <b data-emphasis={row.emphasis ? "true" : undefined}>{row.value}</b>
+        </div>
+      ))}
+      {total && (
+        <div class="ui-trow ui-trow--total">
+          <span>{total.label}</span>
+          <b>{total.value}</b>
+        </div>
+      )}
+    </>
+  )}
+</div>
+
+<style>
+  .ui-totals {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2-5);
+  }
+
+  .ui-trow {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--space-4);
+    font-size: var(--text-sm);
+    color: var(--text-muted);
+  }
+
+  .ui-trow b {
+    font-weight: var(--weight-medium);
+    font-variant-numeric: tabular-nums;
+    text-align: right;
+    color: var(--text-muted);
+  }
+
+  .ui-trow b[data-emphasis] {
+    color: var(--text);
+  }
+
+  .ui-trow--total {
+    padding-top: var(--space-3);
+    border-top: 1px solid var(--border);
+    font-size: var(--text-lg);
+  }
+
+  .ui-trow--total span {
+    color: var(--text);
+    font-weight: var(--weight-semibold);
+  }
+
+  .ui-trow--total b {
+    font-size: var(--text-2xl);
+    font-weight: var(--weight-semibold);
+    color: var(--text);
+  }
+</style>

package/src/react/Drawer.css

@@ -0,0 +1,67 @@
+/* Mobile menu drawer. All values from the design-system tokens. */
+
+.ui-drawer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  padding: var(--space-4) var(--space-4) var(--space-6);
+  background: var(--bg);
+}
+
+.ui-drawer__group {
+  display: flex;
+  flex-direction: column;
+}
+
+.ui-drawer__grouptitle {
+  padding: 0 var(--space-3);
+  margin-bottom: 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);
+}
+
+/* Rows. No separators. At least 44 px. Soft fill on hover, press, current. */
+.ui-drawerlink {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+  min-height: 44px;
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  color: var(--text);
+  font-size: var(--text-base);
+  font-weight: var(--weight-medium);
+  text-decoration: none;
+}
+
+.ui-drawerlink small {
+  font-size: var(--text-xs);
+  font-weight: var(--weight-regular);
+  color: var(--text-muted);
+}
+
+.ui-drawerlink:hover,
+.ui-drawerlink.is-hover,
+.ui-drawerlink:active,
+.ui-drawerlink.is-active {
+  background: var(--surface-hover);
+}
+
+.ui-drawerlink.is-current {
+  background: var(--surface-hover);
+  font-weight: var(--weight-semibold);
+}
+
+.ui-drawerlink:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: -2px;
+}
+
+.ui-drawer__cta {
+  margin-top: var(--space-2);
+}

package/src/react/Drawer.tsx

@@ -0,0 +1,115 @@
+import {
+  useEffect,
+  useRef,
+  type ReactNode,
+} from "react";
+import "./Drawer.css";
+
+/**
+ * Mobile menu drawer. A full-width panel under the header, opened from the menu
+ * button. Rows sit on whitespace with no separators.
+ *
+ * Focus moves to the first row on open and returns to the trigger on close; the
+ * page behind does not scroll while the drawer is open. The trigger is the
+ * consumer's IconButton: flip its aria-expanded and swap its label between
+ * "Menu openen" and "Menu sluiten". Pass that trigger element through
+ * `triggerRef` so focus returns to it on close.
+ */
+
+export interface DrawerLink {
+  label: string;
+  href: string;
+  /** Secondary line under the label. */
+  note?: string;
+  current?: boolean;
+}
+
+export interface DrawerGroup {
+  /** Optional group heading. */
+  title?: string;
+  links: DrawerLink[];
+}
+
+export interface DrawerProps {
+  open: boolean;
+  onClose: () => void;
+  /** The menu button, so focus returns to it on close. */
+  triggerRef?: { current: HTMLElement | null };
+  /** Data-driven groups, or compose your own rows through children. */
+  groups?: DrawerGroup[];
+  children?: ReactNode;
+  /** Sticky call to action at the bottom, usually the cart button. */
+  cta?: ReactNode;
+  label?: string;
+}
+
+export default function Drawer({
+  open,
+  onClose,
+  triggerRef,
+  groups,
+  children,
+  cta,
+  label = "Menu",
+}: DrawerProps) {
+  const navRef = useRef<HTMLElement>(null);
+
+  // Focus the first row on open, return to the trigger on close.
+  useEffect(() => {
+    if (!open) return;
+    const first = navRef.current?.querySelector<HTMLElement>(".ui-drawerlink");
+    const raf = requestAnimationFrame(() => first?.focus());
+    return () => {
+      cancelAnimationFrame(raf);
+      triggerRef?.current?.focus?.();
+    };
+  }, [open, triggerRef]);
+
+  // Lock the page behind the drawer.
+  useEffect(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+
+  // Escape closes.
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: globalThis.KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <nav className="ui-drawer" aria-label={label} ref={navRef}>
+      {groups
+        ? groups.map((group, gi) => (
+            <div className="ui-drawer__group" key={gi}>
+              {group.title && (
+                <span className="ui-drawer__grouptitle">{group.title}</span>
+              )}
+              {group.links.map((link) => (
+                <a
+                  key={link.href + link.label}
+                  className={`ui-drawerlink${link.current ? " is-current" : ""}`}
+                  href={link.href}
+                  aria-current={link.current ? "page" : undefined}
+                >
+                  {link.label}
+                  {link.note && <small>{link.note}</small>}
+                </a>
+              ))}
+            </div>
+          ))
+        : children}
+      {cta && <div className="ui-drawer__cta">{cta}</div>}
+    </nav>
+  );
+}

package/src/react/Modal.css

@@ -0,0 +1,116 @@
+/* Modal and sheet. All values from the design-system tokens. */
+
+.ui-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-4);
+  /* A raw ramp step, not a role: the scrim must stay dark in both themes, and
+     every role that is dark in light mode goes light in dark mode. */
+  background: color-mix(in srgb, var(--charcoal-xdark) 52%, transparent);
+  animation: ui-scrim-in var(--duration-base) var(--ease-standard);
+}
+
+.ui-scrim--bottom {
+  align-items: flex-end;
+  padding: 0;
+}
+
+.ui-modal {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  width: 100%;
+  max-width: 440px;
+  padding: var(--space-6);
+  background: var(--surface);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-xl);
+  animation: ui-modal-in var(--duration-base) var(--ease-enter);
+}
+
+.ui-modal:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+
+.ui-modal__title {
+  font-size: var(--text-xl);
+  font-weight: var(--weight-semibold);
+  letter-spacing: var(--tracking-tight);
+  color: var(--text);
+}
+
+.ui-modal__body {
+  font-size: var(--text-sm);
+  line-height: var(--leading-sm);
+  color: var(--text-muted);
+}
+
+.ui-modal__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  margin-top: var(--space-2);
+}
+
+/* Bottom sheet. The safest choice sits at the bottom, under the thumb, so
+   stack the actions reversed there when the consumer orders them safe-first. */
+.ui-sheet {
+  max-width: none;
+  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+  padding-top: var(--space-3);
+  animation: ui-sheet-in var(--duration-slow) var(--ease-enter);
+}
+
+.ui-sheet__grip {
+  align-self: center;
+  width: 36px;
+  height: 4px;
+  margin-bottom: var(--space-2);
+  border-radius: var(--radius-full);
+  background: var(--border);
+}
+
+/* Force the sheet presentation on narrow screens for the plain dialog too. */
+@media (max-width: 700px) {
+  .ui-scrim:not(.ui-scrim--bottom) {
+    align-items: flex-end;
+    padding: 0;
+  }
+  .ui-modal:not(.ui-sheet) {
+    max-width: none;
+    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+    animation: ui-sheet-in var(--duration-slow) var(--ease-enter);
+  }
+}
+
+@keyframes ui-scrim-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes ui-modal-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+}
+
+@keyframes ui-sheet-in {
+  from {
+    transform: translateY(100%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-scrim,
+  .ui-modal,
+  .ui-sheet {
+    animation: none;
+  }
+}