@kwtv/components 0.1.0

package/src/astro/Button.astro

@@ -0,0 +1,217 @@
+---
+import Icon from "./Icon.astro";
+
+/**
+ * Button. Four hierarchies, three sizes. One primary action per view.
+ * Renders a <button> by default, or an <a> when `href` is set.
+ *
+ * State classes (.is-hover, .is-focus, .is-active, .is-loading) pin a visual
+ * state for specimens and documentation. The real :hover / :focus-visible /
+ * :active states render identically.
+ */
+interface Props {
+  variant?: "primary" | "secondary" | "accent" | "ghost";
+  size?: "sm" | "md" | "lg";
+  block?: boolean;
+  href?: string;
+  type?: "button" | "submit" | "reset";
+  disabled?: boolean;
+  loading?: boolean;
+  /** Trailing icon name, rendered after the label. */
+  icon?: string;
+  class?: string;
+}
+
+const {
+  variant = "primary",
+  size = "md",
+  block = false,
+  href,
+  type = "button",
+  disabled = false,
+  loading = false,
+  icon,
+  class: className,
+  ...rest
+} = Astro.props;
+
+const Tag = href ? "a" : "button";
+
+const classes = [
+  "ui-btn",
+  `ui-btn--${size}`,
+  `ui-btn--${variant}`,
+  block && "ui-btn--block",
+  loading && "is-loading",
+  className,
+]
+  .filter(Boolean)
+  .join(" ");
+
+const tagProps = href
+  ? { href, ...(disabled ? { "aria-disabled": "true" } : {}) }
+  : { type, ...(disabled ? { disabled: true } : {}) };
+---
+
+<Tag
+  class={classes}
+  aria-busy={loading ? "true" : undefined}
+  {...tagProps}
+  {...rest}
+>
+  <span class="ui-btn__label"><slot /></span>
+  {icon && (
+    <span class="ui-btn__icon" aria-hidden="true">
+      <Icon name={icon as any} size="1em" stroke={1.8} />
+    </span>
+  )}
+  {loading && <span class="ui-btn__spinner" aria-hidden="true"></span>}
+</Tag>
+
+<style>
+  .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);
+  }
+
+  /* Sizes: 32 / 40 / 48 px. */
+  .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%;
+  }
+
+  /* Primary. */
+  .ui-btn--primary {
+    background: var(--primary);
+    color: var(--primary-fg);
+  }
+  .ui-btn--primary:hover,
+  .ui-btn--primary.is-hover {
+    background: var(--primary-hover);
+  }
+
+  /* Secondary. */
+  .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);
+  }
+
+  /* Accent. One call to action per page. */
+  .ui-btn--accent {
+    background: var(--accent);
+    color: var(--accent-fg);
+  }
+  .ui-btn--accent:hover,
+  .ui-btn--accent.is-hover {
+    background: var(--accent-hover);
+  }
+
+  /* Ghost. Low-weight actions. */
+  .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);
+  }
+
+  /* Focus: 2 px ring plus 4 px halo. */
+  .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);
+  }
+
+  /* Pressed: 1 px downward shift. */
+  .ui-btn:active,
+  .ui-btn.is-active {
+    transform: translateY(1px);
+  }
+
+  /* Disabled. */
+  .ui-btn:disabled,
+  .ui-btn[aria-disabled="true"] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* Loading: label hidden, spinner shown. */
+  .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);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-btn {
+      transition: none;
+    }
+    .ui-btn__spinner {
+      animation-duration: 1200ms;
+    }
+  }
+</style>

package/src/astro/Card.astro

@@ -0,0 +1,115 @@
+---
+/**
+ * Card. Surface for a block of related content: eyebrow, title, body, footer.
+ * Raised for a summary that must sit above the page, accent for a rule the
+ * reader has to notice, flat for grouping inside another surface.
+ *
+ * The title renders as a real heading so the document outline stays navigable.
+ */
+interface Props {
+  variant?: "default" | "raised" | "accent" | "flat";
+  eyebrow?: string;
+  title?: string;
+  titleTag?: "h2" | "h3" | "h4" | "h5" | "h6";
+  class?: string;
+}
+
+const {
+  variant = "default",
+  eyebrow,
+  title,
+  titleTag = "h3",
+  class: className,
+  ...rest
+} = Astro.props;
+
+const Title = titleTag;
+
+const classes = ["ui-card", variant !== "default" && `ui-card--${variant}`, className]
+  .filter(Boolean)
+  .join(" ");
+
+const hasFooter = Astro.slots.has("footer");
+---
+
+<div class={classes} {...rest}>
+  {eyebrow && <span class="ui-card__eyebrow">{eyebrow}</span>}
+  {title && <Title class="ui-card__title">{title}</Title>}
+  <span class="ui-card__body"><slot /></span>
+  {hasFooter && (
+    <div class="ui-card__footer">
+      <slot name="footer" />
+    </div>
+  )}
+</div>
+
+<style>
+  .ui-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    padding: var(--space-5);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    background: var(--surface);
+    color: var(--text);
+  }
+
+  .ui-card__eyebrow {
+    font-family: var(--font-mono);
+    font-size: var(--text-2xs);
+    line-height: var(--leading-2xs);
+    font-weight: var(--weight-medium);
+    letter-spacing: var(--tracking-widest);
+    text-transform: uppercase;
+    color: var(--text-muted);
+  }
+
+  .ui-card__title {
+    margin: 0;
+    font-size: var(--text-lg);
+    line-height: var(--leading-lg);
+    font-weight: var(--weight-semibold);
+    letter-spacing: var(--tracking-tight);
+    color: var(--text);
+  }
+
+  .ui-card__body {
+    font-size: var(--text-sm);
+    line-height: var(--leading-sm);
+    color: var(--text-muted);
+  }
+
+  .ui-card__footer {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    margin-top: var(--space-2);
+  }
+
+  /* Raised: cart summary, order total. */
+  .ui-card--raised {
+    border-color: transparent;
+    box-shadow: var(--shadow-lg);
+  }
+
+  /* Accent: sage surface, ink-dark text kept at 4.5:1. Buttons inside keep
+     their own foreground colour. */
+  .ui-card--accent {
+    background: var(--surface-accent);
+    border-color: var(--border-strong);
+    color: var(--surface-accent-fg);
+  }
+  .ui-card--accent .ui-card__eyebrow,
+  .ui-card--accent .ui-card__title,
+  .ui-card--accent .ui-card__body {
+    color: var(--surface-accent-fg);
+  }
+
+  /* Flat: no fill, grouping only. */
+  .ui-card--flat {
+    background: transparent;
+    border-color: transparent;
+    padding-inline: 0;
+  }
+</style>

package/src/astro/CartLine.astro

@@ -0,0 +1,112 @@
+---
+/**
+ * Cart line. One row per article: photo, name, the chosen options named in
+ * text, a quantity stepper and the line price.
+ *
+ * The options belong in the note as words ("Maat 140 · sage"), so they are not
+ * only visible in the photo. The quantity stepper is a slot: drop in the React
+ * QuantityStepper or a static one.
+ */
+interface Props {
+  img: string;
+  alt: string;
+  title: string;
+  /** Chosen options in plain text, e.g. 'Maat 140 · sage · naam "Lore"'. */
+  note?: string;
+  price: string;
+  removeHref?: string;
+  removeLabel?: string;
+  class?: string;
+}
+
+const {
+  img,
+  alt,
+  title,
+  note,
+  price,
+  removeHref = "#",
+  removeLabel = "Verwijderen",
+  class: className,
+  ...rest
+} = Astro.props;
+
+const classes = ["ui-line", className].filter(Boolean).join(" ");
+---
+
+<div class={classes} {...rest}>
+  <img class="ui-line__thumb" loading="lazy" decoding="async" src={img} alt={alt} />
+  <span class="ui-line__grow">
+    <b class="ui-line__title">{title}</b>
+    {note && <span class="ui-line__note">{note}</span>}
+    <a class="ui-line__remove" href={removeHref}>{removeLabel}</a>
+  </span>
+  <span class="ui-line__qty"><slot name="qty" /></span>
+  <b class="ui-line__price">{price}</b>
+</div>
+
+<style>
+  .ui-line {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-4);
+    padding-block: var(--space-4-5);
+    border-top: 1px solid var(--border);
+  }
+
+  .ui-line__thumb {
+    flex-shrink: 0;
+    width: 72px;
+    height: 72px;
+    object-fit: cover;
+    border-radius: var(--radius-md);
+    border: 1px solid var(--border);
+  }
+
+  .ui-line__grow {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .ui-line__title {
+    font-family: var(--font-sans);
+    font-size: var(--text-base);
+    font-weight: var(--weight-semibold);
+    color: var(--text);
+  }
+
+  .ui-line__note {
+    font-size: var(--text-sm);
+    color: var(--text-muted);
+  }
+
+  .ui-line__remove {
+    align-self: flex-start;
+    font-size: var(--text-xs);
+    color: var(--link);
+  }
+  .ui-line__remove:hover {
+    color: var(--link-hover);
+  }
+  .ui-line__remove:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px var(--focus-outer);
+    border-radius: var(--radius-sm);
+  }
+
+  .ui-line__qty {
+    flex-shrink: 0;
+  }
+
+  .ui-line__price {
+    flex-shrink: 0;
+    font-size: var(--text-base);
+    font-weight: var(--weight-semibold);
+    font-variant-numeric: tabular-nums;
+    color: var(--text);
+  }
+</style>

package/src/astro/Checkbox.astro

@@ -0,0 +1,89 @@
+---
+/**
+ * Checkbox. Native control tinted with accent-color, wrapped in a label so the
+ * whole row is the hit area. 17 px box, 32 px row. Disabled rows keep their
+ * text legible.
+ *
+ * When several checkboxes form a question, put them in a <fieldset> with a
+ * <legend> in the consuming page so the question is announced first.
+ */
+interface Props {
+  label?: string;
+  name?: string;
+  value?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  id?: string;
+  class?: string;
+}
+
+const {
+  label,
+  name,
+  value,
+  checked = false,
+  disabled = false,
+  id,
+  class: className,
+  ...rest
+} = Astro.props;
+
+const classes = ["ui-check", disabled && "is-disabled", className]
+  .filter(Boolean)
+  .join(" ");
+---
+
+<label class={classes}>
+  <input
+    type="checkbox"
+    name={name}
+    value={value}
+    id={id}
+    checked={checked}
+    disabled={disabled}
+    {...rest}
+  />
+  <slot>{label}</slot>
+</label>
+
+<style>
+  .ui-check {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    min-height: 32px;
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    color: var(--text);
+    cursor: pointer;
+  }
+
+  .ui-check input {
+    width: 17px;
+    height: 17px;
+    flex-shrink: 0;
+    accent-color: var(--primary);
+    cursor: pointer;
+  }
+
+  .ui-check input:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px var(--focus-outer);
+  }
+
+  .ui-check.is-disabled {
+    cursor: not-allowed;
+    color: var(--text-muted);
+  }
+
+  .ui-check.is-disabled input {
+    cursor: not-allowed;
+  }
+
+  @media (max-width: 700px), (pointer: coarse) {
+    .ui-check {
+      min-height: 40px;
+    }
+  }
+</style>

package/src/astro/Chip.astro

@@ -0,0 +1,130 @@
+---
+/**
+ * Chip. Size selection and filter shortcuts. A <button> with aria-pressed, not
+ * a link. Selection adds a 2 px border so it reads without colour. Sold-out
+ * sizes stay visible and struck through (`strikethrough` + `disabled`): the
+ * reader learns the size exists but is gone.
+ *
+ * The `--filter` variant is the 32 px shortcut that opens the filter sheet on
+ * mobile.
+ */
+interface Props {
+  variant?: "default" | "filter";
+  selected?: boolean;
+  disabled?: boolean;
+  strikethrough?: boolean;
+  type?: "button" | "submit";
+  class?: string;
+}
+
+const {
+  variant = "default",
+  selected = false,
+  disabled = false,
+  strikethrough = false,
+  type = "button",
+  class: className,
+  ...rest
+} = Astro.props;
+
+const classes = [
+  "ui-chip",
+  variant === "filter" && "ui-chip--filter",
+  selected && "is-selected",
+  disabled && "is-disabled",
+  strikethrough && "ui-chip--struck",
+  className,
+]
+  .filter(Boolean)
+  .join(" ");
+---
+
+<button
+  class={classes}
+  type={type}
+  aria-pressed={String(selected)}
+  disabled={disabled}
+  {...rest}
+>
+  <slot />
+</button>
+
+<style>
+  .ui-chip {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 36px;
+    padding: 0 var(--space-4);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+    color: var(--text);
+    cursor: pointer;
+    transition:
+      border-color var(--duration-fast) var(--ease-standard),
+      background-color var(--duration-fast) var(--ease-standard);
+  }
+
+  .ui-chip:hover,
+  .ui-chip.is-hover {
+    border-color: var(--border-strong);
+  }
+
+  .ui-chip:focus-visible,
+  .ui-chip.is-focus {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px var(--focus-outer);
+  }
+
+  /* Selected: 2 px border plus the accent surface, readable without colour. */
+  .ui-chip.is-selected,
+  .ui-chip[aria-pressed="true"] {
+    border-width: 2px;
+    border-color: var(--border-strong);
+    background: var(--surface-accent);
+    color: var(--surface-accent-fg, var(--text));
+    font-weight: var(--weight-semibold);
+  }
+
+  .ui-chip.is-disabled,
+  .ui-chip:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .ui-chip--struck {
+    text-decoration: line-through;
+  }
+
+  /* Filter chip: 32 px. */
+  .ui-chip--filter {
+    min-height: 32px;
+    border-radius: var(--radius-full);
+    padding: 0 var(--space-3);
+  }
+
+  .ui-chip--filter.is-selected,
+  .ui-chip--filter[aria-pressed="true"] {
+    background: var(--surface-accent);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-chip {
+      transition: none;
+    }
+  }
+
+  @media (max-width: 700px), (pointer: coarse) {
+    .ui-chip {
+      min-height: 36px;
+    }
+    .ui-chip--filter {
+      min-height: 40px;
+    }
+  }
+</style>

package/src/astro/ChipRail.astro

@@ -0,0 +1,24 @@
+---
+interface ChipRailItem {
+  label: string;
+  href: string;
+  current?: boolean;
+}
+
+interface Props {
+  items: ChipRailItem[];
+  label?: string;
+  class?: string;
+}
+
+const { items, label = "Categorieën", class: className, ...rest } = Astro.props;
+const classes = ["pl-chips", className].filter(Boolean).join(" ");
+---
+
+<nav class={classes} aria-label={label} {...rest}>
+  {items.map((item) => (
+    <a class="pl-chip" href={item.href} data-on={item.current ? "1" : undefined} aria-current={item.current ? "page" : undefined}>
+      {item.label}
+    </a>
+  ))}
+</nav>