@hackcove/ui 0.2.3 → 0.2.5

package/dist/typography.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+import type { ComponentPropsWithoutRef, ElementType, ReactElement, 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 = {
@@ -19,57 +19,65 @@ export type TypographyProps<E extends ElementType> = OwnProps & {
  * overriding PageHeading's size.
  */
 export declare const Display: {
-    <E extends ElementType = "h1">({ as, color, className, children, ...rest }: TypographyProps<E>): import("react").JSX.Element;
+    <E extends ElementType = "h1">(props: TypographyProps<E>): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
     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;
+    <E extends ElementType = "p">(props: TypographyProps<E>): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
     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;
+    <E extends ElementType = "h1">(props: TypographyProps<E>): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
     displayName: string;
 };
+/**
+ * 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 declare function SectionHeading<E extends ElementType = "h2">({ rule, ...props }: TypographyProps<E> & {
+    rule?: boolean;
+}): ReactElement;
+export type SubsectionHeadingSize = "sm" | "base" | "lg";
+/**
+ * Nested header. `h3`, text-sm/5 semibold, primary text. `size` steps it up for
+ * a card, drawer or form-group title: `sm` (default), `base` (bold) or `lg`.
+ */
+export declare function SubsectionHeading<E extends ElementType = "h3">({ size, ...props }: TypographyProps<E> & {
+    size?: SubsectionHeadingSize;
+}): ReactElement;
 /** 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;
+    <E extends ElementType = "h2">(props: TypographyProps<E>): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
     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;
+    <E extends ElementType = "p">(props: TypographyProps<E>): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
     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;
+    <E extends ElementType = "span">(props: TypographyProps<E>): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
     displayName: string;
 };
+/**
+ * Default running text. `span` (inline; `as="p"` for a paragraph), text-sm/5 normal, secondary.
+ * `preserveNewlines` keeps the line breaks in the text (a user-typed note); runs of spaces still collapse.
+ */
+export declare function Body<E extends ElementType = "span">({ preserveNewlines, ...props }: TypographyProps<E> & {
+    preserveNewlines?: boolean;
+}): ReactElement;
 /** 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;
+    <E extends ElementType = "span">(props: TypographyProps<E>): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
     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;
+    <E extends ElementType = "span">(props: TypographyProps<E>): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
     displayName: string;
 };
 export {};

package/dist/typography.js

@@ -15,13 +15,20 @@ const COLOR = {
  * 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 }));
+    function Typography(props) {
+        return pinned(defaultAs, variantClass, defaultColor, props);
     }
     Typography.displayName = displayName;
     return Typography;
 }
+/**
+ * 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, className, children, ...rest }) {
+    const Tag = as ?? defaultAs;
+    return (_jsx(Tag, { className: cx(variantClass, COLOR[color ?? defaultColor], className), ...rest, children: children }));
+}
 // --- Structural roles (block by default) -----------------------------------
 /**
  * Marketing-scale headline — the one line at the top of a public page. `h1`,
@@ -35,10 +42,27 @@ export const Display = typography("Display", "h1", "text-4xl/[1.1] font-semibold
 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");
+/**
+ * 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",
+    base: "text-base/6 font-bold",
+    lg: "text-lg/7 font-semibold",
+};
+/**
+ * Nested header. `h3`, text-sm/5 semibold, primary text. `size` steps it up for
+ * a card, drawer or form-group title: `sm` (default), `base` (bold) or `lg`.
+ */
+export function SubsectionHeading({ size = "sm", ...props }) {
+    return pinned("h3", SUBSECTION_SIZE[size], "default", props);
+}
 /** 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. */
@@ -46,8 +70,14 @@ export const Subtitle = typography("Subtitle", "p", "text-sm/5 font-normal", "se
 // --- 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");
+/**
+ * Default running text. `span` (inline; `as="p"` for a paragraph), text-sm/5 normal, secondary.
+ * `preserveNewlines` keeps the line breaks in the text (a user-typed note); runs of spaces still collapse.
+ */
+export function Body({ preserveNewlines, ...props }) {
+    const variant = cx(preserveNewlines && "whitespace-pre-line", "text-sm/5 font-normal");
+    return pinned("span", variant, "secondary", props);
+}
 /** 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. */

package/dist/ui.d.ts

@@ -4,10 +4,25 @@ 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, }: {
+/**
+ * A bordered panel with an optional title and count; `as` picks the element (default `section`).
+ * Three opt-in forms for data views: `flush` drops the padding and clips the corners, for a table
+ * that runs edge to edge; `bar` puts the title, count and `actions` in a tinted strip across the
+ * top, over the body; `dashed` is an empty-state shell, a dashed outline with centred muted text.
+ * `dashed` stands alone: it ignores `flush` and `bar`. A flush card has no padding for a `title`,
+ * so give it a `bar`.
+ */
+export declare function Card({ title, count, actions, bar, flush, dashed, as: Tag, className, children, }: {
     title?: string;
     count?: number;
+    /** Buttons or links at the end of the header: in the strip with `bar`, else beside the title. */
+    actions?: ReactNode;
+    /** Put the title, count and actions in a tinted strip above the body, edge to edge. */
+    bar?: boolean;
+    /** No padding and `overflow-hidden`: the body (a table, a list) fills the card. */
+    flush?: boolean;
+    /** An empty-state shell: dashed outline, no shadow, no fill, centred muted text. */
+    dashed?: boolean;
     as?: "section" | "article" | "div";
     className?: string;
     children: ReactNode;
@@ -17,11 +32,16 @@ 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, }: {
+export type PillTone = "slate" | "amber" | "emerald" | "blue" | "red" | "violet" | "sky";
+/**
+ * A small tinted label; `dot` adds a leading dot in the pill's own text colour, `round` swaps the
+ * rounded-md corners for a full pill shape.
+ */
+export declare function Pill({ children, tone, dot, round, }: {
     children: ReactNode;
-    tone?: "slate" | "amber" | "emerald" | "blue" | "red";
+    tone?: PillTone;
     dot?: boolean;
+    round?: boolean;
 }): import("react").JSX.Element;
 export declare function Empty({ children }: {
     children: ReactNode;

package/dist/ui.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from "./cx.js";
 import { PageHeaderContent } from "./PageHeader.js";
 // Small presentational primitives written against Tailwind's slate-based class vocabulary
@@ -7,24 +7,68 @@ import { PageHeaderContent } from "./PageHeader.js";
 export function PageTitle({ title, subtitle }) {
     return _jsx(PageHeaderContent, { title: title, subtitle: 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] }));
+function CardHeading({ title, count, bar, spaced, }) {
+    const ink = bar ? "text-slate-500" : "text-slate-400";
+    return (_jsxs("div", { className: cx("flex items-baseline gap-2", spaced && "mb-3"), children: [_jsx("h2", { className: cx("text-xs font-semibold uppercase tracking-wide", ink), children: title }), count !== undefined && _jsx("span", { className: cx("text-xs font-medium", ink), children: count })] }));
+}
+function CardActions({ children }) {
+    return _jsx("div", { className: "ml-auto flex items-center gap-2", children: children });
+}
+function CardBar({ heading, actions }) {
+    return (_jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-slate-200/70 bg-slate-50 px-5 py-3", children: [heading, actions && _jsx(CardActions, { children: actions })] }));
+}
+function CardHeader({ heading, actions }) {
+    if (!actions)
+        return heading;
+    return (_jsxs("div", { className: "mb-3 flex items-center justify-between gap-3", children: [heading, _jsx(CardActions, { children: actions })] }));
+}
+/** `dashed` stands alone; `bar` needs a title or actions to fill it. */
+function cardForm(asked, hasHeader) {
+    const dashed = asked.dashed ?? false;
+    return {
+        flush: (asked.flush ?? false) && !dashed,
+        bar: (asked.bar ?? false) && !dashed && hasHeader,
+        dashed,
+    };
+}
+function cardClass(form) {
+    const { flush, bar, dashed } = form;
+    const clipped = flush || bar;
+    const padding = dashed ? "p-8 text-center text-sm text-slate-500" : "p-5";
+    return cx("rounded-xl border", dashed ? "border-dashed border-slate-300" : "border-slate-200/70 bg-white", !clipped && padding, !dashed && "shadow-sm", clipped && "overflow-hidden");
+}
+/**
+ * A bordered panel with an optional title and count; `as` picks the element (default `section`).
+ * Three opt-in forms for data views: `flush` drops the padding and clips the corners, for a table
+ * that runs edge to edge; `bar` puts the title, count and `actions` in a tinted strip across the
+ * top, over the body; `dashed` is an empty-state shell, a dashed outline with centred muted text.
+ * `dashed` stands alone: it ignores `flush` and `bar`. A flush card has no padding for a `title`,
+ * so give it a `bar`.
+ */
+export function Card({ title, count, actions, bar, flush, dashed, as: Tag = "section", className, children, }) {
+    const form = cardForm({ flush, bar, dashed }, Boolean(title || actions));
+    const heading = title && (_jsx(CardHeading, { title: title, count: count, bar: form.bar, spaced: !form.bar && !actions }));
+    return (_jsx(Tag, { className: cx(cardClass(form), className), children: form.bar ? (_jsxs(_Fragment, { children: [_jsx(CardBar, { heading: heading, actions: actions }), _jsx("div", { className: form.flush ? undefined : "p-5", children: children })] })) : (_jsxs(_Fragment, { children: [_jsx(CardHeader, { heading: heading, actions: actions }), 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, }) {
+/**
+ * A small tinted label; `dot` adds a leading dot in the pill's own text colour, `round` swaps the
+ * rounded-md corners for a full pill shape.
+ */
+export function Pill({ children, tone = "slate", dot = false, round = 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",
+        violet: "bg-violet-50 text-violet-700",
+        sky: "bg-sky-50 text-sky-700",
     };
-    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] }));
+    return (_jsxs("span", { className: cx(round ? "rounded-full" : "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 });

package/package.json

@@ -1,8 +1,26 @@
 {
   "name": "@hackcove/ui",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "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#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",