@fibery/ui-kit 2.1.0 → 2.1.1

package/src/design-system/colors.ts

@@ -1,10 +1,13 @@
 /* eslint-disable max-lines */
-import {ThemePalette} from "../palette-generator";
-import {darkenChroma, hslFrom, produceColor, serializeHexVariadic, setAlpha, setLuminanceChroma} from "../color-utils";
+import {darkenChroma, hslFrom, produceColor, setAlpha, setLuminanceChroma} from "../color-utils";
 import {ThemeMode} from "../theme-settings";
 import {alpha, opacity, transparent} from "./alpha";
 import {getDarkenColor, makeAdaptiveBgFg} from "./colors-js";
 import {cssFromFilter, makeColorFilter} from "../color-filter";
+import {highlightColors} from "../highlight-colors";
+import type {Def, Defs, ThemePalette} from "./types";
+import {mapDef} from "./def";
+import mapValues from "lodash/mapValues";
 
 export const cardTypeColors = [
   "#4A4A4A",
@@ -57,9 +60,6 @@ const both =
   (map: (_: string) => string) =>
   ([light, dark]: Def): Def => [map(light), map(dark)];
 
-type Def = [light: string, dark: string];
-type Defs = Record<string, Def>;
-
 export function defsFromPalette({
   key,
   white,
@@ -76,20 +76,20 @@ export function defsFromPalette({
   tealDark,
   yellow,
   yellowDark,
-  deneutralize,
+  deneutralize: deneutralizeFilter,
+  highlight,
 }: ThemePalette) {
-  const shift = makeColorFilter(deneutralize);
-  const colorPickerCssFilter = cssFromFilter(deneutralize) ?? "none";
+  const [deneutralizeL, deneutralizeD] = mapDef(deneutralizeFilter, makeColorFilter);
+  const deneutralize = (def: Def) => mapDef(def, deneutralizeL, deneutralizeD);
 
   // beg(TODO pull into ThemePalette)
   const blackish = produceColor(black, (x) => {
     const hsl = hslFrom(x);
     return {...hsl, l: (hsl.l ?? 0) + 0.05};
   });
-  const purple9 = shift("rgb(157, 99, 212)");
-  const purpleDark9 = shift("rgb(131, 73, 182)");
-  const blue9 = shift("rgba(56, 105, 204, 1)");
-  const blueDark9 = shift("rgba(151, 177, 237, 1)");
+
+  const [purple9, purpleDark9] = deneutralize(["rgb(157, 99, 212)", "rgb(131, 73, 182)"]);
+  const [blue9, blueDark9] = deneutralize(["rgba(56, 105, 204, 1)", "rgba(151, 177, 237, 1)"]);
   // end(TODO pull into ThemePalette)
 
   // whiteA = surface direction (white on light / black on dark) — blends INTO bg
@@ -413,9 +413,9 @@ export function defsFromPalette({
   const bgActionsMenu = raised.level1;
   const bgActionsMenuItemHover = surface.level4_5;
 
-  const iconFromFg = (fg: string) => ({
-    fg: same(fg),
-    bg: same(alpha(fg, 0.2)),
+  const iconFromFg = (fg: string): {fg: Def; bg: Def} => ({
+    fg: deneutralize(same(fg)),
+    bg: deneutralize(same(alpha(fg, 0.2))),
   });
 
   const swatches = {
@@ -426,9 +426,9 @@ export function defsFromPalette({
     yellow: cardTypeColors[14],
   };
 
-  const iconMySpace = iconFromFg(shift(swatches.grayLight, serializeHexVariadic));
-  const iconPrivate = iconFromFg(shift(swatches.green, serializeHexVariadic));
-  const iconFavorites = iconFromFg(shift(swatches.yellow, serializeHexVariadic));
+  const iconMySpace = iconFromFg(swatches.grayLight);
+  const iconPrivate = iconFromFg(swatches.green);
+  const iconFavorites = iconFromFg(swatches.yellow);
   const defaultCardTypeColorUppercaseHex = same(
     (key.includes("arch") ? swatches.yellow : key.includes("neutral") ? swatches.indigo : swatches.teal).toUpperCase()
   );
@@ -436,8 +436,11 @@ export function defsFromPalette({
   const iconBadge = iconFromFg(base[10]);
 
   const colors = {
-    mode: ["light", "dark"],
     ...shadows,
+    ...mapValues(highlightColors(highlight, surface.level0), deneutralize),
+    colorPickerCssFilter: mapDef(deneutralizeFilter, cssFromFilter),
+
+    mode: ["light", "dark"],
 
     // Accent background tints (light → strong)
     colorAccentBgSubtle: same(alpha(accent[9], 0.1)),
@@ -893,31 +896,6 @@ export function defsFromPalette({
     colorMermaidPrimaryBorderColor: fg.muted,
     colorMermaidLineColor: [base[10], baseDark[9]],
 
-    // Text highlight backgrounds (shifted for warm palette)
-    highlightBgYellow: [shift("rgba(250, 240, 185, 1)"), shift("rgba(88, 72, 18, 1)")],
-    highlightBgGreen: [shift("rgba(208, 242, 187, 1)"), shift("rgba(50, 88, 51, 1)")],
-    highlightBgAquamarine: [shift("rgba(195, 247, 193, 1)"), shift("rgba(15, 75, 52, 1)")],
-    highlightBgAqua: [shift("rgba(198, 242, 235, 1)"), shift("rgba(45, 87, 83, 1)")],
-    highlightBgBlue: [shift("rgba(208, 235, 250, 1)"), shift("rgba(45, 54, 90, 1)")],
-    highlightBgPurple: [shift("rgba(242, 228, 250, 1)"), shift("rgba(82, 50, 82, 1)")],
-    highlightBgPink: [shift("rgba(250, 228, 240, 1)"), shift("rgba(108, 50, 85, 1)")],
-    highlightBgRed: [shift("rgba(250, 224, 221, 1)"), shift("rgba(95, 44, 49, 1)")],
-    highlightBgGrey: [shift("rgba(222, 227, 233, 1)"), shift("rgba(62, 63, 78, 1)")],
-
-    // Text highlight backgrounds (shifted for warm palette)
-    highlightFgYellow: [shift("rgba(195, 155, 45, 1)"), shift("rgba(200, 168, 85, 1)")],
-    highlightFgGreen: [shift("rgba(80, 165, 65, 1)"), shift("rgba(88, 172, 78, 1)")],
-    highlightFgAquamarine: [shift("rgba(40, 165, 115, 1)"), shift("rgba(52, 172, 128, 1)")],
-    highlightFgAqua: [shift("rgba(35, 155, 150, 1)"), shift("rgba(52, 168, 158, 1)")],
-    highlightFgBlue: [shift("rgba(55, 125, 205, 1)"), shift("rgba(72, 135, 200, 1)")],
-    highlightFgPurple: [shift("rgba(150, 85, 205, 1)"), shift("rgba(155, 90, 200, 1)")],
-    highlightFgPink: [shift("rgba(205, 85, 148, 1)"), shift("rgba(200, 90, 152, 1)")],
-    highlightFgRed: [shift("rgba(205, 85, 80, 1)"), shift("rgba(200, 90, 85, 1)")],
-    highlightFgGrey: [shift("rgba(115, 125, 142, 1)"), shift("rgba(135, 140, 160, 1)")],
-
-    // Color picker CSS filter (applied as CSS filter property to warm the picker UI)
-    colorPickerCssFilter: same(colorPickerCssFilter),
-
     //Whiteboard
     colorBgWhiteboard: surface.level0,
     colorGridDotWhiteboard: bgTabFocus,
@@ -1056,7 +1034,7 @@ export function defsFromPalette({
 
   const adaptive = makeAdaptiveBgFg(white, blackish);
   const fns = {
-    deneutralize: {light: shift, dark: shift},
+    deneutralize: {light: deneutralizeL, dark: deneutralizeD},
     getEnumBackground: {light: adaptive.bg[0], dark: adaptive.bg[1]},
     getAppIconBackground: {light: adaptive.bg[0], dark: adaptive.bg[1], light2: adaptive.bg[1]},
     getIconColor: {light: adaptive.fg[0], dark: adaptive.fg[1]},

package/src/design-system/def.ts

@@ -0,0 +1,17 @@
+import type {ModeDef} from "./types";
+
+type Mapper<T, U> = (_: T) => U;
+
+export function mapDef<T, U>(pair: ModeDef<T>, map0: Mapper<T, U>, map1?: Mapper<T, U>): ModeDef<U>;
+export function mapDef<T, U>(
+  pair: ModeDef<T> | undefined,
+  map0: Mapper<T | undefined, U>,
+  map1?: Mapper<T | undefined, U>
+): ModeDef<U>;
+export function mapDef<T, U>(
+  pair: ModeDef<T> | undefined,
+  map0: Mapper<T | undefined, U>,
+  map1: Mapper<T | undefined, U> = map0
+): ModeDef<U> {
+  return [map0(pair?.[0]), map1(pair?.[1])];
+}

package/src/design-system/theme.ts

@@ -1,10 +1,12 @@
 import {defsFromPalette, sideFromDefs, ThemeDefs} from "./colors";
 import {ThemeMode} from "../theme-settings";
-import {selectPalette, ThemePalette} from "../palette-generator";
+import {selectPalette} from "../palette-generator";
 import memoize from "lodash/memoize";
 import {varPrefix, varsFromTheme} from "./vars";
 import {typedObjectEntries} from "@fibery/helpers/utils/object";
 import {makeSelect} from "./colors-js";
+import type {ThemePalette} from "./types";
+import {LRUCache} from "lru-cache";
 
 // intentionally non-memoized implementation detail for theme-styles use-case
 export function themeFromDefs(defs: ThemeDefs, mode: ThemeMode) {
@@ -26,8 +28,9 @@ function themeFromPaletteImpl(palette: ThemePalette, mode: ThemeMode) {
 }
 
 export const themeFromPalette = memoize(themeFromPaletteImpl, (palette, mode) => `${palette.key}-${mode}`);
+themeFromPalette.cache = new LRUCache({max: 4});
 
-export const themeVars = varsFromTheme(themeFromPaletteImpl(selectPalette(), "light"));
+export const themeVars = varsFromTheme(themeFromPalette(selectPalette(), "light"));
 
 export type Styles = Record<string, string>;
 
@@ -42,3 +45,4 @@ export const stylesFromTheme = memoize(
   (theme: Pick<Theme, "key" | "colors">) => stylesFromThemeImpl(theme),
   (theme) => theme.key
 );
+stylesFromTheme.cache = new LRUCache({max: 4});

package/src/design-system/types.ts

@@ -0,0 +1,102 @@
+import type {ColorFilterSpec} from "../color-filter";
+
+export type ModeDef<T> = [light: T, dark: T];
+
+export type Def = ModeDef<string>; // ColorModeDef?
+export type Defs = Record<string, Def>; // ColorModeDefs?
+
+export type OneBasedScale<T> = readonly [
+  base00: null,
+  step01: T,
+  step02: T,
+  step03: T,
+  step04: T,
+  step05: T,
+  step06: T,
+  step07: T,
+  step08: T,
+  step09: T,
+  step10: T,
+  step11: T,
+  step12: T,
+];
+
+export type ZeroBasedScale<T> = readonly [
+  step01: T,
+  step02: T,
+  step03: T,
+  step04: T,
+  step05: T,
+  step06: T,
+  step07: T,
+  step08: T,
+  step09: T,
+  step10: T,
+  step11: T,
+  step12: T,
+];
+
+export type ColorScale = OneBasedScale<string>;
+
+type BgDef = ModeDef<{Lc: number; c: number}>;
+type FgDependantOnBgDef = ModeDef<{c: number; Lc: number}>;
+
+// merge with / derive from text-editor implementation array
+export type HighlightHueName = "yellow" | "green" | "aquamarine" | "aqua" | "blue" | "purple" | "pink" | "red" | "grey";
+export type HighlightHueNameCap =
+  | "Yellow"
+  | "Green"
+  | "Aquamarine"
+  | "Aqua"
+  | "Blue"
+  | "Purple"
+  | "Pink"
+  | "Red"
+  | "Grey";
+
+type HighlightIntensityDefs = {
+  bg: BgDef;
+  fg: FgDependantOnBgDef;
+};
+
+type HighlightIntensityOverrides = {
+  bg: ModeDef<Partial<{Lc: number; c: number}>>;
+  fg: ModeDef<Partial<{c: number; Lc: number}>>;
+};
+
+export type HighlightDefs = HighlightIntensityDefs & {
+  hues: Record<HighlightHueName, number>;
+  overrides?: Partial<Record<HighlightHueName, Partial<HighlightIntensityOverrides>>>;
+};
+
+export type ThemePaletteBase = {
+  highlight: HighlightDefs;
+};
+
+export type ThemePaletteCore = ThemePaletteBase & {
+  deneutralize?: ModeDef<ColorFilterSpec>;
+
+  white: string;
+  black: string;
+  whiteA: ColorScale;
+  blackA: ColorScale;
+
+  base: ColorScale;
+  baseDark: ColorScale;
+
+  red: ColorScale;
+  redDark: ColorScale;
+
+  teal: ColorScale;
+  tealDark: ColorScale;
+
+  yellow: ColorScale;
+  yellowDark: ColorScale;
+};
+
+type ThemePaletteKeyless = ThemePaletteCore & {
+  accent: ColorScale;
+  accentDark: ColorScale;
+};
+
+export type ThemePalette = ThemePaletteKeyless & {key: string};

package/src/design-system/vars.test.ts

@@ -1,7 +1,7 @@
 import {themeFromPalette} from "./theme";
 import {resolveColorArg, varsFromTheme} from "./vars";
 import {selectPalette} from "../palette-generator";
-import {cssFromUnsafe, getAlpha, getLuminance, isValidColor, produceColor, serializeHexVariadic} from "../color-utils";
+import {cssFromUnsafe, getAlpha, getLuminance, produceColor, serializeHexVariadic} from "../color-utils";
 
 test("varsFromTheme", () => {
   const palette = selectPalette();
@@ -13,6 +13,14 @@ test("varsFromTheme", () => {
 });
 
 describe("resolveColorArg — CSS var guard", () => {
+  test("null from unsafe external world is identity", () => {
+    expect(resolveColorArg(null, "test")).toBe(null);
+  });
+
+  test("undefined from unsafe external world is identity", () => {
+    expect(resolveColorArg(undefined, "test")).toBe(undefined);
+  });
+
   it("passes through plain colors", () => {
     expect(resolveColorArg("#ff0000", "test")).toBe("#ff0000");
     expect(resolveColorArg("rgb(0,0,0)", "test")).toBe("rgb(0,0,0)");
@@ -54,7 +62,6 @@ describe("resolveColorArg — CSS var guard", () => {
     const spy = jest.spyOn(console, "warn").mockImplementation(() => {});
 
     expect(cssFromUnsafe("var(--fibery-color-e2e)")).toMatchInlineSnapshot(`"rgb(255, 84, 0)"`);
-    expect(isValidColor("var(--fibery-color-e2e)")).toBe(true);
     expect(getLuminance("var(--fibery-color-e2e)")).toBeGreaterThan(0);
     expect(getAlpha("var(--fibery-color-e2e)")).toBe(1);
     expect(serializeHexVariadic("var(--fibery-color-e2e)")).toMatchInlineSnapshot(`"#ff5400"`);

package/src/design-system/vars.ts

@@ -43,8 +43,10 @@ function tryResolveFromDOM(value: string): string | undefined {
   return resolved || undefined;
 }
 
-export function resolveColorArg(value: string, fnName: string): string {
-  if (!value.startsWith("var(")) {
+export function resolveColorArg(value: string, fnName: string): string;
+export function resolveColorArg(value: string | null | undefined, fnName: string): string | null | undefined;
+export function resolveColorArg(value: string | null | undefined, fnName: string): string | null | undefined {
+  if (!value?.startsWith("var(")) {
     return value;
   }
 

package/src/design-system.ts

@@ -1,7 +1,15 @@
+export type * from "./design-system/types";
 export {opacity, alpha} from "./design-system/alpha";
 export {transition, durations, tooltipDelay, transitionDuration, transitions} from "./design-system/animation";
 export {cardTypeColors, type ThemeDefs} from "./design-system/colors";
-export {getLinearGradient, getEnumTextColor, dropCursorColor, shadows} from "./design-system/colors-css";
+export {
+  getLinearGradient,
+  getEnumTextColor,
+  getBgSwatchBorderColor,
+  getBgSwatchFillColor,
+  dropCursorColor,
+  shadows,
+} from "./design-system/colors-css";
 export {getDarkenColor, getTextColor, getObjectColorMemoized} from "./design-system/colors-js";
 export {dateFormat, dateTimeFormat, timeFormat} from "./design-system/date";
 export {

package/src/emoji-picker/emoji-picker-content-with-color.tsx

@@ -84,10 +84,10 @@ export const EmojiPickerContentWithColor: React.FC<EmojiPickerContentWithColorPr
             <div className={colorPickerWrapperCss}>
               <ColorPicker
                 colors={colors}
-                getSwatchHoverColor={getHoverColor}
+                getSwatchHoverColor={getHoverColor!}
                 getColorOverrideFn={getColorOverrideFn}
-                color={color}
-                onChangeComplete={onColorSelect}
+                color={color!}
+                onChangeComplete={onColorSelect!}
               />
             </div>
           </CollapsibleContent>

package/src/heat.ts

@@ -0,0 +1,8 @@
+import {interpolate, type Oklch} from "culori";
+
+export function adjustHeat(color: Oklch, amount: number): Oklch {
+  const source = color;
+  const target = {...source, h: amount < 0 ? 264 : 70};
+
+  return interpolate([source, target], "oklch")(Math.abs(amount));
+}

package/src/highlight-colors.test.ts

@@ -0,0 +1,68 @@
+import {converter, parse} from "culori";
+import {calcContrast} from "apcach";
+import {bgKeyFrom, fgOnBgKeyFrom, highlightColors, highlightHueNames} from "./highlight-colors";
+import {common} from "./palettes/common";
+import {locateThemeBundle} from "./theme-styles";
+import {oklchFrom} from "./color-utils";
+
+const highlight = common.highlight;
+const surface = locateThemeBundle(false).defs.colors.panelBg;
+const generated = highlightColors(highlight, surface);
+
+function calcLc(fg: string, bg: string) {
+  return Math.abs(calcContrast(fg, bg, "apca"));
+}
+
+function withBgLc(Lc: number) {
+  return highlightColors({...highlight, bg: highlight.bg.map((x) => ({...x, Lc})) as typeof highlight.bg}, surface);
+}
+
+describe("highlight-colors", () => {
+  it("all values are parseable sRGB colors", () => {
+    for (const [, [light, dark]] of Object.entries(generated)) {
+      expect(parse(light)).toBeDefined();
+      expect(parse(dark)).toBeDefined();
+    }
+  });
+
+  const tolerance = 1.5;
+  it("fg Lc contrast from bg within ±" + tolerance, () => {
+    for (const name of highlightHueNames) {
+      const bg = generated[bgKeyFrom(name)];
+      const fg = generated[fgOnBgKeyFrom(name)];
+      const targetL = highlight.overrides?.[name]?.fg?.[0]?.Lc ?? highlight.fg[0].Lc;
+      const targetD = highlight.overrides?.[name]?.fg?.[1]?.Lc ?? highlight.fg[1].Lc;
+      expect(calcLc(fg[0], bg[0])).toBeGreaterThan(targetL - tolerance);
+      expect(calcLc(fg[0], bg[0])).toBeLessThan(targetL + tolerance);
+      expect(calcLc(fg[1], bg[1])).toBeGreaterThan(targetD - tolerance);
+      expect(calcLc(fg[1], bg[1])).toBeLessThan(targetD + tolerance);
+    }
+  });
+
+  it("light bg colors are distinct per hue (not all white)", () => {
+    const lightBgs = highlightHueNames.map((n) => generated[bgKeyFrom(n)][0]);
+    const unique = new Set(lightBgs);
+    expect(unique.size).toBeGreaterThan(1);
+    for (const bg of lightBgs) {
+      expect(bg).not.toBe("#ffffff");
+      expect(bg).not.toBe("rgb(255, 255, 255)");
+    }
+  });
+
+  it("bridge is continuous at Lc=8 boundary", () => {
+    const below = withBgLc(7.9);
+    const above = withBgLc(8.1);
+    for (const name of highlightHueNames) {
+      const bgBelow = oklchFrom(parse(below[bgKeyFrom(name)][0])!);
+      const bgAbove = oklchFrom(parse(above[bgKeyFrom(name)][0])!);
+      expect(Math.abs((bgBelow?.l ?? 0) - (bgAbove?.l ?? 0))).toBeLessThan(0.01);
+    }
+  });
+
+  it("grey bg is near-neutral (c < 0.025)", () => {
+    const lightBg = converter("oklch")(parse(generated.highlightBgGrey[0])!);
+    const darkBg = converter("oklch")(parse(generated.highlightBgGrey[1])!);
+    expect(lightBg?.c).toBeLessThan(0.025);
+    expect(darkBg?.c).toBeLessThan(0.025);
+  });
+});

package/src/highlight-colors.ts

@@ -0,0 +1,91 @@
+import {apcach, crToBg} from "apcach";
+import {clampChroma, formatRgb} from "culori";
+import {oklchFrom} from "./color-utils";
+import type {Def, HighlightDefs, HighlightHueName, HighlightHueNameCap, ModeDef} from "./design-system/types";
+
+function pairFrom<T>(def: ModeDef<T>, mapper: (_: T, idx: number) => string) {
+  return def.map(mapper) as Def;
+}
+
+function merge<T>(base: ModeDef<T>, override?: ModeDef<Partial<T>>): ModeDef<T> {
+  return override ? (override.map((o, i) => ({...base[i], ...o})) as ModeDef<T>) : base;
+}
+
+const LC_BRIDGE = 8;
+
+function strictOklch(L: number, c: number, hue: number) {
+  return formatRgb(clampChroma({mode: "oklch", l: L, c, h: hue}, "oklch", "rgb"));
+}
+
+function colorFromLc(surfaceColor: string, Lc: number, c: number, hue: number, referenceC?: number) {
+  const lcChroma = referenceC !== undefined && c < referenceC ? referenceC : c;
+  return strictOklch(colorLightnessFromLc(surfaceColor, Lc, lcChroma, hue), c, hue);
+}
+
+function colorLightnessFromLc(surfaceColor: string, Lc: number, c: number, hue: number) {
+  if (Lc >= LC_BRIDGE) {
+    return apcach(crToBg(surfaceColor, Lc), c, hue, 100, "srgb").lightness;
+  }
+  const surfaceL = oklchFrom(surfaceColor)?.l ?? 0;
+  if (Lc <= 0) {
+    return surfaceL;
+  }
+  const atBridge = apcach(crToBg(surfaceColor, LC_BRIDGE), c, hue, 100, "srgb").lightness;
+  return surfaceL + (atBridge - surfaceL) * (Lc / LC_BRIDGE);
+}
+
+const capitalize = (s: string) => s[0].toUpperCase() + s.slice(1);
+
+type Colors = Record<`highlightFgOnBg${HighlightHueNameCap}`, Def> &
+  Record<`highlightBg${HighlightHueNameCap}`, Def> &
+  Record<`highlightFg${HighlightHueNameCap}`, Def>;
+type Key = keyof Colors;
+
+export function bgKeyFrom(hueName: HighlightHueName) {
+  return `highlightBg${capitalize(hueName)}` as Key;
+}
+
+export function fgOnBgKeyFrom(hueName: HighlightHueName) {
+  return `highlightFgOnBg${capitalize(hueName)}` as Key;
+}
+
+export function fgKeyFrom(hueName: HighlightHueName) {
+  return `highlightFg${capitalize(hueName)}` as Key;
+}
+
+export const highlightHueNames: HighlightHueName[] = [
+  "yellow",
+  "green",
+  "aquamarine",
+  "aqua",
+  "blue",
+  "purple",
+  "pink",
+  "red",
+  "grey",
+];
+
+export function highlightColors({bg, fg, hues, overrides}: HighlightDefs, surface: Def) {
+  const defs: Partial<Colors> = {};
+
+  for (const hueName of highlightHueNames) {
+    const hue = hues[hueName];
+    const ov = overrides?.[hueName];
+    const mergedBg = merge(bg, ov?.bg);
+    const bgs = pairFrom(mergedBg, (b, i) => {
+      return colorFromLc(surface[i], b.Lc, b.c, hue, bg[i].c);
+    });
+    defs[bgKeyFrom(hueName)] = bgs;
+
+    const mergedFg = merge(fg, ov?.fg);
+    defs[fgKeyFrom(hueName)] = pairFrom(mergedFg, (fg, i) => {
+      return colorFromLc(surface[i], fg.Lc, fg.c, hue);
+    });
+
+    defs[fgOnBgKeyFrom(hueName)] = pairFrom(mergedFg, (fg, i) => {
+      return colorFromLc(bgs[i], fg.Lc, fg.c, hue);
+    });
+  }
+
+  return defs as Colors;
+}

package/src/link-input/components/{AntTextAreaWithCustomReadState.js → AntTextAreaWithCustomReadState.tsx}

@@ -19,28 +19,39 @@ const inputStyle = css`
   position: relative;
 `;
 
-export const AntTextAreaWithCustomReadState = ({value, onBlur, onFocus, style = {}, renderReadState, ...rest}) => {
+export type AntTextAreaWithCustomReadStateProps = React.ComponentPropsWithoutRef<typeof AntTextArea> & {
+  renderReadState: () => React.ReactNode;
+};
+
+export const AntTextAreaWithCustomReadState = ({
+  value,
+  onBlur,
+  onFocus,
+  style = {},
+  renderReadState,
+  ...rest
+}: AntTextAreaWithCustomReadStateProps) => {
   const [focus, setFocus] = useState(false);
-  const input = useRef(null);
+  const input = useRef<HTMLTextAreaElement>(null);
 
   const handleFocus = useCallback(
-    (e) => {
+    (e: React.FocusEvent<HTMLTextAreaElement>) => {
       setFocus(true);
-      onFocus && onFocus(e);
+      onFocus?.(e);
     },
     [onFocus]
   );
 
   const handleBlur = useCallback(
-    (e) => {
+    (e: React.FocusEvent<HTMLTextAreaElement>) => {
       setFocus(false);
-      onBlur && onBlur(e);
+      onBlur?.(e);
     },
     [onBlur]
   );
 
   const handleWrapperClick = useCallback(() => {
-    input.current.focus();
+    input.current?.focus();
   }, [input]);
 
   return (
@@ -52,7 +63,7 @@ export const AntTextAreaWithCustomReadState = ({value, onBlur, onFocus, style =
         onFocus={handleFocus}
         onBlur={handleBlur}
         value={value}
-        style={{...style, color: !focus && "transparent"}}
+        style={{...style, color: !focus ? "transparent" : undefined}}
       />
       {!focus && (
         <div className={wrapperStyle} onClick={handleWrapperClick}>

package/src/link-input/index.tsx

@@ -0,0 +1,94 @@
+import {css} from "@linaria/core";
+import {useCallback} from "react";
+import {
+  AntTextAreaWithCustomReadState,
+  AntTextAreaWithCustomReadStateProps,
+} from "./components/AntTextAreaWithCustomReadState";
+import {getURL} from "./utils";
+
+const urlLinkClassname = css`
+  word-break: break-word;
+  margin-right: 20px;
+`;
+
+type LinkProps = {value: string; children?: React.ReactNode} & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+
+export const UrlInputLink = ({value, children, ...rest}: LinkProps) => {
+  const normalizedUrl = getURL(value);
+  if (!normalizedUrl) {
+    return null;
+  }
+  return (
+    <a
+      draggable={false}
+      target="_blank"
+      className={urlLinkClassname}
+      rel="noopener noreferrer nofollow"
+      href={normalizedUrl}
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+};
+
+export const UrlInput = (props: Omit<AntTextAreaWithCustomReadStateProps, "renderReadState">) => {
+  const handleClick = useCallback((e: React.MouseEvent) => e.stopPropagation(), []);
+
+  return (
+    <AntTextAreaWithCustomReadState
+      {...props}
+      renderReadState={() => (
+        <UrlInputLink value={String(props.value ?? "")} onClick={handleClick}>
+          {String(props.value ?? "")}
+        </UrlInputLink>
+      )}
+    />
+  );
+};
+
+export const PhoneInputLink = ({value, children, ...rest}: LinkProps) => {
+  return (
+    <a draggable={false} href={`tel:${value}`} {...rest}>
+      {children}
+    </a>
+  );
+};
+
+export const PhoneInput = (props: Omit<AntTextAreaWithCustomReadStateProps, "renderReadState">) => {
+  const handleClick = useCallback((e: React.MouseEvent) => e.stopPropagation(), []);
+
+  return (
+    <AntTextAreaWithCustomReadState
+      {...props}
+      renderReadState={() => (
+        <PhoneInputLink value={String(props.value ?? "")} onClick={handleClick}>
+          {String(props.value ?? "")}
+        </PhoneInputLink>
+      )}
+    />
+  );
+};
+
+export const EmailInputLink = ({value, children, ...rest}: LinkProps) => {
+  return (
+    <a draggable={false} href={`mailto:${value}`} {...rest}>
+      {children}
+    </a>
+  );
+};
+
+export const EmailInput = (props: Omit<AntTextAreaWithCustomReadStateProps, "renderReadState">) => {
+  const handleClick = useCallback((e: React.MouseEvent) => e.stopPropagation(), []);
+
+  return (
+    <AntTextAreaWithCustomReadState
+      {...props}
+      renderReadState={() => (
+        <EmailInputLink value={String(props.value ?? "")} onClick={handleClick}>
+          {String(props.value ?? "")}
+        </EmailInputLink>
+      )}
+    />
+  );
+};