@hzblj/kara-components 0.14.1 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @hzblj/kara-components
 
+## 0.15.0
+
+### Minor Changes
+
+- [#43](https://github.com/hzblj/kara-ui/pull/43) [`2ff941d`](https://github.com/hzblj/kara-ui/commit/2ff941d989cef86f8cdea39483945e760153a90f) Thanks [@hzblj](https://github.com/hzblj)! - `Text` and `RnText` take `monospaced` and `monospacedDigit`. `monospaced` sets the text in the theme's fixed-width face at its variant's size and weight: a new `fonts.mono` role in `ThemeConfig` for a face of the app's own (JetBrains Mono beside Inter, say), else Menlo on iOS and `monospace` on Android, the same face in both tiers. `monospacedDigit` keeps whatever face the text has and asks it for tabular figures, so a price or a counter does not shift as it changes: SwiftUI's `monospacedDigit()`, React Native's `fontVariant: ['tabular-nums']`, and `tnum` on Compose. `theme.monoTypography` is the scale `monospaced` reads. `ios.monospacedDigit` is gone from `sx`: use the `monospacedDigit` prop, which now works on Android too. Rebuild the native app.
+
+### Patch Changes
+
+- Updated dependencies [[`2ff941d`](https://github.com/hzblj/kara-ui/commit/2ff941d989cef86f8cdea39483945e760153a90f)]:
+  - @hzblj/kara-native@0.15.0
+  - @hzblj/kara-sx@0.15.0
+  - @hzblj/kara-theme@0.15.0
+
+## 0.14.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @hzblj/kara-theme@0.14.2
+  - @hzblj/kara-sx@0.14.2
+  - @hzblj/kara-native@0.14.2
+
 ## 0.14.1
 
 ### Patch Changes

package/lib/module/atoms/rn-text/rn-text.js

@@ -18,6 +18,11 @@ const LINE_HEIGHT_SLACK = Platform.OS === 'ios' ? 0.01 : 0;
 const MAX_TEXT_STYLES = 512;
 const textStyles = new Map();
 
+/** Digits of one width: React Native asks the face for its tabular figures. */
+const TABULAR_NUMS = ['tabular-nums'];
+
+/** What the text half of the style is built from. */
+
 /**
  * The variant at the user's text size, in its colour. React Native scales `fontSize` for the user's setting but leaves
  * `lineHeight` alone, so a grown glyph ends up in an ungrown line and clips. Scaling it here by the same factor keeps
@@ -27,8 +32,14 @@ const textStyles = new Map();
  * The native tiers need none of this: SwiftUI's `lineSpacing` is extra space *on top of* the font's own line
  * height, which scales with it, and Compose reads `lineHeight` in `sp`.
  */
-const textStyle = (theme, variant, color, align, fontScale) => {
-  const key = `${themeKey(theme)}|${variant}|${color}|${align}|${fontScale}`;
+const textStyle = (theme, fontScale, {
+  align,
+  color,
+  monospaced = false,
+  monospacedDigit = false,
+  variant
+}) => {
+  const key = `${themeKey(theme)}|${variant}|${color}|${align}|${fontScale}|${monospaced}|${monospacedDigit}`;
   const existing = textStyles.get(key);
   if (existing) {
     return existing;
@@ -36,7 +47,7 @@ const textStyle = (theme, variant, color, align, fontScale) => {
   if (textStyles.size >= MAX_TEXT_STYLES) {
     textStyles.clear();
   }
-  const typography = theme.typography[variant];
+  const typography = (monospaced ? theme.monoTypography : theme.typography)[variant];
   const style = {
     ...typography,
     color: theme.color(color),
@@ -45,12 +56,17 @@ const textStyle = (theme, variant, color, align, fontScale) => {
   if (align) {
     style.textAlign = align;
   }
+  if (monospacedDigit) {
+    style.fontVariant = TABULAR_NUMS;
+  }
   textStyles.set(key, style);
   return style;
 };
 export const RnText = markMotionComponent(({
   align,
   color = 'content.primary',
+  monospaced,
+  monospacedDigit,
   style,
   variant = 'body',
   ...props
@@ -60,7 +76,13 @@ export const RnText = markMotionComponent(({
   // A view style, which a text accepts whole — only React Native's types disagree, on `userSelect`'s width.
   const [sx, motion, rest] = useSplitSxMotion(props);
   const animated = useAnimatedLatch(motion.animated || isAnimatedStyle(style), 'RnText');
-  const text = textStyle(theme, variant, color, align, fontScale);
+  const text = textStyle(theme, fontScale, {
+    align,
+    color,
+    monospaced,
+    monospacedDigit,
+    variant
+  });
   if (!animated) {
     return /*#__PURE__*/_jsx(RNText, {
       maxFontSizeMultiplier: MAX_FONT_SCALE,

package/lib/module/atoms/rn-text/rn-text.js.map

@@ -1 +1 @@
-{"version":3,"names":["isAnimatedStyle","markMotionComponent","themeKey","useAnimatedLatch","useSplitSxMotion","MAX_FONT_SCALE","useAppTheme","useFontScale","Platform","Text","RNText","Animated","jsx","_jsx","LINE_HEIGHT_SLACK","OS","MAX_TEXT_STYLES","textStyles","Map","textStyle","theme","variant","color","align","fontScale","key","existing","get","size","clear","typography","style","lineHeight","textAlign","set","RnText","props","sx","motion","rest","animated","text","maxFontSizeMultiplier","entering","exiting","layout"],"sourceRoot":"../../../../src","sources":["atoms/rn-text/rn-text.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["isAnimatedStyle","markMotionComponent","themeKey","useAnimatedLatch","useSplitSxMotion","MAX_FONT_SCALE","useAppTheme","useFontScale","Platform","Text","RNText","Animated","jsx","_jsx","LINE_HEIGHT_SLACK","OS","MAX_TEXT_STYLES","textStyles","Map","TABULAR_NUMS","textStyle","theme","fontScale","align","color","monospaced","monospacedDigit","variant","key","existing","get","size","clear","typography","monoTypography","style","lineHeight","textAlign","fontVariant","set","RnText","props","sx","motion","rest","animated","text","maxFontSizeMultiplier","entering","exiting","layout"],"sourceRoot":"../../../../src","sources":["atoms/rn-text/rn-text.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -61,6 +61,8 @@ export const Text = ({
   children,
   color = 'content.primary',
   decoration,
+  monospaced,
+  monospacedDigit,
   numberOfLines,
   testID,
   transform,
@@ -69,22 +71,24 @@ export const Text = ({
 }) => {
   useHostGuard('Text');
   const theme = useAppTheme();
-  const style = theme.typography[variant];
+  const style = (monospaced ? theme.monoTypography : theme.typography)[variant];
   const [accessibility, sx] = splitAccessibility(props);
   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;
+  const animate = sx.animate === false ? undefined : 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) {
+  // `@expo/ui`'s text takes spans but animates none, and sets no font features: with `animate`, kara's own Compose text
+  // eases each span's colour, and with `monospacedDigit` asks the face for its tabular figures.
+  if (animate !== undefined || monospacedDigit) {
     const runs = spans ?? [{
       text: typeof children === 'string' || typeof children === 'number' ? String(children) : ''
     }];
     return /*#__PURE__*/_jsx(AnimatedText, {
-      animation: textAnimation(animateConfig(animate)),
+      animation: animate === undefined ? undefined : textAnimation(animateConfig(animate)),
       fontFamily: style.fontFamily,
+      fontFeatureSettings: monospacedDigit ? 'tnum' : undefined,
       fontSize: style.fontSize,
       fontWeight: style.fontWeight,
       lineHeight: style.lineHeight,

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

@@ -1 +1 @@
-{"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":[]}
+{"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","monospaced","monospacedDigit","numberOfLines","variant","props","theme","style","monoTypography","typography","accessibility","sx","sxModifiers","accessibilityModifiers","modifiers","spans","animate","runs","String","animation","fontFamily","fontFeatureSettings","fontSize","fontWeight","lineHeight","maxLines","map","span","colorString","textAlign","textColor","textDecoration","index"],"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,YAAY,QAA2B,oCAAoC;AACnF,SACEC,aAAa,EAEbC,kBAAkB,EAClBC,yBAAyB,EACzBC,cAAc,QACT,gBAAgB;AACvB,SAAQC,QAAQ,EAAEC,MAAM,EAAEC,aAAa,EAAEC,WAAW,QAAO,mBAAmB;AAC9E,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,uBAAoB;AAC/C,SAAQC,OAAO,QAAO,YAAS;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/B,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,MAAME,WAAW,GAAGA,CAACC,IAAY,EAAEP,SAAoC,KACrEA,SAAS,KAAK,WAAW,GAAGO,IAAI,CAACN,WAAW,CAAC,CAAC,GAAGD,SAAS,KAAK,WAAW,GAAGO,IAAI,CAACL,WAAW,CAAC,CAAC,GAAGK,IAAI;;AAExG;AACA;AACA;AACA;AACA,MAAMC,aAAa,GAAIC,MAAuB,IAAoB;EAChE,IAAIA,MAAM,CAACC,MAAM,EAAE;IACjB,MAAM;MAACC,YAAY;MAAEC;IAAS,CAAC,GAAGzB,aAAa,CAACsB,MAAM,CAACC,MAAM,CAAC;IAE9D,OAAO;MAACC,YAAY;MAAEC,SAAS;MAAEC,IAAI,EAAE;IAAQ,CAAC;EAClD;EAEA,MAAMC,YAAY,GAAG7B,QAAQ,CAACwB,MAAM,CAACxB,QAAQ,IAAI,MAAM,CAAC;EACxD,MAAM8B,KAAK,GAAGN,MAAM,CAACvB,MAAM,IAAI,WAAW;EAE1C,IAAI6B,KAAK,KAAK,WAAW,EAAE;IACzB,MAAMC,KAAK,GAAI,CAAC,GAAGC,IAAI,CAACC,EAAE,GAAG,IAAI,GAAIJ,YAAY;IAEjD,OAAO;MAACH,YAAY,EAAE,CAAC;MAAEC,SAAS,EAAEI,KAAK,GAAGA,KAAK;MAAEH,IAAI,EAAE;IAAQ,CAAC;EACpE;EAEA,OAAO;IAACM,WAAW,EAAEV,MAAM,CAACW,KAAK;IAAEC,cAAc,EAAEP,YAAY;IAAE5B,MAAM,EAAEA,MAAM,CAAC6B,KAAK,CAAC;IAAEF,IAAI,EAAE;EAAO,CAAC;AACxG,CAAC;AAED,OAAO,MAAMrC,IAAmB,GAAGA,CAAC;EAClC8C,KAAK;EACLvB,QAAQ;EACRwB,KAAK,GAAG,iBAAiB;EACzBnB,UAAU;EACVoB,UAAU;EACVC,eAAe;EACfC,aAAa;EACbhD,MAAM;EACNsB,SAAS;EACT2B,OAAO,GAAG,MAAM;EAChB,GAAGC;AACM,CAAC,KAAK;EACftC,YAAY,CAAC,MAAM,CAAC;EACpB,MAAMuC,KAAK,GAAGzC,WAAW,CAAC,CAAC;EAC3B,MAAM0C,KAAK,GAAG,CAACN,UAAU,GAAGK,KAAK,CAACE,cAAc,GAAGF,KAAK,CAACG,UAAU,EAAEL,OAAO,CAAC;EAC7E,MAAM,CAACM,aAAa,EAAEC,EAAE,CAAC,GAAGpD,kBAAkB,CAAC8C,KAAK,CAAC;EACrD,MAAMO,WAAW,GAAGnD,cAAc,CAACkD,EAAE,CAAC;EACtC,MAAME,sBAAsB,GAAGrD,yBAAyB,CAACkD,aAAa,CAAC;EACvE,MAAMI,SAAS,GAAGhD,OAAO,CACvB,MAAM,CAAC,GAAG8C,WAAW,EAAE,IAAIzD,MAAM,GAAG,CAACC,cAAc,CAACD,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG0D,sBAAsB,CAAC,EAC9F,CAACA,sBAAsB,EAAED,WAAW,EAAEzD,MAAM,CAC9C,CAAC;EACD,MAAM4D,KAAK,GAAGjD,OAAO,CAAC,MAAME,OAAO,CAACQ,QAAQ,EAAEvB,IAAI,CAAC,EAAE,CAACuB,QAAQ,CAAC,CAAC;EAChE,MAAMwC,OAAO,GAAGL,EAAE,CAACK,OAAO,KAAK,KAAK,GAAGlC,SAAS,GAAG6B,EAAE,CAACK,OAAO;;EAE7D;EACA;EACA,IAAIA,OAAO,KAAKlC,SAAS,IAAIoB,eAAe,EAAE;IAC5C,MAAMe,IAAI,GAAGF,KAAK,IAAI,CAAC;MAAC/B,IAAI,EAAE,OAAOR,QAAQ,KAAK,QAAQ,IAAI,OAAOA,QAAQ,KAAK,QAAQ,GAAG0C,MAAM,CAAC1C,QAAQ,CAAC,GAAG;IAAE,CAAC,CAAC;IAEpH,oBACEN,IAAA,CAACb,YAAY;MACX8D,SAAS,EAAEH,OAAO,KAAKlC,SAAS,GAAGA,SAAS,GAAGG,aAAa,CAAC3B,aAAa,CAAC0D,OAAO,CAAC,CAAE;MACrFI,UAAU,EAAEb,KAAK,CAACa,UAAW;MAC7BC,mBAAmB,EAAEnB,eAAe,GAAG,MAAM,GAAGpB,SAAU;MAC1DwC,QAAQ,EAAEf,KAAK,CAACe,QAAS;MACzBC,UAAU,EAAEhB,KAAK,CAACgB,UAAW;MAC7BC,UAAU,EAAEjB,KAAK,CAACiB,UAAW;MAC7BC,QAAQ,EAAEtB,aAAc;MACxBW,SAAS,EAAEA,SAAU;MACrBC,KAAK,EAAEE,IAAI,CAACS,GAAG,CAACC,IAAI,KAAK;QACvB3B,KAAK,EAAE2B,IAAI,CAAC3B,KAAK,GAAGM,KAAK,CAACsB,WAAW,CAACD,IAAI,CAAC3B,KAAK,CAAC,GAAGlB,SAAS;QAC7DE,IAAI,EAAED,WAAW,CAAC4C,IAAI,CAAC3C,IAAI,EAAEP,SAAS;MACxC,CAAC,CAAC,CAAE;MACJoD,SAAS,EAAE9B,KAAM;MACjB+B,SAAS,EAAExB,KAAK,CAACsB,WAAW,CAAC5B,KAAK,CAAE;MACpC+B,cAAc,EAAEnD,YAAY,CAACC,UAAU;IAAE,CAC1C,CAAC;EAEN;EAEA,oBACEX,IAAA,CAAChB,WAAW;IACV8C,KAAK,EAAEM,KAAK,CAACsB,WAAW,CAAC5B,KAAK,CAAE;IAChCyB,QAAQ,EAAEtB,aAAc;IACxBW,SAAS,EAAEA,SAAU;IACrBP,KAAK,EAAE;MACLa,UAAU,EAAEb,KAAK,CAACa,UAAU;MAC5BE,QAAQ,EAAEf,KAAK,CAACe,QAAQ;MACxBC,UAAU,EAAEhB,KAAK,CAACgB,UAAU;MAC5BC,UAAU,EAAEjB,KAAK,CAACiB,UAAU;MAC5BK,SAAS,EAAE9B,KAAK;MAChBgC,cAAc,EAAEnD,YAAY,CAACC,UAAU;IACzC,CAAE;IAAAL,QAAA,EAEDuC,KAAK,GACFA,KAAK,CAACW,GAAG,CAAC,CAACC,IAAI,EAAEK,KAAK,kBACpB9D,IAAA,CAAChB,WAAW;MAAC8C,KAAK,EAAE2B,IAAI,CAAC3B,KAAK,GAAGM,KAAK,CAACsB,WAAW,CAACD,IAAI,CAAC3B,KAAK,CAAC,GAAGlB,SAAU;MAAAN,QAAA,EACxEO,WAAW,CAAC4C,IAAI,CAAC3C,IAAI,EAAEP,SAAS;IAAC,GAD6CuD,KAEpE,CACd,CAAC,GACFzD,cAAc,CAACC,QAAQ,EAAEC,SAAS;EAAC,CAC5B,CAAC;AAElB,CAAC","ignoreList":[]}

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

@@ -1,7 +1,7 @@
 "use strict";
 
 import { Text as SwiftUIText } from '@expo/ui/swift-ui';
-import { foregroundStyle, lineLimit, lineSpacing, multilineTextAlignment, strikethrough, textCase, underline } from '@expo/ui/swift-ui/modifiers';
+import { foregroundStyle, lineLimit, lineSpacing, monospacedDigit as monospacedDigitModifier, multilineTextAlignment, strikethrough, textCase, underline } from '@expo/ui/swift-ui/modifiers';
 import { scaledFont } from '@hzblj/kara-native/swift-ui';
 import { splitAccessibility, textColorTransition, useAccessibilityModifiers, useSxModifiers } from '@hzblj/kara-sx';
 import { useAppTheme } from '@hzblj/kara-theme';
@@ -26,6 +26,8 @@ export const Text = ({
   children,
   color = 'content.primary',
   decoration,
+  monospaced,
+  monospacedDigit,
   numberOfLines,
   testID,
   transform,
@@ -34,7 +36,7 @@ export const Text = ({
 }) => {
   useHostGuard('Text');
   const theme = useAppTheme();
-  const style = theme.typography[variant];
+  const style = (monospaced ? theme.monoTypography : theme.typography)[variant];
   // After the text's own modifiers: the font and colour belong to the glyphs, the padding and frame to the box around.
   const [accessibility, sx] = splitAccessibility(props);
   const sxModifiers = useSxModifiers(sx, FRAME_ALIGNMENT[align ?? 'left']);
@@ -53,6 +55,9 @@ export const Text = ({
       textStyle: style.scalesWith,
       weight: style.weight
     }), lineSpacing(Math.max(0, style.lineHeight - style.fontSize)), foregroundStyle(theme.color(color))];
+    if (monospacedDigit) {
+      list.push(monospacedDigitModifier());
+    }
     if (align) {
       list.push(multilineTextAlignment(ALIGNMENT[align]));
     }
@@ -75,7 +80,7 @@ export const Text = ({
       list.push(lineLimit(numberOfLines));
     }
     return [...list, ...transition, ...sxModifiers, ...accessibilityModifiers];
-  }, [accessibilityModifiers, align, color, decoration, numberOfLines, style, sxModifiers, theme, transform, transition]);
+  }, [accessibilityModifiers, align, color, decoration, monospacedDigit, numberOfLines, style, sxModifiers, theme, transform, transition]);
   return /*#__PURE__*/_jsx(SwiftUIText, {
     modifiers: modifiers,
     testID: testID,

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","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":[]}
+{"version":3,"names":["Text","SwiftUIText","foregroundStyle","lineLimit","lineSpacing","monospacedDigit","monospacedDigitModifier","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","monospaced","numberOfLines","testID","transform","variant","props","theme","style","monoTypography","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/molecules/stepper/stepper.ios.js

@@ -47,9 +47,9 @@ export const Stepper = ({
         } : {
           countsDown,
           type: 'numericText'
-        },
-        monospacedDigit: true
+        }
       },
+      monospacedDigit: true,
       children: String(value)
     }), /*#__PURE__*/_jsx(SwiftUIStepper, {
       label: label,

package/lib/module/molecules/stepper/stepper.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["Stepper","SwiftUIStepper","labelsHidden","useReducedMotion","useRef","HStack","Spacer","Text","useHostGuard","jsx","_jsx","jsxs","_jsxs","LABEL_HIDDEN","label","max","min","onValueChange","step","value","reduced","previous","countsDown","current","align","spacing","wide","children","color","ios","animation","contentTransition","type","monospacedDigit","String","modifiers"],"sourceRoot":"../../../../src","sources":["molecules/stepper/stepper.ios.tsx"],"mappings":";;AAAA,SAAQA,OAAO,IAAIC,cAAc,QAAO,mBAAmB;AAC3D,SAAQC,YAAY,QAAO,6BAA6B;AACxD,SAAQC,gBAAgB,QAAO,mBAAmB;AAClD,SAAQC,MAAM,QAAO,OAAO;AAE5B,SAAQC,MAAM,QAAO,8BAAqB;AAC1C,SAAQC,MAAM,QAAO,6BAAoB;AACzC,SAAQC,IAAI,QAAO,2BAAkB;AACrC,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C;AACA,MAAMC,YAAY,GAAG,CAACX,YAAY,CAAC,CAAC,CAAC;;AAErC;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMF,OAAyB,GAAGA,CAAC;EAACc,KAAK;EAAEC,GAAG;EAAEC,GAAG;EAAEC,aAAa;EAAEC,IAAI,GAAG,CAAC;EAAEC;AAAmB,CAAC,KAAK;EAC5GX,YAAY,CAAC,SAAS,CAAC;EACvB,MAAMY,OAAO,GAAGjB,gBAAgB,CAAC,CAAC;EAClC,MAAMkB,QAAQ,GAAGjB,MAAM,CAACe,KAAK,CAAC;EAC9B,MAAMG,UAAU,GAAGH,KAAK,GAAGE,QAAQ,CAACE,OAAO;EAC3CF,QAAQ,CAACE,OAAO,GAAGJ,KAAK;EAExB,oBACEP,KAAA,CAACP,MAAM;IAACmB,KAAK,EAAC,QAAQ;IAACC,OAAO,EAAC,KAAK;IAACC,IAAI;IAAAC,QAAA,gBACvCjB,IAAA,CAACH,IAAI;MAAAoB,QAAA,EAAEb;IAAK,CAAO,CAAC,eACpBJ,IAAA,CAACJ,MAAM,IAAE,CAAC,eACVI,IAAA,CAACH,IAAI;MACHqB,KAAK,EAAC,mBAAmB;MACzBC,GAAG,EAAE;QACHC,SAAS,EAAE;UAACX;QAAK,CAAC;QAClBY,iBAAiB,EAAEX,OAAO,GAAG;UAACY,IAAI,EAAE;QAAS,CAAC,GAAG;UAACV,UAAU;UAAEU,IAAI,EAAE;QAAa,CAAC;QAClFC,eAAe,EAAE;MACnB,CAAE;MAAAN,QAAA,EAEDO,MAAM,CAACf,KAAK;IAAC,CACV,CAAC,eACPT,IAAA,CAACT,cAAc;MACba,KAAK,EAAEA,KAAM;MACbC,GAAG,EAAEA,GAAI;MACTC,GAAG,EAAEA,GAAI;MACTmB,SAAS,EAAEtB,YAAa;MACxBI,aAAa,EAAEA,aAAc;MAC7BC,IAAI,EAAEA,IAAK;MACXC,KAAK,EAAEA;IAAM,CACd,CAAC;EAAA,CACI,CAAC;AAEb,CAAC","ignoreList":[]}
+{"version":3,"names":["Stepper","SwiftUIStepper","labelsHidden","useReducedMotion","useRef","HStack","Spacer","Text","useHostGuard","jsx","_jsx","jsxs","_jsxs","LABEL_HIDDEN","label","max","min","onValueChange","step","value","reduced","previous","countsDown","current","align","spacing","wide","children","color","ios","animation","contentTransition","type","monospacedDigit","String","modifiers"],"sourceRoot":"../../../../src","sources":["molecules/stepper/stepper.ios.tsx"],"mappings":";;AAAA,SAAQA,OAAO,IAAIC,cAAc,QAAO,mBAAmB;AAC3D,SAAQC,YAAY,QAAO,6BAA6B;AACxD,SAAQC,gBAAgB,QAAO,mBAAmB;AAClD,SAAQC,MAAM,QAAO,OAAO;AAE5B,SAAQC,MAAM,QAAO,8BAAqB;AAC1C,SAAQC,MAAM,QAAO,6BAAoB;AACzC,SAAQC,IAAI,QAAO,2BAAkB;AACrC,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C;AACA,MAAMC,YAAY,GAAG,CAACX,YAAY,CAAC,CAAC,CAAC;;AAErC;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMF,OAAyB,GAAGA,CAAC;EAACc,KAAK;EAAEC,GAAG;EAAEC,GAAG;EAAEC,aAAa;EAAEC,IAAI,GAAG,CAAC;EAAEC;AAAmB,CAAC,KAAK;EAC5GX,YAAY,CAAC,SAAS,CAAC;EACvB,MAAMY,OAAO,GAAGjB,gBAAgB,CAAC,CAAC;EAClC,MAAMkB,QAAQ,GAAGjB,MAAM,CAACe,KAAK,CAAC;EAC9B,MAAMG,UAAU,GAAGH,KAAK,GAAGE,QAAQ,CAACE,OAAO;EAC3CF,QAAQ,CAACE,OAAO,GAAGJ,KAAK;EAExB,oBACEP,KAAA,CAACP,MAAM;IAACmB,KAAK,EAAC,QAAQ;IAACC,OAAO,EAAC,KAAK;IAACC,IAAI;IAAAC,QAAA,gBACvCjB,IAAA,CAACH,IAAI;MAAAoB,QAAA,EAAEb;IAAK,CAAO,CAAC,eACpBJ,IAAA,CAACJ,MAAM,IAAE,CAAC,eACVI,IAAA,CAACH,IAAI;MACHqB,KAAK,EAAC,mBAAmB;MACzBC,GAAG,EAAE;QACHC,SAAS,EAAE;UAACX;QAAK,CAAC;QAClBY,iBAAiB,EAAEX,OAAO,GAAG;UAACY,IAAI,EAAE;QAAS,CAAC,GAAG;UAACV,UAAU;UAAEU,IAAI,EAAE;QAAa;MACnF,CAAE;MACFC,eAAe;MAAAN,QAAA,EAEdO,MAAM,CAACf,KAAK;IAAC,CACV,CAAC,eACPT,IAAA,CAACT,cAAc;MACba,KAAK,EAAEA,KAAM;MACbC,GAAG,EAAEA,GAAI;MACTC,GAAG,EAAEA,GAAI;MACTmB,SAAS,EAAEtB,YAAa;MACxBI,aAAa,EAAEA,aAAc;MAC7BC,IAAI,EAAEA,IAAK;MACXC,KAAK,EAAEA;IAAM,CACd,CAAC;EAAA,CACI,CAAC;AAEb,CAAC","ignoreList":[]}

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

@@ -13,6 +13,18 @@ export type RnTextProps = Omit<RNTextProps, 'style'> & MotionProps & Omit<Respon
     align?: 'center' | 'left' | 'right';
     /** The text's colour. `content.primary` by default. */
     color?: ColorToken;
+    /**
+     * Sets it in the theme's fixed-width face, at the variant's size and weight: the app's `fonts.mono`, else Menlo on
+     * iOS and `monospace` on Android, the same face `Text` sets. For code, an order number, anything read character by
+     * character.
+     */
+    monospaced?: boolean;
+    /**
+     * Digits of one width, in whatever face the text is set in, so a number that changes does not shift what follows
+     * it and figures line up in a column. React Native's `fontVariant: ['tabular-nums']`; a face without tabular
+     * figures keeps its own.
+     */
+    monospacedDigit?: boolean;
     /** Goes last, over the variant and the `sx`: an animated style from `useAnimatedStyle`, which it renders through Reanimated for. */
     style?: StyleProp<AnimatedStyle<TextStyle>>;
     /** The typography variant. `body` by default. */

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

@@ -7,7 +7,8 @@ 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.
+ * `contentTransition` and `animation` for a number that changes in place (with `monospacedDigit`, so it does not move
+ * what follows it).
  *
  * 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
@@ -30,6 +31,17 @@ export type TextProps = ResponsiveSx & AccessibilityProps & {
     decoration?: TextDecoration;
     /** The most lines it wraps to. iOS truncates the last with an ellipsis; Android clips it. */
     numberOfLines?: number;
+    /**
+     * Sets it in the theme's fixed-width face, at the variant's size and weight: the app's `fonts.mono`, else Menlo on
+     * iOS and `monospace` on Android. For code, an order number, anything read character by character.
+     */
+    monospaced?: boolean;
+    /**
+     * Digits of one width, in whatever face the text is set in, so a number that changes does not shift what follows
+     * it and figures line up in a column. Asks the face for its tabular figures (`tnum`); a face without them keeps
+     * its own.
+     */
+    monospacedDigit?: boolean;
     /** Test identifier, forwarded to the native view. */
     testID?: string;
     /** Upper- or lower-cases the text. Android applies it only when `children` is a plain string. */

package/package.json

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

package/src/atoms/rn-text/rn-text.tsx

@@ -33,6 +33,15 @@ const MAX_TEXT_STYLES = 512
 
 const textStyles = new Map<string, TextStyle>()
 
+/** Digits of one width: React Native asks the face for its tabular figures. */
+const TABULAR_NUMS: TextStyle['fontVariant'] = ['tabular-nums']
+
+/** What the text half of the style is built from. */
+type TextLook = Pick<RnTextProps, 'align' | 'monospaced' | 'monospacedDigit'> & {
+  color: ColorToken
+  variant: TextVariant
+}
+
 /**
  * The variant at the user's text size, in its colour. React Native scales `fontSize` for the user's setting but leaves
  * `lineHeight` alone, so a grown glyph ends up in an ungrown line and clips. Scaling it here by the same factor keeps
@@ -44,12 +53,10 @@ const textStyles = new Map<string, TextStyle>()
  */
 const textStyle = (
   theme: Theme,
-  variant: TextVariant,
-  color: ColorToken,
-  align: RnTextProps['align'],
-  fontScale: number
+  fontScale: number,
+  {align, color, monospaced = false, monospacedDigit = false, variant}: TextLook
 ): TextStyle => {
-  const key = `${themeKey(theme)}|${variant}|${color}|${align}|${fontScale}`
+  const key = `${themeKey(theme)}|${variant}|${color}|${align}|${fontScale}|${monospaced}|${monospacedDigit}`
   const existing = textStyles.get(key)
 
   if (existing) {
@@ -60,7 +67,7 @@ const textStyle = (
     textStyles.clear()
   }
 
-  const typography = theme.typography[variant]
+  const typography = (monospaced ? theme.monoTypography : theme.typography)[variant]
   const style: TextStyle = {
     ...typography,
     color: theme.color(color),
@@ -71,19 +78,23 @@ const textStyle = (
     style.textAlign = align
   }
 
+  if (monospacedDigit) {
+    style.fontVariant = TABULAR_NUMS
+  }
+
   textStyles.set(key, style)
 
   return style
 }
 
 export const RnText: RnTextComponent = markMotionComponent(
-  ({align, color = 'content.primary', style, variant = 'body', ...props}: RnTextProps) => {
+  ({align, color = 'content.primary', monospaced, monospacedDigit, style, variant = 'body', ...props}: RnTextProps) => {
     const theme = useAppTheme()
     const fontScale = useFontScale()
     // A view style, which a text accepts whole — only React Native's types disagree, on `userSelect`'s width.
     const [sx, motion, rest] = useSplitSxMotion(props) as [TextStyle, SxMotion, Record<string, unknown>]
     const animated = useAnimatedLatch(motion.animated || isAnimatedStyle(style), 'RnText')
-    const text = textStyle(theme, variant, color, align, fontScale)
+    const text = textStyle(theme, fontScale, {align, color, monospaced, monospacedDigit, variant})
 
     if (!animated) {
       return (

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

@@ -16,6 +16,18 @@ export type RnTextProps = Omit<RNTextProps, 'style'> &
     align?: 'center' | 'left' | 'right'
     /** The text's colour. `content.primary` by default. */
     color?: ColorToken
+    /**
+     * Sets it in the theme's fixed-width face, at the variant's size and weight: the app's `fonts.mono`, else Menlo on
+     * iOS and `monospace` on Android, the same face `Text` sets. For code, an order number, anything read character by
+     * character.
+     */
+    monospaced?: boolean
+    /**
+     * Digits of one width, in whatever face the text is set in, so a number that changes does not shift what follows
+     * it and figures line up in a column. React Native's `fontVariant: ['tabular-nums']`; a face without tabular
+     * figures keeps its own.
+     */
+    monospacedDigit?: boolean
     /** Goes last, over the variant and the `sx`: an animated style from `useAnimatedStyle`, which it renders through Reanimated for. */
     style?: StyleProp<AnimatedStyle<TextStyle>>
     /** The typography variant. `body` by default. */

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

@@ -63,6 +63,8 @@ export const Text: TextComponent = ({
   children,
   color = 'content.primary',
   decoration,
+  monospaced,
+  monospacedDigit,
   numberOfLines,
   testID,
   transform,
@@ -71,7 +73,7 @@ export const Text: TextComponent = ({
 }: TextProps) => {
   useHostGuard('Text')
   const theme = useAppTheme()
-  const style = theme.typography[variant]
+  const style = (monospaced ? theme.monoTypography : theme.typography)[variant]
   const [accessibility, sx] = splitAccessibility(props)
   const sxModifiers = useSxModifiers(sx)
   const accessibilityModifiers = useAccessibilityModifiers(accessibility)
@@ -80,16 +82,18 @@ export const Text: TextComponent = ({
     [accessibilityModifiers, sxModifiers, testID]
   )
   const spans = useMemo(() => spansOf(children, Text), [children])
-  const animate = sx.animate
+  const animate = sx.animate === false ? undefined : 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) {
+  // `@expo/ui`'s text takes spans but animates none, and sets no font features: with `animate`, kara's own Compose text
+  // eases each span's colour, and with `monospacedDigit` asks the face for its tabular figures.
+  if (animate !== undefined || monospacedDigit) {
     const runs = spans ?? [{text: typeof children === 'string' || typeof children === 'number' ? String(children) : ''}]
 
     return (
       <AnimatedText
-        animation={textAnimation(animateConfig(animate))}
+        animation={animate === undefined ? undefined : textAnimation(animateConfig(animate))}
         fontFamily={style.fontFamily}
+        fontFeatureSettings={monospacedDigit ? 'tnum' : undefined}
         fontSize={style.fontSize}
         fontWeight={style.fontWeight}
         lineHeight={style.lineHeight}

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

@@ -4,6 +4,7 @@ import {
   lineLimit,
   lineSpacing,
   type ModifierConfig,
+  monospacedDigit as monospacedDigitModifier,
   multilineTextAlignment,
   strikethrough,
   textCase,
@@ -42,6 +43,8 @@ export const Text: TextComponent = ({
   children,
   color = 'content.primary',
   decoration,
+  monospaced,
+  monospacedDigit,
   numberOfLines,
   testID,
   transform,
@@ -50,7 +53,7 @@ export const Text: TextComponent = ({
 }: TextProps) => {
   useHostGuard('Text')
   const theme = useAppTheme()
-  const style = theme.typography[variant]
+  const style = (monospaced ? theme.monoTypography : theme.typography)[variant]
   // After the text's own modifiers: the font and colour belong to the glyphs, the padding and frame to the box around.
   const [accessibility, sx] = splitAccessibility(props)
   const sxModifiers = useSxModifiers(sx, FRAME_ALIGNMENT[align ?? 'left'])
@@ -72,6 +75,10 @@ export const Text: TextComponent = ({
       foregroundStyle(theme.color(color)),
     ]
 
+    if (monospacedDigit) {
+      list.push(monospacedDigitModifier())
+    }
+
     if (align) {
       list.push(multilineTextAlignment(ALIGNMENT[align]))
     }
@@ -98,6 +105,7 @@ export const Text: TextComponent = ({
     align,
     color,
     decoration,
+    monospacedDigit,
     numberOfLines,
     style,
     sxModifiers,

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

@@ -11,7 +11,8 @@ 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.
+ * `contentTransition` and `animation` for a number that changes in place (with `monospacedDigit`, so it does not move
+ * what follows it).
  *
  * 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
@@ -35,6 +36,17 @@ export type TextProps = ResponsiveSx &
     decoration?: TextDecoration
     /** The most lines it wraps to. iOS truncates the last with an ellipsis; Android clips it. */
     numberOfLines?: number
+    /**
+     * Sets it in the theme's fixed-width face, at the variant's size and weight: the app's `fonts.mono`, else Menlo on
+     * iOS and `monospace` on Android. For code, an order number, anything read character by character.
+     */
+    monospaced?: boolean
+    /**
+     * Digits of one width, in whatever face the text is set in, so a number that changes does not shift what follows
+     * it and figures line up in a column. Asks the face for its tabular figures (`tnum`); a face without them keeps
+     * its own.
+     */
+    monospacedDigit?: boolean
     /** Test identifier, forwarded to the native view. */
     testID?: string
     /** Upper- or lower-cases the text. Android applies it only when `children` is a plain string. */

package/src/molecules/stepper/stepper.ios.tsx

@@ -33,8 +33,8 @@ export const Stepper: StepperComponent = ({label, max, min, onValueChange, step
         ios={{
           animation: {value},
           contentTransition: reduced ? {type: 'opacity'} : {countsDown, type: 'numericText'},
-          monospacedDigit: true,
         }}
+        monospacedDigit
       >
         {String(value)}
       </Text>