@kwtv/components 0.1.0

package/README.md

@@ -0,0 +1,77 @@
+# @kwtv/components
+
+UI components for the club website and the webshop. Built on the `@kwtv/tokens`
+token package. Static components are written in Astro. The handful that hold
+state are React islands. The package ships source files for Astro to compile;
+there is no separate library build or consumer alias configuration.
+
+## What ships
+
+| Path | What it is |
+| --- | --- |
+| `src/astro/*.astro` | Static components. Scoped styles, no client JS. |
+| `src/react/*.tsx` | Interactive islands. Select, Modal, Toast, Drawer, QuantityStepper, NewsCarousel. |
+| `src/styles/base.css` | The shared primitives the React islands import: focus ring, touch targets, screen-reader helper. Astro components carry their own scoped styles. |
+| `src/styles/controls.css` | Button and icon-button styles for React islands that render the `ui-btn` / `ui-iconbtn` classes. |
+| `src/styles/motion.css` | The `pl-` motion layer: lift, underline, arrow and row nudges, rise, marquee, chip rail and swipe carousel. |
+
+## Install
+
+In an Astro project:
+
+```bash
+npm install @kwtv/components @kwtv/tokens
+```
+
+The package depends on `@kwtv/tokens` for the tokens. Import the token CSS once
+in your app root, then use the components.
+
+```astro
+---
+import "@kwtv/tokens/tokens.css";
+import Button from "@kwtv/components/astro/Button.astro";
+---
+<Button variant="primary" size="md">In de winkelwagen</Button>
+```
+
+To use React islands, add Astro's React integration if the app does not
+already have it:
+
+```bash
+npx astro add react
+```
+
+React and React DOM are optional peer dependencies because static Astro
+components do not need them. Astro itself is a required peer dependency.
+The package is verified against Astro 4 and React 18 in CI.
+
+Then import an island:
+
+```astro
+---
+import Select from "@kwtv/components/react/Select.tsx";
+---
+<Select client:load label="Groep" options={[{ value: "r1", label: "Recreatief 8–10 jaar" }]} />
+```
+
+The React islands need their shared stylesheets once in the app. Import
+`controls.css` too if any React code renders the `ui-btn` / `ui-iconbtn`
+classes (Astro cannot pass its scoped styles into a React island):
+
+```ts
+import "@kwtv/components/styles/base.css";
+import "@kwtv/components/styles/controls.css";
+```
+
+## Conventions
+
+- Use the `.astro`, `.tsx` and `.css` extensions shown in these examples.
+- Import `@kwtv/components/styles/motion.css` when using the motion utilities.
+- Class names keep the `ui-` prefix from the component library so markup reads
+  the same across both sites. Astro scopes them; the prefix is for readability
+  and for consumer overrides.
+- Colour, space, type, radius, shadow and motion all come from the token CSS
+  variables. Components never hardcode a hex value.
+- Status is never colour alone. Every status pairs an icon with a word.
+- Every interactive element carries a visible focus ring and meets the touch
+  target minimums from the token system.

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@kwtv/components",
+  "version": "0.1.0",
+  "license": "UNLICENSED",
+  "type": "module",
+  "description": "KWTV UI components for Astro, with React islands. Built on the KWTV design tokens.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/KWTV-willebroek/design-system.git",
+    "directory": "packages/components"
+  },
+  "homepage": "https://kwtv-explorer.vercel.app",
+  "publishConfig": { "access": "public" },
+  "files": ["src"],
+  "exports": {
+    "./astro/*.astro": "./src/astro/*.astro",
+    "./react/*.tsx": "./src/react/*.tsx",
+    "./styles/*.css": "./src/styles/*.css"
+  },
+  "peerDependencies": {
+    "astro": ">=4",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": { "optional": true },
+    "react-dom": { "optional": true }
+  },
+  "dependencies": {
+    "@kwtv/tokens": "^0.1.0"
+  }
+}

package/src/astro/Accordion.astro

@@ -0,0 +1,25 @@
+---
+/**
+ * Accordion wrapper. Holds AccordionItem children. Native <details> gives
+ * keyboard operation and expanded state for free.
+ */
+interface Props {
+  class?: string;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={["ui-accordion", className].filter(Boolean).join(" ")} {...rest}>
+  <slot />
+</div>
+
+<style>
+  .ui-accordion {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+  }
+</style>

package/src/astro/AccordionItem.astro

@@ -0,0 +1,77 @@
+---
+import Icon from "./Icon.astro";
+
+/**
+ * One row of an Accordion. Native <details>/<summary>. The chevron rotates but
+ * is aria-hidden; the summary text alone says what opens.
+ */
+interface Props {
+  summary: string;
+  open?: boolean;
+  class?: string;
+}
+
+const { summary, open = false, class: className, ...rest } = Astro.props;
+---
+
+<details class={["ui-accordion__item", className].filter(Boolean).join(" ")} open={open} {...rest}>
+  <summary class="ui-accordion__sum">
+    {summary}
+    <span class="ui-accordion__chev" aria-hidden="true">
+      <Icon name="chevron-down" size={14} stroke={2.2} />
+    </span>
+  </summary>
+  <div class="ui-accordion__body"><slot /></div>
+</details>
+
+<style>
+  .ui-accordion__item + .ui-accordion__item {
+    border-top: 1px solid var(--border);
+  }
+
+  .ui-accordion__sum {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    min-height: 44px;
+    padding: var(--space-2) var(--space-4);
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+    color: var(--text);
+    cursor: pointer;
+    list-style: none;
+  }
+  .ui-accordion__sum::-webkit-details-marker {
+    display: none;
+  }
+  .ui-accordion__sum:hover {
+    background: var(--surface-hover);
+  }
+  .ui-accordion__sum:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: -2px;
+  }
+
+  .ui-accordion__chev {
+    display: inline-flex;
+    color: var(--text-muted);
+    transition: transform var(--duration-fast) var(--ease-standard);
+  }
+  .ui-accordion__item[open] .ui-accordion__chev {
+    transform: rotate(180deg);
+  }
+
+  .ui-accordion__body {
+    padding: 0 var(--space-4) var(--space-4);
+    font-size: var(--text-sm);
+    line-height: var(--leading-sm);
+    color: var(--text-muted);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-accordion__chev {
+      transition: none;
+    }
+  }
+</style>

package/src/astro/ActiveFilterTags.astro

@@ -0,0 +1,65 @@
+---
+import Badge from "./Badge.astro";
+
+/**
+ * The active filters repeated as removable tags above the grid, so the reader
+ * can undo one at a time. Each tag is an outline Badge with a labelled × that
+ * names the filter it clears. A trailing clear-all action removes them at once.
+ *
+ * The row wraps. The consumer wires each removeLabel to the matching filter.
+ */
+interface Tag {
+  label: string;
+  /** aria-label for this tag's × button, e.g. "Filter maat 140 verwijderen". */
+  removeLabel: string;
+}
+
+interface Props {
+  tags: Tag[];
+  clearAllLabel?: string;
+  class?: string;
+}
+
+const { tags, clearAllLabel = "Alles wissen", class: className, ...rest } = Astro.props;
+
+const classes = ["ui-filtertags", className].filter(Boolean).join(" ");
+---
+
+<div class={classes} {...rest}>
+  {tags.map((tag) => (
+    <Badge tone="outline" removable removeLabel={tag.removeLabel}>{tag.label}</Badge>
+  ))}
+  {clearAllLabel && tags.length > 0 && (
+    <button class="ui-filtertags__clear" type="button">{clearAllLabel}</button>
+  )}
+</div>
+
+<style>
+  .ui-filtertags {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .ui-filtertags__clear {
+    padding: var(--space-1-5) var(--space-2);
+    background: transparent;
+    border: 0;
+    border-radius: var(--radius-sm);
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    font-weight: var(--weight-semibold);
+    color: var(--link);
+    cursor: pointer;
+  }
+  .ui-filtertags__clear:hover {
+    background: var(--surface-hover);
+    color: var(--link-hover);
+  }
+  .ui-filtertags__clear:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px var(--focus-outer);
+  }
+</style>

package/src/astro/Alert.astro

@@ -0,0 +1,93 @@
+---
+import Icon from "./Icon.astro";
+
+/**
+ * Alert. Inline message tied to what the reader is looking at. Never used for
+ * marketing. Only danger gets role="alert": it interrupts the screen reader,
+ * so it is reserved for something the reader must handle now. Info and success
+ * are read in document order.
+ *
+ * Every alert carries both an icon and a worded tone. Body keeps full strength.
+ */
+interface Props {
+  tone?: "info" | "success" | "warning" | "danger";
+  title?: string;
+  class?: string;
+}
+
+const { tone = "info", title, class: className, ...rest } = Astro.props;
+
+const icons: Record<string, { name: string; stroke: number }> = {
+  info: { name: "info", stroke: 1.8 },
+  success: { name: "check", stroke: 2.2 },
+  warning: { name: "alert-triangle", stroke: 1.9 },
+  danger: { name: "alert-circle", stroke: 2 },
+};
+const icon = icons[tone];
+
+const classes = ["ui-alert", `ui-alert--${tone}`, className]
+  .filter(Boolean)
+  .join(" ");
+---
+
+<div class={classes} role={tone === "danger" ? "alert" : undefined} {...rest}>
+  <span class="ui-alert__icon" aria-hidden="true">
+    <Icon name={icon.name as any} size={16} stroke={icon.stroke} />
+  </span>
+  <span class="ui-alert__body">
+    {title && <b class="ui-alert__title">{title}</b>}
+    <slot />
+  </span>
+</div>
+
+<style>
+  .ui-alert {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-2-5, 0.625rem);
+    padding: var(--space-3) var(--space-4);
+    border-left: 3px solid currentColor;
+    border-radius: var(--radius-sm);
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    line-height: var(--leading-sm);
+  }
+
+  .ui-alert__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    margin-top: 1px;
+  }
+
+  /* Body keeps full strength; the left rule carries the tone. */
+  .ui-alert__body {
+    color: var(--text);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .ui-alert__title {
+    font-weight: var(--weight-semibold);
+  }
+
+  .ui-alert--info {
+    background: var(--surface-accent);
+    color: var(--surface-accent-fg, var(--primary));
+  }
+
+  .ui-alert--success {
+    background: var(--success-bg);
+    color: var(--success);
+  }
+
+  .ui-alert--warning {
+    background: var(--warning-bg);
+    color: var(--warning);
+  }
+
+  .ui-alert--danger {
+    background: var(--danger-bg);
+    color: var(--danger);
+  }
+</style>

package/src/astro/Badge.astro

@@ -0,0 +1,138 @@
+---
+import Icon from "./Icon.astro";
+
+/**
+ * Badge. Status and stock. Each status tone carries an icon so the meaning
+ * survives without colour. The outline variant doubles as a removable filter
+ * tag: when `removable`, the × is a real <button> labelled with the filter it
+ * clears. A badge is not a control; only the × is.
+ *
+ * Stock badges should repeat the exact number in text rather than only shading
+ * the pill.
+ */
+interface Props {
+  tone?: "neutral" | "success" | "warning" | "danger" | "outline";
+  removable?: boolean;
+  /** aria-label for the × button when removable. Name the filter it clears. */
+  removeLabel?: string;
+  class?: string;
+}
+
+const {
+  tone = "neutral",
+  removable = false,
+  removeLabel = "Verwijderen",
+  class: className,
+  ...rest
+} = Astro.props;
+
+const icons: Record<string, string> = {
+  success: "check",
+  warning: "alert-triangle",
+  danger: "close",
+};
+const icon = icons[tone];
+
+const classes = [
+  "ui-badge",
+  `ui-badge--${tone}`,
+  removable && "ui-badge--removable",
+  className,
+]
+  .filter(Boolean)
+  .join(" ");
+---
+
+<span class={classes} {...rest}>
+  {icon && (
+    <span class="ui-badge__icon" aria-hidden="true">
+      <Icon name={icon as any} size={12} stroke={2.2} />
+    </span>
+  )}
+  <slot />
+  {removable && (
+    <button class="ui-badge__x" type="button" aria-label={removeLabel}>
+      <Icon name="close" size={12} stroke={2.2} />
+    </button>
+  )}
+</span>
+
+<style>
+  .ui-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1-5);
+    min-height: 24px;
+    padding: 0 var(--space-2);
+    border: 1px solid transparent;
+    border-radius: var(--radius-full);
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    font-weight: var(--weight-medium);
+    line-height: 1;
+    white-space: nowrap;
+  }
+
+  .ui-badge__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+
+  .ui-badge--neutral {
+    background: var(--surface-accent);
+    color: var(--surface-accent-fg, var(--text));
+  }
+
+  .ui-badge--success {
+    background: var(--success-bg);
+    color: var(--success);
+  }
+
+  .ui-badge--warning {
+    background: var(--warning-bg);
+    color: var(--warning);
+  }
+
+  .ui-badge--danger {
+    background: var(--danger-bg);
+    color: var(--danger);
+  }
+
+  /* Outline keeps the strong border and full-strength text, so it reads
+     without relying on a fill. */
+  .ui-badge--outline {
+    background: transparent;
+    border: 1px solid var(--border-strong);
+    color: var(--text);
+  }
+
+  .ui-badge--removable {
+    padding-right: var(--space-1);
+  }
+
+  /* Small × target grows with padding plus an equal negative margin, so the
+     hit area grows without moving the layout. */
+  .ui-badge__x {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-2);
+    margin: calc(-1 * var(--space-2));
+    margin-left: 0;
+    background: transparent;
+    border: 0;
+    border-radius: var(--radius-sm);
+    color: inherit;
+    cursor: pointer;
+  }
+
+  .ui-badge__x:hover {
+    color: var(--danger);
+  }
+
+  .ui-badge__x:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px var(--focus-outer);
+  }
+</style>

package/src/astro/Band.astro

@@ -0,0 +1,83 @@
+---
+/**
+ * Accent band. A full-width sage section, for breaking up a long page.
+ *
+ * Sage is a surface colour, not a text colour, so the band flips every text
+ * role inside it to the accent foreground rather than leaving them on --text.
+ * That is the whole reason this is a component and not a background utility:
+ * putting body text on sage without the flip fails AA.
+ *
+ * Cards placed on the band fall back to the paper surface, so they still read
+ * as cards rather than dissolving into the band behind them.
+ */
+interface Props {
+  /** Renders as <section> by default. Use "div" when the band is not a
+   *  standalone region of the page. */
+  as?: "section" | "div" | "aside";
+  class?: string;
+}
+
+const { as: Tag = "section", class: className, ...rest } = Astro.props;
+
+const classes = ["ui-band", className].filter(Boolean).join(" ");
+---
+
+<Tag class={classes} {...rest}>
+  <slot />
+</Tag>
+
+<style>
+  .ui-band {
+    background: var(--surface-accent);
+    border-top: 1px solid var(--border-strong);
+    color: var(--surface-accent-fg);
+  }
+
+  /* Every text role inside the band moves to the accent foreground. Sage is a
+     mid tone: --text clears it, but --text-muted and --link do not. */
+  .ui-band :global(p),
+  .ui-band :global(span),
+  .ui-band :global(a),
+  .ui-band :global(td),
+  .ui-band :global(th),
+  .ui-band :global(strong),
+  .ui-band :global(b),
+  .ui-band :global(label),
+  .ui-band :global(.ui-eyebrow),
+  .ui-band :global(.ui-card__eyebrow),
+  .ui-band :global(.ui-card__body) {
+    color: var(--surface-accent-fg);
+  }
+
+  /* Secondary copy gets the band's own muted role, which clears 4.5 on sage.
+     --text-muted only reaches 3.6 here. */
+  .ui-band :global(small),
+  .ui-band :global(.ui-band__note) {
+    color: var(--surface-accent-muted);
+  }
+
+  /* A card on the band returns to paper, so it still reads as a raised thing. */
+  .ui-band :global(.ui-card),
+  .ui-band :global(.ui-card--raised) {
+    background: var(--surface);
+    border-color: var(--border);
+  }
+
+  /* Buttons keep their own label colours: they carry their own fill, so the
+     band's foreground flip must not reach inside them. */
+  .ui-band :global(.ui-btn--primary),
+  .ui-band :global(.ui-btn--primary span) {
+    color: var(--primary-fg);
+  }
+
+  .ui-band :global(.ui-btn--accent),
+  .ui-band :global(.ui-btn--accent span) {
+    color: var(--accent-fg);
+  }
+
+  .ui-band :global(.ui-btn--secondary),
+  .ui-band :global(.ui-btn--secondary span) {
+    color: var(--surface-accent-fg);
+    border-color: var(--border-strong);
+  }
+</style>

package/src/astro/Breadcrumb.astro

@@ -0,0 +1,74 @@
+---
+import Icon from "./Icon.astro";
+
+/**
+ * Breadcrumb. Sits in a labelled nav. The current page is a non-link with
+ * aria-current="page"; separators are decorative.
+ */
+interface Crumb {
+  label: string;
+  href?: string;
+}
+
+interface Props {
+  items: Crumb[];
+  label?: string;
+  class?: string;
+}
+
+const { items, label = "Kruimelpad", class: className, ...rest } = Astro.props;
+const lastIndex = items.length - 1;
+---
+
+<nav class={["ui-crumbs", className].filter(Boolean).join(" ")} aria-label={label} {...rest}>
+  {items.map((item, i) => (
+    <>
+      {item.href && i !== lastIndex ? (
+        <a href={item.href}>{item.label}</a>
+      ) : (
+        <span aria-current="page">{item.label}</span>
+      )}
+      {i !== lastIndex && (
+        <span class="ui-crumbs__sep" aria-hidden="true">
+          <Icon name="chevron-right" size={18} stroke={2.2} />
+        </span>
+      )}
+    </>
+  ))}
+</nav>
+
+<style>
+  .ui-crumbs {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-1);
+    font-size: var(--text-xs);
+    line-height: var(--leading-xs);
+    color: var(--text-muted);
+  }
+
+  .ui-crumbs a {
+    color: var(--link);
+    text-decoration: none;
+  }
+  .ui-crumbs a:hover {
+    color: var(--link-hover);
+    text-decoration: underline;
+  }
+  .ui-crumbs a:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm);
+  }
+
+  .ui-crumbs [aria-current="page"] {
+    color: var(--text);
+    font-weight: var(--weight-medium);
+  }
+
+  .ui-crumbs__sep {
+    display: inline-flex;
+    color: var(--border-strong);
+  }
+</style>