@hzblj/kara-components 0.23.1 → 0.24.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @hzblj/kara-components
 
+## 0.24.0
+
+### Minor Changes
+
+- [#78](https://github.com/hzblj/kara-ui/pull/78) [`f13e538`](https://github.com/hzblj/kara-ui/commit/f13e538dec32f9a0ce21d86a64a0ad708dc9335e) Thanks [@hzblj](https://github.com/hzblj)! - `Icon` and `RnIcon` play SF Symbols effects (`effect`, once per `effectTrigger` or while `effectActive`), animate a new `name` with a `transition`, and draw `hierarchical`, `palette` and `multicolor` rendering modes (`secondaryColor`, `tertiaryColor`), a `variableValue` and a `gradient`, on both platforms. On iOS `Icon` now draws the custom SF Symbol `@hzblj/expo-native-icons` writes per icon, through the new `symbolStyle` modifier; on Android it hands the icon to expo-native-icons' view when one of these is set. Run a prebuild after upgrading.
+
+### Patch Changes
+
+- Updated dependencies [[`f13e538`](https://github.com/hzblj/kara-ui/commit/f13e538dec32f9a0ce21d86a64a0ad708dc9335e)]:
+  - @hzblj/kara-native@0.24.0
+  - @hzblj/kara-sx@0.24.0
+  - @hzblj/kara-theme@0.24.0
+
 ## 0.23.1
 
 ### Patch Changes

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

@@ -1,24 +1,49 @@
 "use strict";
 
-import { iconResourceName } from '@hzblj/expo-native-icons';
+import { iconResourceName, nativeIconEffectRecord, nativeIconTriggerKey } from '@hzblj/expo-native-icons';
 import { DrawableIcon } from '@hzblj/kara-native/jetpack-compose';
 import { spacing, useAppTheme } from '@hzblj/kara-theme';
+import { useMemo } from 'react';
 import { useHostGuard } from "../../hooks/host-context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-/** The app's icon as the vector drawable the config plugin generated from the SVG, drawn by Material's `Icon`. */
+/**
+ * The app's icon as the vector drawable the config plugin generated from the SVG, drawn by Material's `Icon`; with an
+ * effect, a transition, a rendering mode, a variable value or a gradient, by `@hzblj/expo-native-icons`' view, which
+ * plays them.
+ */
 export const Icon = ({
   accessibilityLabel,
   color = 'content.primary',
+  effect,
+  effectActive,
+  effectTrigger,
+  gradient,
   name,
-  size = 's24'
+  renderingMode,
+  secondaryColor,
+  size = 's24',
+  tertiaryColor,
+  transition,
+  variableValue
 }) => {
   useHostGuard('Icon');
   const theme = useAppTheme();
+  const effectKey = effect ? JSON.stringify(effect) : undefined;
+  const record = useMemo(() => effectKey ? nativeIconEffectRecord(JSON.parse(effectKey)) : undefined, [effectKey]);
   return /*#__PURE__*/_jsx(DrawableIcon, {
     accessibilityLabel: accessibilityLabel,
+    effect: record,
+    effectActive: effectActive,
+    effectTrigger: nativeIconTriggerKey(effectTrigger),
+    gradient: gradient,
     iconColor: theme.color(color),
     iconSize: spacing[size],
-    resourceName: iconResourceName(name)
+    renderingMode: renderingMode,
+    resourceName: iconResourceName(name),
+    secondaryColor: secondaryColor ? theme.color(secondaryColor) : undefined,
+    tertiaryColor: tertiaryColor ? theme.color(tertiaryColor) : undefined,
+    transition: transition,
+    variableValue: variableValue
   });
 };
 //# sourceMappingURL=icon.android.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["iconResourceName","DrawableIcon","spacing","useAppTheme","useHostGuard","jsx","_jsx","Icon","accessibilityLabel","color","name","size","theme","iconColor","iconSize","resourceName"],"sourceRoot":"../../../../src","sources":["atoms/icon/icon.android.tsx"],"mappings":";;AAAA,SAAQA,gBAAgB,QAAO,0BAA0B;AACzD,SAAQC,YAAY,QAAO,oCAAoC;AAC/D,SAAQC,OAAO,EAAEC,WAAW,QAAO,mBAAmB;AAEtD,SAAQC,YAAY,QAAO,6BAA0B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGrD;AACA,OAAO,MAAMC,IAAmB,GAAGA,CAAC;EAACC,kBAAkB;EAAEC,KAAK,GAAG,iBAAiB;EAAEC,IAAI;EAAEC,IAAI,GAAG;AAAgB,CAAC,KAAK;EACrHP,YAAY,CAAC,MAAM,CAAC;EACpB,MAAMQ,KAAK,GAAGT,WAAW,CAAC,CAAC;EAE3B,oBACEG,IAAA,CAACL,YAAY;IACXO,kBAAkB,EAAEA,kBAAmB;IACvCK,SAAS,EAAED,KAAK,CAACH,KAAK,CAACA,KAAK,CAAE;IAC9BK,QAAQ,EAAEZ,OAAO,CAACS,IAAI,CAAE;IACxBI,YAAY,EAAEf,gBAAgB,CAACU,IAAI;EAAE,CACtC,CAAC;AAEN,CAAC","ignoreList":[]}
+{"version":3,"names":["iconResourceName","nativeIconEffectRecord","nativeIconTriggerKey","DrawableIcon","spacing","useAppTheme","useMemo","useHostGuard","jsx","_jsx","Icon","accessibilityLabel","color","effect","effectActive","effectTrigger","gradient","name","renderingMode","secondaryColor","size","tertiaryColor","transition","variableValue","theme","effectKey","JSON","stringify","undefined","record","parse","iconColor","iconSize","resourceName"],"sourceRoot":"../../../../src","sources":["atoms/icon/icon.android.tsx"],"mappings":";;AAAA,SAAQA,gBAAgB,EAAEC,sBAAsB,EAAEC,oBAAoB,QAAO,0BAA0B;AACvG,SAAQC,YAAY,QAAO,oCAAoC;AAC/D,SAAQC,OAAO,EAAEC,WAAW,QAAO,mBAAmB;AACtD,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,6BAA0B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGrD;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,IAAmB,GAAGA,CAAC;EAClCC,kBAAkB;EAClBC,KAAK,GAAG,iBAAiB;EACzBC,MAAM;EACNC,YAAY;EACZC,aAAa;EACbC,QAAQ;EACRC,IAAI;EACJC,aAAa;EACbC,cAAc;EACdC,IAAI,GAAG,KAAK;EACZC,aAAa;EACbC,UAAU;EACVC;AACS,CAAC,KAAK;EACfhB,YAAY,CAAC,MAAM,CAAC;EACpB,MAAMiB,KAAK,GAAGnB,WAAW,CAAC,CAAC;EAC3B,MAAMoB,SAAS,GAAGZ,MAAM,GAAGa,IAAI,CAACC,SAAS,CAACd,MAAM,CAAC,GAAGe,SAAS;EAC7D,MAAMC,MAAM,GAAGvB,OAAO,CAAC,MAAOmB,SAAS,GAAGxB,sBAAsB,CAACyB,IAAI,CAACI,KAAK,CAACL,SAAS,CAAC,CAAC,GAAGG,SAAU,EAAE,CAACH,SAAS,CAAC,CAAC;EAElH,oBACEhB,IAAA,CAACN,YAAY;IACXQ,kBAAkB,EAAEA,kBAAmB;IACvCE,MAAM,EAAEgB,MAAO;IACff,YAAY,EAAEA,YAAa;IAC3BC,aAAa,EAAEb,oBAAoB,CAACa,aAAa,CAAE;IACnDC,QAAQ,EAAEA,QAAS;IACnBe,SAAS,EAAEP,KAAK,CAACZ,KAAK,CAACA,KAAK,CAAE;IAC9BoB,QAAQ,EAAE5B,OAAO,CAACgB,IAAI,CAAE;IACxBF,aAAa,EAAEA,aAAc;IAC7Be,YAAY,EAAEjC,gBAAgB,CAACiB,IAAI,CAAE;IACrCE,cAAc,EAAEA,cAAc,GAAGK,KAAK,CAACZ,KAAK,CAACO,cAAc,CAAC,GAAGS,SAAU;IACzEP,aAAa,EAAEA,aAAa,GAAGG,KAAK,CAACZ,KAAK,CAACS,aAAa,CAAC,GAAGO,SAAU;IACtEN,UAAU,EAAEA,UAAW;IACvBC,aAAa,EAAEA;EAAc,CAC9B,CAAC;AAEN,CAAC","ignoreList":[]}

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

@@ -1,35 +1,60 @@
 "use strict";
 
 import { Image } from '@expo/ui/swift-ui';
-import { accessibilityHidden, frame, accessibilityLabel as labelModifier, resizable } from '@expo/ui/swift-ui/modifiers';
-import { iconResourceName } from '@hzblj/expo-native-icons';
+import { accessibilityHidden, frame, imageScale, accessibilityLabel as labelModifier } from '@expo/ui/swift-ui/modifiers';
+import { iconSymbolName, nativeIconEffectRecord, nativeIconTriggerKey } from '@hzblj/expo-native-icons';
+import { symbolStyle } from '@hzblj/kara-native/swift-ui';
 import { spacing, useAppTheme } from '@hzblj/kara-theme';
 import { useMemo } from 'react';
 import { useHostGuard } from "../../hooks/host-context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * The app's icon from its asset catalog — the template image set the config plugin generated from the SVG, vector data
- * kept, so `resizable()` scales it crisply to the token size and the platform tints it.
+ * The app's icon as the custom SF Symbol the config plugin generated from the SVG. At the small symbol scale its box is
+ * its point size, so the token size is the font size and the box fills the frame, the same size the image was. The
+ * `symbolStyle` modifier colours it and plays its effects and transitions, the way `NativeIconView` does in UIKit.
  */
 export const Icon = ({
   accessibilityLabel,
   color = 'content.primary',
+  effect,
+  effectActive,
+  effectTrigger,
+  gradient,
   name,
+  renderingMode,
+  secondaryColor,
   size = 's24',
-  testID
+  tertiaryColor,
+  testID,
+  transition,
+  variableValue
 }) => {
   useHostGuard('Icon');
   const theme = useAppTheme();
   const side = spacing[size];
-  const modifiers = useMemo(() => [resizable(), frame({
+  const symbol = iconSymbolName(name);
+  const effectKey = effect ? JSON.stringify(effect) : undefined;
+  const modifiers = useMemo(() => [imageScale('small'), symbolStyle({
+    color: theme.color(color),
+    effect: effectKey ? nativeIconEffectRecord(JSON.parse(effectKey)) : undefined,
+    effectActive,
+    effectTrigger: nativeIconTriggerKey(effectTrigger),
+    gradient,
+    renderingMode,
+    secondaryColor: secondaryColor ? theme.color(secondaryColor) : undefined,
+    tertiaryColor: tertiaryColor ? theme.color(tertiaryColor) : undefined,
+    transition,
+    transitionValue: `${symbol}:${variableValue ?? ''}`
+  }), frame({
     height: side,
     width: side
-  }), accessibilityLabel ? labelModifier(accessibilityLabel) : accessibilityHidden(true)], [accessibilityLabel, side]);
+  }), accessibilityLabel ? labelModifier(accessibilityLabel) : accessibilityHidden(true)], [accessibilityLabel, color, effectActive, effectKey, effectTrigger, gradient, renderingMode, secondaryColor, side, symbol, tertiaryColor, theme, transition, variableValue]);
   return /*#__PURE__*/_jsx(Image, {
-    assetName: iconResourceName(name),
-    color: theme.color(color),
+    assetName: symbol,
     modifiers: modifiers,
-    testID: testID
+    size: side,
+    testID: testID,
+    variableValue: variableValue
   });
 };
 //# sourceMappingURL=icon.ios.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["Image","accessibilityHidden","frame","accessibilityLabel","labelModifier","resizable","iconResourceName","spacing","useAppTheme","useMemo","useHostGuard","jsx","_jsx","Icon","color","name","size","testID","theme","side","modifiers","height","width","assetName"],"sourceRoot":"../../../../src","sources":["atoms/icon/icon.ios.tsx"],"mappings":";;AAAA,SAAQA,KAAK,QAAO,mBAAmB;AACvC,SAAQC,mBAAmB,EAAEC,KAAK,EAAEC,kBAAkB,IAAIC,aAAa,EAAEC,SAAS,QAAO,6BAA6B;AACtH,SAAQC,gBAAgB,QAAO,0BAA0B;AACzD,SAAQC,OAAO,EAAEC,WAAW,QAAO,mBAAmB;AACtD,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,6BAA0B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGrD;AACA;AACA;AACA;AACA,OAAO,MAAMC,IAAmB,GAAGA,CAAC;EAClCV,kBAAkB;EAClBW,KAAK,GAAG,iBAAiB;EACzBC,IAAI;EACJC,IAAI,GAAG,KAAK;EACZC;AACS,CAAC,KAAK;EACfP,YAAY,CAAC,MAAM,CAAC;EACpB,MAAMQ,KAAK,GAAGV,WAAW,CAAC,CAAC;EAC3B,MAAMW,IAAI,GAAGZ,OAAO,CAACS,IAAI,CAAC;EAE1B,MAAMI,SAAS,GAAGX,OAAO,CACvB,MAAM,CACJJ,SAAS,CAAC,CAAC,EACXH,KAAK,CAAC;IAACmB,MAAM,EAAEF,IAAI;IAAEG,KAAK,EAAEH;EAAI,CAAC,CAAC,EAClChB,kBAAkB,GAAGC,aAAa,CAACD,kBAAkB,CAAC,GAAGF,mBAAmB,CAAC,IAAI,CAAC,CACnF,EACD,CAACE,kBAAkB,EAAEgB,IAAI,CAC3B,CAAC;EAED,oBAAOP,IAAA,CAACZ,KAAK;IAACuB,SAAS,EAAEjB,gBAAgB,CAACS,IAAI,CAAE;IAACD,KAAK,EAAEI,KAAK,CAACJ,KAAK,CAACA,KAAK,CAAE;IAACM,SAAS,EAAEA,SAAU;IAACH,MAAM,EAAEA;EAAO,CAAE,CAAC;AACtH,CAAC","ignoreList":[]}
+{"version":3,"names":["Image","accessibilityHidden","frame","imageScale","accessibilityLabel","labelModifier","iconSymbolName","nativeIconEffectRecord","nativeIconTriggerKey","symbolStyle","spacing","useAppTheme","useMemo","useHostGuard","jsx","_jsx","Icon","color","effect","effectActive","effectTrigger","gradient","name","renderingMode","secondaryColor","size","tertiaryColor","testID","transition","variableValue","theme","side","symbol","effectKey","JSON","stringify","undefined","modifiers","parse","transitionValue","height","width","assetName"],"sourceRoot":"../../../../src","sources":["atoms/icon/icon.ios.tsx"],"mappings":";;AAAA,SAAQA,KAAK,QAAO,mBAAmB;AACvC,SAAQC,mBAAmB,EAAEC,KAAK,EAAEC,UAAU,EAAEC,kBAAkB,IAAIC,aAAa,QAAO,6BAA6B;AACvH,SAAQC,cAAc,EAAEC,sBAAsB,EAAEC,oBAAoB,QAAO,0BAA0B;AACrG,SAAQC,WAAW,QAAO,6BAA6B;AACvD,SAAQC,OAAO,EAAEC,WAAW,QAAO,mBAAmB;AACtD,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,6BAA0B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGrD;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,IAAmB,GAAGA,CAAC;EAClCZ,kBAAkB;EAClBa,KAAK,GAAG,iBAAiB;EACzBC,MAAM;EACNC,YAAY;EACZC,aAAa;EACbC,QAAQ;EACRC,IAAI;EACJC,aAAa;EACbC,cAAc;EACdC,IAAI,GAAG,KAAK;EACZC,aAAa;EACbC,MAAM;EACNC,UAAU;EACVC;AACS,CAAC,KAAK;EACfhB,YAAY,CAAC,MAAM,CAAC;EACpB,MAAMiB,KAAK,GAAGnB,WAAW,CAAC,CAAC;EAC3B,MAAMoB,IAAI,GAAGrB,OAAO,CAACe,IAAI,CAAC;EAC1B,MAAMO,MAAM,GAAG1B,cAAc,CAACgB,IAAI,CAAC;EACnC,MAAMW,SAAS,GAAGf,MAAM,GAAGgB,IAAI,CAACC,SAAS,CAACjB,MAAM,CAAC,GAAGkB,SAAS;EAE7D,MAAMC,SAAS,GAAGzB,OAAO,CACvB,MAAM,CACJT,UAAU,CAAC,OAAO,CAAC,EACnBM,WAAW,CAAC;IACVQ,KAAK,EAAEa,KAAK,CAACb,KAAK,CAACA,KAAK,CAAC;IACzBC,MAAM,EAAEe,SAAS,GAAG1B,sBAAsB,CAAC2B,IAAI,CAACI,KAAK,CAACL,SAAS,CAAC,CAAC,GAAGG,SAAS;IAC7EjB,YAAY;IACZC,aAAa,EAAEZ,oBAAoB,CAACY,aAAa,CAAC;IAClDC,QAAQ;IACRE,aAAa;IACbC,cAAc,EAAEA,cAAc,GAAGM,KAAK,CAACb,KAAK,CAACO,cAAc,CAAC,GAAGY,SAAS;IACxEV,aAAa,EAAEA,aAAa,GAAGI,KAAK,CAACb,KAAK,CAACS,aAAa,CAAC,GAAGU,SAAS;IACrER,UAAU;IACVW,eAAe,EAAE,GAAGP,MAAM,IAAIH,aAAa,IAAI,EAAE;EACnD,CAAC,CAAC,EACF3B,KAAK,CAAC;IAACsC,MAAM,EAAET,IAAI;IAAEU,KAAK,EAAEV;EAAI,CAAC,CAAC,EAClC3B,kBAAkB,GAAGC,aAAa,CAACD,kBAAkB,CAAC,GAAGH,mBAAmB,CAAC,IAAI,CAAC,CACnF,EACD,CACEG,kBAAkB,EAClBa,KAAK,EACLE,YAAY,EACZc,SAAS,EACTb,aAAa,EACbC,QAAQ,EACRE,aAAa,EACbC,cAAc,EACdO,IAAI,EACJC,MAAM,EACNN,aAAa,EACbI,KAAK,EACLF,UAAU,EACVC,aAAa,CAEjB,CAAC;EAED,oBAAOd,IAAA,CAACf,KAAK;IAAC0C,SAAS,EAAEV,MAAO;IAACK,SAAS,EAAEA,SAAU;IAACZ,IAAI,EAAEM,IAAK;IAACJ,MAAM,EAAEA,MAAO;IAACE,aAAa,EAAEA;EAAc,CAAE,CAAC;AACrH,CAAC","ignoreList":[]}

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

@@ -4,23 +4,24 @@ import { NativeIcon } from '@hzblj/expo-native-icons';
 import { spacing, useAppTheme } from '@hzblj/kara-theme';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * `@hzblj/expo-native-icons`' `NativeIcon`: a `UIImageView` over the app's asset-catalog icon on iOS, one view drawing
- * its vector drawable on Android. What a list row wants, rather than a SwiftUI or Compose host per row.
+ * `@hzblj/expo-native-icons`' `NativeIcon`: a `UIImageView` over the app's custom SF Symbol on iOS, one view drawing
+ * its vector drawable on Android, with the effects, transitions and rendering modes on both. What a list row wants,
+ * rather than a SwiftUI or Compose host per row.
  */
 export const RnIcon = ({
-  accessibilityLabel,
   color = 'content.primary',
-  name,
+  secondaryColor,
   size = 's24',
-  testID
+  tertiaryColor,
+  ...props
 }) => {
   const theme = useAppTheme();
   return /*#__PURE__*/_jsx(NativeIcon, {
-    accessibilityLabel: accessibilityLabel,
+    ...props,
     color: theme.color(color),
-    name: name,
+    secondaryColor: secondaryColor ? theme.color(secondaryColor) : undefined,
     size: spacing[size],
-    testID: testID
+    tertiaryColor: tertiaryColor ? theme.color(tertiaryColor) : undefined
   });
 };
 //# sourceMappingURL=rn-icon.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["NativeIcon","spacing","useAppTheme","jsx","_jsx","RnIcon","accessibilityLabel","color","name","size","testID","theme"],"sourceRoot":"../../../../src","sources":["atoms/rn-icon/rn-icon.tsx"],"mappings":";;AAAA,SAAQA,UAAU,QAAO,0BAA0B;AACnD,SAAQC,OAAO,EAAEC,WAAW,QAAO,mBAAmB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAItD;AACA;AACA;AACA;AACA,OAAO,MAAMC,MAAuB,GAAGA,CAAC;EACtCC,kBAAkB;EAClBC,KAAK,GAAG,iBAAiB;EACzBC,IAAI;EACJC,IAAI,GAAG,KAAK;EACZC;AACW,CAAC,KAAK;EACjB,MAAMC,KAAK,GAAGT,WAAW,CAAC,CAAC;EAE3B,oBACEE,IAAA,CAACJ,UAAU;IACTM,kBAAkB,EAAEA,kBAAmB;IACvCC,KAAK,EAAEI,KAAK,CAACJ,KAAK,CAACA,KAAK,CAAE;IAC1BC,IAAI,EAAEA,IAAK;IACXC,IAAI,EAAER,OAAO,CAACQ,IAAI,CAAE;IACpBC,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN,CAAC","ignoreList":[]}
+{"version":3,"names":["NativeIcon","spacing","useAppTheme","jsx","_jsx","RnIcon","color","secondaryColor","size","tertiaryColor","props","theme","undefined"],"sourceRoot":"../../../../src","sources":["atoms/rn-icon/rn-icon.tsx"],"mappings":";;AAAA,SAAQA,UAAU,QAAO,0BAA0B;AACnD,SAAQC,OAAO,EAAEC,WAAW,QAAO,mBAAmB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAItD;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,MAAuB,GAAGA,CAAC;EACtCC,KAAK,GAAG,iBAAiB;EACzBC,cAAc;EACdC,IAAI,GAAG,KAAK;EACZC,aAAa;EACb,GAAGC;AACQ,CAAC,KAAK;EACjB,MAAMC,KAAK,GAAGT,WAAW,CAAC,CAAC;EAE3B,oBACEE,IAAA,CAACJ,UAAU;IAAA,GACLU,KAAK;IACTJ,KAAK,EAAEK,KAAK,CAACL,KAAK,CAACA,KAAK,CAAE;IAC1BC,cAAc,EAAEA,cAAc,GAAGI,KAAK,CAACL,KAAK,CAACC,cAAc,CAAC,GAAGK,SAAU;IACzEJ,IAAI,EAAEP,OAAO,CAACO,IAAI,CAAE;IACpBC,aAAa,EAAEA,aAAa,GAAGE,KAAK,CAACL,KAAK,CAACG,aAAa,CAAC,GAAGG;EAAU,CACvE,CAAC;AAEN,CAAC","ignoreList":[]}

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

@@ -1,6 +1,7 @@
 import type { IconComponent } from './icon.types';
 /**
- * The app's icon from its asset catalog — the template image set the config plugin generated from the SVG, vector data
- * kept, so `resizable()` scales it crisply to the token size and the platform tints it.
+ * The app's icon as the custom SF Symbol the config plugin generated from the SVG. At the small symbol scale its box is
+ * its point size, so the token size is the font size and the box fills the frame, the same size the image was. The
+ * `symbolStyle` modifier colours it and plays its effects and transitions, the way `NativeIconView` does in UIKit.
  */
 export declare const Icon: IconComponent;

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

@@ -1,4 +1,4 @@
-import type { NativeIconName } from '@hzblj/expo-native-icons';
+import type { NativeIconEffect, NativeIconEffectTrigger, NativeIconName, NativeIconRenderingMode, NativeIconTransition } from '@hzblj/expo-native-icons';
 import type { ColorToken, SpaceSize } from '@hzblj/kara-theme';
 import type { ReactNode } from 'react';
 /**
@@ -7,20 +7,54 @@ import type { ReactNode } from 'react';
  * those names type-check, so an icon removed from the folder fails at every call site; before that, any string.
  */
 export type IconName = NativeIconName;
+/** An SF Symbols effect for `Icon` and `RnIcon`: `{type: 'bounce'}`, `{type: 'variableColor', fill: 'iterative'}`… */
+export type IconEffect = NativeIconEffect;
+/** How an icon's layers are coloured. */
+export type IconRenderingMode = NativeIconRenderingMode;
+/** How an icon changes into another when its `name` changes. */
+export type IconTransition = NativeIconTransition;
 /**
- * One of the app's icons, in a host: SwiftUI `Image` from the asset catalog on iOS, Material's `Icon` with the vector
- * drawable on Android. `RnIcon` draws the same asset outside one.
+ * One of the app's icons, in a host: SwiftUI `Image` of its custom SF Symbol on iOS, Material's `Icon` with the vector
+ * drawable on Android. `RnIcon` draws the same asset outside one. Both play the SF Symbols effects and transitions and
+ * draw the rendering modes and variable values, on both platforms.
  */
 export type IconProps = {
     /** What a screen reader says. Unset, the icon is decorative and hidden from it. */
     accessibilityLabel?: string;
-    /** The icon's tint. `content.primary` by default. */
+    /** The icon's tint, and the primary colour of the other rendering modes. `content.primary` by default. */
     color?: ColorToken;
+    /**
+     * An SF Symbols effect: `bounce`, `pulse`, `variableColor`, `wiggle`, `rotate`, `breathe`, and the states `scale`,
+     * `appear` and `disappear`. Plays once per change of `effectTrigger`, or while `effectActive`.
+     */
+    effect?: IconEffect;
+    /** Runs `effect` while true; without an `effectTrigger`, true by default. */
+    effectActive?: boolean;
+    /** Plays `effect` once whenever this value changes, never on mount. */
+    effectTrigger?: NativeIconEffectTrigger;
+    /** Shades each layer's colour into a soft gradient, as SF Symbols does on iOS 26. iOS 26 and Android. */
+    gradient?: boolean;
     /** Which of the app's icons: a key of `NativeIcons`, one per SVG in the icon folder. */
     name: IconName;
+    /**
+     * How the layers are coloured: `monochrome` (the default) tints them all, `hierarchical` draws secondary and tertiary
+     * layers fainter, `palette` gives them `secondaryColor` and `tertiaryColor`, `multicolor` keeps the SVG's own fills.
+     */
+    renderingMode?: IconRenderingMode;
+    /** The `palette` mode's colour for secondary layers. `color` by default. */
+    secondaryColor?: ColorToken;
     /** Its width and height, a spacing token. `s24` by default. */
     size?: SpaceSize;
+    /** The `palette` mode's colour for tertiary layers. `secondaryColor` by default. */
+    tertiaryColor?: ColorToken;
     /** Test identifier, forwarded to the native view on iOS. Android ignores it. */
     testID?: string;
+    /**
+     * Animates a change of `name`: `replace`, `replaceUpUp`, `replaceOffUp`, `magicReplace` or `automatic`. With one set,
+     * a new `variableValue` eases in too. Unset, the icon swaps at once.
+     */
+    transition?: IconTransition;
+    /** From 0 to 1: switches on the SVG's `data-variable` layers whose threshold it passes, the rest dimmed. */
+    variableValue?: number;
 };
 export type IconComponent = (props: IconProps) => ReactNode;

package/lib/typescript/atoms/rn-icon/rn-icon.d.ts

@@ -1,6 +1,7 @@
 import type { RnIconComponent } from './rn-icon.types';
 /**
- * `@hzblj/expo-native-icons`' `NativeIcon`: a `UIImageView` over the app's asset-catalog icon on iOS, one view drawing
- * its vector drawable on Android. What a list row wants, rather than a SwiftUI or Compose host per row.
+ * `@hzblj/expo-native-icons`' `NativeIcon`: a `UIImageView` over the app's custom SF Symbol on iOS, one view drawing
+ * its vector drawable on Android, with the effects, transitions and rendering modes on both. What a list row wants,
+ * rather than a SwiftUI or Compose host per row.
  */
 export declare const RnIcon: RnIconComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzblj/kara-components",
-  "version": "0.23.1",
+  "version": "0.24.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",
@@ -64,11 +64,11 @@
     ]
   },
   "dependencies": {
-    "@hzblj/expo-native-icons": "^0.1.0",
+    "@hzblj/expo-native-icons": "^0.2.0",
     "@hzblj/expo-rich-haptics": "^0.1.0",
-    "@hzblj/kara-native": "^0.23.1",
-    "@hzblj/kara-sx": "^0.23.1",
-    "@hzblj/kara-theme": "^0.23.1",
+    "@hzblj/kara-native": "^0.24.0",
+    "@hzblj/kara-sx": "^0.24.0",
+    "@hzblj/kara-theme": "^0.24.0",
     "sf-symbols-typescript": "^2.2.0"
   },
   "peerDependencies": {

package/src/atoms/icon/icon.android.tsx

@@ -1,21 +1,51 @@
-import {iconResourceName} from '@hzblj/expo-native-icons'
+import {iconResourceName, nativeIconEffectRecord, nativeIconTriggerKey} from '@hzblj/expo-native-icons'
 import {DrawableIcon} from '@hzblj/kara-native/jetpack-compose'
 import {spacing, useAppTheme} from '@hzblj/kara-theme'
+import {useMemo} from 'react'
 
 import {useHostGuard} from '../../hooks/host-context'
 import type {IconComponent, IconProps} from './icon.types'
 
-/** The app's icon as the vector drawable the config plugin generated from the SVG, drawn by Material's `Icon`. */
-export const Icon: IconComponent = ({accessibilityLabel, color = 'content.primary', name, size = 's24'}: IconProps) => {
+/**
+ * The app's icon as the vector drawable the config plugin generated from the SVG, drawn by Material's `Icon`; with an
+ * effect, a transition, a rendering mode, a variable value or a gradient, by `@hzblj/expo-native-icons`' view, which
+ * plays them.
+ */
+export const Icon: IconComponent = ({
+  accessibilityLabel,
+  color = 'content.primary',
+  effect,
+  effectActive,
+  effectTrigger,
+  gradient,
+  name,
+  renderingMode,
+  secondaryColor,
+  size = 's24',
+  tertiaryColor,
+  transition,
+  variableValue,
+}: IconProps) => {
   useHostGuard('Icon')
   const theme = useAppTheme()
+  const effectKey = effect ? JSON.stringify(effect) : undefined
+  const record = useMemo(() => (effectKey ? nativeIconEffectRecord(JSON.parse(effectKey)) : undefined), [effectKey])
 
   return (
     <DrawableIcon
       accessibilityLabel={accessibilityLabel}
+      effect={record}
+      effectActive={effectActive}
+      effectTrigger={nativeIconTriggerKey(effectTrigger)}
+      gradient={gradient}
       iconColor={theme.color(color)}
       iconSize={spacing[size]}
+      renderingMode={renderingMode}
       resourceName={iconResourceName(name)}
+      secondaryColor={secondaryColor ? theme.color(secondaryColor) : undefined}
+      tertiaryColor={tertiaryColor ? theme.color(tertiaryColor) : undefined}
+      transition={transition}
+      variableValue={variableValue}
     />
   )
 }

package/src/atoms/icon/icon.ios.tsx

@@ -1,6 +1,7 @@
 import {Image} from '@expo/ui/swift-ui'
-import {accessibilityHidden, frame, accessibilityLabel as labelModifier, resizable} from '@expo/ui/swift-ui/modifiers'
-import {iconResourceName} from '@hzblj/expo-native-icons'
+import {accessibilityHidden, frame, imageScale, accessibilityLabel as labelModifier} from '@expo/ui/swift-ui/modifiers'
+import {iconSymbolName, nativeIconEffectRecord, nativeIconTriggerKey} from '@hzblj/expo-native-icons'
+import {symbolStyle} from '@hzblj/kara-native/swift-ui'
 import {spacing, useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 
@@ -8,28 +9,67 @@ import {useHostGuard} from '../../hooks/host-context'
 import type {IconComponent, IconProps} from './icon.types'
 
 /**
- * The app's icon from its asset catalog — the template image set the config plugin generated from the SVG, vector data
- * kept, so `resizable()` scales it crisply to the token size and the platform tints it.
+ * The app's icon as the custom SF Symbol the config plugin generated from the SVG. At the small symbol scale its box is
+ * its point size, so the token size is the font size and the box fills the frame, the same size the image was. The
+ * `symbolStyle` modifier colours it and plays its effects and transitions, the way `NativeIconView` does in UIKit.
  */
 export const Icon: IconComponent = ({
   accessibilityLabel,
   color = 'content.primary',
+  effect,
+  effectActive,
+  effectTrigger,
+  gradient,
   name,
+  renderingMode,
+  secondaryColor,
   size = 's24',
+  tertiaryColor,
   testID,
+  transition,
+  variableValue,
 }: IconProps) => {
   useHostGuard('Icon')
   const theme = useAppTheme()
   const side = spacing[size]
+  const symbol = iconSymbolName(name)
+  const effectKey = effect ? JSON.stringify(effect) : undefined
 
   const modifiers = useMemo(
     () => [
-      resizable(),
+      imageScale('small'),
+      symbolStyle({
+        color: theme.color(color),
+        effect: effectKey ? nativeIconEffectRecord(JSON.parse(effectKey)) : undefined,
+        effectActive,
+        effectTrigger: nativeIconTriggerKey(effectTrigger),
+        gradient,
+        renderingMode,
+        secondaryColor: secondaryColor ? theme.color(secondaryColor) : undefined,
+        tertiaryColor: tertiaryColor ? theme.color(tertiaryColor) : undefined,
+        transition,
+        transitionValue: `${symbol}:${variableValue ?? ''}`,
+      }),
       frame({height: side, width: side}),
       accessibilityLabel ? labelModifier(accessibilityLabel) : accessibilityHidden(true),
     ],
-    [accessibilityLabel, side]
+    [
+      accessibilityLabel,
+      color,
+      effectActive,
+      effectKey,
+      effectTrigger,
+      gradient,
+      renderingMode,
+      secondaryColor,
+      side,
+      symbol,
+      tertiaryColor,
+      theme,
+      transition,
+      variableValue,
+    ]
   )
 
-  return <Image assetName={iconResourceName(name)} color={theme.color(color)} modifiers={modifiers} testID={testID} />
+  return <Image assetName={symbol} modifiers={modifiers} size={side} testID={testID} variableValue={variableValue} />
 }

package/src/atoms/icon/icon.types.ts

@@ -1,4 +1,10 @@
-import type {NativeIconName} from '@hzblj/expo-native-icons'
+import type {
+  NativeIconEffect,
+  NativeIconEffectTrigger,
+  NativeIconName,
+  NativeIconRenderingMode,
+  NativeIconTransition,
+} from '@hzblj/expo-native-icons'
 import type {ColorToken, SpaceSize} from '@hzblj/kara-theme'
 import type {ReactNode} from 'react'
 
@@ -9,21 +15,58 @@ import type {ReactNode} from 'react'
  */
 export type IconName = NativeIconName
 
+/** An SF Symbols effect for `Icon` and `RnIcon`: `{type: 'bounce'}`, `{type: 'variableColor', fill: 'iterative'}`… */
+export type IconEffect = NativeIconEffect
+
+/** How an icon's layers are coloured. */
+export type IconRenderingMode = NativeIconRenderingMode
+
+/** How an icon changes into another when its `name` changes. */
+export type IconTransition = NativeIconTransition
+
 /**
- * One of the app's icons, in a host: SwiftUI `Image` from the asset catalog on iOS, Material's `Icon` with the vector
- * drawable on Android. `RnIcon` draws the same asset outside one.
+ * One of the app's icons, in a host: SwiftUI `Image` of its custom SF Symbol on iOS, Material's `Icon` with the vector
+ * drawable on Android. `RnIcon` draws the same asset outside one. Both play the SF Symbols effects and transitions and
+ * draw the rendering modes and variable values, on both platforms.
  */
 export type IconProps = {
   /** What a screen reader says. Unset, the icon is decorative and hidden from it. */
   accessibilityLabel?: string
-  /** The icon's tint. `content.primary` by default. */
+  /** The icon's tint, and the primary colour of the other rendering modes. `content.primary` by default. */
   color?: ColorToken
+  /**
+   * An SF Symbols effect: `bounce`, `pulse`, `variableColor`, `wiggle`, `rotate`, `breathe`, and the states `scale`,
+   * `appear` and `disappear`. Plays once per change of `effectTrigger`, or while `effectActive`.
+   */
+  effect?: IconEffect
+  /** Runs `effect` while true; without an `effectTrigger`, true by default. */
+  effectActive?: boolean
+  /** Plays `effect` once whenever this value changes, never on mount. */
+  effectTrigger?: NativeIconEffectTrigger
+  /** Shades each layer's colour into a soft gradient, as SF Symbols does on iOS 26. iOS 26 and Android. */
+  gradient?: boolean
   /** Which of the app's icons: a key of `NativeIcons`, one per SVG in the icon folder. */
   name: IconName
+  /**
+   * How the layers are coloured: `monochrome` (the default) tints them all, `hierarchical` draws secondary and tertiary
+   * layers fainter, `palette` gives them `secondaryColor` and `tertiaryColor`, `multicolor` keeps the SVG's own fills.
+   */
+  renderingMode?: IconRenderingMode
+  /** The `palette` mode's colour for secondary layers. `color` by default. */
+  secondaryColor?: ColorToken
   /** Its width and height, a spacing token. `s24` by default. */
   size?: SpaceSize
+  /** The `palette` mode's colour for tertiary layers. `secondaryColor` by default. */
+  tertiaryColor?: ColorToken
   /** Test identifier, forwarded to the native view on iOS. Android ignores it. */
   testID?: string
+  /**
+   * Animates a change of `name`: `replace`, `replaceUpUp`, `replaceOffUp`, `magicReplace` or `automatic`. With one set,
+   * a new `variableValue` eases in too. Unset, the icon swaps at once.
+   */
+  transition?: IconTransition
+  /** From 0 to 1: switches on the SVG's `data-variable` layers whose threshold it passes, the rest dimmed. */
+  variableValue?: number
 }
 
 export type IconComponent = (props: IconProps) => ReactNode

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

@@ -4,25 +4,26 @@ import {spacing, useAppTheme} from '@hzblj/kara-theme'
 import type {RnIconComponent, RnIconProps} from './rn-icon.types'
 
 /**
- * `@hzblj/expo-native-icons`' `NativeIcon`: a `UIImageView` over the app's asset-catalog icon on iOS, one view drawing
- * its vector drawable on Android. What a list row wants, rather than a SwiftUI or Compose host per row.
+ * `@hzblj/expo-native-icons`' `NativeIcon`: a `UIImageView` over the app's custom SF Symbol on iOS, one view drawing
+ * its vector drawable on Android, with the effects, transitions and rendering modes on both. What a list row wants,
+ * rather than a SwiftUI or Compose host per row.
  */
 export const RnIcon: RnIconComponent = ({
-  accessibilityLabel,
   color = 'content.primary',
-  name,
+  secondaryColor,
   size = 's24',
-  testID,
+  tertiaryColor,
+  ...props
 }: RnIconProps) => {
   const theme = useAppTheme()
 
   return (
     <NativeIcon
-      accessibilityLabel={accessibilityLabel}
+      {...props}
       color={theme.color(color)}
-      name={name}
+      secondaryColor={secondaryColor ? theme.color(secondaryColor) : undefined}
       size={spacing[size]}
-      testID={testID}
+      tertiaryColor={tertiaryColor ? theme.color(tertiaryColor) : undefined}
     />
   )
 }