@hackcove/ui-react 0.0.0-stage → 0.8.1

package/dist/typography.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, } from "react";
+import { cx } from "./cx.js";
+/** Colour token → slate/violet utility, which a theme remaps. */
+const COLOR = {
+    default: "text-slate-900",
+    secondary: "text-slate-600",
+    tertiary: "text-slate-500",
+    muted: "text-slate-400",
+    brand: "text-violet-600",
+};
+/** Tone → text utility. Shared with `Table`'s cell tones, so the two never drift. */
+export const TEXT_TONE = {
+    muted: "text-slate-500",
+    info: "text-blue-700",
+    positive: "text-emerald-700",
+    warn: "text-amber-700",
+    danger: "text-red-700",
+};
+/**
+ * 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 and the element —
+ * never the pinned size/weight, and never with a class.
+ */
+function typography(displayName, defaultAs, variantClass, defaultColor) {
+    function Typography(props) {
+        return pinned(defaultAs, variantClass, defaultColor, props);
+    }
+    Typography.displayName = displayName;
+    return Typography;
+}
+/** `typography` for the inline roles, which also take `tone`, `numeric`, `mono` and `truncate`. */
+function inlineRole(displayName, defaultAs, variantClass, defaultColor) {
+    function Inline(props) {
+        return pinned(defaultAs, variantClass, defaultColor, props);
+    }
+    Inline.displayName = displayName;
+    return Inline;
+}
+/**
+ * The one place a pinned role renders. The few roles with an opt-in prop of their own are
+ * written by hand, not by `typography`, and call this too.
+ */
+function pinned(defaultAs, variantClass, defaultColor, { as, color, tone, numeric, mono, truncate, children, ...rest }) {
+    const Tag = as ?? defaultAs;
+    return (_jsx(Tag, { ...rest, ...(truncate ? { title: rest.title ?? plainText(children) } : {}), className: cx(variantClass, tone ? TEXT_TONE[tone] : COLOR[color ?? defaultColor], numeric && "tabular-nums", mono && "font-mono", truncate && "inline-block min-w-0 truncate align-bottom"), children: children }));
+}
+/** The text of `children` when it is all strings and numbers: what a truncated run shows on hover. */
+function plainText(children) {
+    const parts = Children.toArray(children);
+    return parts.every((part) => typeof part === "string" || typeof part === "number")
+        ? parts.join("")
+        : undefined;
+}
+// --- 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. `rule` sets
+ * a hairline under it (the `Divider` line colour) with the space either side of
+ * the line built in.
+ */
+export function SectionHeading({ rule, ...props }) {
+    const variant = cx(rule && "mb-4 border-b border-slate-200/70 pb-2", "text-base/6 font-semibold");
+    return pinned("h2", variant, "default", props);
+}
+const SUBSECTION_SIZE = {
+    sm: "text-sm/5 font-semibold",
+    md: "text-base/6 font-semibold",
+    lg: "text-lg/7 font-semibold",
+};
+/**
+ * Nested header. `h3`, text-base/6 semibold, primary text. `size` steps it down for a dense card
+ * or up for a drawer or form-group title: `sm` (text-sm), `md` (default) or `lg`. `truncate` keeps it on
+ * one line and cuts it with an ellipsis where its container ends, the full text as the `title`.
+ */
+export function SubsectionHeading({ size = "md", ...props }) {
+    return pinned("h3", SUBSECTION_SIZE[size], "default", props);
+}
+// --- Inline roles (inline by default) --------------------------------------
+/**
+ * Small all-caps label above a group. `span`, text-xs semibold uppercase, tertiary. `tone`,
+ * `numeric`, `mono` and `truncate` are opt-in, as on `Text`.
+ */
+export const Overline = inlineRole("Overline", "span", "text-xs font-semibold uppercase tracking-wide", "tertiary");
+/**
+ * Running text. `span` (inline; `as="p"` for a paragraph), text-sm/5 normal, secondary. A block of it
+ * stops at a readable line length (`max-w-[72ch]`), wherever it sits. `strong` emphasises it:
+ * font-medium in the primary ink, unless `color` or `tone` says otherwise.
+ * `preserveNewlines` keeps the line breaks in the text (a user-typed note); runs of spaces still collapse.
+ * `tone` colours it by meaning (`positive` for "Saved.", `danger` for an error; it wins over `color`),
+ * `numeric` sets tabular figures, `mono` the monospace face, and `truncate` cuts it to one line with an
+ * ellipsis (the full text becomes its `title`).
+ */
+export function Text({ strong, preserveNewlines, ...props }) {
+    return pinned("span", textVariant(strong, preserveNewlines, true), strong ? "default" : "secondary", props);
+}
+/**
+ * The supporting line under a `PageHeader` or `Dialog` title: `Text as="p"` without the measure, so
+ * it runs the width of its header. Internal; not exported from the package.
+ */
+export function HeaderText({ children }) {
+    return pinned("p", textVariant(false, false, false), "secondary", { children });
+}
+function textVariant(strong, preserveNewlines, measure) {
+    return cx(preserveNewlines && "whitespace-pre-line", measure && "max-w-[72ch]", "text-sm/5", strong ? "font-medium" : "font-normal");
+}
+/** Fine print / metadata. `span` (inline; `as="p"` for a block), text-xs/4 normal, tertiary. Takes `tone`, `numeric`, `mono` and `truncate` like `Text`. */
+export const Caption = inlineRole("Caption", "span", "text-xs/4 font-normal", "tertiary");

package/dist/ui.d.ts

@@ -0,0 +1,10 @@
+import type { Passthrough } from "./props.js";
+/** A coloured epic header row: a dot in the epic's colour + its label. */
+export declare function EpicHeader({ color, label, ...rest }: {
+    /** The dot's colour, any CSS colour (the epic's own). */
+    color: string;
+    /** The epic's name. */
+    label: string;
+} & Passthrough): 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,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Small presentational primitives written against Tailwind's slate-based class vocabulary,
+// which a theme remaps.
+/** A coloured epic header row: a dot in the epic's colour + its label. */
+export function EpicHeader({ color, label, ...rest }) {
+    return (_jsxs("div", { ...rest, 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 })] }));
+}
+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,93 @@
 {
   "name": "@hackcove/ui-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.8.1",
+  "description": "Hack Cove React components: primitives, typography roles and a safe Markdown renderer, written against Tailwind v4 utilities. Pair with a @hackcove/theme-* package.",
+  "keywords": [
+    "components",
+    "design-system",
+    "hackcove",
+    "markdown",
+    "react",
+    "tailwind",
+    "tailwindcss",
+    "ui"
+  ],
+  "homepage": "https://github.com/madangryscientist/hackcove/tree/main/packages/ui-react#readme",
+  "bugs": {
+    "url": "https://github.com/madangryscientist/hackcove/issues"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Jacobus Langner",
+    "url": "https://github.com/madangryscientist"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/madangryscientist/hackcove.git",
+    "directory": "packages/ui-react"
+  },
+  "files": [
+    "dist",
+    "MIGRATING.md"
+  ],
+  "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 && bun scripts/consumer-types.ts",
+    "prepack": "bun run build"
+  },
+  "dependencies": {
+    "@internationalized/date": "^3.12.4",
+    "react-aria-components": "^1.22.1"
+  },
+  "devDependencies": {
+    "@types/bun": "1.4.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "jsdom": "^30.1.3",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "tailwindcss": "^4.3.3",
+    "vitest": "5.0.5"
+  },
+  "peerDependencies": {
+    "@types/react": ">=18",
+    "@types/react-dom": ">=18",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "tailwindcss": "^4"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
+  },
+  "nx": {
+    "name": "ui-react",
+    "tags": [
+      "kind:package"
+    ],
+    "targets": {
+      "build": {
+        "outputs": [
+          "{projectRoot}/dist"
+        ]
+      }
+    }
+  }
+}