@haruhimemoe/ui 0.1.0

package/dist/components/actions/CopyButton.js

@@ -0,0 +1,40 @@
+/**
+ * @file src/components/actions/CopyButton.tsx
+ * @desc A button that copies text to the clipboard and reports the result in an <output> beside
+ *       it (a polite live region), like the packs export and doc pages. If the clipboard is
+ *       missing or refuses, it says so and tells the reader to copy by hand. Each press empties
+ *       the status first and then writes the result as a new node, so a second copy is announced
+ *       too.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Wed Sep 23, 2026
+ * @modified Wed Sep 23, 2026
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { cx } from "../../utils/cx.js";
+import { Button } from "../basics/Button.js";
+/**
+ * @function CopyButton
+ * @param props {CopyButtonProps} the text to copy, optional label and status messages, plus
+ *        Button props (`variant` defaults to "secondary"; `className` styles the button itself)
+ * @returns {JSX.Element} the button and an `<output>` that announces "Copied." or the failure
+ */
+export function CopyButton({ text, label = "Copy", copiedMessage = "Copied.", failedMessage = "Couldn't copy. Select the text and copy it by hand.", wrapperClassName, variant = "secondary", ...props }) {
+    const [status, setStatus] = useState(null);
+    const presses = useRef(0);
+    const copy = async () => {
+        // Empty the live region, then fill it with a fresh node: a status that never changes (the
+        // same "Copied." twice) is not announced again.
+        setStatus(null);
+        const press = ++presses.current;
+        try {
+            await navigator.clipboard.writeText(text);
+            setStatus({ result: "copied", press });
+        }
+        catch {
+            setStatus({ result: "failed", press });
+        }
+    };
+    return (_jsxs("div", { className: cx("flex flex-wrap items-center gap-3", wrapperClassName), children: [_jsx(Button, { variant: variant, onClick: copy, ...props, children: label }), _jsx("output", { className: "text-c3 text-sm", children: status ? (_jsx("span", { children: status.result === "copied" ? copiedMessage : failedMessage }, status.press)) : null })] }));
+}

package/dist/components/actions/JsonLd.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @file src/components/actions/JsonLd.tsx
+ * @desc schema.org structured data as a JSON-LD script tag. Every "<" is escaped, so no string
+ *       in the data (a user-supplied name, say) can close the tag or open a comment.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Wed Sep 23, 2026
+ * @modified Wed Sep 23, 2026
+ */
+import type { ComponentProps } from "react";
+/** Native `<script>` props (like `id` or `nonce`), plus the schema.org data. */
+export type JsonLdProps = Omit<ComponentProps<"script">, "children" | "dangerouslySetInnerHTML" | "type" | "src"> & {
+    /** A schema.org object. `@context` defaults to https://schema.org; set it here to override. */
+    data: Record<string, unknown>;
+};
+/**
+ * @function JsonLd
+ * @param props {JsonLdProps} the schema.org data, plus native script props
+ * @returns {JSX.Element} a `<script type="application/ld+json">` tag with the escaped data
+ */
+export declare function JsonLd({ data, ...props }: JsonLdProps): import("react").JSX.Element;

package/dist/components/actions/JsonLd.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @function jsonLdString
+ * @param data {Record<string, unknown>} a schema.org object
+ * @returns {string} JSON with `@context` added and every "<" written as the escape `\u003c`
+ */
+const jsonLdString = (data) => JSON.stringify({ "@context": "https://schema.org", ...data }).replace(/</g, "\\u003c");
+/**
+ * @function JsonLd
+ * @param props {JsonLdProps} the schema.org data, plus native script props
+ * @returns {JSX.Element} a `<script type="application/ld+json">` tag with the escaped data
+ */
+export function JsonLd({ data, ...props }) {
+    return (_jsx("script", { ...props, type: "application/ld+json", 
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: JSON-LD must be raw JSON; jsonLdString escapes "<".
+        dangerouslySetInnerHTML: { __html: jsonLdString(data) } }));
+}

package/dist/components/actions/Pagination.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @file src/components/actions/Pagination.tsx
+ * @desc Previous / next links around "Page X of Y". Renders nothing for a single page. The
+ *       caller builds each page's URL, so it works with any query string or route shape. When
+ *       the link a keyboard user pressed goes away (Next on the last page), focus moves to the
+ *       status text instead of the page body.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Wed Sep 23, 2026
+ * @modified Wed Sep 23, 2026
+ */
+import type { ComponentProps, ReactNode } from "react";
+/** Every native `<nav>` prop except children, plus the page state and the link builder. */
+export type PaginationProps = Omit<ComponentProps<"nav">, "children"> & {
+    /** The current page, 1-based. */
+    page: number;
+    /** How many pages there are. At 1 or fewer, nothing renders. */
+    pageCount: number;
+    /** Builds the URL for a page number, e.g. `(p) => \`/packs?page=${p}\``. */
+    hrefFor: (page: number) => string;
+    /** Text of the link to the page before. Defaults to "Previous". */
+    previousLabel?: ReactNode | undefined;
+    /** Text of the link to the page after. Defaults to "Next". */
+    nextLabel?: ReactNode | undefined;
+    /** The middle text. Defaults to "Page X of Y". */
+    formatStatus?: ((page: number, pageCount: number) => ReactNode) | undefined;
+};
+/**
+ * @function Pagination
+ * @param props {PaginationProps} page, pageCount and hrefFor, optional labels, plus native nav
+ *        props (`aria-label` defaults to "Pages")
+ * @returns {JSX.Element | null} a `<nav>` with previous / next pill links, or null for one page
+ */
+export declare function Pagination({ page, pageCount, hrefFor, previousLabel, nextLabel, formatStatus, className, ...props }: PaginationProps): import("react").JSX.Element | null;

package/dist/components/actions/Pagination.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @file src/components/actions/Pagination.tsx
+ * @desc Previous / next links around "Page X of Y". Renders nothing for a single page. The
+ *       caller builds each page's URL, so it works with any query string or route shape. When
+ *       the link a keyboard user pressed goes away (Next on the last page), focus moves to the
+ *       status text instead of the page body.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Wed Sep 23, 2026
+ * @modified Wed Sep 23, 2026
+ */
+import Link from "next/link.js";
+import { cx } from "../../utils/cx.js";
+import { buttonClasses } from "../basics/buttonStyles.js";
+import { PaginationStatus } from "./PaginationStatus.js";
+const defaultStatus = (page, pageCount) => `Page ${page} of ${pageCount}`;
+/**
+ * @function Pagination
+ * @param props {PaginationProps} page, pageCount and hrefFor, optional labels, plus native nav
+ *        props (`aria-label` defaults to "Pages")
+ * @returns {JSX.Element | null} a `<nav>` with previous / next pill links, or null for one page
+ */
+export function Pagination({ page, pageCount, hrefFor, previousLabel = "Previous", nextLabel = "Next", formatStatus = defaultStatus, className, ...props }) {
+    if (pageCount <= 1)
+        return null;
+    return (_jsxs("nav", { "aria-label": "Pages", className: cx("flex items-center justify-between gap-3 text-sm", className), ...props, children: [page > 1 ? (_jsx(Link, { href: hrefFor(page - 1), rel: "prev", className: buttonClasses({ variant: "secondary" }), children: previousLabel })) : (_jsx("span", {})), _jsx(PaginationStatus, { children: formatStatus(page, pageCount) }), page < pageCount ? (_jsx(Link, { href: hrefFor(page + 1), rel: "next", className: buttonClasses({ variant: "secondary" }), children: nextLabel })) : (_jsx("span", {}))] }));
+}

package/dist/components/actions/PaginationStatus.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @file src/components/actions/PaginationStatus.tsx
+ * @desc Pagination's "Page X of Y" text (internal). It also keeps keyboard focus in place: when
+ *       the link that had focus goes away (Next on the last page, Previous on the first), focus
+ *       moves here instead of falling back to the page body.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Wed Sep 23, 2026
+ * @modified Wed Sep 23, 2026
+ */
+import { type ReactNode } from "react";
+/**
+ * @function PaginationStatus
+ * @param props {{ children: ReactNode }} the status text
+ * @returns {JSX.Element} a `<span aria-current="page">` that script can focus (tabIndex -1), so
+ *          it stays out of the tab order
+ */
+export declare function PaginationStatus({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/actions/PaginationStatus.js

@@ -0,0 +1,44 @@
+/**
+ * @file src/components/actions/PaginationStatus.tsx
+ * @desc Pagination's "Page X of Y" text (internal). It also keeps keyboard focus in place: when
+ *       the link that had focus goes away (Next on the last page, Previous on the first), focus
+ *       moves here instead of falling back to the page body.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Wed Sep 23, 2026
+ * @modified Wed Sep 23, 2026
+ */
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+/**
+ * @function PaginationStatus
+ * @param props {{ children: ReactNode }} the status text
+ * @returns {JSX.Element} a `<span aria-current="page">` that script can focus (tabIndex -1), so
+ *          it stays out of the tab order
+ */
+export function PaginationStatus({ children }) {
+    const ref = useRef(null);
+    const lastFocused = useRef(null);
+    // Remember what last had focus inside the nav.
+    useEffect(() => {
+        const nav = ref.current?.parentElement;
+        if (!nav)
+            return;
+        const onFocusIn = (event) => {
+            lastFocused.current = event.target;
+        };
+        nav.addEventListener("focusin", onFocusIn);
+        return () => nav.removeEventListener("focusin", onFocusIn);
+    }, []);
+    // After each render: if that element left the page and focus fell to the body, take it here.
+    useEffect(() => {
+        const last = lastFocused.current;
+        if (last === null || last.isConnected)
+            return;
+        lastFocused.current = null;
+        const active = document.activeElement;
+        if (active === null || active === document.body)
+            ref.current?.focus();
+    });
+    return (_jsx("span", { ref: ref, tabIndex: -1, "aria-current": "page", className: "text-c4", children: children }));
+}

package/dist/components/basics/Button.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @file src/components/basics/Button.tsx
+ * @desc Pill button primitive. Defaults to type="button" so it never submits a form by accident.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Wed Sep 23, 2026
+ * @modified Wed Sep 23, 2026
+ */
+import type { ComponentProps } from "react";
+import { type ButtonSize, type ButtonVariant } from "./buttonStyles.js";
+/** Every native `<button>` prop (including `ref`), plus a variant and a size. */
+export type ButtonProps = ComponentProps<"button"> & {
+    variant?: ButtonVariant | undefined;
+    size?: ButtonSize | undefined;
+};
+/**
+ * @function Button
+ * @param props {ButtonProps} native button props, plus an optional variant and size
+ * @returns {JSX.Element} a `<button>` styled as a pill
+ */
+export declare function Button({ variant, size, className, type, ...props }: ButtonProps): import("react").JSX.Element;

package/dist/components/basics/Button.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { buttonClasses } from "./buttonStyles.js";
+/**
+ * @function Button
+ * @param props {ButtonProps} native button props, plus an optional variant and size
+ * @returns {JSX.Element} a `<button>` styled as a pill
+ */
+export function Button({ variant, size, className, type = "button", ...props }) {
+    return _jsx("button", { type: type, className: buttonClasses({ variant, size, className }), ...props });
+}

package/dist/components/basics/ButtonLink.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @file src/components/basics/ButtonLink.tsx
+ * @desc next/link styled as a pill button. Off-site hrefs (a scheme like https: or mailto:, or
+ *       //host) render a plain <a>, with rel="noreferrer" when opened in a new tab.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Wed Sep 23, 2026
+ * @modified Wed Sep 23, 2026
+ */
+import Link from "next/link.js";
+import type { ComponentProps } from "react";
+import { type ButtonSize, type ButtonVariant } from "./buttonStyles.js";
+/** Every next/link prop (including `ref`), plus a button variant and size. */
+export type ButtonLinkProps = ComponentProps<typeof Link> & {
+    variant?: ButtonVariant | undefined;
+    size?: ButtonSize | undefined;
+};
+/**
+ * @function ButtonLink
+ * @param props {ButtonLinkProps} next/link props, plus an optional button variant and size
+ * @returns {JSX.Element} a next/link styled as a pill button, or a plain `<a>` for an external
+ *          href (next/link's own props are dropped there)
+ */
+export declare function ButtonLink({ variant, size, className, href, target, rel, ...props }: ButtonLinkProps): import("react").JSX.Element;

package/dist/components/basics/ButtonLink.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @file src/components/basics/ButtonLink.tsx
+ * @desc next/link styled as a pill button. Off-site hrefs (a scheme like https: or mailto:, or
+ *       //host) render a plain <a>, with rel="noreferrer" when opened in a new tab.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Wed Sep 23, 2026
+ * @modified Wed Sep 23, 2026
+ */
+import Link from "next/link.js";
+import { isExternalHref } from "../../utils/href.js";
+import { buttonClasses } from "./buttonStyles.js";
+/**
+ * @function ButtonLink
+ * @param props {ButtonLinkProps} next/link props, plus an optional button variant and size
+ * @returns {JSX.Element} a next/link styled as a pill button, or a plain `<a>` for an external
+ *          href (next/link's own props are dropped there)
+ */
+export function ButtonLink({ variant, size, className, href, target, rel, ...props }) {
+    const classes = buttonClasses({ variant, size, className });
+    if (typeof href === "string" && isExternalHref(href)) {
+        const { as: _as, replace: _replace, scroll: _scroll, shallow: _shallow, passHref: _passHref, prefetch: _prefetch, locale: _locale, legacyBehavior: _legacyBehavior, onNavigate: _onNavigate, transitionTypes: _transitionTypes, ...anchorProps } = props;
+        return (_jsx("a", { href: href, target: target, rel: rel ?? (target === "_blank" ? "noreferrer" : undefined), className: classes, ...anchorProps }));
+    }
+    return _jsx(Link, { href: href, target: target, rel: rel, className: classes, ...props });
+}

package/dist/components/basics/Card.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @file src/components/basics/Card.tsx
+ * @desc osu!-web panel: rounded b4 surface, optional h2 title that labels the region. Server-safe
+ *       (useId works in Server Components).
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Wed Sep 23, 2026
+ * @modified Wed Sep 23, 2026
+ */
+import { type ComponentProps, type ReactNode } from "react";
+/** Every native `<section>` prop (including `ref`), with `title` rendered as the card's h2. */
+export type CardProps = Omit<ComponentProps<"section">, "title"> & {
+    title?: ReactNode | undefined;
+};
+/**
+ * @function Card
+ * @param props {CardProps} an optional title that labels the region, plus native section props
+ * @returns {JSX.Element} a rounded panel, labelled by its title when one is given
+ */
+export declare function Card({ title, className, children, ...props }: CardProps): import("react").JSX.Element;

package/dist/components/basics/Card.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @file src/components/basics/Card.tsx
+ * @desc osu!-web panel: rounded b4 surface, optional h2 title that labels the region. Server-safe
+ *       (useId works in Server Components).
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Wed Sep 23, 2026
+ * @modified Wed Sep 23, 2026
+ */
+import { useId } from "react";
+import { cx } from "../../utils/cx.js";
+/**
+ * @function Card
+ * @param props {CardProps} an optional title that labels the region, plus native section props
+ * @returns {JSX.Element} a rounded panel, labelled by its title when one is given
+ */
+export function Card({ title, className, children, ...props }) {
+    const headingId = useId();
+    return (_jsxs("section", { "aria-labelledby": title ? headingId : undefined, className: cx("rounded-[10px] bg-b4 p-5 text-c2", className), ...props, children: [title ? (_jsx("h2", { id: headingId, className: "mb-2 font-bold text-c1 text-lg", children: title })) : null, children] }));
+}

package/dist/components/basics/Notice.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @file src/components/basics/Notice.tsx
+ * @desc Short status text in one of three tones (info, warning, error). Silent to screen readers
+ *       unless `live` is set: then errors get role="alert" and the other tones role="status". A
+ *       live info or warning notice should stay mounted with its children changing, since a
+ *       status region that mounts with its text already inside may not be announced.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Wed Sep 23, 2026
+ * @modified Wed Sep 23, 2026
+ */
+import type { ComponentProps } from "react";
+export type NoticeTone = "info" | "warning" | "error";
+/** Every native `<p>` prop (including `ref`), plus a tone, a live flag and the element to render. */
+export type NoticeProps = ComponentProps<"p"> & {
+    tone?: NoticeTone | undefined;
+    /**
+     * Make it a live region: role="alert" for errors, role="status" otherwise. Keep a live info or
+     * warning notice mounted and change its children (empty when idle) so each message is read.
+     */
+    live?: boolean | undefined;
+    /** Render a `<div>` instead of a `<p>` when the notice holds block content like a list. */
+    as?: "p" | "div" | undefined;
+};
+/**
+ * @function Notice
+ * @param props {NoticeProps} native paragraph props, plus tone (default "info"), live (default
+ *        false) and as (default "p")
+ * @returns {JSX.Element} a small toned `<p>` (or `<div>`), announced only when live
+ */
+export declare function Notice({ tone, live, as, className, ...props }: NoticeProps): import("react").JSX.Element;

package/dist/components/basics/Notice.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "../../utils/cx.js";
+const TONES = {
+    info: "text-c3",
+    warning: "text-amber-300",
+    error: "text-rose-300",
+};
+/**
+ * @function Notice
+ * @param props {NoticeProps} native paragraph props, plus tone (default "info"), live (default
+ *        false) and as (default "p")
+ * @returns {JSX.Element} a small toned `<p>` (or `<div>`), announced only when live
+ */
+export function Notice({ tone = "info", live = false, as = "p", className, ...props }) {
+    const role = live ? (tone === "error" ? "alert" : "status") : undefined;
+    const classes = cx("text-sm", TONES[tone], className);
+    if (as === "div") {
+        // Same attributes either way; only the ref's element type differs.
+        return _jsx("div", { role: role, className: classes, ...props });
+    }
+    return _jsx("p", { role: role, className: classes, ...props });
+}

package/dist/components/basics/PageHeader.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @file src/components/basics/PageHeader.tsx
+ * @desc The one way to title a page: h1 at the shared scale, optional lead, meta line, actions.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Wed Sep 23, 2026
+ * @modified Wed Sep 23, 2026
+ */
+import type { ComponentProps, ReactNode } from "react";
+/** Native `<div>` props (including `ref`) for the wrapper, plus the header's slots. */
+export type PageHeaderProps = Omit<ComponentProps<"div">, "title"> & {
+    /** The page's h1. */
+    title: ReactNode;
+    /** A sentence under the title. Rendered in a `<p>`, so keep it inline content. */
+    lead?: ReactNode | undefined;
+    /** A small muted line under the lead (dates, counts, owner). Also a `<p>`. */
+    meta?: ReactNode | undefined;
+    /** Buttons or links shown to the right of the title, wrapping below it on narrow screens. */
+    actions?: ReactNode | undefined;
+};
+/**
+ * @function PageHeader
+ * @param props {PageHeaderProps} the page's title, and optional lead text, meta line, and actions
+ * @returns {JSX.Element} the page's one h1, with its optional lead, meta line and actions
+ */
+export declare function PageHeader({ title, lead, meta, actions, className, ...props }: PageHeaderProps): import("react").JSX.Element;

package/dist/components/basics/PageHeader.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../../utils/cx.js";
+/**
+ * @function PageHeader
+ * @param props {PageHeaderProps} the page's title, and optional lead text, meta line, and actions
+ * @returns {JSX.Element} the page's one h1, with its optional lead, meta line and actions
+ */
+export function PageHeader({ title, lead, meta, actions, className, ...props }) {
+    return (_jsxs("div", { className: cx("flex flex-wrap items-end justify-between gap-x-6 gap-y-4", className), ...props, children: [_jsxs("div", { className: "min-w-0 max-w-3xl", children: [_jsx("h1", { className: "wrap-anywhere font-extrabold text-3xl text-c1 tracking-tight sm:text-4xl", children: title }), lead ? _jsx("p", { className: "mt-2 max-w-2xl text-base text-c3 sm:text-lg", children: lead }) : null, meta ? _jsx("p", { className: "mt-2 text-c4 text-sm", children: meta }) : null] }), actions ? _jsx("div", { className: "flex flex-wrap items-center gap-2", children: actions }) : null] }));
+}

package/dist/components/basics/Prose.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @file src/components/basics/Prose.tsx
+ * @desc Long-form typography for MDX, docs and legal text, styled with the osu!-web tokens.
+ *       Styles the plain elements inside it (headings, links, lists, code, tables).
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Wed Sep 23, 2026
+ * @modified Wed Sep 23, 2026
+ */
+import type { ComponentProps } from "react";
+/** Every native `<div>` prop (including `ref`). */
+export type ProseProps = ComponentProps<"div">;
+/**
+ * @function Prose
+ * @param props {ProseProps} native div props; children are the rendered Markdown or MDX
+ * @returns {JSX.Element} a max-w-3xl `<div>` that styles the headings, links, lists, code and
+ *          tables inside it
+ */
+export declare function Prose({ className, ...props }: ProseProps): import("react").JSX.Element;

package/dist/components/basics/Prose.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "../../utils/cx.js";
+/**
+ * @function Prose
+ * @param props {ProseProps} native div props; children are the rendered Markdown or MDX
+ * @returns {JSX.Element} a max-w-3xl `<div>` that styles the headings, links, lists, code and
+ *          tables inside it
+ */
+export function Prose({ className, ...props }) {
+    return (_jsx("div", { className: cx("max-w-3xl text-c2 leading-relaxed [&_a:hover]:text-c1 [&_a]:text-h1 [&_a]:underline [&_code]:rounded [&_code]:bg-b4 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:text-[0.9em] [&_h2]:mt-10 [&_h2]:mb-3 [&_h2]:font-bold [&_h2]:text-2xl [&_h2]:text-c1 [&_h3]:mt-6 [&_h3]:mb-2 [&_h3]:font-bold [&_h3]:text-c1 [&_h3]:text-lg [&_hr]:my-8 [&_hr]:border-b3 [&_li]:mt-1 [&_ol]:list-decimal [&_ol]:pl-6 [&_p]:mt-3 [&_pre]:mt-3 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-b6 [&_pre]:p-3 [&_pre]:text-sm [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_strong]:text-c1 [&_table]:mt-4 [&_table]:w-full [&_table]:text-sm [&_td]:border-b3 [&_td]:border-b [&_td]:px-2 [&_td]:py-1.5 [&_th]:border-b3 [&_th]:border-b [&_th]:px-2 [&_th]:py-1.5 [&_th]:text-left [&_th]:text-c1 [&_ul]:mt-3 [&_ul]:list-disc [&_ul]:pl-6", className), ...props }));
+}

package/dist/components/basics/buttonStyles.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @file src/components/basics/buttonStyles.ts
+ * @desc Shared class builder for Button and ButtonLink (osu!-web pill buttons).
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Wed Sep 23, 2026
+ * @modified Wed Sep 23, 2026
+ */
+export type ButtonVariant = "primary" | "secondary" | "ghost";
+export type ButtonSize = "md" | "lg";
+/** Options for {@link buttonClasses}. */
+export type ButtonClassOptions = {
+    variant?: ButtonVariant | undefined;
+    size?: ButtonSize | undefined;
+    className?: string | undefined;
+};
+/**
+ * @function buttonClasses
+ * @param opts {ButtonClassOptions} variant (default "primary"), size (default "md") and extra
+ *        classes
+ * @returns {string} the pill button classes, with the caller's className appended last (it
+ *          replaces a built-in class that sets the same property)
+ */
+export declare const buttonClasses: ({ variant, size, className, }?: ButtonClassOptions) => string;

package/dist/components/basics/buttonStyles.js

@@ -0,0 +1,28 @@
+/**
+ * @file src/components/basics/buttonStyles.ts
+ * @desc Shared class builder for Button and ButtonLink (osu!-web pill buttons).
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Wed Sep 23, 2026
+ * @modified Wed Sep 23, 2026
+ */
+import { cx } from "../../utils/cx.js";
+const BASE = "inline-flex items-center justify-center gap-2 rounded-full font-bold transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-h1 disabled:cursor-not-allowed disabled:opacity-50";
+// Hover only when not disabled. `not-disabled:` (not `enabled:`) so links, which are never
+// :disabled, keep their hover colors.
+const VARIANTS = {
+    primary: "bg-h2 text-c1 not-disabled:hover:bg-h1 not-disabled:hover:text-b6",
+    secondary: "bg-b3 text-c1 not-disabled:hover:bg-b2",
+    ghost: "bg-transparent text-c2 not-disabled:hover:bg-b4 not-disabled:hover:text-c1",
+};
+const SIZES = {
+    md: "h-9 px-4 text-sm",
+    lg: "h-11 px-6 text-base",
+};
+/**
+ * @function buttonClasses
+ * @param opts {ButtonClassOptions} variant (default "primary"), size (default "md") and extra
+ *        classes
+ * @returns {string} the pill button classes, with the caller's className appended last (it
+ *          replaces a built-in class that sets the same property)
+ */
+export const buttonClasses = ({ variant = "primary", size = "md", className, } = {}) => cx(BASE, VARIANTS[variant], SIZES[size], className);

package/dist/components/filters/Chip.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @file src/components/filters/Chip.tsx
+ * @desc Toggle pill (osu! beatmap listing style): a `<button>` with `aria-pressed`, pink when on.
+ *       Same look as the mod chips on packs.haruhime.moe. In forced-colors mode a pressed chip
+ *       takes the system highlight colors, so on and off still look different.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Wed Sep 23, 2026
+ * @modified Wed Sep 23, 2026
+ */
+import type { ComponentProps } from "react";
+/** Every native `<button>` prop (including `ref`), plus the pressed state and its handler. */
+export type ChipProps = Omit<ComponentProps<"button">, "aria-pressed"> & {
+    /** Whether the chip is on. */
+    pressed: boolean;
+    /** Called with the new state when the chip is clicked (or toggled with Enter or Space). */
+    onPressedChange?: ((pressed: boolean) => void) | undefined;
+};
+/**
+ * @function Chip
+ * @param props {ChipProps} native button props, plus `pressed` and an optional `onPressedChange`.
+ *        A caller's `onClick` runs first; calling `event.preventDefault()` in it skips the toggle.
+ *        Callbacks can only be passed from client code.
+ * @returns {JSX.Element} a `<button type="button" aria-pressed>` styled as a pill
+ */
+export declare function Chip({ pressed, onPressedChange, onClick, className, type, ...props }: ChipProps): import("react").JSX.Element;

package/dist/components/filters/Chip.js

@@ -0,0 +1,29 @@
+/**
+ * @file src/components/filters/Chip.tsx
+ * @desc Toggle pill (osu! beatmap listing style): a `<button>` with `aria-pressed`, pink when on.
+ *       Same look as the mod chips on packs.haruhime.moe. In forced-colors mode a pressed chip
+ *       takes the system highlight colors, so on and off still look different.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Wed Sep 23, 2026
+ * @modified Wed Sep 23, 2026
+ */
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "../../utils/cx.js";
+const BASE = "rounded-full px-2.5 py-0.5 font-bold text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40";
+const PRESSED = "bg-h1 text-b6 forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]";
+const UNPRESSED = "bg-b3 text-c2 not-disabled:hover:bg-b2";
+/**
+ * @function Chip
+ * @param props {ChipProps} native button props, plus `pressed` and an optional `onPressedChange`.
+ *        A caller's `onClick` runs first; calling `event.preventDefault()` in it skips the toggle.
+ *        Callbacks can only be passed from client code.
+ * @returns {JSX.Element} a `<button type="button" aria-pressed>` styled as a pill
+ */
+export function Chip({ pressed, onPressedChange, onClick, className, type = "button", ...props }) {
+    return (_jsx("button", { type: type, "aria-pressed": pressed, onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                onPressedChange?.(!pressed);
+        }, className: cx(BASE, pressed ? PRESSED : UNPRESSED, className), ...props }));
+}

package/dist/components/filters/ChipGroup.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @file src/components/filters/ChipGroup.tsx
+ * @desc Labeled multi-select row of Chips (mods, game modes). Each chip is its own toggle button
+ *       in the tab order; the group reports the picked values in the options' order.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Wed Sep 23, 2026
+ * @modified Wed Sep 23, 2026
+ */
+import { type ComponentProps, type ReactNode } from "react";
+/** One chip: the value it stands for, what it shows, and whether it can be toggled. */
+export type ChipOption = {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean | undefined;
+};
+/** Every native `<fieldset>` prop except `onChange` and `children`, plus label, options, value. */
+export type ChipGroupProps = Omit<ComponentProps<"fieldset">, "onChange" | "children"> & {
+    /** Names the group (`role="group"` + `aria-labelledby`). */
+    label: ReactNode;
+    /**
+     * Leave the name to a surrounding FilterRow: no label shows, and the fieldset is not a group
+     * of its own (role none), so screen readers hear the row's name once.
+     */
+    hideLabel?: boolean | undefined;
+    options: readonly ChipOption[];
+    /** The picked values. */
+    value: readonly string[];
+    /** Called with the new list of picked values, in the options' order. */
+    onChange: (value: string[]) => void;
+};
+/**
+ * @function ChipGroup
+ * @param props {ChipGroupProps} label, options, picked values and a change handler, plus native
+ *        fieldset props (`disabled` turns off every chip). `onChange` is a function, so render
+ *        this from client code.
+ * @returns {JSX.Element} a `<fieldset>` (role group) labeled by its label, one Chip per option.
+ *          With `hideLabel`, the fieldset has role none and no label.
+ */
+export declare function ChipGroup({ label, hideLabel, options, value, onChange, className, ...props }: ChipGroupProps): import("react").JSX.Element;