@hackcove/ui 0.1.0 → 0.2.0

package/README.md

@@ -4,7 +4,7 @@ Hack Cove React components, written against Tailwind v4 utilities. They carry no
 with a `@hackcove/theme-*` package such as `@hackcove/theme-catppuccin-mocha`, or use them on their
 own for the default light look.
 
-Status: `0.x`, not yet published to npm. License: MIT.
+Status: `0.x`, published to npm. License: MIT.
 
 ## Install
 
@@ -40,6 +40,27 @@ 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). `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>`). `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
+
+`palette.json` (in the repo, not in the package) lists the colour utilities the components may use,
+by role.
+
+| Role       | For                                                                   |
+| ---------- | --------------------------------------------------------------------- |
+| `surface`  | Cards and panels: the main background.                                |
+| `subtle`   | A step off the surface: table stripes, hover rows.                    |
+| `inset`    | A step deeper: wells, chips, pressed fills.                           |
+| `line`     | Borders and dividers.                                                 |
+| `ink`      | Text, from primary down to muted, plus input placeholders.            |
+| `accent`   | Primary actions, links, focus rings and controls; text on the accent. |
+| `positive` | Success: fill, text and border.                                       |
+| `warn`     | Caution: fill, text and border.                                       |
+| `danger`   | Errors and destructive actions: fill, text and border.                |
+| `info`     | Neutral notes: fill, text and border.                                 |
+
+A theme remaps every utility in `palette.json`; a component uses no colour utility outside it.
 
 ## Develop
 

package/dist/Button.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithoutRef, ReactElement } from "react";
+export type ButtonVariant = "primary" | "outline" | "ghost";
+/** The classes of a Button, for a router's own <Link> that should look like one. */
+export declare function buttonClass(variant?: ButtonVariant): string;
+/** A button in the primary, outline or ghost style. Defaults to `type="button"`. */
+export declare function Button({ variant, className, ...rest }: {
+    variant?: ButtonVariant;
+} & ComponentPropsWithoutRef<"button">): ReactElement;

package/dist/Button.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx, focusRing } from "./cx.js";
+const BASE = `inline-flex items-center justify-center gap-2 rounded-lg border px-4 py-2 text-sm font-medium transition disabled:pointer-events-none disabled:opacity-50 ${focusRing}`;
+const VARIANT = {
+    primary: "border-violet-600 bg-violet-600 text-violet-50 hover:bg-violet-700",
+    outline: "border-violet-600 text-violet-600 hover:bg-violet-50",
+    ghost: "border-transparent text-slate-600 hover:bg-slate-100",
+};
+/** The classes of a Button, for a router's own <Link> that should look like one. */
+export function buttonClass(variant = "primary") {
+    return cx(BASE, VARIANT[variant]);
+}
+/** A button in the primary, outline or ghost style. Defaults to `type="button"`. */
+export function Button({ variant = "primary", className, ...rest }) {
+    return _jsx("button", { type: "button", className: cx(buttonClass(variant), className), ...rest });
+}

package/dist/Callout.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+/** The colour family of a callout. */
+export type CalloutTone = "neutral" | "info" | "positive" | "warn" | "danger";
+/** A tinted notice box, with an optional bold title above its body. */
+export declare function Callout({ tone, title, children, className, ...rest }: {
+    /** Defaults to "info". */
+    tone?: CalloutTone;
+    title?: ReactNode;
+    children: ReactNode;
+} & Omit<HTMLAttributes<HTMLDivElement>, "title">): ReactElement;

package/dist/Callout.js

@@ -0,0 +1,13 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+const TONES = {
+    neutral: "border-slate-200 bg-slate-50 text-slate-700",
+    info: "border-blue-200 bg-blue-50 text-blue-800",
+    positive: "border-emerald-200 bg-emerald-50 text-emerald-800",
+    warn: "border-amber-200 bg-amber-50 text-amber-800",
+    danger: "border-red-200 bg-red-50 text-red-800",
+};
+/** A tinted notice box, with an optional bold title above its body. */
+export function Callout({ tone = "info", title, children, className, ...rest }) {
+    return (_jsx("div", { className: cx("rounded-xl border p-4 text-sm", TONES[tone], className), ...rest, children: title ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "font-semibold", children: title }), _jsx("div", { className: "mt-1", children: children })] })) : (children) }));
+}

package/dist/Checkbox.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+/** A native checkbox with its label. `className` goes on the label; every other prop goes on the input. */
+export declare function Checkbox({ label, className, ...rest }: {
+    label: ReactNode;
+} & Omit<ComponentPropsWithoutRef<"input">, "type">): ReactElement;

package/dist/Checkbox.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx, focusRing } from "./cx.js";
+/** A native checkbox with its label. `className` goes on the label; every other prop goes on the input. */
+export function Checkbox({ label, className, ...rest }) {
+    return (_jsxs("label", { className: cx("inline-flex cursor-pointer items-center gap-2 text-sm text-slate-700", className), children: [_jsx("input", { type: "checkbox", className: cx("h-4 w-4 accent-violet-600", focusRing), ...rest }), label] }));
+}

package/dist/Field.d.ts

@@ -0,0 +1,12 @@
+import type { ReactElement, ReactNode } from "react";
+/** A label above a control, with a hint or an error line under it. An error replaces the hint. */
+export declare function Field({ label, htmlFor, hint, error, children, className, }: {
+    label: ReactNode;
+    /** The id of the control inside; the label's htmlFor. */
+    htmlFor: string;
+    hint?: ReactNode;
+    /** Replaces the hint when set. */
+    error?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}): ReactElement;

package/dist/Field.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/** A label above a control, with a hint or an error line under it. An error replaces the hint. */
+export function Field({ label, htmlFor, hint, error, children, className, }) {
+    let note = null;
+    if (error) {
+        note = (_jsx("p", { role: "alert", className: "text-xs text-red-700", children: error }));
+    }
+    else if (hint) {
+        note = _jsx("p", { className: "text-xs text-slate-500", children: hint });
+    }
+    return (_jsxs("div", { className: cx("flex flex-col gap-1.5", className), children: [_jsx("label", { htmlFor: htmlFor, className: "text-sm font-medium text-slate-700", children: label }), children, note] }));
+}

package/dist/FilterGroup.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+/** A labelled filter section: a small uppercase legend over a wrapped row of chips (e.g. ToggleChip). Other props go on the fieldset. */
+export declare function FilterGroup({ legend, children, className, ...rest }: {
+    legend: ReactNode;
+} & ComponentPropsWithoutRef<"fieldset">): ReactElement;

package/dist/FilterGroup.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/** A labelled filter section: a small uppercase legend over a wrapped row of chips (e.g. ToggleChip). Other props go on the fieldset. */
+export function FilterGroup({ legend, children, className, ...rest }) {
+    return (_jsxs("fieldset", { className: cx("min-w-0", className), ...rest, children: [_jsx("legend", { className: "mb-2 text-xs font-medium tracking-wide text-slate-500 uppercase", children: legend }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: children })] }));
+}

package/dist/IconButton.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+/** A square bordered button holding one icon. `label` is its accessible name and tooltip. Defaults to `type="button"`. */
+export declare function IconButton({ label, className, children, ...rest }: {
+    label: string;
+    children: ReactNode;
+} & Omit<ComponentPropsWithoutRef<"button">, "children">): ReactElement;

package/dist/IconButton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx, focusRing } from "./cx.js";
+const BASE = `inline-flex h-9 w-9 items-center justify-center rounded-lg border border-slate-200 text-slate-500 transition hover:bg-slate-50 disabled:pointer-events-none disabled:opacity-50 ${focusRing}`;
+/** A square bordered button holding one icon. `label` is its accessible name and tooltip. Defaults to `type="button"`. */
+export function IconButton({ label, className, children, ...rest }) {
+    return (_jsx("button", { type: "button", ...rest, "aria-label": label, title: label, className: cx(BASE, className), children: children }));
+}

package/dist/Input.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+/** A text input. `icon` puts a leading icon inside the field (e.g. a search glass). */
+export declare function Input({ icon, className, ...rest }: {
+    icon?: ReactNode;
+} & ComponentPropsWithoutRef<"input">): ReactElement;

package/dist/Input.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { controlClass } from "./control.js";
+import { cx } from "./cx.js";
+/** A text input. `icon` puts a leading icon inside the field (e.g. a search glass). */
+export function Input({ icon, className, ...rest }) {
+    if (icon === undefined) {
+        return _jsx("input", { ...rest, className: cx(controlClass, "px-3", className) });
+    }
+    return (_jsxs("div", { className: "relative", children: [_jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-slate-400 [&>svg]:h-4 [&>svg]:w-4", children: icon }), _jsx("input", { ...rest, className: cx(controlClass, "pr-3 pl-9", className) })] }));
+}

package/dist/NavTabs.d.ts

@@ -0,0 +1,16 @@
+import type { ReactElement, ReactNode } from "react";
+/** One pill link in a NavTabs row. */
+export type NavTab = {
+    label: ReactNode;
+    href: string;
+    active?: boolean;
+};
+/** The classes of one tab, for a router's own <Link>. */
+export declare function navTabClass(active: boolean): string;
+/** A row of pill links where the active one is filled. Renders plain <a>; use navTabClass with a router's Link. */
+export declare function NavTabs({ items, label, className, }: {
+    items: NavTab[];
+    /** The accessible name of the nav landmark. */
+    label: string;
+    className?: string;
+}): ReactElement;

package/dist/NavTabs.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx, focusRing } from "./cx.js";
+const BASE = `rounded-lg px-3 py-1.5 transition ${focusRing}`;
+/** The classes of one tab, for a router's own <Link>. */
+export function navTabClass(active) {
+    return cx(BASE, active ? "bg-slate-100 font-medium text-slate-900" : "text-slate-600 hover:bg-slate-100");
+}
+/** A row of pill links where the active one is filled. Renders plain <a>; use navTabClass with a router's Link. */
+export function NavTabs({ items, label, className, }) {
+    return (_jsx("nav", { "aria-label": label, className: cx("flex flex-wrap gap-1 text-sm", className), children: items.map((item) => (_jsx("a", { href: item.href, className: navTabClass(!!item.active), "aria-current": item.active ? "page" : undefined, children: item.label }, item.href))) }));
+}

package/dist/Select.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentPropsWithoutRef, ReactElement } from "react";
+/** A native `<select>` styled like `Input`, keeping the browser's own arrow. */
+export declare function Select({ className, children, ...rest }: ComponentPropsWithoutRef<"select">): ReactElement;

package/dist/Select.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { controlClass } from "./control.js";
+import { cx } from "./cx.js";
+/** A native `<select>` styled like `Input`, keeping the browser's own arrow. */
+export function Select({ className, children, ...rest }) {
+    return (_jsx("select", { ...rest, className: cx(controlClass, "px-3", className), children: children }));
+}

package/dist/Textarea.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentPropsWithoutRef, ReactElement } from "react";
+/** A multi-line text input, styled like `Input`. `rows` defaults to 3. */
+export declare function Textarea({ className, ...rest }: ComponentPropsWithoutRef<"textarea">): ReactElement;

package/dist/Textarea.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { controlClass } from "./control.js";
+import { cx } from "./cx.js";
+/** A multi-line text input, styled like `Input`. `rows` defaults to 3. */
+export function Textarea({ className, ...rest }) {
+    return _jsx("textarea", { rows: 3, ...rest, className: cx(controlClass, "px-3", className) });
+}

package/dist/ToggleChip.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithoutRef, ReactElement } from "react";
+/** An on/off pill button for filters. `pressed` sets its state; `dot` adds a leading colour dot. The caller toggles it in onClick. */
+export declare function ToggleChip({ pressed, dot, className, children, ...rest }: {
+    pressed: boolean;
+    /** A CSS colour for a leading dot (e.g. a category colour); no dot when omitted. */
+    dot?: string;
+} & ComponentPropsWithoutRef<"button">): ReactElement;

package/dist/ToggleChip.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx, focusRing } from "./cx.js";
+const BASE = `inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition ${focusRing}`;
+const OFF = "border-slate-200 bg-white text-slate-600 hover:border-violet-400";
+const ON = "border-violet-600 bg-violet-600 text-violet-50";
+/** An on/off pill button for filters. `pressed` sets its state; `dot` adds a leading colour dot. The caller toggles it in onClick. */
+export function ToggleChip({ pressed, dot, className, children, ...rest }) {
+    return (_jsxs("button", { type: "button", "aria-pressed": pressed, className: cx(BASE, pressed ? ON : OFF, className), ...rest, children: [dot && (_jsx("span", { "aria-hidden": "true", className: cx("h-1.5 w-1.5 rounded-full", pressed && "ring-1 ring-current"), style: { backgroundColor: dot } })), children] }));
+}

package/dist/control.d.ts

@@ -0,0 +1,2 @@
+/** Shared look of text controls; each control adds its own horizontal padding. */
+export declare const controlClass = "w-full rounded-lg border border-slate-300 bg-white py-2 text-sm text-slate-900 placeholder:text-slate-400 transition hover:border-violet-400 disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600";

package/dist/control.js

@@ -0,0 +1,3 @@
+import { focusRing } from "./cx.js";
+/** Shared look of text controls; each control adds its own horizontal padding. */
+export const controlClass = `w-full rounded-lg border border-slate-300 bg-white py-2 text-sm text-slate-900 placeholder:text-slate-400 transition hover:border-violet-400 disabled:opacity-50 ${focusRing}`;

package/dist/cx.d.ts

@@ -0,0 +1,4 @@
+/** Join class names, dropping falsy parts. */
+export declare function cx(...parts: Array<string | false | null | undefined>): string;
+/** The keyboard focus ring every interactive control shares. */
+export declare const focusRing = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600";

package/dist/cx.js

@@ -0,0 +1,6 @@
+/** Join class names, dropping falsy parts. */
+export function cx(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+/** The keyboard focus ring every interactive control shares. */
+export const focusRing = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600";

package/dist/index.d.ts

@@ -1,3 +1,14 @@
 export { Card, EpicHeader, Empty, PageTitle, Pill, groupByEpic } from "./ui.js";
 export { Markdown } from "./Markdown.js";
+export { Button, buttonClass, type ButtonVariant } from "./Button.js";
+export { Callout, type CalloutTone } from "./Callout.js";
+export { IconButton } from "./IconButton.js";
+export { NavTabs, navTabClass, type NavTab } from "./NavTabs.js";
+export { ToggleChip } from "./ToggleChip.js";
+export { FilterGroup } from "./FilterGroup.js";
+export { Checkbox } from "./Checkbox.js";
+export { Field } from "./Field.js";
+export { Input } from "./Input.js";
+export { Select } from "./Select.js";
+export { Textarea } from "./Textarea.js";
 export { Body, BodyStrong, Caption, Display, Lead, ModalHeading, Overline, PageHeading, SectionHeading, SubsectionHeading, Subtitle, type TypographyColor, type TypographyProps, } from "./typography.js";

package/dist/index.js

@@ -1,3 +1,14 @@
 export { Card, EpicHeader, Empty, PageTitle, Pill, groupByEpic } from "./ui.js";
 export { Markdown } from "./Markdown.js";
+export { Button, buttonClass } from "./Button.js";
+export { Callout } from "./Callout.js";
+export { IconButton } from "./IconButton.js";
+export { NavTabs, navTabClass } from "./NavTabs.js";
+export { ToggleChip } from "./ToggleChip.js";
+export { FilterGroup } from "./FilterGroup.js";
+export { Checkbox } from "./Checkbox.js";
+export { Field } from "./Field.js";
+export { Input } from "./Input.js";
+export { Select } from "./Select.js";
+export { Textarea } from "./Textarea.js";
 export { Body, BodyStrong, Caption, Display, Lead, ModalHeading, Overline, PageHeading, SectionHeading, SubsectionHeading, Subtitle, } from "./typography.js";

package/dist/typography.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "./cx.js";
 /** Colour token → slate/violet utility (remapped to Catppuccin Mocha in dark mode by theme.css). */
 const COLOR = {
     default: "text-slate-900", // Catppuccin text     #cdd6f4
@@ -7,9 +8,6 @@ const COLOR = {
     muted: "text-slate-400", // Catppuccin overlay2 #9399b2
     brand: "text-violet-600", // Catppuccin mauve    #cba6f7
 };
-function cx(...parts) {
-    return parts.filter(Boolean).join(" ");
-}
 /**
  * Build a semantic component that pins `variantClass` (size + weight + tracking)
  * and a default colour. The scale/weight for each role therefore lives in exactly

package/dist/ui.d.ts

@@ -3,9 +3,12 @@ export declare function PageTitle({ title, subtitle }: {
     title: string;
     subtitle?: string;
 }): import("react").JSX.Element;
-export declare function Card({ title, count, children, }: {
+/** 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, }: {
     title?: string;
     count?: number;
+    as?: "section" | "article" | "div";
+    className?: string;
     children: ReactNode;
 }): import("react").JSX.Element;
 /** A coloured epic header row: a dot in the epic's colour + its label. */
@@ -13,9 +16,11 @@ export declare function EpicHeader({ color, label }: {
     color: string;
     label: string;
 }): import("react").JSX.Element;
-export declare function Pill({ children, tone, }: {
+/** A small tinted label; `dot` adds a leading dot in the pill's own text colour. */
+export declare function Pill({ children, tone, dot, }: {
     children: ReactNode;
     tone?: "slate" | "amber" | "emerald" | "blue" | "red";
+    dot?: boolean;
 }): import("react").JSX.Element;
 export declare function Empty({ children }: {
     children: ReactNode;

package/dist/ui.js

@@ -1,17 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
 // Small presentational primitives written against Tailwind's slate-based class vocabulary
 // (remapped to Catppuccin Mocha in dark mode by theme.css).
 export function PageTitle({ title, subtitle }) {
     return (_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight text-slate-900", children: title }), subtitle && _jsx("p", { className: "mt-1 text-sm text-slate-500", children: subtitle })] }));
 }
-export function Card({ title, count, children, }) {
-    return (_jsxs("section", { className: "rounded-xl border border-slate-200/70 bg-white p-5 shadow-sm", 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] }));
+/** 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] }));
 }
 /** 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 })] }));
 }
-export function Pill({ children, tone = "slate", }) {
+/** A small tinted label; `dot` adds a leading dot in the pill's own text colour. */
+export function Pill({ children, tone = "slate", dot = false, }) {
     const tones = {
         slate: "bg-slate-100 text-slate-600",
         amber: "bg-amber-50 text-amber-700",
@@ -19,7 +22,7 @@ export function Pill({ children, tone = "slate", }) {
         blue: "bg-blue-50 text-blue-700",
         red: "bg-red-50 text-red-900",
     };
-    return (_jsx("span", { className: `rounded-md px-1.5 py-0.5 text-xs font-medium ${tones[tone]}`, children: children }));
+    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] }));
 }
 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.1.0",
+  "version": "0.2.0",
   "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": {