@xaroth.nl/design 0.1.0

package/dist/components/pagination/index.js

@@ -0,0 +1,87 @@
+import { bem } from "../../bem.js";
+const pagination = bem('x-pagination');
+export const paginationClass = ({ align = 'center', className } = {}) => pagination({ align }, className);
+export const paginationClasses = {
+    list: pagination.el('list'),
+    item: pagination.el('item'),
+    // Page links, gaps and First/Last give way to the summary on narrow screens.
+    itemPage: pagination.el('item', { page: true }),
+    itemEnd: pagination.el('item', { end: true }),
+    itemSummary: pagination.el('item', { summary: true }),
+    summary: pagination.el('summary'),
+    link: pagination.el('link'),
+    edge: pagination.el('link', { edge: true }),
+    disabled: pagination.el('link', { edge: true, disabled: true }),
+    gap: pagination.el('gap'),
+};
+export const paginationHref = (href, page, firstHref) => page === 1 && firstHref !== undefined
+    ? firstHref
+    : typeof href === 'function'
+        ? href(page)
+        : href.replaceAll('{page}', String(page));
+// Whole pages, at least 1, and a page inside 1..pages.
+export const paginationClamp = (page, pages) => {
+    const total = Math.max(1, Math.floor(pages) || 1);
+    return { page: Math.min(total, Math.max(1, Math.floor(page) || 1)), pages: total };
+};
+// Keeps the window a fixed width near the ends, so page 1 and 2 of 8 both read 1 2 3 … 8.
+// A gap that would hide a single page shows that page instead.
+export const paginationPages = (requested, total, siblings = 1) => {
+    const { page, pages } = paginationClamp(requested, total);
+    const width = 2 * siblings + 1;
+    const start = Math.max(1, Math.min(page - siblings, pages - width + 1));
+    const end = Math.min(pages, start + width - 1);
+    const shown = new Set([1, pages]);
+    for (let p = start; p <= end; p++) {
+        shown.add(p);
+    }
+    const sorted = [...shown].filter((p) => p >= 1 && p <= pages).sort((a, b) => a - b);
+    const out = [];
+    sorted.forEach((p, i) => {
+        const prev = sorted[i - 1];
+        if (prev !== undefined && p - prev === 2) {
+            out.push(prev + 1);
+        }
+        else if (prev !== undefined && p - prev > 2) {
+            out.push('gap');
+        }
+        out.push(p);
+    });
+    return out;
+};
+export const paginationEntries = ({ href, firstHref, siblings, ends, prevLabel = 'Prev', nextLabel = 'Next', firstLabel = 'First', lastLabel = 'Last', summaryLabel = 'Page {page} of {pages}', ...input }) => {
+    const { page, pages } = paginationClamp(input.page, input.pages);
+    const to = (p) => paginationHref(href, p, firstHref);
+    const atStart = page <= 1;
+    const atEnd = page >= pages;
+    const entries = [];
+    if (ends) {
+        entries.push({ kind: 'edge', key: 'first', label: firstLabel, href: atStart ? undefined : to(1) });
+    }
+    entries.push({ kind: 'edge', key: 'prev', label: prevLabel, href: atStart ? undefined : to(page - 1), rel: 'prev' });
+    entries.push({
+        kind: 'summary',
+        key: 'summary',
+        text: `${page} / ${pages}`,
+        label: summaryLabel.replaceAll('{page}', String(page)).replaceAll('{pages}', String(pages)),
+    });
+    paginationPages(page, pages, siblings).forEach((p, i) => entries.push(p === 'gap'
+        ? { kind: 'gap', key: `gap-${i}` }
+        : { kind: 'page', key: String(p), label: String(p), href: to(p), current: p === page }));
+    entries.push({ kind: 'edge', key: 'next', label: nextLabel, href: atEnd ? undefined : to(page + 1), rel: 'next' });
+    if (ends) {
+        entries.push({ kind: 'edge', key: 'last', label: lastLabel, href: atEnd ? undefined : to(pages) });
+    }
+    return entries;
+};
+export const paginationItemClass = (entry) => entry.kind === 'summary'
+    ? paginationClasses.itemSummary
+    : entry.kind === 'edge'
+        ? entry.key === 'prev' || entry.key === 'next'
+            ? paginationClasses.item
+            : paginationClasses.itemEnd
+        : paginationClasses.itemPage;
+export const paginationPageAttrs = (entry) => ({
+    href: entry.href,
+    'aria-current': entry.current ? 'page' : undefined,
+});

package/dist/components/pagination/pagination.astro

@@ -0,0 +1,81 @@
+---
+import './pagination.css'
+import type { HTMLAttributes } from 'astro/types'
+import {
+  paginationClass,
+  paginationClasses as c,
+  paginationEntries,
+  paginationItemClass,
+  paginationPageAttrs,
+  type PaginationInput,
+  type PaginationOptions,
+} from './index.js'
+
+type Props = Omit<HTMLAttributes<'nav'>, 'class'> &
+  Omit<PaginationOptions, 'className'> &
+  PaginationInput & {
+    class?: string
+    /** Accessible name of the nav. */
+    label?: string
+  }
+
+const {
+  align,
+  class: className,
+  page,
+  pages,
+  href,
+  firstHref,
+  siblings,
+  ends,
+  prevLabel,
+  nextLabel,
+  firstLabel,
+  lastLabel,
+  summaryLabel,
+  label = 'Pagination',
+  ...rest
+} = Astro.props
+const entries = paginationEntries({
+  page,
+  pages,
+  href,
+  firstHref,
+  siblings,
+  ends,
+  prevLabel,
+  nextLabel,
+  firstLabel,
+  lastLabel,
+  summaryLabel,
+})
+---
+
+<nav class={paginationClass({ align, className })} aria-label={label} {...rest}>
+  <ul class={c.list}>
+    {
+      entries.map((entry) => (
+        <li class={paginationItemClass(entry)}>
+          {entry.kind === 'summary' ? (
+            <span class={c.summary}>
+              <span aria-hidden="true">{entry.text}</span>
+              <span class="x-visually-hidden">{entry.label}</span>
+            </span>
+          ) : entry.kind === 'page' ? (
+            <a class={c.link} {...paginationPageAttrs(entry)}>
+              {entry.label}
+            </a>
+          ) : entry.kind === 'gap' ? (
+            <span class={c.gap}>…</span>
+          ) : entry.href === undefined ? (
+            <span class={c.disabled}>{entry.label}</span>
+          ) : (
+            <a class={c.edge} href={entry.href} rel={entry.rel}>
+              {entry.label}
+            </a>
+          )}
+        </li>
+      ))
+    }
+  </ul>
+</nav>

package/dist/components/pagination/pagination.css

@@ -0,0 +1,70 @@
+@layer x.reset, x.core, x.theme, x.utility;
+@layer x.core {
+  .x-pagination__list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--x-space-2);
+    align-items: center;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+  .x-pagination--center .x-pagination__list {
+    justify-content: center;
+  }
+  .x-pagination__item {
+    display: flex;
+  }
+  .x-pagination__item--summary {
+    display: none;
+  }
+  @media (width < 480px) {
+    .x-pagination__list {
+      flex-wrap: nowrap;
+    }
+    .x-pagination__item--page, .x-pagination__item--end {
+      display: none;
+    }
+    .x-pagination__item--summary {
+      display: flex;
+    }
+  }
+  .x-pagination__link, .x-pagination__gap, .x-pagination__summary {
+    display: grid;
+    place-items: center;
+    min-width: var(--x-control-md);
+    height: var(--x-control-md);
+    padding: 0 var(--x-space-3);
+    font-size: var(--x-fs-small);
+    line-height: 1;
+    color: var(--x-color-text-muted);
+    text-decoration: none;
+    white-space: nowrap;
+    border: 1px solid var(--x-color-line-strong);
+    transition: color var(--x-duration) var(--x-ease), border-color var(--x-duration) var(--x-ease);
+  }
+  .x-pagination__link:where(a):hover {
+    color: var(--x-color-accent);
+    border-color: var(--x-color-accent-edge);
+  }
+  .x-pagination__link[aria-current=page], .x-pagination__link[aria-current=page]:hover {
+    color: var(--x-color-on-accent);
+    background: var(--x-color-accent);
+    border-color: var(--x-color-accent);
+  }
+  .x-pagination__link--edge {
+    padding: 0 var(--x-space-4);
+    font-size: var(--x-fs-label);
+    text-transform: uppercase;
+  }
+  .x-pagination__link--disabled {
+    color: var(--x-color-text-faint);
+  }
+  .x-pagination__gap, .x-pagination__summary {
+    border-color: transparent;
+  }
+  .x-pagination__summary {
+    font-variant-numeric: tabular-nums;
+    color: var(--x-color-text);
+  }
+}

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

@@ -0,0 +1,8 @@
+import './pagination.scss';
+import type { HTMLAttributes } from 'react';
+import { type PaginationInput, type PaginationOptions } from './index.ts';
+export type PaginationProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & Omit<PaginationOptions, 'className'> & PaginationInput & {
+    /** Accessible name of the nav. */
+    label?: string;
+};
+export declare function Pagination({ align, className, page, pages, href, firstHref, siblings, ends, prevLabel, nextLabel, firstLabel, lastLabel, summaryLabel, label, ...rest }: PaginationProps): import("react").JSX.Element;

package/dist/components/pagination/pagination.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './pagination.css';
+import { paginationClass, paginationClasses as c, paginationEntries, paginationItemClass, paginationPageAttrs, } from "./index.js";
+export function Pagination({ align, className, page, pages, href, firstHref, siblings, ends, prevLabel, nextLabel, firstLabel, lastLabel, summaryLabel, label = 'Pagination', ...rest }) {
+    const entries = paginationEntries({
+        page,
+        pages,
+        href,
+        firstHref,
+        siblings,
+        ends,
+        prevLabel,
+        nextLabel,
+        firstLabel,
+        lastLabel,
+        summaryLabel,
+    });
+    return (_jsx("nav", { className: paginationClass({ align, className }), "aria-label": label, ...rest, children: _jsx("ul", { className: c.list, children: entries.map((entry) => (_jsx("li", { className: paginationItemClass(entry), children: entry.kind === 'summary' ? (_jsxs("span", { className: c.summary, children: [_jsx("span", { "aria-hidden": "true", children: entry.text }), _jsx("span", { className: "x-visually-hidden", children: entry.label })] })) : entry.kind === 'page' ? (_jsx("a", { className: c.link, ...paginationPageAttrs(entry), children: entry.label })) : entry.kind === 'gap' ? (_jsx("span", { className: c.gap, children: "\u2026" })) : entry.href === undefined ? (_jsx("span", { className: c.disabled, children: entry.label })) : (_jsx("a", { className: c.edge, href: entry.href, rel: entry.rel, children: entry.label })) }, entry.key))) }) }));
+}

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

@@ -0,0 +1,11 @@
+export type PanelVariant = 'plain' | 'raised' | 'accent' | 'callout';
+export type PanelPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+export type PanelElement = 'div' | 'section' | 'article' | 'aside' | 'li' | 'form' | 'header' | 'footer';
+export type PanelOptions = {
+    variant?: PanelVariant;
+    /** Corner ornament: brackets on eve-online, a gold top line on xaroth. */
+    marks?: boolean;
+    padding?: PanelPadding;
+    className?: string;
+};
+export declare const panelClass: ({ variant, marks, padding, className }?: PanelOptions) => string;

package/dist/components/panel/index.js

@@ -0,0 +1,3 @@
+import { bem } from "../../bem.js";
+const panel = bem('x-panel', { defaults: { variant: 'plain', pad: 'md' }, prefixed: ['pad'] });
+export const panelClass = ({ variant = 'plain', marks, padding = 'md', className } = {}) => panel({ variant, pad: padding, marks }, className);

package/dist/components/panel/panel.astro

@@ -0,0 +1,15 @@
+---
+import './panel.css'
+import type { HTMLAttributes } from 'astro/types'
+import { panelClass, type PanelElement, type PanelOptions } from './index.js'
+
+type Props = Omit<HTMLAttributes<'div'>, 'class'> &
+  Omit<PanelOptions, 'className'> & {
+    class?: string
+    as?: PanelElement
+  }
+
+const { variant, marks, padding, as: El = 'div', class: className, slot: _slot, ...rest } = Astro.props
+---
+
+<El {...rest} class={panelClass({ variant, marks, padding, className })}><slot /></El>

package/dist/components/panel/panel.css

@@ -0,0 +1,48 @@
+@layer x.reset, x.core, x.theme, x.utility;
+@layer x.core {
+  .x-panel {
+    --x-panel-pad: var(--x-space-4);
+    position: relative;
+    box-sizing: border-box;
+    min-width: 0;
+    padding: var(--x-panel-pad);
+    color: var(--x-color-text);
+  }
+  @media (min-width: 640px) {
+    .x-panel {
+      --x-panel-pad: var(--x-space-5);
+    }
+  }
+  .x-panel--pad-none {
+    --x-panel-pad: 0;
+  }
+  @media (min-width: 640px) {
+    .x-panel--pad-none {
+      --x-panel-pad: 0;
+    }
+  }
+  .x-panel--pad-sm {
+    --x-panel-pad: var(--x-space-3);
+  }
+  @media (min-width: 640px) {
+    .x-panel--pad-sm {
+      --x-panel-pad: var(--x-space-4);
+    }
+  }
+  .x-panel--pad-lg {
+    --x-panel-pad: var(--x-space-5);
+  }
+  @media (min-width: 640px) {
+    .x-panel--pad-lg {
+      --x-panel-pad: var(--x-space-6);
+    }
+  }
+  .x-panel--pad-xl {
+    --x-panel-pad: var(--x-space-6) var(--x-space-5);
+  }
+  @media (min-width: 640px) {
+    .x-panel--pad-xl {
+      --x-panel-pad: var(--x-space-7);
+    }
+  }
+}

package/dist/components/panel/panel.d.ts

@@ -0,0 +1,7 @@
+import './panel.scss';
+import type { HTMLAttributes } from 'react';
+import { type PanelElement, type PanelOptions } from './index.ts';
+export type PanelProps = Omit<PanelOptions, 'className'> & HTMLAttributes<HTMLElement> & {
+    as?: PanelElement;
+};
+export declare function Panel({ variant, marks, padding, as: El, className, ...rest }: PanelProps): import("react").JSX.Element;

package/dist/components/panel/panel.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './panel.css';
+import { panelClass } from "./index.js";
+export function Panel({ variant, marks, padding, as: El = 'div', className, ...rest }) {
+    return (_jsx(El, { ...rest, className: panelClass({ variant, marks, padding, className }) }));
+}

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

@@ -0,0 +1,37 @@
+export type ProgressTone = 'default' | 'info' | 'success' | 'warning' | 'danger';
+export type ProgressSize = 'sm' | 'md';
+export type ProgressName = {
+    label: string;
+} | {
+    label?: string;
+    'aria-labelledby': string;
+};
+export type ProgressOptions = {
+    /** 0..max. Leave undefined for an indeterminate (busy) bar. */
+    value?: number;
+    max?: number;
+    tone?: ProgressTone;
+    /** Makes the fill a gradient from this tone (left) to `tone` (right), spanning the whole track. */
+    startTone?: ProgressTone;
+    size?: ProgressSize;
+    /** Shows the percentage next to the bar. */
+    showValue?: boolean;
+    className?: string;
+};
+export declare const progressProperty = "--x-progress";
+export declare const progressClass: ({ value, max, tone, startTone, size, className, }?: Omit<ProgressOptions, "showValue">) => string;
+export declare const progressState: ({ value, max, label, showValue, }: Pick<ProgressOptions, "value" | "max" | "showValue"> & {
+    label?: string;
+}) => {
+    width: string | undefined;
+    text: string | undefined;
+    attrs: {
+        'aria-valuetext'?: string | undefined;
+        'aria-valuenow'?: number | undefined;
+        'aria-valuemin': number;
+        'aria-valuemax': number;
+        'aria-label'?: string | undefined;
+        role: "progressbar";
+    };
+};
+export declare const progressStyle: (width: string | undefined) => string | undefined;

package/dist/components/progress/index.js

@@ -0,0 +1,44 @@
+import { bem } from "../../bem.js";
+export const progressProperty = '--x-progress';
+const resolve = (value, max = 100) => {
+    const top = max > 0 ? max : 100;
+    if (value === undefined || Number.isNaN(value)) {
+        return { top, now: undefined, ratio: undefined };
+    }
+    const now = Math.min(Math.max(value, 0), top);
+    return { top, now, ratio: now / top };
+};
+const progress = bem('x-progress', { defaults: { tone: 'default', size: 'md' }, prefixed: ['from'] });
+export const progressClass = ({ value, max, tone = 'default', startTone, size = 'md', className, } = {}) => {
+    const { ratio } = resolve(value, max);
+    return progress({
+        size,
+        indeterminate: ratio === undefined,
+        empty: ratio === 0,
+        done: ratio === 1,
+        tone,
+        gradient: Boolean(startTone),
+        from: startTone,
+    }, className);
+};
+// Attributes for the progressbar root, plus the visible text. Unset keys are left out so they never erase a user
+// attribute.
+export const progressState = ({ value, max, label, showValue, }) => {
+    const { top, now, ratio } = resolve(value, max);
+    const text = ratio === undefined ? undefined : `${Math.round(ratio * 100)}%`;
+    const width = ratio === undefined ? undefined : `${Math.round(ratio * 10000) / 100}%`;
+    return {
+        width,
+        text: showValue ? text : undefined,
+        attrs: {
+            role: 'progressbar',
+            ...(label !== undefined && { 'aria-label': label }),
+            'aria-valuemin': 0,
+            'aria-valuemax': top,
+            ...(now !== undefined && { 'aria-valuenow': now }),
+            ...(showValue && text !== undefined && { 'aria-valuetext': text }),
+        },
+    };
+};
+// A string so Astro emits the same attribute React serializes from a style object.
+export const progressStyle = (width) => width === undefined ? undefined : `${progressProperty}:${width}`;

package/dist/components/progress/progress.astro

@@ -0,0 +1,18 @@
+---
+import './progress.css'
+import type { HTMLAttributes } from 'astro/types'
+import { progressClass, progressState, progressStyle, type ProgressName, type ProgressOptions } from './index.js'
+
+type Props = Omit<HTMLAttributes<'div'>, 'class' | 'style' | 'role'> &
+  Omit<ProgressOptions, 'className'> &
+  ProgressName & { class?: string }
+
+const { value, max, tone, startTone, size, showValue, label, class: className, slot: _slot, ...rest } = Astro.props
+const { width, text, attrs: state } = progressState({ value, max, label, showValue })
+const attrs = { ...rest, ...state, style: progressStyle(width) }
+---
+
+<div {...attrs} class={progressClass({ value, max, tone, startTone, size, className })}>
+  <span class="x-progress__track"><span class="x-progress__fill"></span></span>
+  {text !== undefined && <span class="x-progress__value">{text}</span>}
+</div>

package/dist/components/progress/progress.css

@@ -0,0 +1,115 @@
+@layer x.reset, x.core, x.theme, x.utility;
+@layer x.core {
+  .x-progress {
+    --x-progress-tone: var(--x-progress-default, var(--x-color-accent));
+    --x-progress-height: var(--x-progress-md, 8px);
+    --x-progress-end: var(--x-progress-tone);
+    display: flex;
+    gap: var(--x-space-3);
+    align-items: center;
+    min-width: 9rem;
+  }
+  .x-progress--sm {
+    --x-progress-height: var(--x-progress-sm, 4px);
+    gap: var(--x-space-2);
+  }
+  .x-progress--done {
+    --x-progress-tone: var(--x-color-success);
+  }
+  .x-progress--info {
+    --x-progress-tone: var(--x-color-info);
+  }
+  .x-progress--success {
+    --x-progress-tone: var(--x-color-success);
+  }
+  .x-progress--warning {
+    --x-progress-tone: var(--x-color-warning);
+  }
+  .x-progress--danger {
+    --x-progress-tone: var(--x-color-danger);
+  }
+  .x-progress--gradient {
+    --x-progress-end: color-mix(in srgb, var(--x-progress-tone) var(--x-progress, 100%), var(--x-progress-start));
+  }
+  .x-progress--from-default {
+    --x-progress-start: var(--x-progress-default, var(--x-color-accent));
+  }
+  .x-progress--from-info {
+    --x-progress-start: var(--x-color-info);
+  }
+  .x-progress--from-success {
+    --x-progress-start: var(--x-color-success);
+  }
+  .x-progress--from-warning {
+    --x-progress-start: var(--x-color-warning);
+  }
+  .x-progress--from-danger {
+    --x-progress-start: var(--x-color-danger);
+  }
+  .x-progress__track {
+    position: relative;
+    display: block;
+    flex: 1;
+    min-width: 0;
+    height: var(--x-progress-height);
+    background: var(--x-progress-track, var(--x-color-surface-3));
+    border: 1px solid var(--x-progress-edge, var(--x-color-line-strong));
+    container-type: inline-size;
+  }
+  .x-progress__fill {
+    position: absolute;
+    inset-block: var(--x-progress-inset, 0);
+    inset-inline-start: 0;
+    display: block;
+    width: var(--x-progress, 0%);
+    background: var(--x-progress-tone);
+  }
+  .x-progress--gradient .x-progress__fill {
+    background: linear-gradient(90deg, var(--x-progress-start), var(--x-progress-tone)) 0 0/100cqw 100% no-repeat;
+  }
+  .x-progress__value {
+    flex: none;
+    min-width: 4ch;
+    font-family: var(--x-font-mono);
+    font-size: var(--x-fs-label);
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+    color: var(--x-color-text-muted);
+    text-align: end;
+  }
+  .x-progress--indeterminate .x-progress__track {
+    clip-path: inset(-8px 0);
+  }
+  .x-progress--indeterminate .x-progress__fill {
+    width: 30%;
+    animation: x-progress-sweep var(--x-progress-sweep, 2.4s) cubic-bezier(0.45, 0, 0.55, 1) infinite;
+  }
+  .x-progress--indeterminate.x-progress--gradient .x-progress__fill {
+    animation-name: x-progress-sweep-track;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .x-progress--indeterminate .x-progress__fill {
+      width: 100%;
+      opacity: 0.6;
+      animation: none;
+    }
+  }
+  @keyframes x-progress-sweep {
+    from {
+      inset-inline-start: -30%;
+    }
+    to {
+      inset-inline-start: 100%;
+    }
+  }
+  @keyframes x-progress-sweep-track {
+    from {
+      inset-inline-start: -30%;
+      background-position-x: 30cqw;
+    }
+    to {
+      inset-inline-start: 100%;
+      background-position-x: -100cqw;
+    }
+  }
+}

package/dist/components/progress/progress.d.ts

@@ -0,0 +1,5 @@
+import './progress.scss';
+import type { HTMLAttributes } from 'react';
+import { type ProgressName, type ProgressOptions } from './index.ts';
+export type ProgressProps = Omit<ProgressOptions, 'className'> & ProgressName & Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'role' | 'children'>;
+export declare function Progress({ value, max, tone, startTone, size, showValue, label, className, ...rest }: ProgressProps): import("react").JSX.Element;

package/dist/components/progress/progress.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './progress.css';
+import { progressClass, progressProperty, progressState } from "./index.js";
+export function Progress({ value, max, tone, startTone, size, showValue, label, className, ...rest }) {
+    const { width, text, attrs } = progressState({ value, max, label, showValue });
+    return (_jsxs("div", { ...rest, ...attrs, className: progressClass({ value, max, tone, startTone, size, className }), style: width === undefined ? undefined : { [progressProperty]: width }, children: [_jsx("span", { className: "x-progress__track", children: _jsx("span", { className: "x-progress__fill" }) }), text !== undefined && _jsx("span", { className: "x-progress__value", children: text })] }));
+}

package/dist/components/prose/code-block.astro

@@ -0,0 +1,26 @@
+---
+import './prose.css'
+import type { HTMLAttributes } from 'astro/types'
+import { codeBlockClass, codeHtml } from './index.js'
+
+type Props = Omit<HTMLAttributes<'figure'>, 'class' | 'title'> & {
+  class?: string
+  code: string
+  lang?: string
+  title?: string
+}
+
+const { code, lang, title, class: className, slot: _slot, ...rest } = Astro.props
+---
+
+<figure {...rest} class={codeBlockClass({ className })}>
+  {
+    (title || lang) && (
+      <figcaption class="x-code__bar">
+        {title && <span class="x-code__title">{title}</span>}
+        {lang && <span class="x-code__lang">{lang}</span>}
+      </figcaption>
+    )
+  }
+  <pre class="x-code__pre" tabindex="0"><code set:html={codeHtml(code, lang)} /></pre>
+</figure>

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

@@ -0,0 +1,14 @@
+export type ProseOptions = {
+    className?: string;
+};
+export declare const proseClass: ({ className }?: ProseOptions) => string;
+export type CodeBlockOptions = {
+    className?: string;
+};
+export declare const codeBlockClass: ({ className }?: CodeBlockOptions) => string;
+export type CodeToken = 'kw' | 'str' | 'num' | 'com' | 'fn';
+export declare const tokenizeCode: (code: string, lang?: string) => {
+    type?: CodeToken;
+    text: string;
+}[];
+export declare const codeHtml: (code: string, lang?: string) => string;