@hzblj/kara-components 0.13.2 → 0.14.1

package/lib/module/atoms/segmented-control/segmented-control.ios.js

@@ -1,13 +1,21 @@
 "use strict";
 
+import { RNHostView } from '@expo/ui/swift-ui';
 import { SegmentedControl as NativeSegmentedControl } from '@hzblj/kara-native/swift-ui';
 import { useAppTheme } from '@hzblj/kara-theme';
 import { useCallback, useMemo } from 'react';
+import { useInsideHost } from "../../host-context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const MATCH_HEIGHT_ONLY = {
+  horizontal: false,
+  vertical: true
+};
+
 /**
  * kara's own `UISegmentedControl`, with the pill in the accent and white text on it — the system control tints only the
  * pill, and SwiftUI's segmented picker not even that. A plain `UIView` in React Native layout: it needs no host, takes
- * the width it is given and UIKit's height. UIKit plays the control's own feedback.
+ * the width it is given and UIKit's height. Inside a `Screen` or `Island` it is carried into that host by `RNHostView`
+ * (see `useInsideHost`), the host's width and its own height. UIKit plays the control's own feedback.
  */
 export const SegmentedControl = ({
   disabled = false,
@@ -17,6 +25,7 @@ export const SegmentedControl = ({
   values
 }) => {
   const theme = useAppTheme();
+  const insideHost = useInsideHost();
   const face = theme.typography.footnoteMedium;
 
   // The native control speaks in values; a segment's is its index, so two labels may read the same.
@@ -28,7 +37,7 @@ export const SegmentedControl = ({
     const index = Number(value);
     onChange?.(index, values[index] ?? '');
   }, [onChange, values]);
-  return /*#__PURE__*/_jsx(NativeSegmentedControl, {
+  const control = /*#__PURE__*/_jsx(NativeSegmentedControl, {
     activePillColor: theme.color('fill.accent.primary'),
     activeTextColor: theme.color('content.on.accent'),
     disabled: disabled,
@@ -40,5 +49,9 @@ export const SegmentedControl = ({
     selectedValue: String(selectedIndex),
     testID: testID
   });
+  return insideHost ? /*#__PURE__*/_jsx(RNHostView, {
+    matchContents: MATCH_HEIGHT_ONLY,
+    children: control
+  }) : control;
 };
 //# sourceMappingURL=segmented-control.ios.js.map

package/lib/module/atoms/segmented-control/segmented-control.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["SegmentedControl","NativeSegmentedControl","useAppTheme","useCallback","useMemo","jsx","_jsx","disabled","onChange","selectedIndex","testID","values","theme","face","typography","footnoteMedium","options","map","label","index","value","String","onValueChange","Number","activePillColor","color","activeTextColor","fontFamily","fontSize","inactiveTextColor","selectedValue"],"sourceRoot":"../../../../src","sources":["atoms/segmented-control/segmented-control.ios.tsx"],"mappings":";;AAAA,SAAQA,gBAAgB,IAAIC,sBAAsB,QAAO,6BAA6B;AACtF,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,WAAW,EAAEC,OAAO,QAAO,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAI1C;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMN,gBAA2C,GAAGA,CAAC;EAC1DO,QAAQ,GAAG,KAAK;EAChBC,QAAQ;EACRC,aAAa;EACbC,MAAM;EACNC;AACqB,CAAC,KAAK;EAC3B,MAAMC,KAAK,GAAGV,WAAW,CAAC,CAAC;EAC3B,MAAMW,IAAI,GAAGD,KAAK,CAACE,UAAU,CAACC,cAAc;;EAE5C;EACA,MAAMC,OAAO,GAAGZ,OAAO,CAAC,MAAMO,MAAM,CAACM,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,MAAM;IAACD,KAAK;IAAEE,KAAK,EAAEC,MAAM,CAACF,KAAK;EAAC,CAAC,CAAC,CAAC,EAAE,CAACR,MAAM,CAAC,CAAC;EAEtG,MAAMW,aAAa,GAAGnB,WAAW,CAC9BiB,KAAa,IAAK;IACjB,MAAMD,KAAK,GAAGI,MAAM,CAACH,KAAK,CAAC;IAC3BZ,QAAQ,GAAGW,KAAK,EAAER,MAAM,CAACQ,KAAK,CAAC,IAAI,EAAE,CAAC;EACxC,CAAC,EACD,CAACX,QAAQ,EAAEG,MAAM,CACnB,CAAC;EAED,oBACEL,IAAA,CAACL,sBAAsB;IACrBuB,eAAe,EAAEZ,KAAK,CAACa,KAAK,CAAC,qBAAqB,CAAE;IACpDC,eAAe,EAAEd,KAAK,CAACa,KAAK,CAAC,mBAAmB,CAAE;IAClDlB,QAAQ,EAAEA,QAAS;IACnBoB,UAAU,EAAEd,IAAI,CAACc,UAAW;IAC5BC,QAAQ,EAAEf,IAAI,CAACe,QAAS;IACxBC,iBAAiB,EAAEjB,KAAK,CAACa,KAAK,CAAC,iBAAiB,CAAE;IAClDH,aAAa,EAAEA,aAAc;IAC7BN,OAAO,EAAEA,OAAQ;IACjBc,aAAa,EAAET,MAAM,CAACZ,aAAa,CAAE;IACrCC,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN,CAAC","ignoreList":[]}
+{"version":3,"names":["RNHostView","SegmentedControl","NativeSegmentedControl","useAppTheme","useCallback","useMemo","useInsideHost","jsx","_jsx","MATCH_HEIGHT_ONLY","horizontal","vertical","disabled","onChange","selectedIndex","testID","values","theme","insideHost","face","typography","footnoteMedium","options","map","label","index","value","String","onValueChange","Number","control","activePillColor","color","activeTextColor","fontFamily","fontSize","inactiveTextColor","selectedValue","matchContents","children"],"sourceRoot":"../../../../src","sources":["atoms/segmented-control/segmented-control.ios.tsx"],"mappings":";;AAAA,SAAQA,UAAU,QAAO,mBAAmB;AAC5C,SAAQC,gBAAgB,IAAIC,sBAAsB,QAAO,6BAA6B;AACtF,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,WAAW,EAAEC,OAAO,QAAO,OAAO;AAE1C,SAAQC,aAAa,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGhD,MAAMC,iBAAiB,GAAG;EAACC,UAAU,EAAE,KAAK;EAAEC,QAAQ,EAAE;AAAI,CAAC;;AAE7D;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMV,gBAA2C,GAAGA,CAAC;EAC1DW,QAAQ,GAAG,KAAK;EAChBC,QAAQ;EACRC,aAAa;EACbC,MAAM;EACNC;AACqB,CAAC,KAAK;EAC3B,MAAMC,KAAK,GAAGd,WAAW,CAAC,CAAC;EAC3B,MAAMe,UAAU,GAAGZ,aAAa,CAAC,CAAC;EAClC,MAAMa,IAAI,GAAGF,KAAK,CAACG,UAAU,CAACC,cAAc;;EAE5C;EACA,MAAMC,OAAO,GAAGjB,OAAO,CAAC,MAAMW,MAAM,CAACO,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,MAAM;IAACD,KAAK;IAAEE,KAAK,EAAEC,MAAM,CAACF,KAAK;EAAC,CAAC,CAAC,CAAC,EAAE,CAACT,MAAM,CAAC,CAAC;EAEtG,MAAMY,aAAa,GAAGxB,WAAW,CAC9BsB,KAAa,IAAK;IACjB,MAAMD,KAAK,GAAGI,MAAM,CAACH,KAAK,CAAC;IAC3Bb,QAAQ,GAAGY,KAAK,EAAET,MAAM,CAACS,KAAK,CAAC,IAAI,EAAE,CAAC;EACxC,CAAC,EACD,CAACZ,QAAQ,EAAEG,MAAM,CACnB,CAAC;EAED,MAAMc,OAAO,gBACXtB,IAAA,CAACN,sBAAsB;IACrB6B,eAAe,EAAEd,KAAK,CAACe,KAAK,CAAC,qBAAqB,CAAE;IACpDC,eAAe,EAAEhB,KAAK,CAACe,KAAK,CAAC,mBAAmB,CAAE;IAClDpB,QAAQ,EAAEA,QAAS;IACnBsB,UAAU,EAAEf,IAAI,CAACe,UAAW;IAC5BC,QAAQ,EAAEhB,IAAI,CAACgB,QAAS;IACxBC,iBAAiB,EAAEnB,KAAK,CAACe,KAAK,CAAC,iBAAiB,CAAE;IAClDJ,aAAa,EAAEA,aAAc;IAC7BN,OAAO,EAAEA,OAAQ;IACjBe,aAAa,EAAEV,MAAM,CAACb,aAAa,CAAE;IACrCC,MAAM,EAAEA;EAAO,CAChB,CACF;EAED,OAAOG,UAAU,gBAAGV,IAAA,CAACR,UAAU;IAACsC,aAAa,EAAE7B,iBAAkB;IAAA8B,QAAA,EAAET;EAAO,CAAa,CAAC,GAAGA,OAAO;AACpG,CAAC","ignoreList":[]}

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/module/host-context.js

@@ -9,6 +9,14 @@ export const HostBoundary = ({
   value: true,
   children: children
 });
+
+/**
+ * Whether this renders inside a `Screen` or `Island` already. An atom that brings its own host renders straight into
+ * that one instead: on Android a host nested in another is a real view beside the outer host's own `ComposeView`, and
+ * the outer host (a horizontal `LinearLayout`) measures its `ComposeView` in the width the nested one leaves over,
+ * which for a full-width nested host is none.
+ */
+export const useInsideHost = () => useContext(HostContext);
 export const useHostGuard = atom => {
   const insideHost = useContext(HostContext);
   if (__DEV__ && !insideHost) {

package/lib/module/host-context.js.map

@@ -1 +1 @@
-{"version":3,"names":["createContext","useContext","jsx","_jsx","HostContext","HostBoundary","children","Provider","value","useHostGuard","atom","insideHost","__DEV__","console","warn"],"sourceRoot":"../../src","sources":["host-context.tsx"],"mappings":";;AAAA,SAAQA,aAAa,EAAkBC,UAAU,QAAO,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAE/D,MAAMC,WAAW,gBAAGJ,aAAa,CAAC,KAAK,CAAC;AAExC,OAAO,MAAMK,YAAY,GAAGA,CAAC;EAACC;AAA+B,CAAC,kBAC5DH,IAAA,CAACC,WAAW,CAACG,QAAQ;EAACC,KAAK;EAAAF,QAAA,EAAEA;AAAQ,CAAuB,CAC7D;AAED,OAAO,MAAMG,YAAY,GAAIC,IAAY,IAAK;EAC5C,MAAMC,UAAU,GAAGV,UAAU,CAACG,WAAW,CAAC;EAE1C,IAAIQ,OAAO,IAAI,CAACD,UAAU,EAAE;IAC1BE,OAAO,CAACC,IAAI,CACV,cAAcJ,IAAI,mGACpB,CAAC;EACH;AACF,CAAC","ignoreList":[]}
+{"version":3,"names":["createContext","useContext","jsx","_jsx","HostContext","HostBoundary","children","Provider","value","useInsideHost","useHostGuard","atom","insideHost","__DEV__","console","warn"],"sourceRoot":"../../src","sources":["host-context.tsx"],"mappings":";;AAAA,SAAQA,aAAa,EAAkBC,UAAU,QAAO,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAE/D,MAAMC,WAAW,gBAAGJ,aAAa,CAAC,KAAK,CAAC;AAExC,OAAO,MAAMK,YAAY,GAAGA,CAAC;EAACC;AAA+B,CAAC,kBAC5DH,IAAA,CAACC,WAAW,CAACG,QAAQ;EAACC,KAAK;EAAAF,QAAA,EAAEA;AAAQ,CAAuB,CAC7D;;AAED;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,aAAa,GAAGA,CAAA,KAAMR,UAAU,CAACG,WAAW,CAAC;AAE1D,OAAO,MAAMM,YAAY,GAAIC,IAAY,IAAK;EAC5C,MAAMC,UAAU,GAAGX,UAAU,CAACG,WAAW,CAAC;EAE1C,IAAIS,OAAO,IAAI,CAACD,UAAU,EAAE;IAC1BE,OAAO,CAACC,IAAI,CACV,cAAcJ,IAAI,mGACpB,CAAC;EACH;AACF,CAAC","ignoreList":[]}

package/lib/typescript/atoms/activity-indicator/activity-indicator.ios.d.ts

@@ -1,3 +1,6 @@
 import type { ActivityIndicatorComponent } from './activity-indicator.types';
-/** React Native's spinner, which on iOS is UIKit's own `UIActivityIndicatorView`. */
+/**
+ * React Native's spinner, which on iOS is UIKit's own `UIActivityIndicatorView`. Inside a `Screen` or `Island` it is
+ * carried into that host by `RNHostView`, sized to the spinner (see `useInsideHost`).
+ */
 export declare const ActivityIndicator: ActivityIndicatorComponent;

package/lib/typescript/atoms/activity-indicator/activity-indicator.types.d.ts

@@ -4,7 +4,8 @@ export type ActivityIndicatorSize = 'large' | 'small';
 /**
  * That something is loading, for as long as it takes: UIKit's spinner on iOS, Material 3's expressive
  * `LoadingIndicator` on Android, its shapes morphing as it turns. A React Native view on iOS and a host of its own on
- * Android, so it renders anywhere. For how far along something is, use `Progress`.
+ * Android, so it renders anywhere; inside a `Screen` or `Island` it joins that host, beside other native views. For how
+ * far along something is, use `Progress`.
  */
 export type ActivityIndicatorProps = {
     /** What is loading, for VoiceOver and TalkBack: "Loading photos". Unset, the platform's own word ("In progress"). */

package/lib/typescript/atoms/date-picker/date-picker.ios.d.ts

@@ -3,6 +3,7 @@ import type { DatePickerComponent } from './date-picker.types';
  * The system's compact date picker: the value in a pill, and a tap on it opens the calendar popover UIKit owns. Its own
  * host, sized to the pill on both axes — a host that took the width it was given would lay the pill out against the
  * far edge of it, or past its container's — so it drops into a row the way a `Text` does. The label is the caller's,
- * beside it; the calendar is in the accent.
+ * beside it; the calendar is in the accent. Inside a `Screen` or `Island` it renders into that host instead (see
+ * `useInsideHost`).
  */
 export declare const DatePicker: DatePickerComponent;

package/lib/typescript/atoms/date-picker/date-picker.types.d.ts

@@ -3,7 +3,7 @@ export type DatePickerMode = 'date' | 'datetime' | 'time';
 /**
  * A date or time picker: SwiftUI's compact `DatePicker` on iOS, a field that opens Material's picker dialog on a tap
  * on Android. The React Native tier: it brings its own host and sizes itself to the value, so it sits in a row beside
- * its label like a `Text`.
+ * its label like a `Text`. Inside a `Screen` or `Island` it joins that host instead, beside a native `Text` label.
  */
 export type DatePickerProps = {
     /** The latest date that can be picked. Android ignores it in `time` mode. */

package/lib/typescript/atoms/picker/picker.ios.d.ts

@@ -1,2 +1,7 @@
 import type { PickerComponent } from './picker.types';
+/**
+ * A SwiftUI wheel. On its own it is `@expo/ui`'s community picker, which brings a host of its own. Inside a `Screen` or
+ * `Island` it is the same wheel rendered into that host instead (see `useInsideHost`): a host nested in the island's
+ * stack is given no height there, and the wheel spills over the views around it.
+ */
 export declare const Picker: PickerComponent;

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

@@ -8,7 +8,8 @@ export type PickerOption = {
 };
 /**
  * A single choice from a list: a SwiftUI wheel picker on iOS, Material's exposed dropdown on Android. It brings its
- * own host, so it renders outside `Screen` and `Island` as well.
+ * own host, so it renders outside `Screen` and `Island` as well. Inside one it renders into that host instead, so it
+ * can share a stack with other native views.
  */
 export type PickerProps = {
     /** Stops the user changing the selection, and dims the picker. */
@@ -17,7 +18,10 @@ export type PickerProps = {
     onValueChange?: (value: string) => void;
     /** The choices, in order. */
     options: PickerOption[];
-    /** Android: the dropdown field's test tag. iOS: `@expo/ui`'s wheel picker drops it. */
+    /**
+     * Android: the dropdown field's test tag. iOS: the wheel's, inside a `Screen` or `Island` only; on its own,
+     * `@expo/ui`'s wheel picker drops it.
+     */
     testID?: string;
     /** The selected option's `value`. Controlled: pass back what `onValueChange` reports. */
     value: string;

package/lib/typescript/atoms/segmented-control/segmented-control.ios.d.ts

@@ -2,6 +2,7 @@ import type { SegmentedControlComponent } from './segmented-control.types';
 /**
  * kara's own `UISegmentedControl`, with the pill in the accent and white text on it — the system control tints only the
  * pill, and SwiftUI's segmented picker not even that. A plain `UIView` in React Native layout: it needs no host, takes
- * the width it is given and UIKit's height. UIKit plays the control's own feedback.
+ * the width it is given and UIKit's height. Inside a `Screen` or `Island` it is carried into that host by `RNHostView`
+ * (see `useInsideHost`), the host's width and its own height. UIKit plays the control's own feedback.
  */
 export declare const SegmentedControl: SegmentedControlComponent;

package/lib/typescript/atoms/segmented-control/segmented-control.types.d.ts

@@ -2,7 +2,8 @@ import type { ReactNode } from 'react';
 /**
  * A row of mutually exclusive segments, the selected one in the accent: kara's own `UISegmentedControl` on iOS,
  * Material's single-choice segmented buttons on Android. It needs no `Screen` or `Island`: iOS is a plain view, Android
- * brings its own host. It takes the width it is given; the height is the platform's.
+ * brings its own host. Inside one it joins that host, so it can share a stack with other native views. It takes the
+ * width it is given; the height is the platform's.
  */
 export type SegmentedControlProps = {
     /** Stops the user changing the segment, and dims the control. */

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/lib/typescript/host-context.d.ts

@@ -2,4 +2,11 @@ import { type ReactNode } from 'react';
 export declare const HostBoundary: ({ children }: {
     children: ReactNode;
 }) => import("react").JSX.Element;
+/**
+ * Whether this renders inside a `Screen` or `Island` already. An atom that brings its own host renders straight into
+ * that one instead: on Android a host nested in another is a real view beside the outer host's own `ComposeView`, and
+ * the outer host (a horizontal `LinearLayout`) measures its `ComposeView` in the width the nested one leaves over,
+ * which for a full-width nested host is none.
+ */
+export declare const useInsideHost: () => boolean;
 export declare const useHostGuard: (atom: string) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzblj/kara-components",
-  "version": "0.13.2",
+  "version": "0.14.1",
   "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.1",
+    "@hzblj/kara-sx": "^0.14.1",
+    "@hzblj/kara-theme": "^0.14.1",
     "sf-symbols-typescript": "^2.2.0"
   },
   "peerDependencies": {

package/src/atoms/activity-indicator/activity-indicator.android.tsx

@@ -1,10 +1,11 @@
 import {Host, LoadingIndicator} from '@expo/ui/jetpack-compose'
-import {fillMaxSize, testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
+import {fillMaxSize, size as sizeModifier, testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
 import {useAccessibilityModifiers} from '@hzblj/kara-sx'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 import {StyleSheet} from 'react-native'
 
+import {useInsideHost} from '../../host-context'
 import type {ActivityIndicatorComponent, ActivityIndicatorProps} from './activity-indicator.types'
 
 /** Material's 48dp for a screen; half of it in a row, about where React Native's small spinner sat. */
@@ -15,7 +16,8 @@ const styles = StyleSheet.create({
 
 /**
  * Material 3's expressive `LoadingIndicator` in a host of its own, sized here rather than measured, so it renders
- * anywhere and takes its place in the first frame.
+ * anywhere and takes its place in the first frame. Inside a `Screen` or `Island` it renders into that host instead (see
+ * `useInsideHost`), the same size.
  */
 export const ActivityIndicator: ActivityIndicatorComponent = ({
   accessibilityLabel,
@@ -24,15 +26,26 @@ export const ActivityIndicator: ActivityIndicatorComponent = ({
   testID,
 }: ActivityIndicatorProps) => {
   const theme = useAppTheme()
+  const insideHost = useInsideHost()
   const accessibilityModifiers = useAccessibilityModifiers({accessibilityLabel})
   const modifiers = useMemo(
-    () => [fillMaxSize(), ...(testID ? [testIdModifier(testID)] : []), ...accessibilityModifiers],
-    [accessibilityModifiers, testID]
+    () => [
+      insideHost ? sizeModifier(styles[size].width, styles[size].height) : fillMaxSize(),
+      ...(testID ? [testIdModifier(testID)] : []),
+      ...accessibilityModifiers,
+    ],
+    [accessibilityModifiers, insideHost, size, testID]
   )
 
+  const indicator = <LoadingIndicator color={theme.color(color)} modifiers={modifiers} />
+
+  if (insideHost) {
+    return indicator
+  }
+
   return (
     <Host colorScheme={theme.dark ? 'dark' : 'light'} seedColor={theme.materialSeed} style={styles[size]}>
-      <LoadingIndicator color={theme.color(color)} modifiers={modifiers} />
+      {indicator}
     </Host>
   )
 }

package/src/atoms/activity-indicator/activity-indicator.ios.tsx

@@ -1,9 +1,14 @@
+import {RNHostView} from '@expo/ui/swift-ui'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {ActivityIndicator as RNActivityIndicator} from 'react-native'
 
+import {useInsideHost} from '../../host-context'
 import type {ActivityIndicatorComponent, ActivityIndicatorProps} from './activity-indicator.types'
 
-/** React Native's spinner, which on iOS is UIKit's own `UIActivityIndicatorView`. */
+/**
+ * React Native's spinner, which on iOS is UIKit's own `UIActivityIndicatorView`. Inside a `Screen` or `Island` it is
+ * carried into that host by `RNHostView`, sized to the spinner (see `useInsideHost`).
+ */
 export const ActivityIndicator: ActivityIndicatorComponent = ({
   accessibilityLabel,
   color = 'fill.accent.primary',
@@ -11,8 +16,9 @@ export const ActivityIndicator: ActivityIndicatorComponent = ({
   testID,
 }: ActivityIndicatorProps) => {
   const theme = useAppTheme()
+  const insideHost = useInsideHost()
 
-  return (
+  const spinner = (
     <RNActivityIndicator
       accessibilityLabel={accessibilityLabel}
       color={theme.color(color)}
@@ -20,4 +26,6 @@ export const ActivityIndicator: ActivityIndicatorComponent = ({
       testID={testID}
     />
   )
+
+  return insideHost ? <RNHostView matchContents>{spinner}</RNHostView> : spinner
 }

package/src/atoms/activity-indicator/activity-indicator.types.ts

@@ -6,7 +6,8 @@ export type ActivityIndicatorSize = 'large' | 'small'
 /**
  * That something is loading, for as long as it takes: UIKit's spinner on iOS, Material 3's expressive
  * `LoadingIndicator` on Android, its shapes morphing as it turns. A React Native view on iOS and a host of its own on
- * Android, so it renders anywhere. For how far along something is, use `Progress`.
+ * Android, so it renders anywhere; inside a `Screen` or `Island` it joins that host, beside other native views. For how
+ * far along something is, use `Progress`.
  */
 export type ActivityIndicatorProps = {
   /** What is loading, for VoiceOver and TalkBack: "Loading photos". Unset, the platform's own word ("In progress"). */