@hackcove/ui 0.2.1 → 0.2.2

package/README.md

@@ -40,7 +40,7 @@ export const Example = () => (
 - Typography roles (each pins size + weight, takes a `color` and an `as`): `Display`, `Lead`,
   `PageHeading`, `SectionHeading`, `SubsectionHeading`, `ModalHeading`, `Subtitle`, `Overline`,
   `Body`, `BodyStrong`, `Caption`.
-- Controls: `Button`, `buttonClass` (the classes of a `Button`, for a router's own `<Link>`), `IconButton` (a square button holding one icon; `label` is required and becomes its `aria-label` and `title`), `Input` (a text input; `icon` adds a leading icon inside the field), `Textarea` (a multi-line text input, `rows` defaults to 3), `Select` (a native `<select>` in the control look; takes `<option>` children and keeps the browser's arrow). `Checkbox` (a native checkbox with its label; `className` goes on the label, other props on the input). `CopyButton` (a small text button that writes `text` to the clipboard and swaps `label` ("copy") for `copiedLabel` ("copied"); every other button prop, `disabled` included, goes on the `<button>`). `CopyLine` (one line of mono text in a box with a `CopyButton` beside it; other props go on the root `<div>`). `Field` (a label above a control, `htmlFor` names the control's id; a `hint` sits under it, and an `error` replaces the hint with a `role="alert"` line). `Callout` (a tinted notice box; `tone` is `neutral`, `info` (default), `positive`, `warn` or `danger`; an optional `title` sits in bold above the body). `NavTabs` (a row of pill links in a `<nav>`; `items` are `{ label, href, active? }`, `label` names the landmark, the active one is filled and gets `aria-current="page"`). `navTabClass` (the classes of one tab, for a router's own `<Link>`). `Breadcrumbs` (a `<nav aria-label="Breadcrumb">` over an ordered list; `crumbs` are nodes, the last is the current page and gets `aria-current="page"`, and each crumb truncates). `crumbLinkClass` (the classes of a crumb that links, for a router's own `<Link>`). `KeyValueList` (a `<dl>` of label/value rows; each `KeyValue` takes a `label` and its value as children, the value right-aligned in tabular figures). `Kbd` (a keyboard key in mono; its border takes the surrounding text colour, so it reads on a filled button too). `ToggleChip` (an on/off filter pill; `pressed` sets `aria-pressed` and the filled look, `dot` adds a leading colour dot, and the caller toggles it in `onClick`). `FilterGroup` (a `<fieldset>` with a small uppercase `legend` over a wrapped row of its children, e.g. `ToggleChip`s; `className` goes on the fieldset).
+- Controls: `Button`, `buttonClass` (the classes of a `Button`, for a router's own `<Link>`), `IconButton` (a square button holding one icon; `label` is required and becomes its `aria-label` and `title`), `Input` (a text input; `icon` adds a leading icon inside the field), `Textarea` (a multi-line text input, `rows` defaults to 3), `Select` (a native `<select>` in the control look; takes `<option>` children and keeps the browser's arrow). `Checkbox` (a native checkbox with its label; `className` goes on the label, other props on the input). `CopyButton` (a small text button that writes `text` to the clipboard and swaps `label` ("copy") for `copiedLabel` ("copied"); every other button prop, `disabled` included, goes on the `<button>`). `CopyLine` (one line of mono text in a box with a `CopyButton` beside it; other props go on the root `<div>`). `Field` (a label above a control, `htmlFor` names the control's id; a `hint` sits under it, and an `error` replaces the hint with a `role="alert"` line). `Callout` (a tinted notice box; `tone` is `neutral`, `info` (default), `positive`, `warn` or `danger`; an optional `title` sits in bold above the body). `NavTabs` (a row of pill links in a `<nav>`; `items` are `{ label, href, active? }`, `label` names the landmark, the active one is filled and gets `aria-current="page"`). `navTabClass` (the classes of one tab, for a router's own `<Link>`). `Breadcrumbs` (a `<nav aria-label="Breadcrumb">` over an ordered list; `crumbs` are nodes, the last is the current page and gets `aria-current="page"`, and each crumb truncates). `crumbLinkClass` (the classes of a crumb that links, for a router's own `<Link>`). `KeyValueList` (a `<dl>` of label/value rows; each `KeyValue` takes a `label` and its value as children, the value right-aligned in tabular figures). `Avatar` (a round badge of the initials of `name`, titled with the name and `aria-hidden`; `size` is `sm`, `md` (default) or `lg`; `ring` adds a page-colour border and a negative margin for an overlapping stack; the colour is one of seven stock background classes picked by a hash of the name, remapped by each theme, and `avatarColourClass(name)` returns it to colour something else the same way; `initialsOf(name)` is the two letters). `Kbd` (a keyboard key in mono; its border takes the surrounding text colour, so it reads on a filled button too). `ToggleChip` (an on/off filter pill; `pressed` sets `aria-pressed` and the filled look, `dot` adds a leading colour dot, and the caller toggles it in `onClick`). `FilterGroup` (a `<fieldset>` with a small uppercase `legend` over a wrapped row of its children, e.g. `ToggleChip`s; `className` goes on the fieldset).
 
 ## Palette
 

package/dist/Avatar.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ReactElement } from "react";
+declare const SIZE_CLASSES: {
+    readonly sm: "size-6 text-xs";
+    readonly md: "size-7 text-xs";
+    readonly lg: "size-10 text-base";
+};
+export type AvatarSize = keyof typeof SIZE_CLASSES;
+/** The background class for a name: the same name gets the same colour everywhere. */
+export declare function avatarColourClass(name: string): string;
+/** Up to two letters or digits of a name, upper-cased; `?` when it has none. */
+export declare function initialsOf(name: string): string;
+/**
+ * A person as a round badge of initials. It never loads a remote image: that is a request to
+ * another server for decoration, and it makes a screenshot depend on the network.
+ */
+export declare function Avatar({ name, size, ring, className, ...rest }: {
+    name: string;
+    size?: AvatarSize;
+    /** A ring in the page colour, for a stack of overlapping avatars. */
+    ring?: boolean;
+} & Omit<HTMLAttributes<HTMLSpanElement>, "children">): ReactElement;
+export {};

package/dist/Avatar.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/** The identity colours, in hash order. Each is a stock background utility; a theme remaps them. */
+const COLOUR_CLASSES = [
+    "bg-violet-600",
+    "bg-orange-600",
+    "bg-cyan-600",
+    "bg-emerald-600",
+    "bg-sky-600",
+    "bg-pink-600",
+    "bg-amber-600",
+];
+const SIZE_CLASSES = {
+    sm: "size-6 text-xs",
+    md: "size-7 text-xs",
+    lg: "size-10 text-base",
+};
+/** The background class for a name: the same name gets the same colour everywhere. */
+export function avatarColourClass(name) {
+    let hash = 0;
+    for (const char of name)
+        hash = (hash * 31 + char.charCodeAt(0)) >>> 0;
+    return COLOUR_CLASSES[hash % COLOUR_CLASSES.length] ?? COLOUR_CLASSES[0];
+}
+/** Up to two letters or digits of a name, upper-cased; `?` when it has none. */
+export function initialsOf(name) {
+    return (name
+        .replace(/[^a-z0-9]/gi, "")
+        .slice(0, 2)
+        .toUpperCase() || "?");
+}
+/**
+ * A person as a round badge of initials. It never loads a remote image: that is a request to
+ * another server for decoration, and it makes a screenshot depend on the network.
+ */
+export function Avatar({ name, size = "md", ring = false, className, ...rest }) {
+    return (_jsx("span", { "aria-hidden": "true", title: name, className: cx("inline-grid shrink-0 place-items-center rounded-full font-semibold text-violet-50", SIZE_CLASSES[size], avatarColourClass(name), ring && "-ml-1.5 border-2 border-slate-50 first:ml-0", className), ...rest, children: initialsOf(name) }));
+}

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { Card, EpicHeader, Empty, PageTitle, Pill, groupByEpic } from "./ui.js";
 export { Markdown } from "./Markdown.js";
 export { Button, buttonClass, type ButtonVariant } from "./Button.js";
+export { Avatar, avatarColourClass, initialsOf, type AvatarSize } from "./Avatar.js";
 export { Breadcrumbs, crumbLinkClass } from "./Breadcrumbs.js";
 export { Callout, type CalloutTone } from "./Callout.js";
 export { Dialog, type DialogProps } from "./Dialog.js";

package/dist/index.js

@@ -1,6 +1,7 @@
 export { Card, EpicHeader, Empty, PageTitle, Pill, groupByEpic } from "./ui.js";
 export { Markdown } from "./Markdown.js";
 export { Button, buttonClass } from "./Button.js";
+export { Avatar, avatarColourClass, initialsOf } from "./Avatar.js";
 export { Breadcrumbs, crumbLinkClass } from "./Breadcrumbs.js";
 export { Callout } from "./Callout.js";
 export { Dialog } from "./Dialog.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hackcove/ui",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Hack Cove React components: primitives, typography roles and a safe Markdown renderer, written against Tailwind v4 utilities. Pair with a @hackcove/theme-* package.",
   "license": "MIT",
   "repository": {