@hackcove/ui-react 0.10.9 → 0.10.10

package/dist/Card.d.ts

@@ -47,6 +47,8 @@ type CardPanelProps = CardBase & {
     actions?: ReactNode;
     /** A tinted strip across the bottom of the card, under a hairline, for the card's own actions or a total. It stays at the foot when the card is stretched in a `CardGrid`. Ignored with `dashed`. */
     footer?: ReactNode;
+    /** Take the parent's full height: the title or bar stays put and the body scrolls. The parent sets the height. Ignored with `dashed`. */
+    fill?: boolean;
     /**
      * The root element. A `div` takes no name from the title. Not on a card that is a link.
      * @default section
@@ -59,6 +61,7 @@ type CardPanelProps = CardBase & {
 type CardLinkProps = CardBase & {
     actions?: undefined;
     footer?: undefined;
+    fill?: undefined;
     as?: undefined;
     /** Opens in a new tab: adds `target="_blank"` and `rel="noreferrer"`. */
     external?: boolean | undefined;
@@ -97,6 +100,9 @@ type CardLinkProps = CardBase & {
  * total; in a `CardGrid` it stays at the foot of a card that is stretched to the row's height. It
  * suits a panel, not a card that is a link, and `dashed` has none.
  *
+ * `fill` makes a panel take its parent's full height (the parent sets it): the title or bar stays
+ * put and the body scrolls. Not on a link card.
+ *
  * `href` makes the whole card one link: a hover border and the focus ring, with the link stretched
  * over the card, so it takes no `actions`, `footer` or `as`. A `TextLink`, `Button` or `Checkbox` in
  * the body sits above the link and is clickable on its own. With `render` it draws the app's own router `<Link>`

package/dist/Card.js

@@ -1,8 +1,9 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { TONE_SURFACE } from "./Callout.js";
 import { CardBadge } from "./CardBadge.js";
-import { CardBar, CardFooter, CardHeader, CardHeading, CardIcon, CardInset } from "./CardParts.js";
+import { BODY_PAD, cardBody } from "./CardBody.js";
+import { CardFooter } from "./CardParts.js";
 import { cx, focusRing, liftInteractive } from "./cx.js";
 import { renderLink } from "./link.js";
 /** A card with a `footer`: a `dashed` card stands alone and has none. */
@@ -29,12 +30,11 @@ function cardForm(asked, hasHeader) {
         tone: dashed || bar ? undefined : asked.tone,
         attention: on(asked.attention, dashed),
         icon: paddedIcon(asked, dashed || bar),
+        fill: on(asked.fill, dashed),
         size: asked.size,
         footer: false,
     };
 }
-/** The padding of a card's body by `size`. */
-const BODY_PAD = { sm: "p-3", md: "p-5", lg: "p-6" };
 function cardBorder(form) {
     if (form.dashed)
         return "border-dashed border-slate-300";
@@ -49,10 +49,10 @@ function cardPadding(form) {
     if (form.dashed) {
         return cx(form.filled ? "p-10" : "p-8", "text-center text-sm text-slate-500");
     }
-    return !form.flush && !form.bar && !form.footer && BODY_PAD[form.size];
+    return !form.flush && !form.bar && !form.footer && !form.fill && BODY_PAD[form.size];
 }
 function cardClass(form) {
-    return cx("relative scroll-mt-28 rounded-xl border target:outline-2 target:outline-violet-600", liftInteractive, cardBorder(form), form.filled && "bg-white", cardPadding(form), !form.dashed && !form.tone && "shadow-sm", (form.flush || form.bar || form.footer) && "overflow-hidden", form.footer && "flex flex-col");
+    return cx("relative scroll-mt-28 rounded-xl border target:outline-2 target:outline-violet-600", liftInteractive, cardBorder(form), form.filled && "bg-white", cardPadding(form), !form.dashed && !form.tone && "shadow-sm", (form.flush || form.bar || form.footer || form.fill) && "overflow-hidden", form.fill ? "flex h-full min-h-0 flex-col" : form.footer && "flex flex-col");
 }
 function isCardLink(props) {
     return props.href !== undefined || props.render !== undefined;
@@ -81,6 +81,9 @@ function isCardLink(props) {
  * total; in a `CardGrid` it stays at the foot of a card that is stretched to the row's height. It
  * suits a panel, not a card that is a link, and `dashed` has none.
  *
+ * `fill` makes a panel take its parent's full height (the parent sets it): the title or bar stays
+ * put and the body scrolls. Not on a link card.
+ *
  * `href` makes the whole card one link: a hover border and the focus ring, with the link stretched
  * over the card, so it takes no `actions`, `footer` or `as`. A `TextLink`, `Button` or `Checkbox` in
  * the body sits above the link and is clickable on its own. With `render` it draws the app's own router `<Link>`
@@ -95,10 +98,10 @@ export function Card(props) {
 }
 /** A card that is not a link: `as` (a `section` by default) named by its heading. */
 function PanelCard(props) {
-    const { title, titleStyle, count, status, actions, footer, bar, flush, dashed, tone, badge, inset, attention, icon, size = "md", children, ...panel } = props;
+    const { title, titleStyle, count, status, actions, footer, bar, flush, dashed, tone, badge, inset, attention, icon, fill, size = "md", children, ...panel } = props;
     const { as: Tag = "section", ...rest } = panel;
     const headingId = useId();
-    const form = withFooter(cardForm({ flush, bar, dashed, tone, attention, icon, size }, Boolean(title || actions)), footer);
+    const form = withFooter(cardForm({ flush, bar, dashed, tone, attention, icon, fill, size }, Boolean(title || actions)), footer);
     // The title names the section or article; a caller's own name wins, and a bare `div` takes none.
     const named = title &&
         Tag !== "div" &&
@@ -143,19 +146,3 @@ function LinkCard(props) {
                 headingId: undefined,
             }), badge && _jsx(CardBadge, { size: form.size, children: badge })] }));
 }
-function insetBand(form, inset) {
-    if (!inset || form.dashed)
-        return null;
-    return (_jsx(CardInset, { size: form.size, bleed: !form.flush, children: inset }));
-}
-function cardBody(form, { title, titleStyle, count, status, actions, inset, children, headingId, }) {
-    const heading = title && (_jsx(CardHeading, { id: headingId, title: title, titleStyle: titleStyle, count: count, status: status, bar: form.bar, spaced: !form.bar && !actions, size: form.size }));
-    const grow = form.footer && "flex-1";
-    const band = insetBand(form, inset);
-    if (form.bar) {
-        return (_jsxs(_Fragment, { children: [_jsx(CardBar, { heading: heading, actions: actions, size: form.size }), _jsxs("div", { className: cx(grow, !form.flush && BODY_PAD[form.size]) || undefined, children: [band, children] })] }));
-    }
-    const content = (_jsxs(_Fragment, { children: [form.icon && _jsx(CardIcon, { name: form.icon, size: form.size }), _jsx(CardHeader, { heading: heading, actions: actions, size: form.size }), band, children] }));
-    // With a footer the root has no padding, so the body pads itself and takes the room left over.
-    return form.footer ? (_jsx("div", { className: cx(grow, !form.flush && BODY_PAD[form.size]), children: content })) : (content);
-}

package/dist/CardBody.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+import type { IconName } from "./icons.js";
+import type { Size } from "./size.js";
+/** The padding of a card's body by `size`. */
+export declare const BODY_PAD: Record<Size, string>;
+/** The options a card resolved (`cardForm` in `Card.tsx`) that shape its body. */
+type BodyForm = {
+    flush: boolean;
+    bar: boolean;
+    dashed: boolean;
+    icon: IconName | undefined;
+    fill: boolean;
+    footer: boolean;
+    size: Size;
+};
+type BodyParts = {
+    title: string | undefined;
+    titleStyle: "overline" | "name" | undefined;
+    count: number | undefined;
+    status: ReactNode;
+    actions: ReactNode;
+    inset: ReactNode;
+    children: ReactNode;
+    headingId: string | undefined;
+};
+export declare function cardBody(form: BodyForm, parts: BodyParts): ReactNode;
+export {};

package/dist/CardBody.js

@@ -0,0 +1,30 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CardBar, CardHeader, CardHeading, CardIcon, CardInset } from "./CardParts.js";
+import { cx } from "./cx.js";
+/** The padding of a card's body by `size`. */
+export const BODY_PAD = { sm: "p-3", md: "p-5", lg: "p-6" };
+function insetBand(form, inset) {
+    if (!inset || form.dashed)
+        return null;
+    return (_jsx(CardInset, { size: form.size, bleed: !form.flush, children: inset }));
+}
+/** With `fill` the body takes the room the header (and a footer) leave, and only it scrolls. */
+const SCROLL = "min-h-0 flex-1 overflow-y-auto";
+/** The padding the body takes itself, when the root has none: never on a flush card. */
+const pad = (form) => !form.flush && BODY_PAD[form.size];
+/** The icon, header, inset band and children of a card with no bar. */
+function plainBody(form, heading, parts) {
+    const content = (_jsxs(_Fragment, { children: [form.icon && _jsx(CardIcon, { name: form.icon, size: form.size }), _jsx(CardHeader, { heading: heading, actions: parts.actions, size: form.size }), insetBand(form, parts.inset), form.fill ? _jsx("div", { className: SCROLL, children: parts.children }) : parts.children] }));
+    if (form.fill) {
+        return _jsx("div", { className: cx("flex min-h-0 flex-1 flex-col", pad(form)), children: content });
+    }
+    // With a footer the root has no padding, so the body pads itself and takes the room left over.
+    return form.footer ? _jsx("div", { className: cx("flex-1", pad(form)), children: content }) : content;
+}
+export function cardBody(form, parts) {
+    const heading = parts.title && (_jsx(CardHeading, { id: parts.headingId, title: parts.title, titleStyle: parts.titleStyle, count: parts.count, status: parts.status, bar: form.bar, spaced: !form.bar && !parts.actions, size: form.size }));
+    if (!form.bar)
+        return plainBody(form, heading, parts);
+    const grow = form.fill ? SCROLL : form.footer && "flex-1";
+    return (_jsxs(_Fragment, { children: [_jsx(CardBar, { heading: heading, actions: parts.actions, size: form.size }), _jsxs("div", { className: cx(grow, pad(form)) || undefined, children: [insetBand(form, parts.inset), parts.children] })] }));
+}

package/dist/Markdown.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 // A minimal, SAFE markdown renderer (headings / bullets / bold). No
-// dangerouslySetInnerHTML — text is rendered as React nodes, so it can't inject HTML.
+// 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)));
 }

package/dist/ProgressBar.d.ts

@@ -7,16 +7,16 @@ export type BarTone = "accent" | "positive" | "warn" | "negative";
 export type BarSize = Size;
 export declare const BAR_FILL: Record<BarTone, string>;
 export declare const BAR_TRACK: Record<BarSize, string>;
-/** `part` as a percent of `whole`, held to 0–100; 0 when either is not positive. */
+/** `part` as a percent of `whole`, held between 0 and 100; 0 when either is not positive. */
 export declare function sharePercent(part: number, whole: number): number;
 /** The share as a whole percent for a screen reader: never 0 or 100 unless it truly is. */
 export declare function announcedPercent(part: number, whole: number): number;
 /**
- * A thin horizontal bar with a filled share, for progress toward a total. `value` is held to
- * 0–`max`. `label` names what it measures, for a screen reader, which also hears the percentage.
+ * A thin horizontal bar with a filled share, for progress toward a total. `value` is held
+ * between 0 and `max`. `label` names what it measures, for a screen reader, which also hears the percentage.
  */
 export declare function ProgressBar({ value, max, label, tone, size, ...rest }: {
-    /** How far along, held to 0–`max`. */
+    /** How far along, held between 0 and `max`. */
     value: number;
     /** Defaults to 100. */
     max?: number;

package/dist/ProgressBar.js

@@ -11,7 +11,7 @@ export const BAR_TRACK = {
     md: "h-2",
     lg: "h-3",
 };
-/** `part` as a percent of `whole`, held to 0–100; 0 when either is not positive. */
+/** `part` as a percent of `whole`, held between 0 and 100; 0 when either is not positive. */
 export function sharePercent(part, whole) {
     if (!(whole > 0) || !(part > 0))
         return 0;
@@ -23,8 +23,8 @@ export function announcedPercent(part, whole) {
     return share <= 0 || share >= 100 ? share : Math.min(99, Math.max(1, Math.round(share)));
 }
 /**
- * A thin horizontal bar with a filled share, for progress toward a total. `value` is held to
- * 0–`max`. `label` names what it measures, for a screen reader, which also hears the percentage.
+ * A thin horizontal bar with a filled share, for progress toward a total. `value` is held
+ * between 0 and `max`. `label` names what it measures, for a screen reader, which also hears the percentage.
  */
 export function ProgressBar({ value, max = 100, label, tone = "accent", size = "md", ...rest }) {
     const share = sharePercent(value, max);

package/dist/highlight.d.ts

@@ -3,7 +3,7 @@
  * else: no HTML, no client JS. `CodeText` maps a run to a palette utility, so a theme recolours
  * highlighted code exactly as it recolours everything else.
  *
- * The grammars are deliberately shallow — enough for examples, not a compiler front end. `text`
+ * The grammars are deliberately shallow: enough for examples, not a compiler front end. `text`
  * returns the code as one plain run, so nothing is coloured where no language is named. The
  * languages: `text`, `tsx`, `ts`, `js`, `json`, `bash`, `console` (a shell session: `$ ` commands
  * scanned as bash, everything else output), `css`, `html` (with `<script>` scanned as JS and

package/dist/highlight.js

@@ -3,7 +3,7 @@
  * else: no HTML, no client JS. `CodeText` maps a run to a palette utility, so a theme recolours
  * highlighted code exactly as it recolours everything else.
  *
- * The grammars are deliberately shallow — enough for examples, not a compiler front end. `text`
+ * The grammars are deliberately shallow: enough for examples, not a compiler front end. `text`
  * returns the code as one plain run, so nothing is coloured where no language is named. The
  * languages: `text`, `tsx`, `ts`, `js`, `json`, `bash`, `console` (a shell session: `$ ` commands
  * scanned as bash, everything else output), `css`, `html` (with `<script>` scanned as JS and
@@ -210,7 +210,7 @@ function childrenStep(scan) {
     takeChar(scan);
 }
 /**
- * JS, TS and TSX. Three modes — code, inside a tag, and children text — keep an apostrophe in
+ * JS, TS and TSX. Three modes (code, inside a tag, and children text) keep an apostrophe in
  * `<p>Don't</p>` as text rather than the start of a runaway string, and every open element records
  * the mode to return to, so a `{…}` expression that holds JSX closes back into code.
  */

package/dist/typography.d.ts

@@ -56,7 +56,7 @@ export type InlineTypographyProps<E extends ElementType> = Own & {
     as?: E;
 } & Omit<ComponentPropsWithoutRef<E>, keyof Own | "as" | "className" | "style">;
 /**
- * Marketing-scale headline — the one line at the top of a public page. `h1`,
+ * 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` is the title of an ordinary page, a step below; a brochure hero needs a display
  * scale, so it gets its own pinned role rather than callers overriding PageHeading's size.

package/dist/typography.js

@@ -25,7 +25,7 @@ const ALIGN = {
 /**
  * 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 —
+ * 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) {
@@ -70,7 +70,7 @@ function plainText(children) {
 }
 // --- Structural roles (block by default) -----------------------------------
 /**
- * Marketing-scale headline — the one line at the top of a public page. `h1`,
+ * 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` is the title of an ordinary page, a step below; a brochure hero needs a display
  * scale, so it gets its own pinned role rather than callers overriding PageHeading's size.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hackcove/ui-react",
-  "version": "0.10.9",
+  "version": "0.10.10",
   "description": "Hack Cove React components: primitives, typography roles and a safe Markdown renderer, written against Tailwind v4 utilities. Pair with a theme from @hackcove/themes.",
   "keywords": [
     "components",