@kud/ink-ui 0.17.0 → 0.19.0

package/AGENTS.md

@@ -79,6 +79,13 @@ import { colors, spacing } from "@kud/ink-ui"
 A literal like `color="orange"` or `color="#FF8C00"` is wrong even when it
 renders identically — it breaks the moment a token moves.
 
+The one exception is `<Pill color>`, for a surface mirroring an external
+system whose colours ARE its vocabulary — GitHub's merged purple, a CI
+provider's result colours. The test is whether the hue is a **fact about the
+thing being labelled**; a colour picked because it looks right is still a token
+job. The pill inks itself against whatever fill it is given, so a caller reaching
+for this never picks a foreground.
+
 **State is never signalled by colour alone.** Every status carries a shape, a
 glyph or a weight as well, because a colourblind reader cannot see the hue and
 a piped terminal has no colour at all. `SelectableRow` marks the active row

package/dist/index.d.ts

@@ -19,16 +19,26 @@ type PillVariant = "success" | "error" | "warning" | "info" | "accent" | "muted"
 type PillProps = {
     children: string;
     variant?: PillVariant;
+    /**
+     * An explicit fill, for a caller that owns a palette of its own — one
+     * mirroring an external system whose colours ARE the vocabulary (GitHub's
+     * merged purple, a CI provider's result colours). Overrides `variant`.
+     *
+     * Not a way round the token rule. A colour picked because it looks nice is
+     * still wrong here; the test is whether the hue is a fact about the thing
+     * being labelled rather than a preference about the label.
+     */
+    color?: string;
 };
 /**
- * A filled, rounded label — a category the thing belongs to, not a status it is
- * in.
+ * A filled, rounded label — a category the thing belongs to, or an event that
+ * has just happened to it.
  *
- * Reach for it when the word IS the information (`epic`, `draft`, `blocked`) and
- * you want it to read as one object rather than as more prose. For a reference
- * the reader is meant to follow — a ticket key, a repo — leave the text dim: a
- * fill gives a breadcrumb a weight it has not earned, and once everything is a
- * pill none of them is.
+ * Reach for it when the word IS the information (`epic`, `draft`, `blocked`,
+ * `NEW`) and you want it to read as one object rather than as more prose. For a
+ * reference the reader is meant to follow — a ticket key, a repo — leave the
+ * text dim: a fill gives a breadcrumb a weight it has not earned, and once
+ * everything is a pill none of them is.
  *
  * The WORD carries the meaning and the colour only reinforces it, so a pill
  * survives being read in monochrome, piped, or by someone who cannot separate
@@ -43,7 +53,7 @@ type PillProps = {
  * `NO_COLOR` is the one case that does fall back to brackets: with the fill
  * stripped, the caps would be drawing the outline of a pill that is not there.
  */
-declare const Pill: ({ children, variant }: PillProps) => React__default.JSX.Element;
+declare const Pill: ({ children, variant, color }: PillProps) => React__default.JSX.Element;
 /**
  * How many columns `<Pill>` occupies for `text` — the label plus its two caps.
  *
@@ -239,6 +249,24 @@ type TabItem<T extends string = string> = {
     value: T;
     label: string;
     count?: number;
+    /**
+     * A marker drawn immediately before the label, in its own colour.
+     *
+     * Give every tab one of the SAME WIDTH, or none at all. A marker that appears
+     * on one tab alone pushes every tab after it sideways — which is the whole
+     * reason this is a field rather than something a caller prepends to `label`:
+     * a bar that shifts when news arrives is a bar you have to re-find. A blank of
+     * the right width is how you say "not this one".
+     *
+     * Its own `Text` because the label's colour answers "is this tab active" and a
+     * marker usually answers something else; folded together, the marker would
+     * have to borrow the answer to the wrong question.
+     *
+     * Animating one costs nothing: the cell is already reserved, so a caller
+     * cycling the glyph or the colour per frame moves no layout at all.
+     */
+    marker?: string;
+    markerColor?: string;
 };
 type TabsProps<T extends string> = {
     active: T;

package/dist/index.js

@@ -55,8 +55,19 @@ var INK = {
   accent: "black",
   muted: "white"
 };
-var Pill = ({ children, variant = "muted" }) => {
-  const fill = FILL[variant];
+var inkFor = (fill) => {
+  const hex = /^#([0-9a-f]{6})$/i.exec(fill)?.[1];
+  if (!hex) return "white";
+  const channel = (i) => {
+    const c = parseInt(hex.slice(i, i + 2), 16) / 255;
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  };
+  const luminance = 0.2126 * channel(0) + 0.7152 * channel(2) + 0.0722 * channel(4);
+  return (luminance + 0.05) / 0.05 >= 1.05 / (luminance + 0.05) ? "black" : "white";
+};
+var Pill = ({ children, variant = "muted", color }) => {
+  const fill = color ?? FILL[variant];
+  const ink = color ? inkFor(color) : INK[variant];
   if (process.env["NO_COLOR"]) return /* @__PURE__ */ jsxs(Text, { color: fill, children: [
     "[",
     children,
@@ -64,7 +75,7 @@ var Pill = ({ children, variant = "muted" }) => {
   ] });
   return /* @__PURE__ */ jsxs(Text, { children: [
     /* @__PURE__ */ jsx(Text, { color: fill, children: glyphs.plCapLeft }),
-    /* @__PURE__ */ jsx(Text, { backgroundColor: fill, color: INK[variant], children }),
+    /* @__PURE__ */ jsx(Text, { backgroundColor: fill, color: ink, children }),
     /* @__PURE__ */ jsx(Text, { color: fill, children: glyphs.plCapRight })
   ] });
 };
@@ -646,21 +657,26 @@ var ScrollView = ({
 var Tabs = ({ active, items }) => {
   const cells = items.map((item) => ({
     key: item.value,
+    marker: item.marker ?? "",
+    markerColor: item.markerColor,
     text: item.count !== void 0 ? `${item.label} (${item.count})` : item.label,
     isActive: item.value === active
   }));
+  const widthOf = (cell) => [...cell.marker].length + [...cell.text].length;
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx(Box, { gap: 2, children: cells.map((cell) => /* @__PURE__ */ jsx(
-      Text,
-      {
-        bold: cell.isActive,
-        color: cell.isActive ? colors.accent : void 0,
-        dimColor: !cell.isActive,
-        children: cell.text
-      },
-      cell.key
-    )) }),
-    /* @__PURE__ */ jsx(Box, { gap: 2, children: cells.map((cell) => /* @__PURE__ */ jsx(Text, { color: colors.accent, children: cell.isActive ? "\u2500".repeat(cell.text.length) : " ".repeat(cell.text.length) }, cell.key)) })
+    /* @__PURE__ */ jsx(Box, { gap: 2, children: cells.map((cell) => /* @__PURE__ */ jsxs(Box, { children: [
+      cell.marker ? /* @__PURE__ */ jsx(Text, { color: cell.markerColor, children: cell.marker }) : null,
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          bold: cell.isActive,
+          color: cell.isActive ? colors.accent : void 0,
+          dimColor: !cell.isActive,
+          children: cell.text
+        }
+      )
+    ] }, cell.key)) }),
+    /* @__PURE__ */ jsx(Box, { gap: 2, children: cells.map((cell) => /* @__PURE__ */ jsx(Text, { color: colors.accent, children: (cell.isActive ? "\u2500" : " ").repeat(widthOf(cell)) }, cell.key)) })
   ] });
 };
 var useTabs = (items, { initial, isActive = true } = {}) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kud/ink-ui",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "description": "React component library for Ink CLIs",
   "type": "module",
   "main": "dist/index.js",