@kwtv/components 0.1.0

package/src/react/Toast.tsx

@@ -0,0 +1,157 @@
+import { useEffect, useRef, type ReactNode } from "react";
+import "./Toast.css";
+
+/**
+ * Toast. A short confirmation for something that already happened, with an undo
+ * where undo is possible. Never used for errors that need a decision.
+ *
+ * Success toasts use role="status" so they do not interrupt, and auto-dismiss
+ * after 8 s. Failures use role="alert" and stay until dismissed. Anything with
+ * an undo link stays long enough to reach the link by keyboard, and the action
+ * is always also available on the page itself.
+ *
+ * Usage. Render a single <ToastRegion> near the app root and feed it an array
+ * of toasts you own in state, or drop a bare <Toast> wherever you manage its
+ * lifetime yourself.
+ */
+
+export interface ToastProps {
+  tone?: "success" | "danger" | "warning" | "info";
+  message: ReactNode;
+  /** The undo action. Presence keeps a success toast from auto-dismissing too fast. */
+  action?: { label: string; onClick: () => void };
+  onDismiss?: () => void;
+  /**
+   * Auto-dismiss delay in ms. Defaults to 5000 for every tone except danger,
+   * which stays until dismissed. Pass 0 to disable auto-dismiss for any tone,
+   * or any value to override.
+   */
+  duration?: number;
+  /** Accessible label for the close button. */
+  closeLabel?: string;
+}
+
+export function Toast({
+  tone = "success",
+  message,
+  action,
+  onDismiss,
+  duration,
+  closeLabel = "Melding sluiten",
+}: ToastProps) {
+  const timer = useRef<ReturnType<typeof setTimeout>>();
+
+  // Auto-dismiss after 5s by default. Danger is the exception: it may need the
+  // reader to act, so it stays until dismissed unless a duration is passed.
+  // An explicit duration always wins (0 disables auto-dismiss for any tone).
+  const delay = duration ?? (tone === "danger" ? 0 : 5000);
+  const autoDismiss = delay > 0;
+
+  useEffect(() => {
+    if (!autoDismiss || delay <= 0 || !onDismiss) return;
+    timer.current = setTimeout(onDismiss, delay);
+    return () => clearTimeout(timer.current);
+  }, [autoDismiss, delay, onDismiss]);
+
+  const pause = () => clearTimeout(timer.current);
+  const resume = () => {
+    if (autoDismiss && delay > 0 && onDismiss) {
+      timer.current = setTimeout(onDismiss, delay);
+    }
+  };
+
+  return (
+    <div
+      className={`ui-toast ui-toast--${tone}`}
+      role={tone === "danger" ? "alert" : "status"}
+      onMouseEnter={pause}
+      onMouseLeave={resume}
+      onFocus={pause}
+      onBlur={resume}
+    >
+      <span className="ui-toast__icon" aria-hidden="true">
+        {tone === "success" ? (
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M5 13l4 4L19 7" />
+          </svg>
+        ) : tone === "warning" ? (
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M12 4l8.5 15h-17L12 4zM12 10v4M12 16.5v.5" />
+          </svg>
+        ) : tone === "info" ? (
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+            <circle cx="12" cy="12" r="9" />
+            <path d="M12 11v5M12 8v.5" />
+          </svg>
+        ) : (
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+            <circle cx="12" cy="12" r="9" />
+            <path d="M12 8v4.5M12 16v.5" />
+          </svg>
+        )}
+      </span>
+      <span className="ui-toast__msg">
+        {message}
+        {action && (
+          <>
+            {" "}
+            <button
+              type="button"
+              className="ui-toast__action"
+              onClick={action.onClick}
+            >
+              {action.label}
+            </button>
+          </>
+        )}
+      </span>
+      {onDismiss && (
+        <button
+          type="button"
+          className="ui-toast__x"
+          aria-label={closeLabel}
+          onClick={onDismiss}
+        >
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.2"
+            strokeLinecap="round"
+          >
+            <path d="M7 7l10 10M17 7L7 17" />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+}
+
+export interface ToastItem extends ToastProps {
+  id: string | number;
+}
+
+export interface ToastRegionProps {
+  toasts: ToastItem[];
+  onDismiss: (id: ToastItem["id"]) => void;
+  /** Where the stack sits. Bottom right on desktop by convention. */
+  placement?: "bottom-right" | "bottom-center";
+}
+
+export function ToastRegion({
+  toasts,
+  onDismiss,
+  placement = "bottom-right",
+}: ToastRegionProps) {
+  return (
+    <div className={`ui-toast-region ui-toast-region--${placement}`}>
+      {toasts.map(({ id, ...rest }) => (
+        <Toast key={id} {...rest} onDismiss={() => onDismiss(id)} />
+      ))}
+    </div>
+  );
+}
+
+export default Toast;

package/src/styles/base.css

@@ -0,0 +1,39 @@
+/*
+ * Shared primitives for the React islands. Astro components carry their own
+ * scoped styles and do not need this file. Import it once in the app root when
+ * you use any React component from this package.
+ *
+ * Everything here reads from the design-system token variables. Import
+ * `@kwtv/tokens/tokens.css` before this file.
+ */
+
+/* Screen-reader-only, still announced. */
+.ui-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* The two-tone focus ring. An outer halo keeps the ring visible on mid-tone
+   fills where a single colour would disappear. SC 2.4.7 and 2.4.11. */
+.ui-focus-ring:focus-visible,
+.ui-focus-ring.ui-focus-ring--pinned {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px var(--focus-outer);
+}
+
+/* Touch-target floor. Labelled rows and small controls hold 32 px, icon-only
+   controls hold 44 px, the mobile primary action holds 48 px. The lever is the
+   label or the row, not the native control inside it. */
+@media (max-width: 700px), (pointer: coarse) {
+  .ui-touch :where(button, a, label, [role="button"]):not(.ui-touch--exempt) {
+    min-height: 32px;
+  }
+}

package/src/styles/controls.css

@@ -0,0 +1,211 @@
+/*
+ * Control styles as plain, importable CSS. The Astro components (Button.astro,
+ * IconButton.astro) carry these same rules scoped to themselves, so a pure-Astro
+ * app needs nothing here. React and Preact islands cannot see Astro's scoped
+ * styles, so any React code that renders the .ui-btn / .ui-iconbtn classes
+ * imports this sheet once:
+ *
+ *   import "@kwtv/components/styles/controls.css";
+ *
+ * Values match the scoped versions exactly. Import `@kwtv/tokens/tokens.css`
+ * before this file.
+ */
+
+/* ---- Button --------------------------------------------------------------- */
+.ui-btn {
+  --_pad-x: var(--space-5);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  position: relative;
+  min-height: 40px;
+  padding: var(--space-2) var(--_pad-x);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-semibold);
+  line-height: 1;
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background-color var(--duration-fast) var(--ease-standard),
+    border-color var(--duration-fast) var(--ease-standard),
+    transform var(--duration-fast) var(--ease-standard);
+}
+
+.ui-btn--sm {
+  min-height: 32px;
+  --_pad-x: var(--space-4);
+  font-size: var(--text-xs);
+}
+.ui-btn--md {
+  min-height: 40px;
+}
+.ui-btn--lg {
+  min-height: 48px;
+  --_pad-x: var(--space-6);
+  font-size: var(--text-base);
+}
+
+.ui-btn--block {
+  display: flex;
+  width: 100%;
+}
+
+.ui-btn--primary {
+  background: var(--primary);
+  color: var(--primary-fg);
+}
+.ui-btn--primary:hover,
+.ui-btn--primary.is-hover {
+  background: var(--primary-hover);
+}
+
+.ui-btn--secondary {
+  background: transparent;
+  border-color: var(--border-strong);
+  color: var(--text);
+}
+.ui-btn--secondary:hover,
+.ui-btn--secondary.is-hover {
+  background: var(--surface-hover);
+}
+
+.ui-btn--accent {
+  background: var(--accent);
+  color: var(--accent-fg);
+}
+.ui-btn--accent:hover,
+.ui-btn--accent.is-hover {
+  background: var(--accent-hover);
+}
+
+.ui-btn--ghost {
+  background: transparent;
+  color: var(--link);
+  padding-inline: var(--space-3);
+}
+.ui-btn--ghost:hover,
+.ui-btn--ghost.is-hover {
+  background: var(--surface-hover);
+  color: var(--link-hover);
+}
+
+.ui-btn:focus-visible,
+.ui-btn.is-focus {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px var(--focus-outer);
+}
+
+.ui-btn:active,
+.ui-btn.is-active {
+  transform: translateY(1px);
+}
+
+.ui-btn:disabled,
+.ui-btn[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.ui-btn.is-loading {
+  cursor: progress;
+}
+.ui-btn.is-loading .ui-btn__label,
+.ui-btn.is-loading .ui-btn__icon {
+  visibility: hidden;
+}
+.ui-btn__spinner {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: var(--radius-full);
+  animation: ui-btn-spin var(--duration-slower) linear infinite;
+}
+
+.ui-btn__icon {
+  display: inline-flex;
+  font-size: 1em;
+}
+
+@keyframes ui-btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ---- Icon button ---------------------------------------------------------- */
+.ui-iconbtn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  color: var(--text);
+  cursor: pointer;
+  transition:
+    background-color var(--duration-fast) var(--ease-standard),
+    border-color var(--duration-fast) var(--ease-standard);
+}
+.ui-iconbtn:hover,
+.ui-iconbtn.is-hover {
+  background: var(--surface-hover);
+  border-color: var(--border-strong);
+}
+.ui-iconbtn:focus-visible,
+.ui-iconbtn.is-focus {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px var(--focus-outer);
+}
+.ui-iconbtn:active,
+.ui-iconbtn.is-active {
+  background: var(--surface-hover);
+}
+.ui-iconbtn:disabled,
+.ui-iconbtn.is-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.ui-iconbtn__count {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 19px;
+  height: 19px;
+  padding: 0 var(--space-1);
+  background: var(--accent);
+  color: var(--accent-fg);
+  border-radius: var(--radius-full);
+  font-family: var(--font-sans);
+  font-size: var(--text-2xs);
+  font-weight: var(--weight-semibold);
+  line-height: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-btn {
+    transition: none;
+  }
+  .ui-btn__spinner {
+    animation-duration: 1200ms;
+  }
+  .ui-iconbtn {
+    transition: none;
+  }
+}

package/src/styles/motion.css

@@ -0,0 +1,238 @@
+/*
+ * Motion layer. Prefix `pl-`. The behaviour layer, kept apart from the
+ * components it attaches to: a card is .ui-card, the lift on it is .pl-lift.
+ *
+ * Set .pl-root on a screen root. That is where the accent tone and the motion
+ * kill switch live:
+ *   <section class="pl-root" data-tone="sage"> ...   (tone sets --play)
+ *   <section class="pl-root" data-motion="off"> ...  (pauses every animation)
+ *
+ * Every rule respects prefers-reduced-motion. Nothing here carries meaning on
+ * its own: the lift, the underline and the arrow all sit on elements that are
+ * already links or buttons.
+ *
+ * Import `@kwtv/tokens/tokens.css` before this file.
+ */
+
+/* The default tone is the accent. Rust and Clay used to be the two choices
+   here; Burgundy replaced both, so the alternative tone is Sage instead. */
+.pl-root {
+  --play: var(--accent);
+}
+.pl-root[data-tone="sage"] {
+  --play: var(--primary);
+}
+
+/* Hover lift. −5 px, shadow-lg, photo scales slightly. --tilt rotates, never
+   past 6deg, and never on text. */
+.pl-lift {
+  --tilt: 0deg;
+  transition:
+    transform var(--duration-base) var(--ease-standard),
+    box-shadow var(--duration-base) var(--ease-standard);
+}
+.pl-lift:hover,
+.pl-lift:focus-within {
+  transform: translateY(-5px) rotate(var(--tilt));
+  box-shadow: var(--shadow-lg);
+}
+.pl-lift :is(img, .ui-product__img) {
+  transition: transform var(--duration-base) var(--ease-standard);
+}
+.pl-lift:hover :is(img, .ui-product__img) {
+  transform: scale(1.04);
+}
+
+/* Drawn underline. 3 px, left to right, 200 ms. Sage in the hero. */
+.pl-ul {
+  position: relative;
+  text-decoration: none;
+  color: inherit;
+}
+.pl-ul::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -2px;
+  height: 3px;
+  background: var(--play);
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform var(--duration-base) var(--ease-standard);
+}
+.pl-ul:hover::after,
+.pl-ul:focus-visible::after {
+  transform: scaleX(1);
+}
+.pl-hero .pl-ul::after {
+  background: var(--sage-text);
+}
+
+/* Arrow nudge. +5 px on the parent's hover. */
+.pl-arrow {
+  display: inline-flex;
+  transition: transform var(--duration-fast) var(--ease-standard);
+}
+:hover > .pl-arrow,
+:focus-visible > .pl-arrow {
+  transform: translateX(5px);
+}
+
+/* Row nudge. +6 px, and a table row gets a 3 px edge. */
+.pl-row {
+  display: block;
+  transition: transform var(--duration-fast) var(--ease-standard);
+}
+.pl-row:hover,
+.pl-row:focus-visible {
+  transform: translateX(6px);
+}
+.pl-tr {
+  transition: box-shadow var(--duration-fast) var(--ease-standard);
+}
+.pl-tr:hover {
+  box-shadow: inset 3px 0 0 var(--play);
+}
+
+/* Entrance and press. Rise is staggered by animation-delay at the call site. */
+.pl-rise {
+  animation: pl-rise var(--duration-slow) var(--ease-enter) both;
+}
+@keyframes pl-rise {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.pl-press {
+  transition: transform var(--duration-fast) var(--ease-standard);
+}
+.pl-press:active {
+  transform: scale(0.97);
+}
+.pl-btn-bounce:hover {
+  animation: pl-wiggle var(--duration-slower) var(--ease-spring);
+}
+@keyframes pl-wiggle {
+  25% {
+    transform: rotate(-2deg);
+  }
+  75% {
+    transform: rotate(2deg);
+  }
+}
+
+/* Decorative loops for the composed home-page pieces. All aria-hidden at the
+   call site. */
+@keyframes pl-drift {
+  to {
+    background-position: 28px 28px;
+  }
+}
+@keyframes pl-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes pl-bob {
+  50% {
+    transform: translateY(4px);
+  }
+}
+@keyframes pl-marquee {
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+/* Horizontal category rail. The current item is marked with data-on. */
+.pl-chips {
+  display: flex;
+  gap: var(--space-2);
+  overflow-x: auto;
+  padding: var(--space-0-5, 2px) var(--space-5) var(--space-2);
+  scrollbar-width: none;
+}
+.pl-chips::-webkit-scrollbar {
+  display: none;
+}
+.pl-chip {
+  flex: none;
+  min-height: 44px;
+  padding: var(--space-2) var(--space-3-5, 14px);
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-full);
+  background: var(--surface);
+  color: var(--text);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  text-decoration: none;
+  white-space: nowrap;
+}
+.pl-chip:hover {
+  border-color: var(--border-strong);
+  color: var(--text);
+}
+.pl-chip:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+.pl-chip[data-on="1"] {
+  border-color: var(--sage-xdark);
+  background: var(--sage-xdark);
+  color: var(--ivory-light);
+}
+
+/* Mobile product rail. Consumers use a regular grid at wider viewports. */
+.pl-carousel {
+  display: flex;
+  gap: var(--space-3);
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  padding: 0 var(--space-5) var(--space-2);
+}
+.pl-carousel::-webkit-scrollbar {
+  display: none;
+}
+.pl-carousel > * {
+  flex: 0 0 86%;
+  scroll-snap-align: center;
+}
+.pl-carousel:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+
+/* The kill switch and the OS setting both stop every loop and transition in
+   the layer, so it degrades to the plain components. */
+.pl-root[data-motion="off"] *,
+.pl-root[data-motion="off"] *::after,
+.pl-root[data-motion="off"] *::before {
+  animation: none !important;
+  transition: none !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pl-root *,
+  .pl-root *::after,
+  .pl-root *::before {
+    animation: none !important;
+    transition: none !important;
+  }
+  .pl-lift:hover,
+  .pl-lift:focus-within {
+    transform: none;
+  }
+  .pl-ul::after {
+    transform: scaleX(1);
+  }
+}