@hackcove/ui 0.2.4 → 0.2.5

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