@hackcove/ui 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jacobus Langner
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,69 @@
-# Temporary Holding Version
+# @hackcove/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Hack Cove React components, written against Tailwind v4 utilities. They carry no theme: pair them
+with a `@hackcove/theme-*` package such as `@hackcove/theme-catppuccin-mocha`, or use them on their
+own for the default light look.
+
+Status: `0.x`, published to npm. License: MIT.
+
+## Install
+
+```sh
+bun add @hackcove/ui
+# peers: react >= 18, tailwindcss ^4
+```
+
+Tailwind skips `node_modules`, so tell it to scan the build for the utilities the components use,
+in the stylesheet that imports Tailwind (the path is relative to that file):
+
+```css
+@import "tailwindcss";
+@source "../node_modules/@hackcove/ui/dist";
+```
+
+## Use
+
+```tsx
+import { Body, Card, PageHeading, Pill } from "@hackcove/ui";
+
+export const Example = () => (
+  <Card title="Status" count={2}>
+    <PageHeading>All good</PageHeading>
+    <Body>Two things shipped.</Body> <Pill tone="emerald">ok</Pill>
+  </Card>
+);
+```
+
+## What is exported
+
+- Primitives: `Card`, `EpicHeader`, `Empty`, `PageTitle`, `Pill`, `groupByEpic`, `Markdown`.
+- Typography roles (each pins size + weight, takes a `color` and an `as`): `Display`, `Lead`,
+  `PageHeading`, `SectionHeading`, `SubsectionHeading`, `ModalHeading`, `Subtitle`, `Overline`,
+  `Body`, `BodyStrong`, `Caption`.
+- Controls: `Button`, `buttonClass` (the classes of a `Button`, for a router's own `<Link>`), `IconButton` (a square button holding one icon; `label` is required and becomes its `aria-label` and `title`), `Input` (a text input; `icon` adds a leading icon inside the field), `Textarea` (a multi-line text input, `rows` defaults to 3), `Select` (a native `<select>` in the control look; takes `<option>` children and keeps the browser's arrow). `Checkbox` (a native checkbox with its label; `className` goes on the label, other props on the input). `Field` (a label above a control, `htmlFor` names the control's id; a `hint` sits under it, and an `error` replaces the hint with a `role="alert"` line). `Callout` (a tinted notice box; `tone` is `neutral`, `info` (default), `positive`, `warn` or `danger`; an optional `title` sits in bold above the body). `NavTabs` (a row of pill links in a `<nav>`; `items` are `{ label, href, active? }`, `label` names the landmark, the active one is filled and gets `aria-current="page"`). `navTabClass` (the classes of one tab, for a router's own `<Link>`). `ToggleChip` (an on/off filter pill; `pressed` sets `aria-pressed` and the filled look, `dot` adds a leading colour dot, and the caller toggles it in `onClick`). `FilterGroup` (a `<fieldset>` with a small uppercase `legend` over a wrapped row of its children, e.g. `ToggleChip`s; `className` goes on the fieldset).
+
+## Palette
+
+`palette.json` (in the repo, not in the package) lists the colour utilities the components may use,
+by role.
+
+| Role       | For                                                                   |
+| ---------- | --------------------------------------------------------------------- |
+| `surface`  | Cards and panels: the main background.                                |
+| `subtle`   | A step off the surface: table stripes, hover rows.                    |
+| `inset`    | A step deeper: wells, chips, pressed fills.                           |
+| `line`     | Borders and dividers.                                                 |
+| `ink`      | Text, from primary down to muted, plus input placeholders.            |
+| `accent`   | Primary actions, links, focus rings and controls; text on the accent. |
+| `positive` | Success: fill, text and border.                                       |
+| `warn`     | Caution: fill, text and border.                                       |
+| `danger`   | Errors and destructive actions: fill, text and border.                |
+| `info`     | Neutral notes: fill, text and border.                                 |
+
+A theme remaps every utility in `palette.json`; a component uses no colour utility outside it.
+
+## Develop
+
+From the workspace root: `bunx nx run-many -t typecheck lint test build -p ui` and
+`bunx nx pack-check ui` (the tarball is `dist/` plus `package.json`, `README.md`, `LICENSE`).
+The stories live in `apps/storybook`.

package/dist/Button.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithoutRef, ReactElement } from "react";
+export type ButtonVariant = "primary" | "outline" | "ghost";
+/** The classes of a Button, for a router's own <Link> that should look like one. */
+export declare function buttonClass(variant?: ButtonVariant): string;
+/** A button in the primary, outline or ghost style. Defaults to `type="button"`. */
+export declare function Button({ variant, className, ...rest }: {
+    variant?: ButtonVariant;
+} & ComponentPropsWithoutRef<"button">): ReactElement;

package/dist/Button.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx, focusRing } from "./cx.js";
+const BASE = `inline-flex items-center justify-center gap-2 rounded-lg border px-4 py-2 text-sm font-medium transition disabled:pointer-events-none disabled:opacity-50 ${focusRing}`;
+const VARIANT = {
+    primary: "border-violet-600 bg-violet-600 text-violet-50 hover:bg-violet-700",
+    outline: "border-violet-600 text-violet-600 hover:bg-violet-50",
+    ghost: "border-transparent text-slate-600 hover:bg-slate-100",
+};
+/** The classes of a Button, for a router's own <Link> that should look like one. */
+export function buttonClass(variant = "primary") {
+    return cx(BASE, VARIANT[variant]);
+}
+/** A button in the primary, outline or ghost style. Defaults to `type="button"`. */
+export function Button({ variant = "primary", className, ...rest }) {
+    return _jsx("button", { type: "button", className: cx(buttonClass(variant), className), ...rest });
+}

package/dist/Callout.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+/** The colour family of a callout. */
+export type CalloutTone = "neutral" | "info" | "positive" | "warn" | "danger";
+/** A tinted notice box, with an optional bold title above its body. */
+export declare function Callout({ tone, title, children, className, ...rest }: {
+    /** Defaults to "info". */
+    tone?: CalloutTone;
+    title?: ReactNode;
+    children: ReactNode;
+} & Omit<HTMLAttributes<HTMLDivElement>, "title">): ReactElement;

package/dist/Callout.js

@@ -0,0 +1,13 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+const TONES = {
+    neutral: "border-slate-200 bg-slate-50 text-slate-700",
+    info: "border-blue-200 bg-blue-50 text-blue-800",
+    positive: "border-emerald-200 bg-emerald-50 text-emerald-800",
+    warn: "border-amber-200 bg-amber-50 text-amber-800",
+    danger: "border-red-200 bg-red-50 text-red-800",
+};
+/** A tinted notice box, with an optional bold title above its body. */
+export function Callout({ tone = "info", title, children, className, ...rest }) {
+    return (_jsx("div", { className: cx("rounded-xl border p-4 text-sm", TONES[tone], className), ...rest, children: title ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "font-semibold", children: title }), _jsx("div", { className: "mt-1", children: children })] })) : (children) }));
+}

package/dist/Checkbox.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+/** A native checkbox with its label. `className` goes on the label; every other prop goes on the input. */
+export declare function Checkbox({ label, className, ...rest }: {
+    label: ReactNode;
+} & Omit<ComponentPropsWithoutRef<"input">, "type">): ReactElement;

package/dist/Checkbox.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx, focusRing } from "./cx.js";
+/** A native checkbox with its label. `className` goes on the label; every other prop goes on the input. */
+export function Checkbox({ label, className, ...rest }) {
+    return (_jsxs("label", { className: cx("inline-flex cursor-pointer items-center gap-2 text-sm text-slate-700", className), children: [_jsx("input", { type: "checkbox", className: cx("h-4 w-4 accent-violet-600", focusRing), ...rest }), label] }));
+}

package/dist/Field.d.ts

@@ -0,0 +1,12 @@
+import type { ReactElement, ReactNode } from "react";
+/** A label above a control, with a hint or an error line under it. An error replaces the hint. */
+export declare function Field({ label, htmlFor, hint, error, children, className, }: {
+    label: ReactNode;
+    /** The id of the control inside; the label's htmlFor. */
+    htmlFor: string;
+    hint?: ReactNode;
+    /** Replaces the hint when set. */
+    error?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}): ReactElement;

package/dist/Field.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/** A label above a control, with a hint or an error line under it. An error replaces the hint. */
+export function Field({ label, htmlFor, hint, error, children, className, }) {
+    let note = null;
+    if (error) {
+        note = (_jsx("p", { role: "alert", className: "text-xs text-red-700", children: error }));
+    }
+    else if (hint) {
+        note = _jsx("p", { className: "text-xs text-slate-500", children: hint });
+    }
+    return (_jsxs("div", { className: cx("flex flex-col gap-1.5", className), children: [_jsx("label", { htmlFor: htmlFor, className: "text-sm font-medium text-slate-700", children: label }), children, note] }));
+}

package/dist/FilterGroup.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+/** A labelled filter section: a small uppercase legend over a wrapped row of chips (e.g. ToggleChip). Other props go on the fieldset. */
+export declare function FilterGroup({ legend, children, className, ...rest }: {
+    legend: ReactNode;
+} & ComponentPropsWithoutRef<"fieldset">): ReactElement;

package/dist/FilterGroup.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/** A labelled filter section: a small uppercase legend over a wrapped row of chips (e.g. ToggleChip). Other props go on the fieldset. */
+export function FilterGroup({ legend, children, className, ...rest }) {
+    return (_jsxs("fieldset", { className: cx("min-w-0", className), ...rest, children: [_jsx("legend", { className: "mb-2 text-xs font-medium tracking-wide text-slate-500 uppercase", children: legend }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: children })] }));
+}

package/dist/IconButton.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+/** A square bordered button holding one icon. `label` is its accessible name and tooltip. Defaults to `type="button"`. */
+export declare function IconButton({ label, className, children, ...rest }: {
+    label: string;
+    children: ReactNode;
+} & Omit<ComponentPropsWithoutRef<"button">, "children">): ReactElement;

package/dist/IconButton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx, focusRing } from "./cx.js";
+const BASE = `inline-flex h-9 w-9 items-center justify-center rounded-lg border border-slate-200 text-slate-500 transition hover:bg-slate-50 disabled:pointer-events-none disabled:opacity-50 ${focusRing}`;
+/** A square bordered button holding one icon. `label` is its accessible name and tooltip. Defaults to `type="button"`. */
+export function IconButton({ label, className, children, ...rest }) {
+    return (_jsx("button", { type: "button", ...rest, "aria-label": label, title: label, className: cx(BASE, className), children: children }));
+}

package/dist/Input.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+/** A text input. `icon` puts a leading icon inside the field (e.g. a search glass). */
+export declare function Input({ icon, className, ...rest }: {
+    icon?: ReactNode;
+} & ComponentPropsWithoutRef<"input">): ReactElement;

package/dist/Input.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { controlClass } from "./control.js";
+import { cx } from "./cx.js";
+/** A text input. `icon` puts a leading icon inside the field (e.g. a search glass). */
+export function Input({ icon, className, ...rest }) {
+    if (icon === undefined) {
+        return _jsx("input", { ...rest, className: cx(controlClass, "px-3", className) });
+    }
+    return (_jsxs("div", { className: "relative", children: [_jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-slate-400 [&>svg]:h-4 [&>svg]:w-4", children: icon }), _jsx("input", { ...rest, className: cx(controlClass, "pr-3 pl-9", className) })] }));
+}

package/dist/Markdown.d.ts

@@ -0,0 +1,3 @@
+export declare function Markdown({ md }: {
+    md: string;
+}): import("react").JSX.Element;

package/dist/Markdown.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// A minimal, SAFE markdown renderer for the standup (headings / bullets / bold). No
+// dangerouslySetInnerHTML — text is rendered as React nodes, so it can't inject HTML.
+function inline(text) {
+    return text.split(/(\*\*[^*]+\*\*)/g).map((p, i) => p.startsWith("**") && p.endsWith("**") ? (_jsx("strong", { className: "font-semibold text-slate-900", children: p.slice(2, -2) }, i)) : (_jsx("span", { children: p }, i)));
+}
+export function Markdown({ md }) {
+    const out = [];
+    let bullets = [];
+    const flush = () => {
+        if (bullets.length) {
+            out.push(_jsx("ul", { className: "ml-4 list-disc space-y-1", children: bullets }, `u${out.length}`));
+            bullets = [];
+        }
+    };
+    md.split("\n").forEach((ln, i) => {
+        const t = ln.trim();
+        if (t.startsWith("## ")) {
+            flush();
+            out.push(_jsx("h2", { className: "mt-4 text-xs font-semibold uppercase tracking-wide text-slate-400 first:mt-0", children: t.slice(3) }, i));
+        }
+        else if (t.startsWith("### ")) {
+            flush();
+            out.push(_jsx("h3", { className: "mt-3 text-sm font-semibold text-slate-700", children: t.slice(4) }, i));
+        }
+        else if (t.startsWith("- ") || t.startsWith("* ")) {
+            bullets.push(_jsx("li", { className: "text-sm text-slate-700", children: inline(t.slice(2)) }, i));
+        }
+        else if (t === "") {
+            flush();
+        }
+        else {
+            flush();
+            out.push(_jsx("p", { className: "text-sm text-slate-700", children: inline(t) }, i));
+        }
+    });
+    flush();
+    return _jsx("div", { className: "space-y-1", children: out });
+}

package/dist/NavTabs.d.ts

@@ -0,0 +1,16 @@
+import type { ReactElement, ReactNode } from "react";
+/** One pill link in a NavTabs row. */
+export type NavTab = {
+    label: ReactNode;
+    href: string;
+    active?: boolean;
+};
+/** The classes of one tab, for a router's own <Link>. */
+export declare function navTabClass(active: boolean): string;
+/** A row of pill links where the active one is filled. Renders plain <a>; use navTabClass with a router's Link. */
+export declare function NavTabs({ items, label, className, }: {
+    items: NavTab[];
+    /** The accessible name of the nav landmark. */
+    label: string;
+    className?: string;
+}): ReactElement;

package/dist/NavTabs.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx, focusRing } from "./cx.js";
+const BASE = `rounded-lg px-3 py-1.5 transition ${focusRing}`;
+/** The classes of one tab, for a router's own <Link>. */
+export function navTabClass(active) {
+    return cx(BASE, active ? "bg-slate-100 font-medium text-slate-900" : "text-slate-600 hover:bg-slate-100");
+}
+/** A row of pill links where the active one is filled. Renders plain <a>; use navTabClass with a router's Link. */
+export function NavTabs({ items, label, className, }) {
+    return (_jsx("nav", { "aria-label": label, className: cx("flex flex-wrap gap-1 text-sm", className), children: items.map((item) => (_jsx("a", { href: item.href, className: navTabClass(!!item.active), "aria-current": item.active ? "page" : undefined, children: item.label }, item.href))) }));
+}

package/dist/Select.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentPropsWithoutRef, ReactElement } from "react";
+/** A native `<select>` styled like `Input`, keeping the browser's own arrow. */
+export declare function Select({ className, children, ...rest }: ComponentPropsWithoutRef<"select">): ReactElement;

package/dist/Select.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { controlClass } from "./control.js";
+import { cx } from "./cx.js";
+/** A native `<select>` styled like `Input`, keeping the browser's own arrow. */
+export function Select({ className, children, ...rest }) {
+    return (_jsx("select", { ...rest, className: cx(controlClass, "px-3", className), children: children }));
+}

package/dist/Textarea.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentPropsWithoutRef, ReactElement } from "react";
+/** A multi-line text input, styled like `Input`. `rows` defaults to 3. */
+export declare function Textarea({ className, ...rest }: ComponentPropsWithoutRef<"textarea">): ReactElement;

package/dist/Textarea.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { controlClass } from "./control.js";
+import { cx } from "./cx.js";
+/** A multi-line text input, styled like `Input`. `rows` defaults to 3. */
+export function Textarea({ className, ...rest }) {
+    return _jsx("textarea", { rows: 3, ...rest, className: cx(controlClass, "px-3", className) });
+}

package/dist/ToggleChip.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithoutRef, ReactElement } from "react";
+/** An on/off pill button for filters. `pressed` sets its state; `dot` adds a leading colour dot. The caller toggles it in onClick. */
+export declare function ToggleChip({ pressed, dot, className, children, ...rest }: {
+    pressed: boolean;
+    /** A CSS colour for a leading dot (e.g. a category colour); no dot when omitted. */
+    dot?: string;
+} & ComponentPropsWithoutRef<"button">): ReactElement;

package/dist/ToggleChip.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx, focusRing } from "./cx.js";
+const BASE = `inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition ${focusRing}`;
+const OFF = "border-slate-200 bg-white text-slate-600 hover:border-violet-400";
+const ON = "border-violet-600 bg-violet-600 text-violet-50";
+/** An on/off pill button for filters. `pressed` sets its state; `dot` adds a leading colour dot. The caller toggles it in onClick. */
+export function ToggleChip({ pressed, dot, className, children, ...rest }) {
+    return (_jsxs("button", { type: "button", "aria-pressed": pressed, className: cx(BASE, pressed ? ON : OFF, className), ...rest, children: [dot && (_jsx("span", { "aria-hidden": "true", className: cx("h-1.5 w-1.5 rounded-full", pressed && "ring-1 ring-current"), style: { backgroundColor: dot } })), children] }));
+}

package/dist/control.d.ts

@@ -0,0 +1,2 @@
+/** Shared look of text controls; each control adds its own horizontal padding. */
+export declare const controlClass = "w-full rounded-lg border border-slate-300 bg-white py-2 text-sm text-slate-900 placeholder:text-slate-400 transition hover:border-violet-400 disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600";

package/dist/control.js

@@ -0,0 +1,3 @@
+import { focusRing } from "./cx.js";
+/** Shared look of text controls; each control adds its own horizontal padding. */
+export const controlClass = `w-full rounded-lg border border-slate-300 bg-white py-2 text-sm text-slate-900 placeholder:text-slate-400 transition hover:border-violet-400 disabled:opacity-50 ${focusRing}`;

package/dist/cx.d.ts

@@ -0,0 +1,4 @@
+/** Join class names, dropping falsy parts. */
+export declare function cx(...parts: Array<string | false | null | undefined>): string;
+/** The keyboard focus ring every interactive control shares. */
+export declare const focusRing = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600";

package/dist/cx.js

@@ -0,0 +1,6 @@
+/** Join class names, dropping falsy parts. */
+export function cx(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+/** The keyboard focus ring every interactive control shares. */
+export const focusRing = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600";

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+export { Card, EpicHeader, Empty, PageTitle, Pill, groupByEpic } from "./ui.js";
+export { Markdown } from "./Markdown.js";
+export { Button, buttonClass, type ButtonVariant } from "./Button.js";
+export { Callout, type CalloutTone } from "./Callout.js";
+export { IconButton } from "./IconButton.js";
+export { NavTabs, navTabClass, type NavTab } from "./NavTabs.js";
+export { ToggleChip } from "./ToggleChip.js";
+export { FilterGroup } from "./FilterGroup.js";
+export { Checkbox } from "./Checkbox.js";
+export { Field } from "./Field.js";
+export { Input } from "./Input.js";
+export { Select } from "./Select.js";
+export { Textarea } from "./Textarea.js";
+export { Body, BodyStrong, Caption, Display, Lead, ModalHeading, Overline, PageHeading, SectionHeading, SubsectionHeading, Subtitle, type TypographyColor, type TypographyProps, } from "./typography.js";

package/dist/index.js

@@ -0,0 +1,14 @@
+export { Card, EpicHeader, Empty, PageTitle, Pill, groupByEpic } from "./ui.js";
+export { Markdown } from "./Markdown.js";
+export { Button, buttonClass } from "./Button.js";
+export { Callout } from "./Callout.js";
+export { IconButton } from "./IconButton.js";
+export { NavTabs, navTabClass } from "./NavTabs.js";
+export { ToggleChip } from "./ToggleChip.js";
+export { FilterGroup } from "./FilterGroup.js";
+export { Checkbox } from "./Checkbox.js";
+export { Field } from "./Field.js";
+export { Input } from "./Input.js";
+export { Select } from "./Select.js";
+export { Textarea } from "./Textarea.js";
+export { Body, BodyStrong, Caption, Display, Lead, ModalHeading, Overline, PageHeading, SectionHeading, SubsectionHeading, Subtitle, } from "./typography.js";

package/dist/typography.d.ts

@@ -0,0 +1,75 @@
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+export type TypographyColor = "default" | "secondary" | "tertiary" | "muted" | "brand";
+/** Own props shared by every typography component; the rest follow the rendered element. */
+type OwnProps = {
+    /** Colour token; each component sets a sensible default. */
+    color?: TypographyColor;
+    className?: string;
+    children?: ReactNode;
+};
+/** Polymorphic props: own props + `as` + the intrinsic props of whichever element `as` selects. */
+export type TypographyProps<E extends ElementType> = OwnProps & {
+    as?: E;
+} & Omit<ComponentPropsWithoutRef<E>, keyof OwnProps | "as">;
+/**
+ * Marketing-scale headline — the one line at the top of a public page. `h1`,
+ * text-4xl/tight semibold, primary text, growing to text-6xl on wider screens.
+ * `PageHeading`'s scale is deliberately dev-tool sized; a brochure
+ * hero needs a display scale, so it gets its own pinned role rather than callers
+ * overriding PageHeading's size.
+ */
+export declare const Display: {
+    <E extends ElementType = "h1">({ as, color, className, children, ...rest }: TypographyProps<E>): import("react").JSX.Element;
+    displayName: string;
+};
+/** The supporting sentence under a `Display`. `p`, text-lg/7 normal, secondary. */
+export declare const Lead: {
+    <E extends ElementType = "p">({ as, color, className, children, ...rest }: TypographyProps<E>): import("react").JSX.Element;
+    displayName: string;
+};
+/** Page title. `h1`, text-2xl/8 semibold, primary text. */
+export declare const PageHeading: {
+    <E extends ElementType = "h1">({ as, color, className, children, ...rest }: TypographyProps<E>): import("react").JSX.Element;
+    displayName: string;
+};
+/** Top-level section header. `h2`, text-base/6 semibold, primary text. */
+export declare const SectionHeading: {
+    <E extends ElementType = "h2">({ as, color, className, children, ...rest }: TypographyProps<E>): import("react").JSX.Element;
+    displayName: string;
+};
+/** Nested header. `h3`, text-sm/5 semibold, primary text. */
+export declare const SubsectionHeading: {
+    <E extends ElementType = "h3">({ as, color, className, children, ...rest }: TypographyProps<E>): import("react").JSX.Element;
+    displayName: string;
+};
+/** Dialog/modal title. `h2`, text-base/6 semibold, primary text. */
+export declare const ModalHeading: {
+    <E extends ElementType = "h2">({ as, color, className, children, ...rest }: TypographyProps<E>): import("react").JSX.Element;
+    displayName: string;
+};
+/** Supporting line under a heading. `p`, text-sm/5 normal, secondary. */
+export declare const Subtitle: {
+    <E extends ElementType = "p">({ as, color, className, children, ...rest }: TypographyProps<E>): import("react").JSX.Element;
+    displayName: string;
+};
+/** Small all-caps label above a group. `span`, text-xs semibold uppercase, tertiary. */
+export declare const Overline: {
+    <E extends ElementType = "span">({ as, color, className, children, ...rest }: TypographyProps<E>): import("react").JSX.Element;
+    displayName: string;
+};
+/** Default running text. `span` (inline; `as="p"` for a paragraph), text-sm/5 normal, secondary. */
+export declare const Body: {
+    <E extends ElementType = "span">({ as, color, className, children, ...rest }: TypographyProps<E>): import("react").JSX.Element;
+    displayName: string;
+};
+/** Emphasised run of body text. `span`, text-sm/5 medium, primary text. */
+export declare const BodyStrong: {
+    <E extends ElementType = "span">({ as, color, className, children, ...rest }: TypographyProps<E>): import("react").JSX.Element;
+    displayName: string;
+};
+/** Fine print / metadata. `span` (inline; `as="p"` for a block), text-xs/4 normal, tertiary. */
+export declare const Caption: {
+    <E extends ElementType = "span">({ as, color, className, children, ...rest }: TypographyProps<E>): import("react").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/typography.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/** Colour token → slate/violet utility (remapped to Catppuccin Mocha in dark mode by theme.css). */
+const COLOR = {
+    default: "text-slate-900", // Catppuccin text     #cdd6f4
+    secondary: "text-slate-600", // Catppuccin subtext1 #bac2de
+    tertiary: "text-slate-500", // Catppuccin subtext0 #a6adc8
+    muted: "text-slate-400", // Catppuccin overlay2 #9399b2
+    brand: "text-violet-600", // Catppuccin mauve    #cba6f7
+};
+/**
+ * Build a semantic component that pins `variantClass` (size + weight + tracking)
+ * and a default colour. The scale/weight for each role therefore lives in exactly
+ * one place (the call below), and callers can only vary the colour, element, and
+ * layout classes — never the pinned size/weight.
+ */
+function typography(displayName, defaultAs, variantClass, defaultColor) {
+    function Typography({ as, color, className, children, ...rest }) {
+        const Tag = as ?? defaultAs;
+        return (_jsx(Tag, { className: cx(variantClass, COLOR[color ?? defaultColor], className), ...rest, children: children }));
+    }
+    Typography.displayName = displayName;
+    return Typography;
+}
+// --- Structural roles (block by default) -----------------------------------
+/**
+ * Marketing-scale headline — the one line at the top of a public page. `h1`,
+ * text-4xl/tight semibold, primary text, growing to text-6xl on wider screens.
+ * `PageHeading`'s scale is deliberately dev-tool sized; a brochure
+ * hero needs a display scale, so it gets its own pinned role rather than callers
+ * overriding PageHeading's size.
+ */
+export const Display = typography("Display", "h1", "text-4xl/[1.1] font-semibold tracking-tight sm:text-5xl/[1.05] lg:text-6xl/[1.05]", "default");
+/** The supporting sentence under a `Display`. `p`, text-lg/7 normal, secondary. */
+export const Lead = typography("Lead", "p", "text-lg/7 font-normal sm:text-xl/8", "secondary");
+/** Page title. `h1`, text-2xl/8 semibold, primary text. */
+export const PageHeading = typography("PageHeading", "h1", "text-2xl/8 font-semibold tracking-tight", "default");
+/** Top-level section header. `h2`, text-base/6 semibold, primary text. */
+export const SectionHeading = typography("SectionHeading", "h2", "text-base/6 font-semibold", "default");
+/** Nested header. `h3`, text-sm/5 semibold, primary text. */
+export const SubsectionHeading = typography("SubsectionHeading", "h3", "text-sm/5 font-semibold", "default");
+/** Dialog/modal title. `h2`, text-base/6 semibold, primary text. */
+export const ModalHeading = typography("ModalHeading", "h2", "text-base/6 font-semibold", "default");
+/** Supporting line under a heading. `p`, text-sm/5 normal, secondary. */
+export const Subtitle = typography("Subtitle", "p", "text-sm/5 font-normal", "secondary");
+// --- Inline roles (inline by default) --------------------------------------
+/** Small all-caps label above a group. `span`, text-xs semibold uppercase, tertiary. */
+export const Overline = typography("Overline", "span", "text-xs font-semibold uppercase tracking-wide", "tertiary");
+/** Default running text. `span` (inline; `as="p"` for a paragraph), text-sm/5 normal, secondary. */
+export const Body = typography("Body", "span", "text-sm/5 font-normal", "secondary");
+/** Emphasised run of body text. `span`, text-sm/5 medium, primary text. */
+export const BodyStrong = typography("BodyStrong", "span", "text-sm/5 font-medium", "default");
+/** Fine print / metadata. `span` (inline; `as="p"` for a block), text-xs/4 normal, tertiary. */
+export const Caption = typography("Caption", "span", "text-xs/4 font-normal", "tertiary");

package/dist/ui.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+export declare function PageTitle({ title, subtitle }: {
+    title: string;
+    subtitle?: string;
+}): import("react").JSX.Element;
+/** A bordered panel with an optional title and count; `as` picks the element (default `section`). */
+export declare function Card({ title, count, as: Tag, className, children, }: {
+    title?: string;
+    count?: number;
+    as?: "section" | "article" | "div";
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** A coloured epic header row: a dot in the epic's colour + its label. */
+export declare function EpicHeader({ color, label }: {
+    color: string;
+    label: string;
+}): import("react").JSX.Element;
+/** A small tinted label; `dot` adds a leading dot in the pill's own text colour. */
+export declare function Pill({ children, tone, dot, }: {
+    children: ReactNode;
+    tone?: "slate" | "amber" | "emerald" | "blue" | "red";
+    dot?: boolean;
+}): import("react").JSX.Element;
+export declare function Empty({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Group items by their epic ref, ordered with real epics first (by ref) and "No epic" last. */
+export declare function groupByEpic<T>(items: T[], epicOf: (t: T) => string | null): [string | null, T[]][];

package/dist/ui.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+// Small presentational primitives written against Tailwind's slate-based class vocabulary
+// (remapped to Catppuccin Mocha in dark mode by theme.css).
+export function PageTitle({ title, subtitle }) {
+    return (_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight text-slate-900", children: title }), subtitle && _jsx("p", { className: "mt-1 text-sm text-slate-500", children: subtitle })] }));
+}
+/** A bordered panel with an optional title and count; `as` picks the element (default `section`). */
+export function Card({ title, count, as: Tag = "section", className, children, }) {
+    return (_jsxs(Tag, { className: cx("rounded-xl border border-slate-200/70 bg-white p-5 shadow-sm", className), children: [title && (_jsxs("div", { className: "mb-3 flex items-baseline gap-2", children: [_jsx("h2", { className: "text-xs font-semibold uppercase tracking-wide text-slate-400", children: title }), count !== undefined && (_jsx("span", { className: "text-xs font-medium text-slate-400", children: count }))] })), children] }));
+}
+/** A coloured epic header row: a dot in the epic's colour + its label. */
+export function EpicHeader({ color, label }) {
+    return (_jsxs("div", { className: "mb-1.5 mt-3 flex items-center gap-2 first:mt-0", children: [_jsx("span", { className: "inline-block h-2.5 w-2.5 rounded-full", style: { backgroundColor: color } }), _jsx("span", { className: "text-sm font-semibold text-slate-700", children: label })] }));
+}
+/** A small tinted label; `dot` adds a leading dot in the pill's own text colour. */
+export function Pill({ children, tone = "slate", dot = false, }) {
+    const tones = {
+        slate: "bg-slate-100 text-slate-600",
+        amber: "bg-amber-50 text-amber-700",
+        emerald: "bg-emerald-50 text-emerald-700",
+        blue: "bg-blue-50 text-blue-700",
+        red: "bg-red-50 text-red-900",
+    };
+    return (_jsxs("span", { className: cx("rounded-md px-1.5 py-0.5 text-xs font-medium", tones[tone], dot && "inline-flex items-center gap-1"), children: [dot && _jsx("span", { "aria-hidden": "true", className: "h-1.5 w-1.5 rounded-full bg-current" }), children] }));
+}
+export function Empty({ children }) {
+    return _jsx("p", { className: "text-sm text-slate-400", children: children });
+}
+function compareEpics(a, b) {
+    if (a === null)
+        return 1;
+    if (b === null)
+        return -1;
+    return a < b ? -1 : 1;
+}
+/** Group items by their epic ref, ordered with real epics first (by ref) and "No epic" last. */
+export function groupByEpic(items, epicOf) {
+    const groups = new Map();
+    for (const item of items) {
+        const key = epicOf(item) ?? null;
+        const group = groups.get(key);
+        if (group)
+            group.push(item);
+        else
+            groups.set(key, [item]);
+    }
+    return [...groups].toSorted(([a], [b]) => compareEpics(a, b));
+}

package/package.json

@@ -1,6 +1,58 @@
 {
   "name": "@hackcove/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Hack Cove React components: primitives, typography roles and a safe Markdown renderer, written against Tailwind v4 utilities. Pair with a @hackcove/theme-* package.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/madangryscientist/hackcove.git",
+    "directory": "packages/ui"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "lint": "oxlint -c ../../.oxlintrc.json --type-aware --deny-warnings && bun ../../scripts/check-slop.ts",
+    "test": "vitest run",
+    "pack-check": "npm pack --dry-run",
+    "prepack": "bun run build"
+  },
+  "devDependencies": {
+    "@types/bun": "1.4.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "tailwindcss": "^4.3.3",
+    "vitest": "5.0.5"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "tailwindcss": "^4"
+  },
+  "nx": {
+    "name": "ui",
+    "tags": [
+      "kind:package"
+    ],
+    "targets": {
+      "build": {
+        "outputs": [
+          "{projectRoot}/dist"
+        ]
+      }
+    }
+  }
+}