@hzblj/kara-components 0.13.2 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @hzblj/kara-components
 
+## 0.14.0
+
+### Minor Changes
+
+- [#38](https://github.com/hzblj/kara-ui/pull/38) [`40ddb25`](https://github.com/hzblj/kara-ui/commit/40ddb254b85e95c4e86d79f5ce71c3c004598a59) Thanks [@hzblj](https://github.com/hzblj)! - `Text` takes spans and eases their colours. Nested `Text` children are runs of one paragraph, each in a `color` of its own (`<Text>Box, box. <Text color="content.accent">Box this lap</Text></Text>`), and with `animate` a colour that changes, the text's or a span's, eases to its new value on the motion tokens instead of switching: a word lit as it is said, a phrase brought forward. SwiftUI interpolates the text; on Android each span animates its colour natively. Colours keep easing with Reduce Motion on. Rebuild the native app.
+
+### Patch Changes
+
+- Updated dependencies [[`40ddb25`](https://github.com/hzblj/kara-ui/commit/40ddb254b85e95c4e86d79f5ce71c3c004598a59)]:
+  - @hzblj/kara-native@0.14.0
+  - @hzblj/kara-sx@0.14.0
+  - @hzblj/kara-theme@0.14.0
+
 ## 0.13.2
 
 ### Patch Changes

package/lib/module/atoms/text/spans.js

@@ -0,0 +1,44 @@
+"use strict";
+
+import { Children, isValidElement } from 'react';
+
+/** A run of the text: a string child, or a nested `Text` with a colour of its own. */
+
+const textOf = children => Children.toArray(children).map(child => typeof child === 'string' || typeof child === 'number' ? String(child) : '').join('');
+
+/**
+ * The children as runs when any of them is a nested `Text` (`type`, the platform's own component), `null` when they
+ * are only text. A span keeps its `color`; anything else it sets is the outer text's.
+ */
+export const spansOf = (children, type) => {
+  const items = Children.toArray(children);
+  if (!items.some(child => /*#__PURE__*/isValidElement(child) && child.type === type)) {
+    return null;
+  }
+  return items.flatMap(child => {
+    if (typeof child === 'string' || typeof child === 'number') {
+      return [{
+        text: String(child)
+      }];
+    }
+    if (/*#__PURE__*/isValidElement(child) && child.type === type) {
+      return [{
+        color: child.props.color,
+        text: textOf(child.props.children)
+      }];
+    }
+    return [];
+  });
+};
+
+/** The colours and the text folded into one number, for SwiftUI's `.animation(_:value:)`. A 32-bit FNV-1a hash. */
+export const spansKey = (color, spans, text) => {
+  let hash = 0x811c9dc5;
+  const value = spans ? spans.map(span => `${span.color ?? ''}:${span.text}`).join('|') : text;
+  for (const character of `${color}|${value}`) {
+    hash ^= character.charCodeAt(0);
+    hash = Math.imul(hash, 0x01000193);
+  }
+  return hash >>> 0;
+};
+//# sourceMappingURL=spans.js.map

package/lib/module/atoms/text/spans.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Children","isValidElement","textOf","children","toArray","map","child","String","join","spansOf","type","items","some","flatMap","text","color","props","spansKey","spans","hash","value","span","character","charCodeAt","Math","imul"],"sourceRoot":"../../../../src","sources":["atoms/text/spans.ts"],"mappings":";;AACA,SAAQA,QAAQ,EAAEC,cAAc,QAAuB,OAAO;;AAE9D;;AAGA,MAAMC,MAAM,GAAIC,QAAmB,IACjCH,QAAQ,CAACI,OAAO,CAACD,QAAQ,CAAC,CACvBE,GAAG,CAACC,KAAK,IAAK,OAAOA,KAAK,KAAK,QAAQ,IAAI,OAAOA,KAAK,KAAK,QAAQ,GAAGC,MAAM,CAACD,KAAK,CAAC,GAAG,EAAG,CAAC,CAC3FE,IAAI,CAAC,EAAE,CAAC;;AAEb;AACA;AACA;AACA;AACA,OAAO,MAAMC,OAAO,GAAGA,CAACN,QAAmB,EAAEO,IAAa,KAAwB;EAChF,MAAMC,KAAK,GAAGX,QAAQ,CAACI,OAAO,CAACD,QAAQ,CAAC;EAExC,IAAI,CAACQ,KAAK,CAACC,IAAI,CAACN,KAAK,IAAI,aAAAL,cAAc,CAACK,KAAK,CAAC,IAAIA,KAAK,CAACI,IAAI,KAAKA,IAAI,CAAC,EAAE;IACtE,OAAO,IAAI;EACb;EAEA,OAAOC,KAAK,CAACE,OAAO,CAAWP,KAAK,IAAI;IACtC,IAAI,OAAOA,KAAK,KAAK,QAAQ,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;MAC1D,OAAO,CAAC;QAACQ,IAAI,EAAEP,MAAM,CAACD,KAAK;MAAC,CAAC,CAAC;IAChC;IACA,IAAI,aAAAL,cAAc,CAA6CK,KAAK,CAAC,IAAIA,KAAK,CAACI,IAAI,KAAKA,IAAI,EAAE;MAC5F,OAAO,CAAC;QAACK,KAAK,EAAET,KAAK,CAACU,KAAK,CAACD,KAAK;QAAED,IAAI,EAAEZ,MAAM,CAACI,KAAK,CAACU,KAAK,CAACb,QAAQ;MAAC,CAAC,CAAC;IACzE;IACA,OAAO,EAAE;EACX,CAAC,CAAC;AACJ,CAAC;;AAED;AACA,OAAO,MAAMc,QAAQ,GAAGA,CAACF,KAAiB,EAAEG,KAAiC,EAAEJ,IAAY,KAAa;EACtG,IAAIK,IAAI,GAAG,UAAU;EACrB,MAAMC,KAAK,GAAGF,KAAK,GAAGA,KAAK,CAACb,GAAG,CAACgB,IAAI,IAAI,GAAGA,IAAI,CAACN,KAAK,IAAI,EAAE,IAAIM,IAAI,CAACP,IAAI,EAAE,CAAC,CAACN,IAAI,CAAC,GAAG,CAAC,GAAGM,IAAI;EAE5F,KAAK,MAAMQ,SAAS,IAAI,GAAGP,KAAK,IAAIK,KAAK,EAAE,EAAE;IAC3CD,IAAI,IAAIG,SAAS,CAACC,UAAU,CAAC,CAAC,CAAC;IAC/BJ,IAAI,GAAGK,IAAI,CAACC,IAAI,CAACN,IAAI,EAAE,UAAU,CAAC;EACpC;EAEA,OAAOA,IAAI,KAAK,CAAC;AACnB,CAAC","ignoreList":[]}

package/lib/module/atoms/text/text.android.js

@@ -2,10 +2,12 @@
 
 import { Text as ComposeText } from '@expo/ui/jetpack-compose';
 import { testID as testIdModifier } from '@expo/ui/jetpack-compose/modifiers';
-import { splitAccessibility, useAccessibilityModifiers, useSxModifiers } from '@hzblj/kara-sx';
-import { useAppTheme } from '@hzblj/kara-theme';
+import { AnimatedText } from '@hzblj/kara-native/jetpack-compose';
+import { animateConfig, splitAccessibility, useAccessibilityModifiers, useSxModifiers } from '@hzblj/kara-sx';
+import { duration, easing, springPhysics, useAppTheme } from '@hzblj/kara-theme';
 import { useMemo } from 'react';
 import { useHostGuard } from "../../host-context.js";
+import { spansOf } from "./spans.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const DECORATION = {
   none: 'none',
@@ -19,6 +21,41 @@ const applyTransform = (children, transform) => {
   return transform === 'uppercase' ? children.toUpperCase() : children.toLowerCase();
 };
 const decorationOf = decoration => decoration === undefined ? undefined : DECORATION[decoration];
+const transformed = (text, transform) => transform === 'uppercase' ? text.toUpperCase() : transform === 'lowercase' ? text.toLowerCase() : text;
+
+/**
+ * `animate` for the spans' colours, as `@hzblj/kara-sx` animates the rest on Compose: a spring token's physics, and
+ * `smoothOut` as a no-bounce spring over its duration; the other curves as tweens along their béziers.
+ */
+const textAnimation = config => {
+  if (config.spring) {
+    const {
+      dampingRatio,
+      stiffness
+    } = springPhysics(config.spring);
+    return {
+      dampingRatio,
+      stiffness,
+      type: 'spring'
+    };
+  }
+  const milliseconds = duration[config.duration ?? 'fast'];
+  const curve = config.easing ?? 'smoothOut';
+  if (curve === 'smoothOut') {
+    const omega = 2 * Math.PI * 1000 / milliseconds;
+    return {
+      dampingRatio: 1,
+      stiffness: omega * omega,
+      type: 'spring'
+    };
+  }
+  return {
+    delayMillis: config.delay,
+    durationMillis: milliseconds,
+    easing: easing[curve],
+    type: 'tween'
+  };
+};
 export const Text = ({
   align,
   children,
@@ -37,6 +74,31 @@ export const Text = ({
   const sxModifiers = useSxModifiers(sx);
   const accessibilityModifiers = useAccessibilityModifiers(accessibility);
   const modifiers = useMemo(() => [...sxModifiers, ...(testID ? [testIdModifier(testID)] : []), ...accessibilityModifiers], [accessibilityModifiers, sxModifiers, testID]);
+  const spans = useMemo(() => spansOf(children, Text), [children]);
+  const animate = sx.animate;
+
+  // `@expo/ui`'s text takes spans but animates none: with `animate`, kara's own Compose text eases each span's colour.
+  if (animate !== undefined && animate !== false) {
+    const runs = spans ?? [{
+      text: typeof children === 'string' || typeof children === 'number' ? String(children) : ''
+    }];
+    return /*#__PURE__*/_jsx(AnimatedText, {
+      animation: textAnimation(animateConfig(animate)),
+      fontFamily: style.fontFamily,
+      fontSize: style.fontSize,
+      fontWeight: style.fontWeight,
+      lineHeight: style.lineHeight,
+      maxLines: numberOfLines,
+      modifiers: modifiers,
+      spans: runs.map(span => ({
+        color: span.color ? theme.colorString(span.color) : undefined,
+        text: transformed(span.text, transform)
+      })),
+      textAlign: align,
+      textColor: theme.colorString(color),
+      textDecoration: decorationOf(decoration)
+    });
+  }
   return /*#__PURE__*/_jsx(ComposeText, {
     color: theme.colorString(color),
     maxLines: numberOfLines,
@@ -49,7 +111,10 @@ export const Text = ({
       textAlign: align,
       textDecoration: decorationOf(decoration)
     },
-    children: applyTransform(children, transform)
+    children: spans ? spans.map((span, index) => /*#__PURE__*/_jsx(ComposeText, {
+      color: span.color ? theme.colorString(span.color) : undefined,
+      children: transformed(span.text, transform)
+    }, index)) : applyTransform(children, transform)
   });
 };
 //# sourceMappingURL=text.android.js.map

package/lib/module/atoms/text/text.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["Text","ComposeText","testID","testIdModifier","splitAccessibility","useAccessibilityModifiers","useSxModifiers","useAppTheme","useMemo","useHostGuard","jsx","_jsx","DECORATION","none","strikethrough","underline","applyTransform","children","transform","toUpperCase","toLowerCase","decorationOf","decoration","undefined","align","color","numberOfLines","variant","props","theme","style","typography","accessibility","sx","sxModifiers","accessibilityModifiers","modifiers","colorString","maxLines","fontFamily","fontSize","fontWeight","lineHeight","textAlign","textDecoration"],"sourceRoot":"../../../../src","sources":["atoms/text/text.android.tsx"],"mappings":";;AAAA,SAAQA,IAAI,IAAIC,WAAW,QAAO,0BAA0B;AAC5D,SAAQC,MAAM,IAAIC,cAAc,QAAO,oCAAoC;AAC3E,SAAQC,kBAAkB,EAAEC,yBAAyB,EAAEC,cAAc,QAAO,gBAAgB;AAC5F,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,MAAMC,UAAU,GAAG;EACjBC,IAAI,EAAE,MAAM;EACZC,aAAa,EAAE,aAAa;EAC5BC,SAAS,EAAE;AACb,CAAU;AAEV,MAAMC,cAAc,GAAGA,CAACC,QAA+B,EAAEC,SAAoC,KAAK;EAChG,IAAI,CAACA,SAAS,IAAI,OAAOD,QAAQ,KAAK,QAAQ,EAAE;IAC9C,OAAOA,QAAQ;EACjB;EAEA,OAAOC,SAAS,KAAK,WAAW,GAAGD,QAAQ,CAACE,WAAW,CAAC,CAAC,GAAGF,QAAQ,CAACG,WAAW,CAAC,CAAC;AACpF,CAAC;AAED,MAAMC,YAAY,GAAIC,UAAsC,IAC1DA,UAAU,KAAKC,SAAS,GAAGA,SAAS,GAAGX,UAAU,CAACU,UAAU,CAAC;AAE/D,OAAO,MAAMtB,IAAmB,GAAGA,CAAC;EAClCwB,KAAK;EACLP,QAAQ;EACRQ,KAAK,GAAG,iBAAiB;EACzBH,UAAU;EACVI,aAAa;EACbxB,MAAM;EACNgB,SAAS;EACTS,OAAO,GAAG,MAAM;EAChB,GAAGC;AACM,CAAC,KAAK;EACfnB,YAAY,CAAC,MAAM,CAAC;EACpB,MAAMoB,KAAK,GAAGtB,WAAW,CAAC,CAAC;EAC3B,MAAMuB,KAAK,GAAGD,KAAK,CAACE,UAAU,CAACJ,OAAO,CAAC;EACvC,MAAM,CAACK,aAAa,EAAEC,EAAE,CAAC,GAAG7B,kBAAkB,CAACwB,KAAK,CAAC;EACrD,MAAMM,WAAW,GAAG5B,cAAc,CAAC2B,EAAE,CAAC;EACtC,MAAME,sBAAsB,GAAG9B,yBAAyB,CAAC2B,aAAa,CAAC;EACvE,MAAMI,SAAS,GAAG5B,OAAO,CACvB,MAAM,CAAC,GAAG0B,WAAW,EAAE,IAAIhC,MAAM,GAAG,CAACC,cAAc,CAACD,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,GAAGiC,sBAAsB,CAAC,EAC9F,CAACA,sBAAsB,EAAED,WAAW,EAAEhC,MAAM,CAC9C,CAAC;EAED,oBACES,IAAA,CAACV,WAAW;IACVwB,KAAK,EAAEI,KAAK,CAACQ,WAAW,CAACZ,KAAK,CAAE;IAChCa,QAAQ,EAAEZ,aAAc;IACxBU,SAAS,EAAEA,SAAU;IACrBN,KAAK,EAAE;MACLS,UAAU,EAAET,KAAK,CAACS,UAAU;MAC5BC,QAAQ,EAAEV,KAAK,CAACU,QAAQ;MACxBC,UAAU,EAAEX,KAAK,CAACW,UAAU;MAC5BC,UAAU,EAAEZ,KAAK,CAACY,UAAU;MAC5BC,SAAS,EAAEnB,KAAK;MAChBoB,cAAc,EAAEvB,YAAY,CAACC,UAAU;IACzC,CAAE;IAAAL,QAAA,EAEDD,cAAc,CAACC,QAAQ,EAAEC,SAAS;EAAC,CACzB,CAAC;AAElB,CAAC","ignoreList":[]}
+{"version":3,"names":["Text","ComposeText","testID","testIdModifier","AnimatedText","animateConfig","splitAccessibility","useAccessibilityModifiers","useSxModifiers","duration","easing","springPhysics","useAppTheme","useMemo","useHostGuard","spansOf","jsx","_jsx","DECORATION","none","strikethrough","underline","applyTransform","children","transform","toUpperCase","toLowerCase","decorationOf","decoration","undefined","transformed","text","textAnimation","config","spring","dampingRatio","stiffness","type","milliseconds","curve","omega","Math","PI","delayMillis","delay","durationMillis","align","color","numberOfLines","variant","props","theme","style","typography","accessibility","sx","sxModifiers","accessibilityModifiers","modifiers","spans","animate","runs","String","animation","fontFamily","fontSize","fontWeight","lineHeight","maxLines","map","span","colorString","textAlign","textColor","textDecoration","index"],"sourceRoot":"../../../../src","sources":["atoms/text/text.android.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/atoms/text/text.ios.js

@@ -3,10 +3,11 @@
 import { Text as SwiftUIText } from '@expo/ui/swift-ui';
 import { foregroundStyle, lineLimit, lineSpacing, multilineTextAlignment, strikethrough, textCase, underline } from '@expo/ui/swift-ui/modifiers';
 import { scaledFont } from '@hzblj/kara-native/swift-ui';
-import { splitAccessibility, useAccessibilityModifiers, useSxModifiers } from '@hzblj/kara-sx';
+import { splitAccessibility, textColorTransition, useAccessibilityModifiers, useSxModifiers } from '@hzblj/kara-sx';
 import { useAppTheme } from '@hzblj/kara-theme';
 import { useMemo } from 'react';
 import { useHostGuard } from "../../host-context.js";
+import { spansKey, spansOf } from "./spans.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ALIGNMENT = {
   center: 'center',
@@ -38,6 +39,10 @@ export const Text = ({
   const [accessibility, sx] = splitAccessibility(props);
   const sxModifiers = useSxModifiers(sx, FRAME_ALIGNMENT[align ?? 'left']);
   const accessibilityModifiers = useAccessibilityModifiers(accessibility);
+  const spans = useMemo(() => spansOf(children, Text), [children]);
+  const animate = sx.animate;
+  // With `animate`, SwiftUI interpolates the text when a colour changes: the text's own or a span's.
+  const transition = useMemo(() => textColorTransition(animate, spansKey(color, spans, typeof children === 'string' ? children : '')), [animate, children, color, spans]);
   const modifiers = useMemo(() => {
     const list = [
     // Not `@expo/ui`'s `font()`: for the platform's face it gives either Apple's size or a size that ignores Dynamic
@@ -69,12 +74,18 @@ export const Text = ({
     if (numberOfLines !== undefined) {
       list.push(lineLimit(numberOfLines));
     }
-    return [...list, ...sxModifiers, ...accessibilityModifiers];
-  }, [accessibilityModifiers, align, color, decoration, numberOfLines, style, sxModifiers, theme, transform]);
+    return [...list, ...transition, ...sxModifiers, ...accessibilityModifiers];
+  }, [accessibilityModifiers, align, color, decoration, numberOfLines, style, sxModifiers, theme, transform, transition]);
   return /*#__PURE__*/_jsx(SwiftUIText, {
     modifiers: modifiers,
     testID: testID,
-    children: children
+    children: spans ? spans.map((span, index) =>
+    /*#__PURE__*/
+    // Concatenated into one SwiftUI `Text`: a span takes its colour, the font and the rest are the outer text's.
+    _jsx(SwiftUIText, {
+      modifiers: span.color ? [foregroundStyle(theme.color(span.color))] : undefined,
+      children: span.text
+    }, index)) : children
   });
 };
 //# sourceMappingURL=text.ios.js.map

package/lib/module/atoms/text/text.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["Text","SwiftUIText","foregroundStyle","lineLimit","lineSpacing","multilineTextAlignment","strikethrough","textCase","underline","scaledFont","splitAccessibility","useAccessibilityModifiers","useSxModifiers","useAppTheme","useMemo","useHostGuard","jsx","_jsx","ALIGNMENT","center","left","right","FRAME_ALIGNMENT","align","children","color","decoration","numberOfLines","testID","transform","variant","props","theme","style","typography","accessibility","sx","sxModifiers","accessibilityModifiers","modifiers","list","family","fontFamily","size","fontSize","textStyle","scalesWith","weight","Math","max","lineHeight","push","isActive","pattern","undefined"],"sourceRoot":"../../../../src","sources":["atoms/text/text.ios.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Text","SwiftUIText","foregroundStyle","lineLimit","lineSpacing","multilineTextAlignment","strikethrough","textCase","underline","scaledFont","splitAccessibility","textColorTransition","useAccessibilityModifiers","useSxModifiers","useAppTheme","useMemo","useHostGuard","spansKey","spansOf","jsx","_jsx","ALIGNMENT","center","left","right","FRAME_ALIGNMENT","align","children","color","decoration","numberOfLines","testID","transform","variant","props","theme","style","typography","accessibility","sx","sxModifiers","accessibilityModifiers","spans","animate","transition","modifiers","list","family","fontFamily","size","fontSize","textStyle","scalesWith","weight","Math","max","lineHeight","push","isActive","pattern","undefined","map","span","index","text"],"sourceRoot":"../../../../src","sources":["atoms/text/text.ios.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/atoms/text/spans.d.ts

@@ -0,0 +1,14 @@
+import type { ColorToken } from '@hzblj/kara-theme';
+import { type ReactNode } from 'react';
+/** A run of the text: a string child, or a nested `Text` with a colour of its own. */
+export type TextSpan = {
+    color?: ColorToken;
+    text: string;
+};
+/**
+ * The children as runs when any of them is a nested `Text` (`type`, the platform's own component), `null` when they
+ * are only text. A span keeps its `color`; anything else it sets is the outer text's.
+ */
+export declare const spansOf: (children: ReactNode, type: unknown) => TextSpan[] | null;
+/** The colours and the text folded into one number, for SwiftUI's `.animation(_:value:)`. A 32-bit FNV-1a hash. */
+export declare const spansKey: (color: ColorToken, spans: readonly TextSpan[] | null, text: string) => number;

package/lib/typescript/atoms/text/text.types.d.ts

@@ -8,6 +8,10 @@ export type TextTransform = 'lowercase' | 'uppercase';
  * SwiftUI `Text` / Compose `Text` in a theme typography variant. A native atom: outside a host, use `RnText`. It takes
  * the native `sx` surface too: padding, a frame (`wide` lines it up by `align`), a background, and the `ios` bucket's
  * `contentTransition`, `animation` and `monospacedDigit` for a number that changes in place.
+ *
+ * Nested `Text` children are spans: runs of the same text in a colour of their own, one paragraph that wraps as one.
+ * With `animate`, a colour that changes (the text's or a span's) eases to its new value instead of switching: a word lit
+ * as it is said, a phrase brought forward. SwiftUI interpolates the text, Compose animates each span's colour.
  */
 export type TextProps = ResponsiveSx & AccessibilityProps & {
     /**
@@ -15,7 +19,10 @@ export type TextProps = ResponsiveSx & AccessibilityProps & {
      * layout; Android keeps them as they are.
      */
     align?: TextAlign;
-    /** The text. */
+    /**
+     * The text: a string, or strings and nested `Text` spans, each in a `color` of its own. A span takes only its
+     * colour; the variant, alignment and everything else are the outer text's.
+     */
     children?: ReactNode;
     /** The text's colour. `content.primary` by default. */
     color?: ColorToken;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzblj/kara-components",
-  "version": "0.13.2",
+  "version": "0.14.0",
   "description": "The atoms, molecules, organisms and templates of @hzblj/kara-ui — real SwiftUI and Jetpack Compose views through @expo/ui.",
   "author": "Jan Blazej",
   "license": "MIT",
@@ -61,9 +61,9 @@
   "dependencies": {
     "@hzblj/expo-native-icons": "^0.1.0",
     "@hzblj/expo-rich-haptics": "^0.1.0",
-    "@hzblj/kara-native": "^0.13.2",
-    "@hzblj/kara-sx": "^0.13.2",
-    "@hzblj/kara-theme": "^0.13.2",
+    "@hzblj/kara-native": "^0.14.0",
+    "@hzblj/kara-sx": "^0.14.0",
+    "@hzblj/kara-theme": "^0.14.0",
     "sf-symbols-typescript": "^2.2.0"
   },
   "peerDependencies": {

package/src/atoms/text/spans.ts

@@ -0,0 +1,45 @@
+import type {ColorToken} from '@hzblj/kara-theme'
+import {Children, isValidElement, type ReactNode} from 'react'
+
+/** A run of the text: a string child, or a nested `Text` with a colour of its own. */
+export type TextSpan = {color?: ColorToken; text: string}
+
+const textOf = (children: ReactNode): string =>
+  Children.toArray(children)
+    .map(child => (typeof child === 'string' || typeof child === 'number' ? String(child) : ''))
+    .join('')
+
+/**
+ * The children as runs when any of them is a nested `Text` (`type`, the platform's own component), `null` when they
+ * are only text. A span keeps its `color`; anything else it sets is the outer text's.
+ */
+export const spansOf = (children: ReactNode, type: unknown): TextSpan[] | null => {
+  const items = Children.toArray(children)
+
+  if (!items.some(child => isValidElement(child) && child.type === type)) {
+    return null
+  }
+
+  return items.flatMap<TextSpan>(child => {
+    if (typeof child === 'string' || typeof child === 'number') {
+      return [{text: String(child)}]
+    }
+    if (isValidElement<{children?: ReactNode; color?: ColorToken}>(child) && child.type === type) {
+      return [{color: child.props.color, text: textOf(child.props.children)}]
+    }
+    return []
+  })
+}
+
+/** The colours and the text folded into one number, for SwiftUI's `.animation(_:value:)`. A 32-bit FNV-1a hash. */
+export const spansKey = (color: ColorToken, spans: readonly TextSpan[] | null, text: string): number => {
+  let hash = 0x811c9dc5
+  const value = spans ? spans.map(span => `${span.color ?? ''}:${span.text}`).join('|') : text
+
+  for (const character of `${color}|${value}`) {
+    hash ^= character.charCodeAt(0)
+    hash = Math.imul(hash, 0x01000193)
+  }
+
+  return hash >>> 0
+}

package/src/atoms/text/text.android.tsx

@@ -1,10 +1,18 @@
 import {Text as ComposeText} from '@expo/ui/jetpack-compose'
 import {testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
-import {splitAccessibility, useAccessibilityModifiers, useSxModifiers} from '@hzblj/kara-sx'
-import {useAppTheme} from '@hzblj/kara-theme'
+import {AnimatedText, type TextAnimation} from '@hzblj/kara-native/jetpack-compose'
+import {
+  animateConfig,
+  type SxAnimateConfig,
+  splitAccessibility,
+  useAccessibilityModifiers,
+  useSxModifiers,
+} from '@hzblj/kara-sx'
+import {duration, easing, springPhysics, useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 
 import {useHostGuard} from '../../host-context'
+import {spansOf} from './spans'
 import type {TextComponent, TextDecoration, TextProps, TextTransform} from './text.types'
 
 const DECORATION = {
@@ -24,6 +32,32 @@ const applyTransform = (children: TextProps['children'], transform: TextTransfor
 const decorationOf = (decoration: TextDecoration | undefined) =>
   decoration === undefined ? undefined : DECORATION[decoration]
 
+const transformed = (text: string, transform: TextTransform | undefined) =>
+  transform === 'uppercase' ? text.toUpperCase() : transform === 'lowercase' ? text.toLowerCase() : text
+
+/**
+ * `animate` for the spans' colours, as `@hzblj/kara-sx` animates the rest on Compose: a spring token's physics, and
+ * `smoothOut` as a no-bounce spring over its duration; the other curves as tweens along their béziers.
+ */
+const textAnimation = (config: SxAnimateConfig): TextAnimation => {
+  if (config.spring) {
+    const {dampingRatio, stiffness} = springPhysics(config.spring)
+
+    return {dampingRatio, stiffness, type: 'spring'}
+  }
+
+  const milliseconds = duration[config.duration ?? 'fast']
+  const curve = config.easing ?? 'smoothOut'
+
+  if (curve === 'smoothOut') {
+    const omega = (2 * Math.PI * 1000) / milliseconds
+
+    return {dampingRatio: 1, stiffness: omega * omega, type: 'spring'}
+  }
+
+  return {delayMillis: config.delay, durationMillis: milliseconds, easing: easing[curve], type: 'tween'}
+}
+
 export const Text: TextComponent = ({
   align,
   children,
@@ -45,6 +79,32 @@ export const Text: TextComponent = ({
     () => [...sxModifiers, ...(testID ? [testIdModifier(testID)] : []), ...accessibilityModifiers],
     [accessibilityModifiers, sxModifiers, testID]
   )
+  const spans = useMemo(() => spansOf(children, Text), [children])
+  const animate = sx.animate
+
+  // `@expo/ui`'s text takes spans but animates none: with `animate`, kara's own Compose text eases each span's colour.
+  if (animate !== undefined && animate !== false) {
+    const runs = spans ?? [{text: typeof children === 'string' || typeof children === 'number' ? String(children) : ''}]
+
+    return (
+      <AnimatedText
+        animation={textAnimation(animateConfig(animate))}
+        fontFamily={style.fontFamily}
+        fontSize={style.fontSize}
+        fontWeight={style.fontWeight}
+        lineHeight={style.lineHeight}
+        maxLines={numberOfLines}
+        modifiers={modifiers}
+        spans={runs.map(span => ({
+          color: span.color ? theme.colorString(span.color) : undefined,
+          text: transformed(span.text, transform),
+        }))}
+        textAlign={align}
+        textColor={theme.colorString(color)}
+        textDecoration={decorationOf(decoration)}
+      />
+    )
+  }
 
   return (
     <ComposeText
@@ -60,7 +120,13 @@ export const Text: TextComponent = ({
         textDecoration: decorationOf(decoration),
       }}
     >
-      {applyTransform(children, transform)}
+      {spans
+        ? spans.map((span, index) => (
+            <ComposeText color={span.color ? theme.colorString(span.color) : undefined} key={index}>
+              {transformed(span.text, transform)}
+            </ComposeText>
+          ))
+        : applyTransform(children, transform)}
     </ComposeText>
   )
 }

package/src/atoms/text/text.ios.tsx

@@ -10,11 +10,18 @@ import {
   underline,
 } from '@expo/ui/swift-ui/modifiers'
 import {scaledFont} from '@hzblj/kara-native/swift-ui'
-import {type FrameAlignment, splitAccessibility, useAccessibilityModifiers, useSxModifiers} from '@hzblj/kara-sx'
+import {
+  type FrameAlignment,
+  splitAccessibility,
+  textColorTransition,
+  useAccessibilityModifiers,
+  useSxModifiers,
+} from '@hzblj/kara-sx'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 
 import {useHostGuard} from '../../host-context'
+import {spansKey, spansOf} from './spans'
 import type {TextAlign, TextComponent, TextProps} from './text.types'
 
 const ALIGNMENT = {
@@ -48,6 +55,13 @@ export const Text: TextComponent = ({
   const [accessibility, sx] = splitAccessibility(props)
   const sxModifiers = useSxModifiers(sx, FRAME_ALIGNMENT[align ?? 'left'])
   const accessibilityModifiers = useAccessibilityModifiers(accessibility)
+  const spans = useMemo(() => spansOf(children, Text), [children])
+  const animate = sx.animate
+  // With `animate`, SwiftUI interpolates the text when a colour changes: the text's own or a span's.
+  const transition = useMemo(
+    () => textColorTransition(animate, spansKey(color, spans, typeof children === 'string' ? children : '')),
+    [animate, children, color, spans]
+  )
 
   const modifiers = useMemo(() => {
     const list: ModifierConfig[] = [
@@ -78,12 +92,30 @@ export const Text: TextComponent = ({
       list.push(lineLimit(numberOfLines))
     }
 
-    return [...list, ...sxModifiers, ...accessibilityModifiers]
-  }, [accessibilityModifiers, align, color, decoration, numberOfLines, style, sxModifiers, theme, transform])
+    return [...list, ...transition, ...sxModifiers, ...accessibilityModifiers]
+  }, [
+    accessibilityModifiers,
+    align,
+    color,
+    decoration,
+    numberOfLines,
+    style,
+    sxModifiers,
+    theme,
+    transform,
+    transition,
+  ])
 
   return (
     <SwiftUIText modifiers={modifiers} testID={testID}>
-      {children}
+      {spans
+        ? spans.map((span, index) => (
+            // Concatenated into one SwiftUI `Text`: a span takes its colour, the font and the rest are the outer text's.
+            <SwiftUIText key={index} modifiers={span.color ? [foregroundStyle(theme.color(span.color))] : undefined}>
+              {span.text}
+            </SwiftUIText>
+          ))
+        : children}
     </SwiftUIText>
   )
 }

package/src/atoms/text/text.types.ts

@@ -12,6 +12,10 @@ export type TextTransform = 'lowercase' | 'uppercase'
  * SwiftUI `Text` / Compose `Text` in a theme typography variant. A native atom: outside a host, use `RnText`. It takes
  * the native `sx` surface too: padding, a frame (`wide` lines it up by `align`), a background, and the `ios` bucket's
  * `contentTransition`, `animation` and `monospacedDigit` for a number that changes in place.
+ *
+ * Nested `Text` children are spans: runs of the same text in a colour of their own, one paragraph that wraps as one.
+ * With `animate`, a colour that changes (the text's or a span's) eases to its new value instead of switching: a word lit
+ * as it is said, a phrase brought forward. SwiftUI interpolates the text, Compose animates each span's colour.
  */
 export type TextProps = ResponsiveSx &
   AccessibilityProps & {
@@ -20,7 +24,10 @@ export type TextProps = ResponsiveSx &
      * layout; Android keeps them as they are.
      */
     align?: TextAlign
-    /** The text. */
+    /**
+     * The text: a string, or strings and nested `Text` spans, each in a `color` of its own. A span takes only its
+     * colour; the variant, alignment and everything else are the outer text's.
+     */
     children?: ReactNode
     /** The text's colour. `content.primary` by default. */
     color?: ColorToken