@hackcove/ui-react 0.8.3 → 0.9.1

package/dist/typography.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, } from "react";
 import { cx } from "./cx.js";
 /** Colour token → slate/violet utility, which a theme remaps. */
@@ -17,6 +17,11 @@ export const TEXT_TONE = {
     warn: "text-amber-700",
     danger: "text-red-700",
 };
+const ALIGN = {
+    start: "text-start",
+    center: "text-center",
+    end: "text-end",
+};
 /**
  * Build a semantic component that pins `variantClass` (size + weight + tracking)
  * and a default colour. The scale/weight for each role therefore lives in exactly
@@ -42,9 +47,19 @@ function inlineRole(displayName, defaultAs, variantClass, defaultColor) {
  * 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 }) {
+function pinned(defaultAs, variantClass, defaultColor, { as, color, tone, numeric, mono, truncate, align, 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 }));
+    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", layoutClass(align, truncate)), children: children }));
+}
+/**
+ * The alignment, and the box it needs. An aligned run is block-level, so text-align has a box to set
+ * the text in. A truncated run clips: inline-block by default, a block when it is aligned too.
+ */
+function layoutClass(align, truncate) {
+    const box = truncate
+        ? cx("min-w-0 truncate align-bottom", align ? "block" : "inline-block")
+        : align && "block";
+    return cx(align && ALIGN[align], box);
 }
 /** The text of `children` when it is all strings and numbers: what a truncated run shows on hover. */
 function plainText(children) {
@@ -71,11 +86,16 @@ export const PageHeading = typography("PageHeading", "h1", "text-3xl/9 font-bold
 /**
  * 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.
+ * the line built in. `description` is a muted line under the heading, outside the `<h2>`, so the
+ * heading's name stays the title; the rule then sits under the description.
  */
-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);
+export function SectionHeading({ rule, description, ...props }) {
+    const hairline = "mb-4 border-b border-slate-200/70 pb-2";
+    const hasDescription = description != null && description !== false;
+    if (!hasDescription) {
+        return pinned("h2", cx(rule && hairline, "text-base/6 font-semibold"), "default", props);
+    }
+    return (_jsxs("div", { className: cx("flex flex-col gap-1", rule && hairline), children: [pinned("h2", "text-base/6 font-semibold", "default", props), _jsx(Text, { as: "p", color: "tertiary", children: description })] }));
 }
 const SUBSECTION_SIZE = {
     sm: "text-sm/5 font-semibold",
@@ -93,7 +113,7 @@ export function SubsectionHeading({ size = "md", ...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`.
+ * `numeric`, `mono`, `truncate` and `align` are opt-in, as on `Text`.
  */
 export const Overline = inlineRole("Overline", "span", "text-xs font-semibold uppercase tracking-wide", "tertiary");
 /**
@@ -103,10 +123,14 @@ export const Overline = inlineRole("Overline", "span", "text-xs font-semibold up
  * `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`).
+ * ellipsis (the full text becomes its `title`). `align` sets it at `start`, `center` or `end`.
+ * `italic` slants it, `breakWords` breaks a long unbroken string at the edge of its box, and `minWidth="amount"`
+ * fixes a width and right-aligns the figure in it (a column of amounts lines up); it does not take `align`.
  */
-export function Text({ strong, preserveNewlines, ...props }) {
-    return pinned("span", textVariant(strong, preserveNewlines, true), strong ? "default" : "secondary", props);
+export function Text({ strong, preserveNewlines, minWidth, italic, breakWords, ...props }) {
+    return pinned("span", cx(textVariant(strong, preserveNewlines, true), italic && "italic", breakWords && "break-words", minWidth === "amount" && "inline-block min-w-24 text-end"), strong ? "default" : "secondary", 
+    // An amount is always in tabular figures, so it lines up; `numeric` already emits them.
+    { ...props, numeric: props.numeric || minWidth === "amount" });
 }
 /**
  * The supporting line under a `Dialog` title: `Text as="p"` without the measure, so
@@ -118,5 +142,11 @@ export function HeaderText({ 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");
+/**
+ * Fine print / metadata. `span` (inline; `as="p"` for a block), text-xs/4 normal, tertiary. Takes `tone`,
+ * `numeric`, `mono`, `truncate` and `align` like `Text`, and `italic` for a muted hint and `breakWords`
+ * for a long unbroken string such as a URL.
+ */
+export function Caption({ italic, breakWords, ...props }) {
+    return pinned("span", cx("text-xs/4 font-normal", italic && "italic", breakWords && "break-words"), "tertiary", props);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hackcove/ui-react",
-  "version": "0.8.3",
+  "version": "0.9.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",