@hzblj/kara-components 0.23.1 → 0.25.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @hzblj/kara-components
 
+## 0.25.0
+
+### Minor Changes
+
+- [#80](https://github.com/hzblj/kara-ui/pull/80) [`e9d4c23`](https://github.com/hzblj/kara-ui/commit/e9d4c23328a2e72e0fb124621cc4f491b3f86335) Thanks [@hzblj](https://github.com/hzblj)! - `ScrollEdgeContainer` catches up with Footshop's: it sets the scroll view's top inset natively as soon as the top bar is laid out, so a list no longer starts under its bar for a few frames and then jumps (most visible on a tab rendered before it is first shown); `initialTopBarHeight` / `initialBottomBarHeight` give the first frame its insets; `contentScrollView` lets the iOS 26 tab bar minimise with this scroll view; `topEdgeEffectHidden` drops the top blur. A list remounted by `key` keeps its inset and edge effects, and a bottom bar no longer jumps while the keyboard animates. On iOS a `List` is its screen's content scroll view, so a large title in the header collapses as the list scrolls. Run a prebuild after upgrading.
+
+### Patch Changes
+
+- Updated dependencies [[`e9d4c23`](https://github.com/hzblj/kara-ui/commit/e9d4c23328a2e72e0fb124621cc4f491b3f86335)]:
+  - @hzblj/kara-native@0.25.0
+  - @hzblj/kara-sx@0.25.0
+  - @hzblj/kara-theme@0.25.0
+
+## 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/list/list.ios.js

@@ -2,6 +2,7 @@
 
 import { Group, List as SwiftUIList } from '@expo/ui/swift-ui';
 import { listRowSeparator, listStyle, refreshable } from '@expo/ui/swift-ui/modifiers';
+import { contentScrollView } from '@hzblj/kara-native/swift-ui';
 import { useMemo } from 'react';
 import { useHostGuard } from "../../hooks/host-context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -18,7 +19,7 @@ export const List = ({
   variant = 'insetGrouped'
 }) => {
   useHostGuard('List');
-  const modifiers = useMemo(() => [listStyle(variant), ...(onRefresh ? [refreshable(onRefresh)] : [])], [onRefresh, variant]);
+  const modifiers = useMemo(() => [listStyle(variant), contentScrollView(), ...(onRefresh ? [refreshable(onRefresh)] : [])], [onRefresh, variant]);
   return /*#__PURE__*/_jsx(SwiftUIList, {
     modifiers: modifiers,
     testID: testID,

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

@@ -1 +1 @@
-{"version":3,"names":["Group","List","SwiftUIList","listRowSeparator","listStyle","refreshable","useMemo","useHostGuard","jsx","_jsx","NO_SEPARATORS","children","onRefresh","separators","testID","variant","modifiers"],"sourceRoot":"../../../../src","sources":["atoms/list/list.ios.tsx"],"mappings":";;AAAA,SAAQA,KAAK,EAAEC,IAAI,IAAIC,WAAW,QAAO,mBAAmB;AAC5D,SAAQC,gBAAgB,EAAEC,SAAS,EAAuBC,WAAW,QAAO,6BAA6B;AACzG,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,6BAA0B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGrD;AACA;AACA;AACA;AACA,MAAMC,aAAa,GAAG,CAACP,gBAAgB,CAAC,QAAQ,CAAC,CAAC;AAElD,OAAO,MAAMF,IAAmB,GAAGA,CAAC;EAClCU,QAAQ;EACRC,SAAS;EACTC,UAAU,GAAG,IAAI;EACjBC,MAAM;EACNC,OAAO,GAAG;AACD,CAAC,KAAK;EACfR,YAAY,CAAC,MAAM,CAAC;EAEpB,MAAMS,SAAS,GAAGV,OAAO,CACvB,MAAM,CAACF,SAAS,CAACW,OAAO,CAAC,EAAE,IAAIH,SAAS,GAAG,CAACP,WAAW,CAACO,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAC1E,CAACA,SAAS,EAAEG,OAAO,CACrB,CAAC;EAED,oBACEN,IAAA,CAACP,WAAW;IAACc,SAAS,EAAEA,SAAU;IAACF,MAAM,EAAEA,MAAO;IAAAH,QAAA,EAC/CE,UAAU,GAAGF,QAAQ,gBAAGF,IAAA,CAACT,KAAK;MAACgB,SAAS,EAAEN,aAAc;MAAAC,QAAA,EAAEA;IAAQ,CAAQ;EAAC,CACjE,CAAC;AAElB,CAAC","ignoreList":[]}
+{"version":3,"names":["Group","List","SwiftUIList","listRowSeparator","listStyle","refreshable","contentScrollView","useMemo","useHostGuard","jsx","_jsx","NO_SEPARATORS","children","onRefresh","separators","testID","variant","modifiers"],"sourceRoot":"../../../../src","sources":["atoms/list/list.ios.tsx"],"mappings":";;AAAA,SAAQA,KAAK,EAAEC,IAAI,IAAIC,WAAW,QAAO,mBAAmB;AAC5D,SAAQC,gBAAgB,EAAEC,SAAS,EAAuBC,WAAW,QAAO,6BAA6B;AACzG,SAAQC,iBAAiB,QAAO,6BAA6B;AAC7D,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,6BAA0B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGrD;AACA;AACA;AACA;AACA,MAAMC,aAAa,GAAG,CAACR,gBAAgB,CAAC,QAAQ,CAAC,CAAC;AAElD,OAAO,MAAMF,IAAmB,GAAGA,CAAC;EAClCW,QAAQ;EACRC,SAAS;EACTC,UAAU,GAAG,IAAI;EACjBC,MAAM;EACNC,OAAO,GAAG;AACD,CAAC,KAAK;EACfR,YAAY,CAAC,MAAM,CAAC;EAEpB,MAAMS,SAAS,GAAGV,OAAO,CACvB,MAAM,CAACH,SAAS,CAACY,OAAO,CAAC,EAAEV,iBAAiB,CAAC,CAAC,EAAE,IAAIO,SAAS,GAAG,CAACR,WAAW,CAACQ,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAC/F,CAACA,SAAS,EAAEG,OAAO,CACrB,CAAC;EAED,oBACEN,IAAA,CAACR,WAAW;IAACe,SAAS,EAAEA,SAAU;IAACF,MAAM,EAAEA,MAAO;IAAAH,QAAA,EAC/CE,UAAU,GAAGF,QAAQ,gBAAGF,IAAA,CAACV,KAAK;MAACiB,SAAS,EAAEN,aAAc;MAAAC,QAAA,EAAEA;IAAQ,CAAQ;EAAC,CACjE,CAAC;AAElB,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/module/molecules/scroll-edge-container/scroll-edge-container.android.js

@@ -45,9 +45,13 @@ export const ScrollEdgeContainer = ({
   automaticInsets: _automaticInsets,
   bottomBar,
   children,
+  contentScrollView: _contentScrollView,
   effect: _effect,
+  initialBottomBarHeight: _initialBottomBarHeight,
+  initialTopBarHeight: _initialTopBarHeight,
   testID,
   topBar,
+  topEdgeEffectHidden: _topEdgeEffectHidden,
   ...sx
 }) => {
   const topFilled = useSharedValue(opacity.o0);

package/lib/module/molecules/scroll-edge-container/scroll-edge-container.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["timing","opacity","cloneElement","useCallback","useRef","useAnimatedStyle","useSharedValue","withTiming","Box","jsx","_jsx","jsxs","_jsxs","EDGE_SLOP","FILL","EdgeBar","children","filled","fill","value","bg","bottom","left","pointerEvents","position","right","style","top","ScrollEdgeContainer","automaticInsets","_automaticInsets","bottomBar","effect","_effect","testID","topBar","sx","topFilled","o0","bottomFilled","metrics","content","offset","viewport","state","flex","onContentSizeChange","onLayout","onScroll","scrollEventThrottle","props","update","current","o100","scrollable","width","height","event","nativeEvent","layout","contentOffset","y"],"sourceRoot":"../../../../src","sources":["molecules/scroll-edge-container/scroll-edge-container.android.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["timing","opacity","cloneElement","useCallback","useRef","useAnimatedStyle","useSharedValue","withTiming","Box","jsx","_jsx","jsxs","_jsxs","EDGE_SLOP","FILL","EdgeBar","children","filled","fill","value","bg","bottom","left","pointerEvents","position","right","style","top","ScrollEdgeContainer","automaticInsets","_automaticInsets","bottomBar","contentScrollView","_contentScrollView","effect","_effect","initialBottomBarHeight","_initialBottomBarHeight","initialTopBarHeight","_initialTopBarHeight","testID","topBar","topEdgeEffectHidden","_topEdgeEffectHidden","sx","topFilled","o0","bottomFilled","metrics","content","offset","viewport","state","flex","onContentSizeChange","onLayout","onScroll","scrollEventThrottle","props","update","current","o100","scrollable","width","height","event","nativeEvent","layout","contentOffset","y"],"sourceRoot":"../../../../src","sources":["molecules/scroll-edge-container/scroll-edge-container.android.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/molecules/scroll-edge-container/scroll-edge-container.ios.js

@@ -11,19 +11,27 @@ export const ScrollEdgeContainer = ({
   automaticInsets,
   bottomBar,
   children,
+  contentScrollView,
   effect,
+  initialBottomBarHeight,
+  initialTopBarHeight,
   testID,
   topBar,
+  topEdgeEffectHidden,
   ...sx
 }) => {
   const style = useSx(sx);
   return /*#__PURE__*/_jsx(NativeScrollEdgeContainer, {
     automaticInsets: automaticInsets,
     bottomBar: bottomBar,
+    contentScrollView: contentScrollView,
     effect: effect,
+    initialBottomBarHeight: initialBottomBarHeight,
+    initialTopBarHeight: initialTopBarHeight,
     style: style,
     testID: testID,
     topBar: topBar,
+    topEdgeEffectHidden: topEdgeEffectHidden,
     children: children
   });
 };

package/lib/module/molecules/scroll-edge-container/scroll-edge-container.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["ScrollEdgeContainer","NativeScrollEdgeContainer","useSx","jsx","_jsx","automaticInsets","bottomBar","children","effect","testID","topBar","sx","style"],"sourceRoot":"../../../../src","sources":["molecules/scroll-edge-container/scroll-edge-container.ios.tsx"],"mappings":";;AAAA,SAAQA,mBAAmB,IAAIC,yBAAyB,QAAO,6BAA6B;AAC5F,SAAQC,KAAK,QAAO,gBAAgB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGpC;AACA;AACA;AACA;AACA,OAAO,MAAMJ,mBAAiD,GAAGA,CAAC;EAChEK,eAAe;EACfC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACNC,MAAM;EACNC,MAAM;EACN,GAAGC;AACqB,CAAC,KAAK;EAC9B,MAAMC,KAAK,GAAGV,KAAK,CAACS,EAAE,CAAC;EAEvB,oBACEP,IAAA,CAACH,yBAAyB;IACxBI,eAAe,EAAEA,eAAgB;IACjCC,SAAS,EAAEA,SAAU;IACrBE,MAAM,EAAEA,MAAO;IACfI,KAAK,EAAEA,KAAM;IACbH,MAAM,EAAEA,MAAO;IACfC,MAAM,EAAEA,MAAO;IAAAH,QAAA,EAEdA;EAAQ,CACgB,CAAC;AAEhC,CAAC","ignoreList":[]}
+{"version":3,"names":["ScrollEdgeContainer","NativeScrollEdgeContainer","useSx","jsx","_jsx","automaticInsets","bottomBar","children","contentScrollView","effect","initialBottomBarHeight","initialTopBarHeight","testID","topBar","topEdgeEffectHidden","sx","style"],"sourceRoot":"../../../../src","sources":["molecules/scroll-edge-container/scroll-edge-container.ios.tsx"],"mappings":";;AAAA,SAAQA,mBAAmB,IAAIC,yBAAyB,QAAO,6BAA6B;AAC5F,SAAQC,KAAK,QAAO,gBAAgB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGpC;AACA;AACA;AACA;AACA,OAAO,MAAMJ,mBAAiD,GAAGA,CAAC;EAChEK,eAAe;EACfC,SAAS;EACTC,QAAQ;EACRC,iBAAiB;EACjBC,MAAM;EACNC,sBAAsB;EACtBC,mBAAmB;EACnBC,MAAM;EACNC,MAAM;EACNC,mBAAmB;EACnB,GAAGC;AACqB,CAAC,KAAK;EAC9B,MAAMC,KAAK,GAAGd,KAAK,CAACa,EAAE,CAAC;EAEvB,oBACEX,IAAA,CAACH,yBAAyB;IACxBI,eAAe,EAAEA,eAAgB;IACjCC,SAAS,EAAEA,SAAU;IACrBE,iBAAiB,EAAEA,iBAAkB;IACrCC,MAAM,EAAEA,MAAO;IACfC,sBAAsB,EAAEA,sBAAuB;IAC/CC,mBAAmB,EAAEA,mBAAoB;IACzCK,KAAK,EAAEA,KAAM;IACbJ,MAAM,EAAEA,MAAO;IACfC,MAAM,EAAEA,MAAO;IACfC,mBAAmB,EAAEA,mBAAoB;IAAAP,QAAA,EAExCA;EAAQ,CACgB,CAAC;AAEhC,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/list/list.types.d.ts

@@ -9,6 +9,8 @@ export type ListVariant = 'insetGrouped' | 'plain';
  *
  * Rows are separated for you (SwiftUI's own separators, a `Divider` between rows on Android), so a `Divider` among
  * the children is one too many: on iOS it becomes an empty row of its own.
+ *
+ * On iOS the list is its screen's content scroll view, so a native-stack large title collapses as it scrolls.
  */
 export type ListProps = {
     /** The rows: native views, one row each. */

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/lib/typescript/molecules/scroll-edge-container/scroll-edge-container.types.d.ts

@@ -21,11 +21,19 @@ export type ScrollEdgeContainerProps = ResponsiveViewSx & {
     bottomBar?: ReactNode;
     /** Exactly one React Native scroll view: `RnScrollView`, `RnFlatList`, `RnSectionList`. */
     children: ReactElement<ScrollEdgeScrollableProps>;
+    /** iOS 26: the tab bar minimises as this scroll view scrolls, not as the screen's first one does. */
+    contentScrollView?: boolean;
     /** iOS 26: how hard the edge cuts. `soft` by default. */
     effect?: ScrollEdgeEffect;
+    /** iOS: the bottom bar's height before it is measured, so the first frame already has the inset. */
+    initialBottomBarHeight?: number;
+    /** iOS: the top bar's height before it is measured, so the first frame's content starts below the bar. */
+    initialTopBarHeight?: number;
     /** Test identifier, forwarded to the container view. */
     testID?: string;
     /** Laid over the scroll view's top edge on iOS; stacked above it on Android, filled once content scrolls under it. */
     topBar?: ReactNode;
+    /** iOS 26: hides the top edge effect, e.g. while a cover image sits under the top bar. */
+    topEdgeEffectHidden?: boolean;
 };
 export type ScrollEdgeContainerComponent = (props: ScrollEdgeContainerProps) => ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzblj/kara-components",
-  "version": "0.23.1",
+  "version": "0.25.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.25.0",
+    "@hzblj/kara-sx": "^0.25.0",
+    "@hzblj/kara-theme": "^0.25.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/list/list.ios.tsx

@@ -1,5 +1,6 @@
 import {Group, List as SwiftUIList} from '@expo/ui/swift-ui'
 import {listRowSeparator, listStyle, type ModifierConfig, refreshable} from '@expo/ui/swift-ui/modifiers'
+import {contentScrollView} from '@hzblj/kara-native/swift-ui'
 import {useMemo} from 'react'
 
 import {useHostGuard} from '../../hooks/host-context'
@@ -21,7 +22,7 @@ export const List: ListComponent = ({
   useHostGuard('List')
 
   const modifiers = useMemo<ModifierConfig[]>(
-    () => [listStyle(variant), ...(onRefresh ? [refreshable(onRefresh)] : [])],
+    () => [listStyle(variant), contentScrollView(), ...(onRefresh ? [refreshable(onRefresh)] : [])],
     [onRefresh, variant]
   )
 

package/src/atoms/list/list.types.ts

@@ -11,6 +11,8 @@ export type ListVariant = 'insetGrouped' | 'plain'
  *
  * Rows are separated for you (SwiftUI's own separators, a `Divider` between rows on Android), so a `Divider` among
  * the children is one too many: on iOS it becomes an empty row of its own.
+ *
+ * On iOS the list is its screen's content scroll view, so a native-stack large title collapses as it scrolls.
  */
 export type ListProps = {
   /** The rows: native views, one row each. */

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}
     />
   )
 }

package/src/molecules/scroll-edge-container/scroll-edge-container.android.tsx

@@ -50,9 +50,13 @@ export const ScrollEdgeContainer: ScrollEdgeContainerComponent = ({
   automaticInsets: _automaticInsets,
   bottomBar,
   children,
+  contentScrollView: _contentScrollView,
   effect: _effect,
+  initialBottomBarHeight: _initialBottomBarHeight,
+  initialTopBarHeight: _initialTopBarHeight,
   testID,
   topBar,
+  topEdgeEffectHidden: _topEdgeEffectHidden,
   ...sx
 }: ScrollEdgeContainerProps) => {
   const topFilled = useSharedValue<number>(opacity.o0)

package/src/molecules/scroll-edge-container/scroll-edge-container.ios.tsx

@@ -10,9 +10,13 @@ export const ScrollEdgeContainer: ScrollEdgeContainerComponent = ({
   automaticInsets,
   bottomBar,
   children,
+  contentScrollView,
   effect,
+  initialBottomBarHeight,
+  initialTopBarHeight,
   testID,
   topBar,
+  topEdgeEffectHidden,
   ...sx
 }: ScrollEdgeContainerProps) => {
   const style = useSx(sx)
@@ -21,10 +25,14 @@ export const ScrollEdgeContainer: ScrollEdgeContainerComponent = ({
     <NativeScrollEdgeContainer
       automaticInsets={automaticInsets}
       bottomBar={bottomBar}
+      contentScrollView={contentScrollView}
       effect={effect}
+      initialBottomBarHeight={initialBottomBarHeight}
+      initialTopBarHeight={initialTopBarHeight}
       style={style}
       testID={testID}
       topBar={topBar}
+      topEdgeEffectHidden={topEdgeEffectHidden}
     >
       {children}
     </NativeScrollEdgeContainer>

package/src/molecules/scroll-edge-container/scroll-edge-container.types.ts

@@ -23,12 +23,20 @@ export type ScrollEdgeContainerProps = ResponsiveViewSx & {
   bottomBar?: ReactNode
   /** Exactly one React Native scroll view: `RnScrollView`, `RnFlatList`, `RnSectionList`. */
   children: ReactElement<ScrollEdgeScrollableProps>
+  /** iOS 26: the tab bar minimises as this scroll view scrolls, not as the screen's first one does. */
+  contentScrollView?: boolean
   /** iOS 26: how hard the edge cuts. `soft` by default. */
   effect?: ScrollEdgeEffect
+  /** iOS: the bottom bar's height before it is measured, so the first frame already has the inset. */
+  initialBottomBarHeight?: number
+  /** iOS: the top bar's height before it is measured, so the first frame's content starts below the bar. */
+  initialTopBarHeight?: number
   /** Test identifier, forwarded to the container view. */
   testID?: string
   /** Laid over the scroll view's top edge on iOS; stacked above it on Android, filled once content scrolls under it. */
   topBar?: ReactNode
+  /** iOS 26: hides the top edge effect, e.g. while a cover image sits under the top bar. */
+  topEdgeEffectHidden?: boolean
 }
 
 export type ScrollEdgeContainerComponent = (props: ScrollEdgeContainerProps) => ReactNode