@kud/ink-ui 0.17.0 → 0.18.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.
  *

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 })
   ] });
 };

package/package.json

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