@haruhimemoe/ui 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -6,6 +6,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+## [0.3.0] - 2026-09-25
+
+### Added
+
+- `DiscordIcon`: the Discord logo as an inline SVG in the current text color, sized and hidden from screen readers like `GitHubIcon`. The path is Simple Icons' `discord.svg` (CC0 1.0). Discord's brand guidelines ask for the logo in color, black or white, so set one of those as the text color.
+- `SiteFooter` takes `discordHref`. When set, a Discord icon link named "Discord" sits before the GitHub icon in the last row, at the same size. The logo stays white and dims on hover instead of changing color, as Discord's guidelines ask. Without `discordHref` the footer is unchanged.
+
 ## [0.2.0] - 2026-09-24
 
 ### Added
@@ -30,6 +37,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 - `className` on every component, and the extras passed to `buttonClasses` and `fieldClasses`, merge with tailwind-merge: a caller's class replaces a built-in one that sets the same property (`fieldClasses("w-auto")` drops `w-full`).
 - Shell: `SiteHeader` (brand slot, nav links as data with `aria-current`, actions slot), `NavLinks`, `SiteFooter` (link columns as data, fine print, the haruhime.moe wordmark and a GitHub link) and `PageShell` (skip link, header, main, footer).
 
-[unreleased]: https://github.com/haruhimemoe/ui/compare/v0.2.0...HEAD
+[unreleased]: https://github.com/haruhimemoe/ui/compare/v0.3.0...HEAD
+[0.3.0]: https://github.com/haruhimemoe/ui/compare/v0.2.0...v0.3.0
 [0.2.0]: https://github.com/haruhimemoe/ui/compare/v0.1.0...v0.2.0
 [0.1.0]: https://github.com/haruhimemoe/ui/releases/tag/v0.1.0

package/README.md

@@ -4,7 +4,7 @@ React components for the haruhime.moe osu! tools on Next.js. It ships the osu!-w
 
 See every component in its states at [haruhime.moe/ui](https://www.haruhime.moe/ui). The page names the version it runs.
 
-This README describes version 0.2.0. Anything marked "since 0.2.0" is not in 0.1.0. [CHANGELOG.md](./CHANGELOG.md) lists what changed in each version.
+This README describes version 0.3.0. Anything marked "since 0.3.0" is not in 0.2.0, and anything marked "since 0.2.0" is not in 0.1.0. [CHANGELOG.md](./CHANGELOG.md) lists what changed in each version.
 
 ## Requirements
 
@@ -161,7 +161,7 @@ A Server Component can't pass a function to a Client Component. So callback prop
 
 - Every component takes its element's native props and passes them through (`id`, `aria-*`, `data-*`, event handlers). Each section below names that element. The tables list only the extra props.
 - `ref` is a normal prop (React 19). It goes where the native props go: the outer element for most components, the control (`<input>`, `<select>`, `<textarea>`) for the form fields, and the `<button>` for `CopyButton`. On `PageShell` that is the wrapper `<div>`, not `<main>`.
-- `className` is added after the built-in classes and wins on conflict: a class that sets the same property as a built-in one replaces it (merged with [tailwind-merge](https://github.com/dcastil/tailwind-merge)). `<Select className="w-auto">` drops the built-in `w-full`. On `GitHubIcon` and `HaruhimeWordmark`, `className` replaces the default size instead.
+- `className` is added after the built-in classes and wins on conflict: a class that sets the same property as a built-in one replaces it (merged with [tailwind-merge](https://github.com/dcastil/tailwind-merge)). `<Select className="w-auto">` drops the built-in `w-full`. On `DiscordIcon`, `GitHubIcon` and `HaruhimeWordmark`, `className` replaces the default size instead.
 
 ## Components
 
@@ -336,6 +336,16 @@ schema.org structured data in a `<script type="application/ld+json">`. Every `<`
 
 ### Icons
 
+#### `DiscordIcon`
+
+Since 0.3.0. The Discord logo as an inline SVG in the current text color. Hidden from screen readers by default (`aria-hidden="true"`), so put a label on the link around it. Every native `<svg>` prop except `children` and `viewBox`.
+
+The path is Simple Icons' `discord.svg` at tag 16.32.0 ([simple-icons/simple-icons](https://github.com/simple-icons/simple-icons), CC0 1.0). Discord is a trademark of Discord Inc. Its [brand guidelines](https://discord.com/branding) ask for the logo in color, black or white, and not recolored. The icon takes the current text color, so give the element around it one of those (`SiteFooter` uses white).
+
+| Prop | Type | Default | What it does |
+| --- | --- | --- | --- |
+| `className` | `string` | `"size-5"` | Replaces the default size. |
+
 #### `GitHubIcon`
 
 The GitHub mark as an inline SVG in the current text color. Hidden from screen readers by default (`aria-hidden="true"`), so put a label on the link around it. Every native `<svg>` prop except `children` and `viewBox`.
@@ -532,17 +542,18 @@ The `<ul>` of links `SiteHeader` uses, for building your own header. Put it insi
 
 #### `SiteFooter`
 
-Link columns, an extra slot, fine print, the haruhime.moe wordmark and a GitHub icon link. Every native `<footer>` prop. Type: `SiteFooterColumn` (`{ title: string; items: readonly SiteLinkItem[] }`).
+Link columns, an extra slot, fine print, the haruhime.moe wordmark, a GitHub icon link and an optional Discord icon link. Every native `<footer>` prop. Type: `SiteFooterColumn` (`{ title: string; items: readonly SiteLinkItem[] }`).
 
 | Prop | Type | Default | What it does |
 | --- | --- | --- | --- |
 | `columns` | `readonly SiteFooterColumn[]` | `[]` | Each column is a `<nav>` named by its title, which shows above the list. Up to four columns side by side from `sm` up. |
 | `extra` | `ReactNode` | none | Shown above the fine print, e.g. a "clear local data" button. |
 | `finePrint` | `ReactNode` | none | One line of small print, in a `<p>`. |
-| `parentLink` | `boolean` | `true` | Show the haruhime.moe wordmark linking the parent site. With it, the last row holds the wordmark and the GitHub icon, and the fine print sits above. Without it, the fine print shares the row with the icon. |
+| `parentLink` | `boolean` | `true` | Show the haruhime.moe wordmark linking the parent site. With it, the last row holds the wordmark and the icons, and the fine print sits above. Without it, the fine print shares the row with the icons. |
 | `parentHref` | `string` | `"https://www.haruhime.moe"` | Where the wordmark links. |
 | `githubHref` | `string \| false` | `"https://github.com/haruhimemoe"` | Where the GitHub icon links. `false` leaves it out. |
 | `githubLabel` | `string` | `"haruhimemoe on GitHub"` | The GitHub link's accessible name. |
+| `discordHref` | `string` | none | Where the Discord icon links, such as your server's invite (`https://discord.gg/...`). Without it there is no Discord icon. The icon sits before the GitHub icon at the same size. It stays white (`text-c1`) and dims on hover instead of changing color, since Discord's brand guidelines ask that the logo not be recolored. The link's accessible name is "Discord". Since 0.3.0. |
 
 #### `PageShell`
 
@@ -568,7 +579,7 @@ The page frame: a skip link, the header, `<main>` and the footer, with the foote
 - `CopyButton` announces "Copied." (or the failure) through an `<output>`, on every press.
 - `Pagination` moves focus to its "Page X of Y" text when the link you pressed goes away on the first or last page.
 - `SiteHeader` marks the current page with `aria-current`. `PageShell` starts with a skip link to `<main>`.
-- `GitHubIcon` is hidden from screen readers by default: give the link around it an `aria-label`, as `SiteFooter` does.
+- `DiscordIcon` and `GitHubIcon` are hidden from screen readers by default: give the link around each one an `aria-label`, as `SiteFooter` does.
 - You supply the text, so you also supply labels: give icon-only buttons an `aria-label`, and keep `label` props meaningful.
 
 ## Compatibility

package/dist/components/icons/DiscordIcon.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @file src/components/icons/DiscordIcon.tsx
+ * @desc The Discord logo as a static inline SVG (no icon library, no external request), in the
+ *       current text color. Always decorative: label the link around it. The path is Simple
+ *       Icons' discord.svg at tag 16.32.0 (https://github.com/simple-icons/simple-icons, CC0
+ *       1.0). Discord is a trademark of Discord Inc. Its brand guidelines ask for the logo in
+ *       color, black or white and not recolored, so set one of those as the text color.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Fri Sep 25, 2026
+ * @modified Fri Sep 25, 2026
+ */
+import type { ComponentProps } from "react";
+/** Every native `<svg>` prop except children and viewBox. */
+export type DiscordIconProps = Omit<ComponentProps<"svg">, "children" | "viewBox">;
+/**
+ * @function DiscordIcon
+ * @param props {DiscordIconProps} native svg props; `className` replaces the default size
+ *        ("size-5")
+ * @returns {JSX.Element} the Discord logo in the current text color, hidden from assistive tech
+ */
+export declare function DiscordIcon({ className, ...props }: DiscordIconProps): import("react").JSX.Element;

package/dist/components/icons/DiscordIcon.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @function DiscordIcon
+ * @param props {DiscordIconProps} native svg props; `className` replaces the default size
+ *        ("size-5")
+ * @returns {JSX.Element} the Discord logo in the current text color, hidden from assistive tech
+ */
+export function DiscordIcon({ className = "size-5", ...props }) {
+    return (_jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", className: className, fill: "currentColor", ...props, children: _jsx("path", { d: "M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" }) }));
+}

package/dist/components/shell/SiteFooter.d.ts

@@ -2,10 +2,11 @@
  * @file src/components/shell/SiteFooter.tsx
  * @desc Site footer: labelled link columns from data (entries without an href show as text with
  *       a small note, like "soon"), an optional extra slot, one line of fine print, the
- *       haruhime.moe wordmark linking the parent site, and a GitHub icon link.
+ *       haruhime.moe wordmark linking the parent site, a GitHub icon link, and an optional
+ *       Discord icon link beside it (white, as Discord's brand guidelines ask).
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Wed Sep 23, 2026
+ * @modified Fri Sep 25, 2026
  */
 import type { ComponentProps, ReactNode } from "react";
 import type { SiteLinkItem } from "./links.js";
@@ -30,11 +31,13 @@ export type SiteFooterProps = Omit<ComponentProps<"footer">, "children"> & {
     githubHref?: string | false | undefined;
     /** The GitHub link's accessible name. Default "haruhimemoe on GitHub". */
     githubLabel?: string | undefined;
+    /** Where the Discord icon links, e.g. a server invite. No Discord icon without it. */
+    discordHref?: string | undefined;
 };
 /**
  * @function SiteFooter
- * @param props {SiteFooterProps} columns, extra slot, fine print, parent and GitHub links, and
- *        native footer props
+ * @param props {SiteFooterProps} columns, extra slot, fine print, parent, GitHub and Discord
+ *        links, and native footer props
  * @returns {JSX.Element} the footer: columns on top, then extra, fine print and the brand row
  */
-export declare function SiteFooter({ columns, extra, finePrint, parentLink, parentHref, githubHref, githubLabel, className, ...props }: SiteFooterProps): import("react").JSX.Element;
+export declare function SiteFooter({ columns, extra, finePrint, parentLink, parentHref, githubHref, githubLabel, discordHref, className, ...props }: SiteFooterProps): import("react").JSX.Element;

package/dist/components/shell/SiteFooter.js

@@ -1,21 +1,30 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from "../../utils/cx.js";
+import { DiscordIcon } from "../icons/DiscordIcon.js";
 import { GitHubIcon } from "../icons/GitHubIcon.js";
 import { HaruhimeWordmarkLink } from "../icons/HaruhimeWordmarkLink.js";
 import { AutoLink } from "./AutoLink.js";
+// The GitHub icon link in the bottom row.
+const ICON_LINK = "shrink-0 text-c3 transition-colors hover:text-c1";
+// Discord's brand guidelines ask for the logo in color, black or white, never recolored. c1 is
+// white at every hue, so the Discord link stays white and dims on hover instead of changing hue.
+const DISCORD_LINK = "shrink-0 text-c1 transition-opacity hover:opacity-80";
 // Static strings so Tailwind sees every class. Four or more columns share the four-column grid.
 const GRID_COLUMNS = ["", "", "sm:grid-cols-2", "sm:grid-cols-3", "sm:grid-cols-4"];
 /**
  * @function SiteFooter
- * @param props {SiteFooterProps} columns, extra slot, fine print, parent and GitHub links, and
- *        native footer props
+ * @param props {SiteFooterProps} columns, extra slot, fine print, parent, GitHub and Discord
+ *        links, and native footer props
  * @returns {JSX.Element} the footer: columns on top, then extra, fine print and the brand row
  */
-export function SiteFooter({ columns = [], extra, finePrint, parentLink = true, parentHref = "https://www.haruhime.moe", githubHref = "https://github.com/haruhimemoe", githubLabel = "haruhimemoe on GitHub", className, ...props }) {
+export function SiteFooter({ columns = [], extra, finePrint, parentLink = true, parentHref = "https://www.haruhime.moe", githubHref = "https://github.com/haruhimemoe", githubLabel = "haruhimemoe on GitHub", discordHref, className, ...props }) {
     const fine = finePrint ? _jsx("p", { className: "text-c4 text-xs", children: finePrint }) : null;
-    const github = githubHref ? (_jsx("a", { href: githubHref, "aria-label": githubLabel, className: "shrink-0 text-c3 transition-colors hover:text-c1", children: _jsx(GitHubIcon, {}) })) : null;
+    const github = githubHref ? (_jsx("a", { href: githubHref, "aria-label": githubLabel, className: ICON_LINK, children: _jsx(GitHubIcon, {}) })) : null;
+    const discord = discordHref ? (_jsx("a", { href: discordHref, "aria-label": "Discord", className: DISCORD_LINK, children: _jsx(DiscordIcon, {}) })) : null;
+    // Both icons sit together at the row's end, Discord first. One icon stays a direct child.
+    const icons = discord && github ? (_jsxs("div", { className: "flex shrink-0 items-center gap-4", children: [discord, github] })) : ((discord ?? github));
     // With the wordmark, the fine print gets its own line and the row holds wordmark + icon.
     // Without it, the fine print shares the row with the icon.
     const rowStart = parentLink ? _jsx(HaruhimeWordmarkLink, { href: parentHref }) : fine;
-    return (_jsx("footer", { className: cx("border-b4 border-t bg-b6 text-c3 text-sm", className), ...props, children: _jsxs("div", { className: "mx-auto flex max-w-5xl flex-col gap-8 px-4 py-10", children: [columns.length > 0 ? (_jsx("div", { className: cx("grid gap-8", GRID_COLUMNS[Math.min(columns.length, 4)]), children: columns.map((column) => (_jsxs("nav", { "aria-label": column.title, children: [_jsx("p", { className: "mb-3 font-bold text-c4 text-xs uppercase tracking-wide", children: column.title }), _jsx("ul", { className: "flex flex-col gap-2", children: column.items.map((item) => (_jsxs("li", { children: [item.href ? (_jsx(AutoLink, { href: item.href, className: "wrap-anywhere transition-colors hover:text-c1", children: item.label })) : (_jsx("span", { children: item.label })), item.note ? (_jsxs(_Fragment, { children: [" ", _jsx("span", { className: "text-c4 text-xs uppercase tracking-wide", children: item.note })] })) : null] }, `${item.label} ${item.href ?? ""}`))) })] }, column.title))) })) : null, extra || fine || rowStart || github ? (_jsxs("div", { className: "flex flex-col gap-3 border-b4 border-t pt-6", children: [extra, parentLink ? fine : null, rowStart || github ? (_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [rowStart, github] })) : null] })) : null] }) }));
+    return (_jsx("footer", { className: cx("border-b4 border-t bg-b6 text-c3 text-sm", className), ...props, children: _jsxs("div", { className: "mx-auto flex max-w-5xl flex-col gap-8 px-4 py-10", children: [columns.length > 0 ? (_jsx("div", { className: cx("grid gap-8", GRID_COLUMNS[Math.min(columns.length, 4)]), children: columns.map((column) => (_jsxs("nav", { "aria-label": column.title, children: [_jsx("p", { className: "mb-3 font-bold text-c4 text-xs uppercase tracking-wide", children: column.title }), _jsx("ul", { className: "flex flex-col gap-2", children: column.items.map((item) => (_jsxs("li", { children: [item.href ? (_jsx(AutoLink, { href: item.href, className: "wrap-anywhere transition-colors hover:text-c1", children: item.label })) : (_jsx("span", { children: item.label })), item.note ? (_jsxs(_Fragment, { children: [" ", _jsx("span", { className: "text-c4 text-xs uppercase tracking-wide", children: item.note })] })) : null] }, `${item.label} ${item.href ?? ""}`))) })] }, column.title))) })) : null, extra || fine || rowStart || icons ? (_jsxs("div", { className: "flex flex-col gap-3 border-b4 border-t pt-6", children: [extra, parentLink ? fine : null, rowStart || icons ? (_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [rowStart, icons] })) : null] })) : null] }) }));
 }

package/dist/index.d.ts

@@ -5,7 +5,7 @@
  *       their own "use client" directive, so this barrel is safe to import from Server Components.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Wed Sep 23, 2026
+ * @modified Fri Sep 25, 2026
  */
 export { CopyButton, type CopyButtonProps } from "./components/actions/CopyButton.js";
 export { JsonLd, type JsonLdProps } from "./components/actions/JsonLd.js";
@@ -28,6 +28,7 @@ export { fieldClasses } from "./components/forms/fieldStyles.js";
 export { Select, type SelectProps } from "./components/forms/Select.js";
 export { Textarea, type TextareaProps } from "./components/forms/Textarea.js";
 export { TextInput, type TextInputProps } from "./components/forms/TextInput.js";
+export { DiscordIcon, type DiscordIconProps } from "./components/icons/DiscordIcon.js";
 export { GitHubIcon, type GitHubIconProps } from "./components/icons/GitHubIcon.js";
 export { HaruhimeWordmark, type HaruhimeWordmarkProps, } from "./components/icons/HaruhimeWordmark.js";
 export { HaruhimeWordmarkLink, type HaruhimeWordmarkLinkProps, } from "./components/icons/HaruhimeWordmarkLink.js";

package/dist/index.js

@@ -5,7 +5,7 @@
  *       their own "use client" directive, so this barrel is safe to import from Server Components.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Wed Sep 23, 2026
+ * @modified Fri Sep 25, 2026
  */
 // Actions
 export { CopyButton } from "./components/actions/CopyButton.js";
@@ -32,6 +32,7 @@ export { Select } from "./components/forms/Select.js";
 export { Textarea } from "./components/forms/Textarea.js";
 export { TextInput } from "./components/forms/TextInput.js";
 // Icons
+export { DiscordIcon } from "./components/icons/DiscordIcon.js";
 export { GitHubIcon } from "./components/icons/GitHubIcon.js";
 export { HaruhimeWordmark, } from "./components/icons/HaruhimeWordmark.js";
 export { HaruhimeWordmarkLink, } from "./components/icons/HaruhimeWordmarkLink.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haruhimemoe/ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "React components for the haruhime.moe osu! tools on Next.js: the osu!-web-style palette as a Tailwind theme, buttons, cards, form fields, filter controls and the site header and footer.",
   "keywords": [
     "osu",