@xaroth.nl/design 0.1.0

package/dist/components/layout/index.js

@@ -0,0 +1,13 @@
+import { clsx } from 'clsx';
+import { bem } from "../../bem.js";
+const container = bem('x-container', { defaults: { width: 'page' } });
+const grid = bem('x-grid');
+const section = bem('x-section');
+const sectionHead = bem('x-section-head');
+export const containerClass = ({ width = 'page', className } = {}) => container({ width }, className);
+export const gridClass = ({ className } = {}) => grid({}, className);
+// Grid children are plain elements, so spans are a class helper rather than a component.
+export const colClass = ({ span, stack = 'md', className }) => clsx(`x-col-${span}`, stack === 'sm' && 'x-col--stack-sm', stack === 'never' && 'x-col--keep', className);
+export const sectionClass = ({ tight, className } = {}) => section({ tight }, className);
+export const sectionHeadClass = ({ className } = {}) => sectionHead({}, className);
+export const sectionHeadTag = (level = 2) => `h${level}`;

package/dist/components/layout/layout.css

@@ -0,0 +1,262 @@
+@layer x.reset, x.core, x.theme, x.utility;
+@layer x.core {
+  .x-container {
+    width: 100%;
+    max-width: calc(var(--x-page) + 2 * var(--x-gutter));
+    padding-inline: var(--x-gutter);
+    margin-inline: auto;
+  }
+  .x-container--prose {
+    max-width: calc(var(--x-prose) + 2 * var(--x-gutter));
+  }
+  .x-grid {
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    gap: var(--x-gap);
+  }
+  .x-col-1 {
+    grid-column: 1/-1;
+    min-width: 0;
+  }
+  .x-col-1.x-col--keep {
+    grid-column: span 1;
+  }
+  @media (min-width: 640px) {
+    .x-col-1.x-col--stack-sm {
+      grid-column: span 1;
+    }
+  }
+  @media (min-width: 1024px) {
+    .x-col-1 {
+      grid-column: span 1;
+    }
+  }
+  .x-col-2 {
+    grid-column: 1/-1;
+    min-width: 0;
+  }
+  .x-col-2.x-col--keep {
+    grid-column: span 2;
+  }
+  @media (min-width: 640px) {
+    .x-col-2.x-col--stack-sm {
+      grid-column: span 2;
+    }
+  }
+  @media (min-width: 1024px) {
+    .x-col-2 {
+      grid-column: span 2;
+    }
+  }
+  .x-col-3 {
+    grid-column: 1/-1;
+    min-width: 0;
+  }
+  .x-col-3.x-col--keep {
+    grid-column: span 3;
+  }
+  @media (min-width: 640px) {
+    .x-col-3.x-col--stack-sm {
+      grid-column: span 3;
+    }
+  }
+  @media (min-width: 1024px) {
+    .x-col-3 {
+      grid-column: span 3;
+    }
+  }
+  .x-col-4 {
+    grid-column: 1/-1;
+    min-width: 0;
+  }
+  .x-col-4.x-col--keep {
+    grid-column: span 4;
+  }
+  @media (min-width: 640px) {
+    .x-col-4.x-col--stack-sm {
+      grid-column: span 4;
+    }
+  }
+  @media (min-width: 1024px) {
+    .x-col-4 {
+      grid-column: span 4;
+    }
+  }
+  .x-col-5 {
+    grid-column: 1/-1;
+    min-width: 0;
+  }
+  .x-col-5.x-col--keep {
+    grid-column: span 5;
+  }
+  @media (min-width: 640px) {
+    .x-col-5.x-col--stack-sm {
+      grid-column: span 5;
+    }
+  }
+  @media (min-width: 1024px) {
+    .x-col-5 {
+      grid-column: span 5;
+    }
+  }
+  .x-col-6 {
+    grid-column: 1/-1;
+    min-width: 0;
+  }
+  .x-col-6.x-col--keep {
+    grid-column: span 6;
+  }
+  @media (min-width: 640px) {
+    .x-col-6.x-col--stack-sm {
+      grid-column: span 6;
+    }
+  }
+  @media (min-width: 1024px) {
+    .x-col-6 {
+      grid-column: span 6;
+    }
+  }
+  .x-col-7 {
+    grid-column: 1/-1;
+    min-width: 0;
+  }
+  .x-col-7.x-col--keep {
+    grid-column: span 7;
+  }
+  @media (min-width: 640px) {
+    .x-col-7.x-col--stack-sm {
+      grid-column: span 7;
+    }
+  }
+  @media (min-width: 1024px) {
+    .x-col-7 {
+      grid-column: span 7;
+    }
+  }
+  .x-col-8 {
+    grid-column: 1/-1;
+    min-width: 0;
+  }
+  .x-col-8.x-col--keep {
+    grid-column: span 8;
+  }
+  @media (min-width: 640px) {
+    .x-col-8.x-col--stack-sm {
+      grid-column: span 8;
+    }
+  }
+  @media (min-width: 1024px) {
+    .x-col-8 {
+      grid-column: span 8;
+    }
+  }
+  .x-col-9 {
+    grid-column: 1/-1;
+    min-width: 0;
+  }
+  .x-col-9.x-col--keep {
+    grid-column: span 9;
+  }
+  @media (min-width: 640px) {
+    .x-col-9.x-col--stack-sm {
+      grid-column: span 9;
+    }
+  }
+  @media (min-width: 1024px) {
+    .x-col-9 {
+      grid-column: span 9;
+    }
+  }
+  .x-col-10 {
+    grid-column: 1/-1;
+    min-width: 0;
+  }
+  .x-col-10.x-col--keep {
+    grid-column: span 10;
+  }
+  @media (min-width: 640px) {
+    .x-col-10.x-col--stack-sm {
+      grid-column: span 10;
+    }
+  }
+  @media (min-width: 1024px) {
+    .x-col-10 {
+      grid-column: span 10;
+    }
+  }
+  .x-col-11 {
+    grid-column: 1/-1;
+    min-width: 0;
+  }
+  .x-col-11.x-col--keep {
+    grid-column: span 11;
+  }
+  @media (min-width: 640px) {
+    .x-col-11.x-col--stack-sm {
+      grid-column: span 11;
+    }
+  }
+  @media (min-width: 1024px) {
+    .x-col-11 {
+      grid-column: span 11;
+    }
+  }
+  .x-col-12 {
+    grid-column: 1/-1;
+    min-width: 0;
+  }
+  .x-col-12.x-col--keep {
+    grid-column: span 12;
+  }
+  @media (min-width: 640px) {
+    .x-col-12.x-col--stack-sm {
+      grid-column: span 12;
+    }
+  }
+  @media (min-width: 1024px) {
+    .x-col-12 {
+      grid-column: span 12;
+    }
+  }
+  .x-section {
+    padding-block: var(--x-section);
+  }
+  .x-section + .x-section {
+    padding-top: 0;
+  }
+  .x-section--tight {
+    padding-block: calc(var(--x-section) / 2);
+  }
+  .x-section-head {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--x-space-3) var(--x-space-5);
+    align-items: end;
+    justify-content: space-between;
+    margin-bottom: var(--x-space-7);
+  }
+  .x-section-head__titles {
+    display: grid;
+    gap: var(--x-space-2);
+    min-width: 0;
+  }
+  .x-section-head__eyebrow {
+    font-family: var(--x-font-display);
+    font-size: var(--x-fs-label);
+    font-weight: 600;
+    line-height: 1.3;
+    letter-spacing: var(--x-track-label);
+    text-transform: uppercase;
+    color: var(--x-color-accent);
+  }
+  .x-section-head__title {
+    font-size: var(--x-fs-h2);
+  }
+  .x-section-head__sub {
+    max-width: var(--x-prose);
+    color: var(--x-color-text-muted);
+  }
+  .x-section-head__link {
+    flex: none;
+  }
+}

package/dist/components/layout/layout.d.ts

@@ -0,0 +1,24 @@
+import './layout.scss';
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type ContainerOptions, type SectionHeadLevel, type SectionHeadLink, type SectionOptions } from './index.ts';
+export type ContainerProps = HTMLAttributes<HTMLElement> & Omit<ContainerOptions, 'className'> & {
+    as?: 'div' | 'main' | 'header' | 'footer' | 'article' | 'nav';
+};
+export declare function Container({ width, as: Tag, className, ...rest }: ContainerProps): import("react").JSX.Element;
+export type GridProps = HTMLAttributes<HTMLElement> & {
+    as?: 'div' | 'main' | 'section' | 'article' | 'ul' | 'ol';
+};
+export declare function Grid({ as: Tag, className, ...rest }: GridProps): import("react").JSX.Element;
+export type SectionProps = HTMLAttributes<HTMLElement> & Omit<SectionOptions, 'className'> & {
+    as?: 'section' | 'div' | 'article' | 'aside';
+};
+export declare function Section({ tight, as: Tag, className, ...rest }: SectionProps): import("react").JSX.Element;
+export type SectionHeadProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
+    title: ReactNode;
+    eyebrow?: ReactNode;
+    sub?: ReactNode;
+    link?: SectionHeadLink;
+    level?: SectionHeadLevel;
+    titleId?: string;
+};
+export declare function SectionHead({ title, eyebrow, sub, link, level, titleId, className, ...rest }: SectionHeadProps): import("react").JSX.Element;

package/dist/components/layout/layout.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './layout.css';
+import { createElement } from 'react';
+import { Button } from "../button/button.js";
+import { containerClass, gridClass, sectionClass, sectionHeadClass, sectionHeadTag, } from "./index.js";
+export function Container({ width, as: Tag = 'div', className, ...rest }) {
+    return (_jsx(Tag, { ...rest, className: containerClass({ width, className }) }));
+}
+export function Grid({ as: Tag = 'div', className, ...rest }) {
+    return (_jsx(Tag, { ...rest, className: gridClass({ className }) }));
+}
+export function Section({ tight, as: Tag = 'section', className, ...rest }) {
+    return (_jsx(Tag, { ...rest, className: sectionClass({ tight, className }) }));
+}
+export function SectionHead({ title, eyebrow, sub, link, level, titleId, className, ...rest }) {
+    return (_jsxs("header", { ...rest, className: sectionHeadClass({ className }), children: [_jsxs("div", { className: "x-section-head__titles", children: [eyebrow != null && eyebrow !== '' && _jsx("p", { className: "x-section-head__eyebrow", children: eyebrow }), createElement(sectionHeadTag(level), { className: 'x-section-head__title', id: titleId }, title), sub != null && sub !== '' && _jsx("p", { className: "x-section-head__sub", children: sub })] }), link && (_jsx(Button, { className: "x-section-head__link", variant: "tertiary", size: "sm", href: link.href, end: _jsx("span", { "aria-hidden": "true", children: "\u2192" }), children: link.label }))] }));
+}

package/dist/components/layout/section-head.astro

@@ -0,0 +1,42 @@
+---
+import './layout.css'
+import type { HTMLAttributes } from 'astro/types'
+import Button from '../button/button.astro'
+import {
+  sectionHeadClass,
+  sectionHeadTag,
+  type SectionHeadLevel,
+  type SectionHeadLink,
+} from './index.js'
+
+type Props = Omit<HTMLAttributes<'header'>, 'class' | 'title'> & {
+  class?: string
+  title: string
+  eyebrow?: string
+  sub?: string
+  link?: SectionHeadLink
+  level?: SectionHeadLevel
+  titleId?: string
+}
+
+const { title, eyebrow, sub, link, level, titleId, class: className, slot: _slot, ...rest } = Astro.props
+const Heading = sectionHeadTag(level)
+---
+
+<header {...rest} class={sectionHeadClass({ className })}>
+  <div class="x-section-head__titles">
+    {eyebrow && <p class="x-section-head__eyebrow">{eyebrow}</p>}
+    <Heading class="x-section-head__title" id={titleId}>{title}</Heading>
+    {sub && <p class="x-section-head__sub">{sub}</p>}
+  </div>
+  {
+    link && (
+      <Button class="x-section-head__link" variant="tertiary" size="sm" href={link.href}>
+        {link.label}
+        <span slot="end" aria-hidden="true">
+          →
+        </span>
+      </Button>
+    )
+  }
+</header>

package/dist/components/layout/section.astro

@@ -0,0 +1,15 @@
+---
+import './layout.css'
+import type { HTMLAttributes } from 'astro/types'
+import { sectionClass, type SectionOptions } from './index.js'
+
+type Props = Omit<HTMLAttributes<'section'>, 'class'> &
+  Omit<SectionOptions, 'className'> & {
+    class?: string
+    as?: 'section' | 'div' | 'article' | 'aside'
+  }
+
+const { tight, as: Tag = 'section', class: className, slot: _slot, ...rest } = Astro.props
+---
+
+<Tag {...rest} class={sectionClass({ tight, className })}><slot /></Tag>

package/dist/components/page-head/index.d.ts

@@ -0,0 +1,18 @@
+export type PageHeadAlign = 'start' | 'center';
+export type PageHeadLevel = 1 | 2;
+export type PageHeadOptions = {
+    align?: PageHeadAlign;
+    className?: string;
+};
+export declare const pageHeadClass: ({ align, className }?: PageHeadOptions) => string;
+export declare const pageHeadClasses: {
+    readonly crumbs: string;
+    readonly body: string;
+    readonly titles: string;
+    readonly eyebrow: string;
+    readonly title: string;
+    readonly lead: string;
+    readonly meta: string;
+    readonly actions: string;
+};
+export declare const pageHeadTag: (level?: PageHeadLevel) => "h2" | "h1";

package/dist/components/page-head/index.js

@@ -0,0 +1,14 @@
+import { bem } from "../../bem.js";
+const pageHead = bem('x-page-head', { defaults: { align: 'start' } });
+export const pageHeadClass = ({ align = 'start', className } = {}) => pageHead({ align }, className);
+export const pageHeadClasses = {
+    crumbs: pageHead.el('crumbs'),
+    body: pageHead.el('body'),
+    titles: pageHead.el('titles'),
+    eyebrow: pageHead.el('eyebrow'),
+    title: pageHead.el('title'),
+    lead: pageHead.el('lead'),
+    meta: pageHead.el('meta'),
+    actions: pageHead.el('actions'),
+};
+export const pageHeadTag = (level = 1) => `h${level}`;

package/dist/components/page-head/page-head.astro

@@ -0,0 +1,60 @@
+---
+import './page-head.css'
+import type { HTMLAttributes } from 'astro/types'
+import { pageHeadClass, pageHeadClasses as c, pageHeadTag, type PageHeadAlign, type PageHeadLevel } from './index.js'
+
+type Props = Omit<HTMLAttributes<'header'>, 'class' | 'title'> & {
+  class?: string
+  /** Plain-text title; the `title` slot takes markup. */
+  title?: string
+  eyebrow?: string
+  /** Plain-text lead; the `lead` slot takes markup. */
+  lead?: string
+  level?: PageHeadLevel
+  titleId?: string
+  align?: PageHeadAlign
+}
+
+const { title, eyebrow, lead, level, titleId, align, class: className, slot: _slot, ...rest } = Astro.props
+const Heading = pageHeadTag(level)
+const hasLead = (lead !== undefined && lead !== '') || Astro.slots.has('lead')
+---
+
+<header class={pageHeadClass({ align, className })} {...rest}>
+  {
+    Astro.slots.has('breadcrumbs') && (
+      <div class={c.crumbs}>
+        <slot name="breadcrumbs" />
+      </div>
+    )
+  }
+  <div class={c.body}>
+    <div class={c.titles}>
+      {eyebrow && <p class={c.eyebrow}>{eyebrow}</p>}
+      <Heading class={c.title} id={titleId}>
+        <slot name="title">{title}</slot>
+      </Heading>
+      {
+        hasLead && (
+          <p class={c.lead}>
+            <slot name="lead">{lead}</slot>
+          </p>
+        )
+      }
+      {
+        Astro.slots.has('meta') && (
+          <div class={c.meta}>
+            <slot name="meta" />
+          </div>
+        )
+      }
+    </div>
+    {
+      Astro.slots.has('actions') && (
+        <div class={c.actions}>
+          <slot name="actions" />
+        </div>
+      )
+    }
+  </div>
+</header>

package/dist/components/page-head/page-head.css

@@ -0,0 +1,79 @@
+@layer x.reset, x.core, x.theme, x.utility;
+@layer x.core {
+  .x-page-head {
+    display: grid;
+    gap: var(--x-space-5);
+    margin-bottom: var(--x-space-7);
+  }
+  .x-page-head__crumbs {
+    display: flex;
+    min-width: 0;
+  }
+  .x-page-head__body {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--x-space-5);
+    align-items: end;
+    justify-content: space-between;
+  }
+  .x-page-head__titles {
+    display: grid;
+    flex: 1 1 30rem;
+    gap: var(--x-space-3);
+    min-width: 0;
+  }
+  .x-page-head__eyebrow {
+    font-family: var(--x-font-display);
+    font-size: var(--x-fs-label);
+    font-weight: 600;
+    line-height: 1.3;
+    letter-spacing: var(--x-track-label);
+    text-transform: uppercase;
+    color: var(--x-color-accent);
+  }
+  .x-page-head__title {
+    font-family: var(--x-font-display);
+    font-size: var(--x-fs-h1);
+    line-height: 1.15;
+  }
+  .x-page-head__lead {
+    max-width: var(--x-prose);
+    font-size: var(--x-fs-lead);
+    line-height: 1.55;
+    color: var(--x-color-text-muted);
+  }
+  .x-page-head__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--x-space-2) var(--x-space-3);
+    align-items: center;
+    margin-top: var(--x-space-1);
+    font-size: var(--x-fs-small);
+    line-height: 1.5;
+    color: var(--x-color-text-muted);
+  }
+  .x-page-head__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--x-space-3);
+    align-items: center;
+    min-width: 0;
+  }
+  .x-page-head--center {
+    text-align: center;
+  }
+  .x-page-head--center .x-page-head__crumbs,
+  .x-page-head--center .x-page-head__meta,
+  .x-page-head--center .x-page-head__actions {
+    justify-content: center;
+  }
+  .x-page-head--center .x-page-head__body {
+    flex-direction: column;
+    align-items: center;
+  }
+  .x-page-head--center .x-page-head__titles {
+    flex: none;
+    justify-items: center;
+    width: 100%;
+  }
+}

package/dist/components/page-head/page-head.d.ts

@@ -0,0 +1,18 @@
+import './page-head.scss';
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type PageHeadAlign, type PageHeadLevel } from './index.ts';
+export type PageHeadProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
+    title: ReactNode;
+    /** Usually a Breadcrumbs part. */
+    breadcrumbs?: ReactNode;
+    eyebrow?: ReactNode;
+    lead?: ReactNode;
+    /** Badges, date, tags. */
+    meta?: ReactNode;
+    /** Buttons; right of the titles on wide screens, below them on narrow ones. */
+    actions?: ReactNode;
+    level?: PageHeadLevel;
+    titleId?: string;
+    align?: PageHeadAlign;
+};
+export declare function PageHead({ title, breadcrumbs, eyebrow, lead, meta, actions, level, titleId, align, className, ...rest }: PageHeadProps): import("react").JSX.Element;

package/dist/components/page-head/page-head.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './page-head.css';
+import { createElement } from 'react';
+import { pageHeadClass, pageHeadClasses as c, pageHeadTag } from "./index.js";
+const has = (node) => node != null && node !== '' && node !== false;
+export function PageHead({ title, breadcrumbs, eyebrow, lead, meta, actions, level, titleId, align, className, ...rest }) {
+    return (_jsxs("header", { ...rest, className: pageHeadClass({ align, className }), children: [has(breadcrumbs) && _jsx("div", { className: c.crumbs, children: breadcrumbs }), _jsxs("div", { className: c.body, children: [_jsxs("div", { className: c.titles, children: [has(eyebrow) && _jsx("p", { className: c.eyebrow, children: eyebrow }), createElement(pageHeadTag(level), { className: c.title, id: titleId }, title), has(lead) && _jsx("p", { className: c.lead, children: lead }), has(meta) && _jsx("div", { className: c.meta, children: meta })] }), has(actions) && _jsx("div", { className: c.actions, children: actions })] })] }));
+}

package/dist/components/pagination/index.d.ts

@@ -0,0 +1,73 @@
+export type PaginationHref = string | ((page: number) => string);
+export type PaginationAlign = 'center' | 'start';
+export type PaginationOptions = {
+    align?: PaginationAlign;
+    className?: string;
+};
+export type PaginationInput = {
+    page: number;
+    pages: number;
+    href: PaginationHref;
+    /** URL of page 1 when it differs from the pattern, for example '/blog'. */
+    firstHref?: string;
+    /** Pages shown on each side of the current one. */
+    siblings?: number;
+    /** Adds First and Last links. */
+    ends?: boolean;
+    prevLabel?: string;
+    nextLabel?: string;
+    firstLabel?: string;
+    lastLabel?: string;
+    /** Screen reader text of the compact summary shown on narrow screens. {page} and {pages} are replaced. */
+    summaryLabel?: string;
+};
+type Edge = 'first' | 'prev' | 'next' | 'last';
+export type PaginationEntry = {
+    kind: 'page';
+    key: string;
+    label: string;
+    href: string;
+    current: boolean;
+} | {
+    kind: 'gap';
+    key: string;
+} | {
+    kind: 'edge';
+    key: Edge;
+    label: string;
+    href?: string;
+    rel?: 'prev' | 'next';
+} | {
+    kind: 'summary';
+    key: 'summary';
+    text: string;
+    label: string;
+};
+export declare const paginationClass: ({ align, className }?: PaginationOptions) => string;
+export declare const paginationClasses: {
+    readonly list: string;
+    readonly item: string;
+    readonly itemPage: string;
+    readonly itemEnd: string;
+    readonly itemSummary: string;
+    readonly summary: string;
+    readonly link: string;
+    readonly edge: string;
+    readonly disabled: string;
+    readonly gap: string;
+};
+export declare const paginationHref: (href: PaginationHref, page: number, firstHref?: string) => string;
+export declare const paginationClamp: (page: number, pages: number) => {
+    page: number;
+    pages: number;
+};
+export declare const paginationPages: (requested: number, total: number, siblings?: number) => (number | "gap")[];
+export declare const paginationEntries: ({ href, firstHref, siblings, ends, prevLabel, nextLabel, firstLabel, lastLabel, summaryLabel, ...input }: PaginationInput) => PaginationEntry[];
+export declare const paginationItemClass: (entry: PaginationEntry) => string;
+export declare const paginationPageAttrs: (entry: Extract<PaginationEntry, {
+    kind: "page";
+}>) => {
+    href: string;
+    'aria-current': "page" | undefined;
+};
+export {};